{"_id":"@material/snackbar","_rev":"1789-b33d90269e3cd3fe6e0f20f97be137d6","name":"@material/snackbar","description":"The Material Components for the web snackbar component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/snackbar","version":"0.1.0","license":"Apache-2.0","_id":"@material/snackbar@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a261fe0c764d6b8bc22e3c6f6969505b8392b4a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.0.tgz","integrity":"sha512-ge3wFyjjkmCUWZGXxUw1xtsjHiBWvy0isodGoByK6HegTB7V4E4CK5ND4gt4EzyAKuurmrMlWux31hV2fQ5P6w==","signatures":[{"sig":"MEUCIQCSe+44qVvNxWwIm0X0J2+wGQ6vvcI5iZ4T9mrySiAdkwIgeRWc+5tUjnkDbj/X+YHk8NFVgIUaDXg5d6BWjzrb0K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"9a261fe0c764d6b8bc22e3c6f6969505b8392b4a","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/rtl":"^0.1.0","@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/button":"^0.1.0","@material/animation":"^0.1.0","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.0.tgz_1481824553120_0.03226862451992929","host":"packages-18-east.internal.npmjs.com"}},"0.1.1":{"name":"@material/snackbar","version":"0.1.1","license":"Apache-2.0","_id":"@material/snackbar@0.1.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90d62887238e45675940993e68896e450328e71f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.1.tgz","integrity":"sha512-v/eos4mes2VR+1g8qJAFnV9rQyX8GRAuYXL1LXwc6DsBB+p4l2MOyyvgsB8ihPGa54gLDq3A7AyWfFFm7cfcEQ==","signatures":[{"sig":"MEYCIQCopJhO33zYavFq3XB0DU/Amc0Zk3YPy94rwLLWXRtPNgIhAJ3bSD2Y5nE8sq7DJcBux5cgwxTjdosfbZad1Ca357OA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"90d62887238e45675940993e68896e450328e71f","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.0","@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/button":"^0.1.1","@material/animation":"^0.1.1","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.1.tgz_1483977440701_0.06830916367471218","host":"packages-12-west.internal.npmjs.com"}},"0.1.2":{"name":"@material/snackbar","version":"0.1.2","license":"Apache-2.0","_id":"@material/snackbar@0.1.2","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c4359d788a950a2267caa127dcbf0b6d8dd45b0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.2.tgz","integrity":"sha512-qqQTP6aniIO+tl2b1cVWJbxJG8kJpu63J5DDLaCLvn5XutlYF9KHJmQJTcGWFElxiYbN0h/gWtPkA4fwGr3Jaw==","signatures":[{"sig":"MEUCIBcha81+1vHkVnJKJklq5/kfrTgI+ZR0JRmLKCg3C9JMAiEA8oJUhX9pHpunD6IsHkFJ3G2XHfIIBF7Gq/9Tsb7Pnsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"8c4359d788a950a2267caa127dcbf0b6d8dd45b0","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.1","@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/button":"^0.2.0","@material/animation":"^0.1.3","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.2.tgz_1485190182990_0.5824546278454363","host":"packages-12-west.internal.npmjs.com"}},"0.1.3":{"name":"@material/snackbar","version":"0.1.3","license":"Apache-2.0","_id":"@material/snackbar@0.1.3","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a5ee16a839ace1a9e9e71fda6e22d32f32ae951","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.3.tgz","integrity":"sha512-TPcYLD5J7pfWL3kGOVFNS+Kq6RXi0CF+dE1lOxHj3vkIxtJ8MKL5OVzlJYARfdHKQ1PAIVmMLBNSb+t8S2hpBA==","signatures":[{"sig":"MEQCICMdC4NoefLtqEBDaKTIK6NR32uXZHXljcbopdry7AbvAiBgEhGRzDnvjXnkXg4Nz74G9QNTfvmdnVU1EHJJcQ9tWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"9a5ee16a839ace1a9e9e71fda6e22d32f32ae951","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.1","@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/button":"^0.2.1","@material/animation":"^0.1.3","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.3.tgz_1486407888687_0.1609527114778757","host":"packages-18-east.internal.npmjs.com"}},"0.1.4":{"name":"@material/snackbar","version":"0.1.4","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.4","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34e2ddf2a383aeee01ae85f5b73c23e7f4dec417","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.4.tgz","integrity":"sha512-+h8FXK9oq9nEMRI/cgt0l/Ig3A/1rVCCOFmdNDo8flkLqcNSosSVs9PnlMtPAFYT34YAV6pItjAS+pxLajp5xg==","signatures":[{"sig":"MEQCIEnarLBqDQWxVh84S1Qw1c0io+FPkoAX2uK2vCxoUuviAiBO4pMkDDACHDh+8yRNx/iNrghWxmbOqcDUs+5BuPVoog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"34e2ddf2a383aeee01ae85f5b73c23e7f4dec417","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/button":"^0.3.0","@material/animation":"^0.1.4","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.4.tgz_1487698060974_0.15390149387530982","host":"packages-12-west.internal.npmjs.com"}},"0.1.5":{"name":"@material/snackbar","version":"0.1.5","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.5","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3980a0d0324bbfb05a152e2c84027d78bb5e1179","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.5.tgz","integrity":"sha512-kwietQdfZchjrCn+VbfEOxBSJ39ptCStYKbqx/mC5R64SbxxKfypjS/iJIliP6/2B0Sbf/Y7K27l9sCI4K/0BA==","signatures":[{"sig":"MEQCIHwArawq5cQB/GIOuPoSQNtSFfrixuLRvAB8RsaTn1+8AiBZDBCXenjnrJcRK/YvQIgXTOntEIOmmbxMJj+2osOS4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"3980a0d0324bbfb05a152e2c84027d78bb5e1179","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/button":"^0.3.1","@material/animation":"^0.1.4","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.5.tgz_1488819736995_0.37809062376618385","host":"packages-18-east.internal.npmjs.com"}},"0.1.6":{"name":"@material/snackbar","version":"0.1.6","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.6","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a7864070c44c062e610ccfbf334dff9246feee9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.6.tgz","integrity":"sha512-UHPJyw1h72hl17kWgGoFrHC8g1AQEUrf+qCjbz39U5uxC/C0HdKw6RKD1uDZem2S8zV0DYeX1j3yb0kGoqP0Ew==","signatures":[{"sig":"MEQCIB04z9j/uPKumxOFvVw/QTfNhvEyEJUPtcaLTS6m3PRNAiBBqylZ026x3kVlSV5nJeekcXG1QDM/6/XyCB5UX4AF7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"0a7864070c44c062e610ccfbf334dff9246feee9","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/button":"^0.3.2","@material/animation":"^0.1.4","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.6.tgz_1491233289343_0.025973252952098846","host":"packages-12-west.internal.npmjs.com"}},"0.1.7":{"name":"@material/snackbar","version":"0.1.7","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.7","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f46ecd39558eee381865a485baed54148aa10e18","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.7.tgz","integrity":"sha512-ftwQ3vv0XrGhF/edrW+oZn+E9fKrfKs/nOb5Kf8ekBUR9cQKkUMB+KbWTRMTqhuma8gC1NyWGD2IvHJ5MDJB+Q==","signatures":[{"sig":"MEUCIQCprOSsaSk4ap+5TqNI/SZ8dIpi0B4t1vDZaEumTM8o2AIgPGCAi45No0larFFIteIuCenwJ+w0c6U+OcLq8SG8cKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"f46ecd39558eee381865a485baed54148aa10e18","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/button":"^0.3.2","@material/animation":"^0.1.4","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.7.tgz_1492443792903_0.25508407689630985","host":"packages-18-east.internal.npmjs.com"}},"0.1.8":{"name":"@material/snackbar","version":"0.1.8","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.8","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"638703c6056d84a9df2531d1057d0870c5902006","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.8.tgz","integrity":"sha512-e5u0BfQIZZ8EpJHdZmS20SLULpzVI/vKoXPPDm/agR84L7K82qaAyP0sXD5pxJPAeN+ytwQwYDmC0mEx0Vz87Q==","signatures":[{"sig":"MEUCIAlpTAZPiDddfR53TMRSVfB8y7+aM6YOnGFdGMsE0yuRAiEAhzPB5xCBpOBW/hQZOzbWO2/40rp3Xs0SbE11LqvgVn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"638703c6056d84a9df2531d1057d0870c5902006","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/button":"^0.3.3","@material/animation":"^0.1.5","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.8.tgz_1492527087660_0.42047859355807304","host":"packages-18-east.internal.npmjs.com"}},"0.1.9":{"name":"@material/snackbar","version":"0.1.9","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.9","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7511f304deab01a89c53ffe98e4d69e1f79455a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.9.tgz","integrity":"sha512-p80kXq4qqBGZvpZDpv1D0sUgv0nryepAu7UjFeV7yp0X1TYSacOiw7s2gy2eeZ/mS6mDIGuuQzYzn3CrPlYwDA==","signatures":[{"sig":"MEQCIAaeTzFSMyJHW3dSOlH9CMAUAlUOoDfnXZq9dPvIgkX3AiAibadbgFXW1qYWBRD5LU4+FJjRUaAPkUgijVMGAj2KQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"f7511f304deab01a89c53ffe98e4d69e1f79455a","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/button":"^0.3.4","@material/animation":"^0.2.0","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.9.tgz_1493653394542_0.8804602413438261","host":"packages-18-east.internal.npmjs.com"}},"0.1.10":{"name":"@material/snackbar","version":"0.1.10","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.10","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8efac93af7cb2b07817de0f6d2213e738b7d7e94","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.10.tgz","integrity":"sha512-Dv9OpmbiifBlkOMuO/DB/37RBLZ9pIuog9erveST0fIbUXYnHZj+qBZrNfX63fpNh/TCIt/bkVQbEWUKr3iMcw==","signatures":[{"sig":"MEUCIQD3TJ/GY7bIr9CFf5CIT7BMIu9fA0CNqK988Z/iSnYyBQIgIjd6I/tesyVhBL96sYxjTInHvbO/uhKGXn5XVJbgLk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"8efac93af7cb2b07817de0f6d2213e738b7d7e94","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/button":"^0.3.5","@material/animation":"^0.2.1","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.10.tgz_1494865572259_0.21695927274413407","host":"packages-12-west.internal.npmjs.com"}},"0.1.11":{"name":"@material/snackbar","version":"0.1.11","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.1.11","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"065fa03bfe259232276b2b715c9532242ae2341a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.1.11.tgz","integrity":"sha512-6yTdDEAglwR+7Uq1vrGgAL7W1F4DFW1t/4K0p8t/Ln+aQzXVok5/uc+br4vs58t3WKoWh6Poi8bW5iasKlEX3A==","signatures":[{"sig":"MEUCIEQbuEvCqA6LRWQ9GWSTgCRtKWJX2I7JshcCLw1vRi8RAiEAqm95Lupt+vXOtacCbpOvqxpLdul2s8MuIe8zr3i0l9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"065fa03bfe259232276b2b715c9532242ae2341a","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/button":"^0.3.6","@material/animation":"^0.2.2","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.1.11.tgz_1495031307732_0.11450096732005477","host":"packages-12-west.internal.npmjs.com"}},"0.2.0":{"name":"@material/snackbar","version":"0.2.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.2.0","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7cfea9c76d424c7b726d0233091b6ac5650468d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.2.0.tgz","integrity":"sha512-l/Ec+vrHqRNvc3V5LHp8FgatCGhkfY0Q/b2hvHFsqnwTI8diTrkEnzxcs67F7dNobDhyT7FlSKvSKjPColU+tg==","signatures":[{"sig":"MEQCIC1zsJ5U7XSor1T1RmJb3RoEXpPY7Mjmiqd4nPvP0QTCAiAs1mTA5e8hWZ8Sy2Etc/K8hMyEpTiDC/s+50+hkyNvHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"c7cfea9c76d424c7b726d0233091b6ac5650468d","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/button":"^0.3.7","@material/animation":"^0.2.3","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.2.0.tgz_1496171089156_0.3462340880651027","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@material/snackbar","version":"0.2.1","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.2.1","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cafe6c3090364e19ab8911c1405205aeb1528e62","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.2.1.tgz","integrity":"sha512-C4eLOoG5guT2IdrMaXFcs7/0bdJE6r//hdhX6EYIGWVP8fAiGEtobGcKa7MToBW8WocGuAfcwzMl9ooJqLq/jQ==","signatures":[{"sig":"MEQCIGPGjmQmdHr3fdqN7RQQV5BlvNfbkPwjtPmJY3qjhLOEAiA8CCZ0EyCCDYFdIEWYM1t+vv3mcrtj+hdR73Se8vqgFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.0.3","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"@material/rtl":"^0.1.5","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/button":"^0.3.7","@material/animation":"^0.2.3","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.2.1.tgz_1497282806399_0.6478181302081794","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"@material/snackbar","version":"0.2.2","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.2.2","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9b2841386d5586f90344b57fb9c2204a89f16a2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.2.2.tgz","integrity":"sha512-4JWe5+IPKAdVzr/qYMaYBUMzjwM5EoM+02xGeSP4dv92AqD8yajH34cOj/5/SS12Ybb0P+mcL8j5yuVpXMbECQ==","signatures":[{"sig":"MEYCIQCUayifevP6rZy1+uxuqllljgVS354owfqNSREUMQwCRgIhAO6h5DOQ2tUdXebFPwyX+grKgd+SCFbFtRb01YxmeaHh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"c9b2841386d5586f90344b57fb9c2204a89f16a2","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.1","@material/theme":"^0.1.5","@material/button":"^0.3.8","@material/animation":"^0.2.3","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.2.2.tgz_1498493464915_0.6836050127167255","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@material/snackbar","version":"0.3.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.3.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c5586fdfb4a881c58cc8ecc5e4595dd85a9402","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.3.0.tgz","integrity":"sha512-QAMC04dstcFEHNcIEbgf0dkyP0T/x0+wZkg7sTAckrVw2SjchMutzLZvpmXoRgGUfj3xa7f85QzoneY4HACldw==","signatures":[{"sig":"MEQCIF5RXRcL3QnPHvFZtSK2TqyTUu/W+zjbcwuQfY4F6GUpAiBPbomhK4SVtOXSo6UP3vLh04s2ry5qK5/0EakGAQsGLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"89c5586fdfb4a881c58cc8ecc5e4595dd85a9402","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.2","@material/theme":"^0.1.5","@material/button":"^0.3.9","@material/animation":"^0.2.3","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.3.0.tgz_1499702338466_0.31932706269435585","host":"s3://npm-registry-packages"}},"0.3.1":{"name":"@material/snackbar","version":"0.3.1","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.3.1","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6497be39fe74ce8776d6bde18ddfc4a5bd752751","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.3.1.tgz","integrity":"sha512-bX9KYqoCHXLkIEGGxlvfxxzFhJEcWyGM0icgIQSNTofxtitTDRB/FXIUXskUKEuN5l1zyW7Y/s3comp39pA0Ow==","signatures":[{"sig":"MEQCIAWBjhOMrewdujiNBNn2+mpPetlleVyZnyGP8bc85TKQAiBJ8lsoLqSPKcf84ij2Ff8KGs0BhESEeKbiWApecFHxFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"6497be39fe74ce8776d6bde18ddfc4a5bd752751","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.6","@material/button":"^0.3.10","@material/animation":"^0.3.0","@material/typography":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.3.1.tgz_1500911366758_0.9042974112089723","host":"s3://npm-registry-packages"}},"0.3.2":{"name":"@material/snackbar","version":"0.3.2","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.3.2","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0d7ae7496d0afa4fd4e44827f6cc1adff05939c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.3.2.tgz","integrity":"sha512-HYbzxb3tULgQjKpRiGEEStjr80IJBsH60xKpYwpEQaKTiXhRNiXgWq8Xn/wzQFA7YYHwvvhuSwS9/VEkE7qeoQ==","signatures":[{"sig":"MEUCIQD2BOgelnZ71lBXGUO308CxQwOMZjCqM1YgfN2DNhaOuwIgTGsc+SgNoRgUKF7FmuqqOdLQ7SFCpBOybfAUF7ZHke8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"a0d7ae7496d0afa4fd4e44827f6cc1adff05939c","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.7","@material/button":"^0.3.11","@material/animation":"^0.3.1","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.3.2.tgz_1502138913036_0.6808250204194337","host":"s3://npm-registry-packages"}},"0.3.3":{"name":"@material/snackbar","version":"0.3.3","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.3.3","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f40e9f4da8ddb383b9b8ddc88cf75be0a9af8a1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.3.3.tgz","integrity":"sha512-P68UJYr4ybR/aZl9LjBZRbIhmdzZ32TnVeZ30OaiZMB+jXEHdbGpfuEw1uG3elG5anZHgNE60iD0YEgzQtaFww==","signatures":[{"sig":"MEUCIDdScFgo23YztXHl9C6K0XFgeFZzy5NJihxee0Q1Sf/zAiEAuhbR0K8+CNa808chn0LfSJ/9t4UUxrN41FR6p1CxsUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.4","@material/theme":"^0.2.0","@material/button":"^0.4.0","@material/animation":"^0.3.1","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.3.3.tgz_1503336483757_0.025372288888320327","host":"s3://npm-registry-packages"}},"0.3.4":{"name":"@material/snackbar","version":"0.3.4","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.3.4","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba9ae3da85749bd9cbb6ac25e7e0794b50abd3d3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.3.4.tgz","integrity":"sha512-gPpVAMHccYBOsBhzrKj8Z+GQhAqt0UO3lthugELZq/yiTlf6ex4E2QfTMofyBSKpzHWWjlA2OA/RrS60neqJVg==","signatures":[{"sig":"MEQCIGQg2Qz4zGMZx8oKzrB4FHyBzizVI9Rg59aXVUB9NtCQAiAC+sPH8OOMav7ixPnhDX+V6Dtikqr3GikTTlRATyIwqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/button":"^0.4.1","@material/animation":"^0.3.1","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.3.4.tgz_1503586015722_0.25953120179474354","host":"s3://npm-registry-packages"}},"0.3.5":{"name":"@material/snackbar","version":"0.3.5","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.3.5","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cfc8b80e798c3df13be91eb01be41c9915db9d1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.3.5.tgz","integrity":"sha512-ixevcGWn8qkWPn1vUEXleK7cufd48MKPHzJw1SqJGKCmvxGgrqCw5PMTxelEGgz0WPVJlwCwPtK7TWX3oO5KwA==","signatures":[{"sig":"MEYCIQCMjeZq75bnlB7IFNYTNn9uhoMsMlWkqtf3ny0m82/EswIhAJh8ixazLnCsAS4FkRkBua+up8aA0tyC7Oc+klswym5g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/button":"^0.5.0","@material/animation":"^0.3.1","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.3.5.tgz_1503681662713_0.006267510587349534","host":"s3://npm-registry-packages"}},"0.3.6":{"name":"@material/snackbar","version":"0.3.6","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.3.6","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43eb2458eef4b857d26bd37a6b7eb9b48de79d00","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.3.6.tgz","integrity":"sha512-q+4AFMUXnrcGx7G8Ly7bPLvQrQDuIiawwNLyDbS1iHnEl17A+tTP9T3EXkpuRho9ASUHscd5jnV+hgzGaKyLyw==","signatures":[{"sig":"MEUCIQDtt9TvmM5ev7WYxc0rfHQ1b3B49u3S9WTXbwCY5hk6IwIgYE6AOkzaWlRc2vmrlfyCpZLV/VZxL2FcVoDmx0Maejw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"43eb2458eef4b857d26bd37a6b7eb9b48de79d00","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.3.0","@material/button":"^0.6.0","@material/animation":"^0.3.1","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.3.6.tgz_1504642577061_0.6472390017006546","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@material/snackbar","version":"0.4.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.4.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10a5c38b038ff3927db4aa6b5fa36a2a3c2e4029","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.4.0.tgz","integrity":"sha512-O2g2xyeotAzhymcFDWm16QCjQy6p8gsq0/aTlqmDs2gykZklud00tZ2O9MNF9RSvhnFJx8wu4tuATdPn5qGr8Q==","signatures":[{"sig":"MEQCIDvJy1Mx9AUW9peV1aoKtRXJwRyU/CYrtJnvzVH95RmMAiB59JhfUmLZXpKlwDl55PMjJanDMOQwboW9x/Eaw1kQfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.5","@material/theme":"^0.3.1","@material/animation":"^0.4.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.4.0.tgz_1505759754696_0.3474046620540321","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@material/snackbar","version":"0.4.1","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.4.1","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8bec10f6869ddf36b41d886b3b7f28347b1480c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.4.1.tgz","integrity":"sha512-35CgJlPkT18ynu/x8O8KDWlRBZa1EUuRGz3z2bpz3bgfAJyK8ndrw1QeESsqJSn2LKT1zom70aMYe8U7hOJuBA==","signatures":[{"sig":"MEQCIGglg1tJtnqLHJapTarrs9qWi+qhrerjzjRTMh6KS0QKAiBZaSwYlyIQ5XP2Qazmqz8/VqyEs9d1uOeUTWX8BGfQhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"e8bec10f6869ddf36b41d886b3b7f28347b1480c","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/animation":"^0.4.1","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.4.1.tgz_1506978715286_0.9965448577422649","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/snackbar","version":"0.24.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3119b4bdb29aeafb67486887b3da252bde9f8ff5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.24.0.tgz","integrity":"sha512-RIu0ZD+wc/qaTNmNoA96fik0ldeS0Z6kj9NahCWVKZAdndRvRx7occdKSTBjYlgg+abKPEhtpzhKytrHXAm76Q==","signatures":[{"sig":"MEQCIF0Pw2kyVro7jqJX0ujJkZfJf4hnVkvZnI8HiRSjlbGuAiAejgCowtACR7BxAebcA2MLKGGEezQrFurjXLzbSOd2qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.24.0","@material/animation":"^0.4.1","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.24.0.tgz_1509390694826_0.06734504690393806","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/snackbar","version":"0.25.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73169dbf51d6c3f23b7c84654a540e1b3c5a88a6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.25.0.tgz","integrity":"sha512-fpcXBsme7jKbE+VJD1ifPzw3ix7HY2bPIf0FSQ2vbmmVc+PlDUHU+lSCGWHn8BdBbA4adgu0P084EidHK2q+EA==","signatures":[{"sig":"MEYCIQC6tAwMnv/nWs9Vf45ulW5NSnfZ5y2zgX82H3rdsWNz6gIhAN2JB7L9AkBeHxkAxO9C/YOYxQB+jtUFpJXCP+cNyCKw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/animation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.25.0.tgz_1510603356256_0.026633787667378783","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/snackbar","version":"0.27.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09722c95f9a58030821016a118cdacbadcc6266f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.27.0.tgz","integrity":"sha512-BKlfrUJbAn4VU/VpJ9XBOehJxdzk790nEod6Qd2jXr50NsSXdGvSMRBb5Oo1vW4qaBjIq64zVkuqWi2zBAJ7og==","signatures":[{"sig":"MEUCIQCUwDs5nUrngJ2G5aT4NH1OeCFGEL4Sp4tjf0WR1rhFLQIgS/7JXa3pVFNnDp37WIg9epIR6s44Eutxnzs9sN7UKFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.27.0","@material/animation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.27.0.tgz_1513020940100_0.9598219017498195","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/snackbar","version":"0.28.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffe3f408e221ba4dd2dfa62908173acfaae683f8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.28.0.tgz","integrity":"sha512-PIJaH52x5/WaYikSYofeLUt2AHHvQGvW+JhMXGBgJ7xCCibIlDL6LgZkIfG5RigT/eB1ly/ZTJywJBZ+TMEbaw==","signatures":[{"sig":"MEQCIAXlrRMhQllGtW6QEZ3qzvQFYwP5C4Kbg3NNfhLlDuj6AiAioLiTEdOnCh0AWbtRIsZyRop+eRVrfTN4fm+5ad+qog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.28.0","@material/animation":"^0.25.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.28.0.tgz_1515437718097_0.9305497468449175","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/snackbar","version":"0.29.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f02e3a81c2822e38771cbcf2b2aed16eb72c4d41","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.29.0.tgz","integrity":"sha512-+ZNyGiR/nejEBx1GMoXPvqube7w/+pvY0go5qfdho3L5jBy9j+Y81NqgVHoFr5iar6hiDtwoSxTFfMXfW0hsnA==","signatures":[{"sig":"MEYCIQC0lk8R3ZEo9MPLQcqdx64CNTiAsKIqnLdbfX+uoOUpZQIhALfKLcgE4wtM3+1yVYiqXjpcZUrT/g5xDS5XMyZcET4q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.29.0","@material/base":"^0.29.0","@material/theme":"^0.29.0","@material/animation":"^0.25.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.29.0.tgz_1516645862376_0.14175199903547764","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/snackbar","version":"0.30.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdf12e81a7bf38e0a68e73151f9d49ab3597b353","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.30.0.tgz","integrity":"sha512-zQamWIxco7wZGYHXZ5G6TGTUKeZgS/EZ+YgRhA5hm6ZwfZrQYhn8coWRPOfsgHHlDN511sA8svU41h6HArlSFA==","signatures":[{"sig":"MEUCIQDLfR8e0T5WjYrLh6u04LEY/TohVUSmc+MlUEBkIwqTuwIgAy7x+B/Ii5KuWdyIvfoc9hWHEy7jNTCST+kjK1XGj6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/snackbar-0.30.0.tgz_1517868181408_0.4948912337422371","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/snackbar","version":"0.33.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dab71504f5057e2972bb7c8b698e66f5a07127f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.33.0.tgz","fileCount":11,"integrity":"sha512-SI6XOpFnzt/FyPNH+LQPAEb/Rf3K1cK3O2AGcCdIErRc8xjRYjV9Jnm4UwZ8BsKu7vFnFGrEcHJois8IZ1fhsA==","signatures":[{"sig":"MEQCIHMLibd2iuUUQvQeO+gt+36ZTBfeLI33UIdll0bXBsidAiB2iMz/BMVf2xwQnyu9tcHY6LJPhsc7756SqzZUskjRzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97454},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/animation":"^0.25.0","@material/typography":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.33.0_1521477610063_0.716813024264733","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/snackbar","version":"0.34.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb47b46533eff56239ac0d8a1d7e60ea85bfb3e8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.34.0.tgz","fileCount":11,"integrity":"sha512-0w/44aepBr/o7PQckW5dnB8D+c2xKRffiCt79O2R12dM61Gq9yxJV3MGfiW0RnMM3jUkF2DpOGOtuG1nVFkphw==","signatures":[{"sig":"MEYCIQD8Phu1rOSrPe3w+CESfmRcIKVbiG7wqtuDnWKg5QziTwIhAKoQ23ggA6aofbdSuLVNKjlQvB6yRVIZAyR0dvGTClVA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97446},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/animation":"^0.34.0","@material/typography":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.34.0_1522705928379_0.37657797687579597","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/snackbar","version":"0.35.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25540ad287d60c78621386c9c687078c9b09a6f9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.35.0.tgz","fileCount":11,"integrity":"sha512-RrKz9Zg5o4tree3h+c+GQrWjTeCnImT7omyMGWge8wdsxu3snXNdLqzvqmeVsZMIB+jMk5VWye7fGjU9wsJT6Q==","signatures":[{"sig":"MEUCIQCAMs24BfHGQqGMDYSbeMhI42dmR/QDnXX59Aa8fSEdrQIgRkvaDHmDoG6bJZ80lI7bgKncbLnrYwVQXWP14i0lDdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDuCRA9TVsSAnZWagAABzMP/iO92tLAC/86oUnQwzqN\n1jsZ96YOY7kBo5gFRZdmsC6X/TsdbUMD6tqotv4RZwRqAzAU2Wa7kmNQf8a+\niWIAlRErhidxHdqkZrK4g9Y9nt4YKKKDUcUE81A1lwJqkRqFiQgXE+ICGru+\naKyBh8xjOJH0FZZbfADi34bkAtbXcv4dP5eGa2v4v3WMI9JtfX4/VDMbzDA1\ned24OFr+CY3ZXHCmMAHCJ3ryR/POEx8GK4pf179JhK2foO3TvFi3T4rpDll4\ng38WvqZBLZBpSvO2u3WI2Y7mu/umLUFnRJvI+Z7Kc5zqqgduf6JN3sc9pAM5\nSoGTqAK+oHRjEACtmiVDcJK0Gszfmvw3A/dYLcVHCbvMVzz2GuqrpkAAJXuB\nYvc7RlQq/MS2NONnCSoVEz5GbaVJwiipBPYiiNNPlHnGSq4yFUY+j4MWZAXe\ndIZLwj3GsLacuDDlVEurVOOqB2GaXX7tguRvXbeFsrPvEFFXgBF0jIUVCRm2\n970p8qENfW5FrB5p3skJte+AjbvIyG5i2AwoVaSK8SLXKHd/SZFD5bLvemya\nM6ZIqeX0zfdBwRbwrs4EsGTqZDkCUT2RSV1EVXx6NLR9C+LATbc9TOw5XPBX\ntEBfg52eHaUk5bdt9zAMVDh8kixt69gwYPVZFJjsHCU070SAsI7LAMM3Bj7a\n7G2p\r\n=My2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Snackbars\n\n\n\nThe MDC Snackbar component is a spec-aligned snackbar/toast component adhering to the\n[Material Design snackbars & toasts requirements](https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs).\nIt requires JavaScript to show and hide itself.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Usage\n\n### Snackbar DOM\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n### Start Aligned Snackbars (tablet and desktop only)\n\nMDC Snackbar can be start aligned (including in RTL contexts). To create a start-aligned\nsnackbar, add the `mdc-snackbar--align-start` modifier class to the root element.\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n### Using the JS Component\n\nMDC Snackbar ships with a Component / Foundation combo which provides the API for showing snackbar\nmessages with optional action.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCSnackbar, MDCSnackbarFoundation} from '@material/snackbar';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcSnackbar = require('mdc-snackbar');\nconst MDCSnackbar = mdcSnackbar.MDCSnackbar;\nconst MDCSnackbarFoundation = mdcSnackbar.MDCSnackbarFoundation;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-snackbar'], mdcSnackbar => {\n const MDCSnackbar = mdcSnackbar.MDCSnackbar;\n const MDCSnackbarFoundation = mdcSnackbar.MDCSnackbarFoundation;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCSnackbar = mdc.snackbar.MDCSnackbar;\nconst MDCSnackbarFoundation = mdc.snackbar.MDCSnackbarFoundation;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the snackbar, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.snackbar.MDCSnackbar.attachTo(document.querySelector('.mdc-snackbar'));\n```\n\n#### Manual Instantiation\n\nSnackbars can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCSnackbar} from '@material/snackbar';\n\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n#### Handling events\n\nWhen snackbar is shown or dismissed, the component will emit a `MDCSnackbar:show` or\n`MDCSnackbar:hide` custom event with no data attached.\n\n### Showing a message and action\n\nOnce you have obtained an MDCSnackbar instance attached to the DOM, you can use\nthe `show` method to trigger the display of a message with optional action. The\n`show` method takes an object for snackbar data. The table below shows the\nproperties and their usage.\n\n| Property | Effect | Remarks | Type |\n|-----------|--------|---------|---------|\n| message | The text message to display. | Required | String |\n| timeout | The amount of time in milliseconds to show the snackbar. | Optional (default 2750) | Integer |\n| actionHandler | The function to execute when the action is clicked. | Optional | Function |\n| actionText | The text to display for the action button. | Required if actionHandler is set | String |\n| multiline | Whether to show the snackbar with space for multiple lines of text | Optional | Boolean |\n| actionOnBottom | Whether to show the action below the multiple lines of text | Optional, applies when multiline is true | Boolean |\n\n### Responding to a Snackbar Action\n\nTo respond to a snackbar action, assign a function to the optional `actionHandler` property in the object that gets passed to the `show` method. If you choose to set this property, you *must _also_* set the `actionText` property.\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\n\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\nconst dataObj = {\n message: messageInput.value,\n actionText: 'Undo',\n actionHandler: function () {\n console.log('my cool function');\n }\n};\n\nsnackbar.show(dataObj);\n```\n\n\n### Keep snackbar when the action button is pressed\n\nBy default the snackbar will be dimissed when the user presses the action button.\nIf you want the snackbar to remain visible until the timeout is reached (regardless of\nwhether the user pressed the action button or not) you can set the `dismissesOnAction`\nproperty to `false`:\n\n```\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\nsnackbar.dismissesOnAction = false\n```\n\n### Using the Foundation Class\n\nMDC Snackbar ships with an `MDCSnackbarFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for snackbars must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setAriaHidden() => void` | Sets `aria-hidden=\"true\"` on the root element. |\n| `unsetAriaHidden() => void` | Removes the `aria-hidden` attribute from the root element. |\n| `setActionAriaHidden() => void` | Sets `aria-hidden=\"true\"` on the action element. |\n| `unsetActionAriaHidden() => void` | Removes the `aria-hidden` attribute from the action element. |\n| `setActionText(actionText: string) => void` | Set the text content of the action element. |\n| `setMessageText(message: string) => void` | Set the text content of the message element. |\n| `setFocus() => void` | Sets focus on the action button. |\n| `visibilityIsHidden() => boolean` | Returns document.hidden property. |\n| `registerBlurHandler(handler: EventListener) => void` | Registers an event handler to be called when a `blur` event is triggered on the action button |\n| `deregisterBlurHandler(handler: EventListener) => void` | Deregisters a `blur` event handler from the actionButton |\n| `registerVisibilityChangeHandler(handler: EventListener) => void` | Registers an event handler to be called when a 'visibilitychange' event occurs |\n| `deregisterVisibilityChangeHandler(handler: EventListener) => void` | Deregisters an event handler to be called when a 'visibilitychange' event occurs |\n| `registerCapturedInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler to be called when the given event type is triggered on the `body` |\n| `deregisterCapturedInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler from the `body` |\n| `registerActionClickHandler(handler: EventListener) => void` | Registers an event handler to be called when a `click` event is triggered on the action element. |\n| `deregisterActionClickHandler(handler: EventListener) => void` | Deregisters an event handler from a `click` event on the action element. This will only be called with handlers that have previously been passed to `registerActionClickHandler` calls. |\n| `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when an `transitionend` event is triggered on the root element. Note that you must account for vendor prefixes in order for this to work correctly. |\n| `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from an `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |\n| `notifyShow() => void` | Dispatches an event notifying listeners that the snackbar has been shown. |\n| `notifyHide() => void` | Dispatches an event notifying listeners that the snackbar has been hidden. |\n\n## Avoiding Flash-Of-Unstyled-Content (FOUC)\n\nIf you are loading the `mdc-snackbar` CSS asynchronously, you may experience a brief flash-of-unstyled-content (FOUC) due to the\nsnackbar's translate transition running once the CSS loads. To avoid this temporary FOUC, you can add the following simple style\nbefore the `mdc-snackbar` CSS is loaded:\n\n```css\n.mdc-snackbar { transform: translateY(100%); }\n```\nThis will move the snackbar offscreen until the CSS is fully loaded and avoids a translate transition upon load.\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_0.35.0_1524523244895_0.4277541951894821","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/snackbar","version":"0.36.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.36.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25742f17e3e9ef798bfebd013ee7e1c4ebf59717","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.36.0.tgz","fileCount":11,"integrity":"sha512-Q5YL/DLa/cBcE8PGU1HGNsb63OoKknjmL4vYvIMlgy+uNljjXoVBg80Kl5sp8RMzf5XiHByeJaSS1XB7g1ynRQ==","signatures":[{"sig":"MEUCIQDVfm4z3minY+DmHQm6stb/JrnN9BO7LzPu6HW27mMhxAIgb3O5MYBz+OMWARsRGOs3mBLanbJ6esCiC70xvZfoo/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVz3CRA9TVsSAnZWagAAEb0P/0O215UsbJUZdVYD8hi7\nhlg0a1S0GqeHl1gXiKrY2lgmk0gLmRrYwgjOkrPHznN3EdAPPXh2Hg03Mh6A\nyUHzn2fp0CED6s45jKv+nWI5K8L7hJkqf4Eov9TczU5dxOFWkrenac/P8LFJ\nz2lf3BOfVBk4T45ukc0jBn54uAc7v62E1fhkcZvXwa1gO9hhL8ljZw0RsfMo\nNP08+9ZFJj0dmkvNOSmPZ8DEfOQvHUB0kibcC/drwEfrN08+9te2q1f1h0iE\nTCMSmbL7Q1pyAs0/AomDBA7pV6lwnTqnsY9ofbJzwsw2R86NbenrTjQrJ9Um\nkNxo65g0h/4b8KAo5E3kDG520Tc7ZkOLZGrJQFvjABUcwmemskG7sCjOwGLU\nu51wPjFkyPSuiUMUfWf/IxboWJF87XObx8JiRNXxrTWTh/KvrH3IRpp3AR3Y\nnOXiK21hJNG7xlaB/IdqWvUKQ4nc89/EZruxwAR3xNziud4/qaxUm6s1FWOH\n7cXORfKjEwyOPUgXxLz/jsWGjRmft4rl6T/mNmJIg6uRbA6wtVCQ0nnk3SMo\nFiVkiFFLSoKo9DHFVhkKHbo4vnt9Hn2Ksr0zIqJaC3dtbi+Eccw51SlusuKH\nuGRg4ACKmLCc1Tig8VuTP2YTi2B+Z1f0KCsyIHaODS3y6mPV23Zdsf1sQ//H\n2jsA\r\n=i+qO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.36.0_1528126709859_0.15121311046557162","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/snackbar","version":"0.37.1","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.37.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17067fc7392874058b7eb6229cf6667f94180e74","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.37.1.tgz","fileCount":11,"integrity":"sha512-zx703CH90k2ELwzGciLmC6W2gzrqWt3UmXp/gXFPIYAQujn/NShNKweox2qPHdTw5C7MCCXwOTg0HnlIcmVLnA==","signatures":[{"sig":"MEUCIAFvJBJgeASS4J4dAGRutjDJ+g8gaiEXQ3se8ao45VyEAiEAqqBWgxJ8BWBYwGz0VcfLN25hKfcXVAxu6Vp3llhGTRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvwCRA9TVsSAnZWagAANP0P/1cyDPsLAYnSI3F46SOY\nYiIosgHOhN0kBU9oV02qDWsn3Tp0skPmQz3Fhzkze9v3pigvr1QOw0JKTh/N\nKgAErGUIUM+HH5Lo+YloOeVi96yQNeIqDVh4Kg/wm+7DIQrfFCIStlsHGuj8\nhqbihtWRZoXaleurjCfOXthV9dWTRQFPNB01Vw4YFwpSbt/EWZo8nnjZP73I\nqJ2evXW1CwskViFMGa28DfJ4HcsqbHvVhgR6oVuK4/eyDVD4KSOOkjrmj8+U\noTtSesyc9t3z8NmeNP2EEDO6Z2EF/edHqzLjf0QxKhHSNZeengchCs99cNKv\nle+bn+RZmdMxKGCG49hvXBi9lrFYoORLiOMfSBtAwFoM9JVqAUBNqssnEEKi\nPLjnRn0zU7pkqQ8Ce0mz9BjK2XClEo6rdIW5/qGdl8teaNI9F0G9X1nqC0Ll\nuRRVBztRk5GlG6zjPNflkLuqt4ZMtBUKZ94ie0307oCoHrcCx4LKf/RUBYLz\nbtkue8DAZq7Sm61H2BjZyPG5RtOt5YyddEjKHA6DT1B8K2htEOvHdf7EVmZj\nPTntamxgAMkpgVpXuOucxFs3k+httIubl4WadofM7b/d6L6Zgb+WkPX2TvHA\nb/X9oKybqom4EWTWi44ly4hljGcuJg+AlU3mCk3jlF5EIcjMAoUWcrxSJxg9\ngQtv\r\n=v3NW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/typography":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.37.1_1531775984073_0.730533562742278","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/snackbar","version":"0.38.0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad8dace225b4e838894767d7d266db6a0cd2d297","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.38.0.tgz","fileCount":11,"integrity":"sha512-YvQJTxcd8SkCejI2NiZtAiIzvA097zm0qLQr1bD8j3uAuuuenK3BllNKO8K9nPAmvLmOGS5GRaeRUfsmWcwzTA==","signatures":[{"sig":"MEQCIBfRAYd6zskjkRJJrLrWGlyNFRpSVLBVeleZN/jfOdyeAiARpVrtlxh2mlUdslZcBqfsQfnQT++m3meAlyMgY+kpSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WeCRA9TVsSAnZWagAA3QcP/1TSeftO52svkqxIGJ4q\nSv6kigCOGLuJqfsIpfgzyx7D3O6jMgpt05vlvM252mNlnrPXLJzjalrAPtD5\nFIZmrn0aKPrOWQWqzz05WtgwLkQqqUhwGXPWpNvz6hM/Ff+9ap3o9/NrgMpx\nz+JMS7Ebc7IMkfdzEGpmccn9XzkFmUW22J2YK8bC3LrCjzbxLQFM1YnuOBWe\nYKl3oEDx2yqSpxxwo4PJlnukEPNJyoPk6Mbyx+FQmqHzDFiyps+RCvTb26fF\nkfRiBh5tPrY/ZXIC1AJWbiUrcKKHyMxgvlVT3FR1do78/QVOPNb/wd6tzm3O\nHqqk3uPrxUHlzFmJIarS8qSlRW3vVMR3V6LvOshCe49kxavWngxHZpCppM1e\nY9iDynXZT2ggsrkBqZEw2ScR/J5pYMm7KyOyl6AAx+O4d6EenpXFGU3VLlo9\nuVw8pi5gFDOW5Y9J1JIzIxcgaLROT6BH9KIcn61fKw2hVjxi+uVnohkQJI/z\nHS+Xp9h0zGNhixaeL3tnsdBghrBLYBAi3cd9PP9Lb9tZNkIU22u6Fg8nA8U7\n3vp0aW+PEqbIvMBY/Z05HOMVsJ2F6/XU0kya0ahJ8O5cfgh2z8YRqck0YhWw\n3p6gXMPjYYOSfjG2oQ1mz80QfblcI9+qYsw+kZzR2w/JJFU1vjYJCqWgzsZr\n0YnU\r\n=xWkz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0","@material/typography":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.38.0_1532970398818_0.5720839638872308","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/snackbar","version":"0.39.0-0","keywords":["material components","material design","snackbar"],"license":"Apache-2.0","_id":"@material/snackbar@0.39.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eed5ce053f67921805a1319f54043d820aa64fe","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.39.0-0.tgz","fileCount":11,"integrity":"sha512-ZtSGTw7PM91QJ3uSTuYwWKjCO2YlCqaSiLNhc6ry957iNZ2VPbKLwGtxFV0rQNbWV42qQYk5a6B5tIBsUA/Vdg==","signatures":[{"sig":"MEYCIQCuiIrY0uXqNyy/6OfH53QB7tOBZY/FTrQ60Jgh+WoypQIhAP87oXs+9YAfS1SMCiSiBqsI59gi6YbE5jsjcovKNLH+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVDCRA9TVsSAnZWagAAGjIP+wfzQvfj5IwFH599xCKX\nlvCjjq9R9HfnPtbJEYiCYDWVYSnHx1ML07jwE+5so6mvPCgf2skpov3N82Qu\nOmP2W1tMKctIgPORPhF0UFtwP2OKW0J2c35Fn22XWIma4kla2aawR/uS6s1Y\nT3MrW22bjW1WQ72QgkgwhDJrzRm7O5jumFQ3VcJTOweTKVpiQqINSOpF89ZE\npaT29vhyh/G6QH5M6ughbqGxRfWxWI2R5Q6hfbxmkSzXGboNR/Cj5fvlnLly\nVasN9e9V0XBPPuE5hV3BUNRHuRO0q8f/AXnzBiym53Tp5M0zkclACiWSHHo1\nYlYDhcYdOmBhNpPWVRKhSBsHNdidi3zlZXGwo8K12GjPI1nfeoR/SOzL10x7\n/yiZOHvbEQ3G8qNcAnfwdyI9UzVssA8a0w7s2apvmIa9IEMqW1Wfa/iBhFiR\nZE+QLttJiggis6scD13g8oqTf3xwBv32wX/dxCLUKUp6P7OnHSEBAluyQhnF\n7z1GKIiba4Hm9wocDpUc0QljtebdUvrM46jABPObJj7JNcpuOi0NvtvppavN\n5QyN/1jPc28Vuhi4UcalsLLEpzRdFRn7zXtIzOOsA5IHjA15oRKrkhqKOZdr\nRHV1/YTj+N02sRe0O6/zarx9a3oBdsclnA81ne6ToEpNmlutFK8JJbQ4/CmQ\nx1OM\r\n=m821\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Usage\n\n### Snackbar DOM\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n### Start Aligned Snackbars (tablet and desktop only)\n\nMDC Snackbar can be start aligned (including in RTL contexts). To create a start-aligned\nsnackbar, add the `mdc-snackbar--align-start` modifier class to the root element.\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n### Using the JS Component\n\nMDC Snackbar ships with a Component / Foundation combo which provides the API for showing snackbar\nmessages with optional action.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCSnackbar, MDCSnackbarFoundation} from '@material/snackbar';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcSnackbar = require('mdc-snackbar');\nconst MDCSnackbar = mdcSnackbar.MDCSnackbar;\nconst MDCSnackbarFoundation = mdcSnackbar.MDCSnackbarFoundation;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-snackbar'], mdcSnackbar => {\n const MDCSnackbar = mdcSnackbar.MDCSnackbar;\n const MDCSnackbarFoundation = mdcSnackbar.MDCSnackbarFoundation;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCSnackbar = mdc.snackbar.MDCSnackbar;\nconst MDCSnackbarFoundation = mdc.snackbar.MDCSnackbarFoundation;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the snackbar, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.snackbar.MDCSnackbar.attachTo(document.querySelector('.mdc-snackbar'));\n```\n\n#### Manual Instantiation\n\nSnackbars can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCSnackbar} from '@material/snackbar';\n\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n#### Handling events\n\nWhen snackbar is shown or dismissed, the component will emit a `MDCSnackbar:show` or\n`MDCSnackbar:hide` custom event with no data attached.\n\n### Showing a message and action\n\nOnce you have obtained an MDCSnackbar instance attached to the DOM, you can use\nthe `show` method to trigger the display of a message with optional action. The\n`show` method takes an object for snackbar data. The table below shows the\nproperties and their usage.\n\n| Property | Effect | Remarks | Type |\n|-----------|--------|---------|---------|\n| message | The text message to display. | Required | String |\n| timeout | The amount of time in milliseconds to show the snackbar. | Optional (default 2750) | Integer |\n| actionHandler | The function to execute when the action is clicked. | Optional | Function |\n| actionText | The text to display for the action button. | Required if actionHandler is set | String |\n| multiline | Whether to show the snackbar with space for multiple lines of text | Optional | Boolean |\n| actionOnBottom | Whether to show the action below the multiple lines of text | Optional, applies when multiline is true | Boolean |\n\n### Responding to a Snackbar Action\n\nTo respond to a snackbar action, assign a function to the optional `actionHandler` property in the object that gets passed to the `show` method. If you choose to set this property, you *must _also_* set the `actionText` property.\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\n\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\nconst dataObj = {\n message: messageInput.value,\n actionText: 'Undo',\n actionHandler: function () {\n console.log('my cool function');\n }\n};\n\nsnackbar.show(dataObj);\n```\n\n\n### Keep snackbar when the action button is pressed\n\nBy default the snackbar will be dimissed when the user presses the action button.\nIf you want the snackbar to remain visible until the timeout is reached (regardless of\nwhether the user pressed the action button or not) you can set the `dismissesOnAction`\nproperty to `false`:\n\n```\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\nsnackbar.dismissesOnAction = false\n```\n\n### Using the Foundation Class\n\nMDC Snackbar ships with an `MDCSnackbarFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for snackbars must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setAriaHidden() => void` | Sets `aria-hidden=\"true\"` on the root element. |\n| `unsetAriaHidden() => void` | Removes the `aria-hidden` attribute from the root element. |\n| `setActionAriaHidden() => void` | Sets `aria-hidden=\"true\"` on the action element. |\n| `unsetActionAriaHidden() => void` | Removes the `aria-hidden` attribute from the action element. |\n| `setActionText(actionText: string) => void` | Set the text content of the action element. |\n| `setMessageText(message: string) => void` | Set the text content of the message element. |\n| `setFocus() => void` | Sets focus on the action button. |\n| `isFocused() => boolean` | Detects focus on the action button. |\n| `visibilityIsHidden() => boolean` | Returns document.hidden property. |\n| `registerBlurHandler(handler: EventListener) => void` | Registers an event handler to be called when a `blur` event is triggered on the action button |\n| `deregisterBlurHandler(handler: EventListener) => void` | Deregisters a `blur` event handler from the actionButton |\n| `registerVisibilityChangeHandler(handler: EventListener) => void` | Registers an event handler to be called when a 'visibilitychange' event occurs |\n| `deregisterVisibilityChangeHandler(handler: EventListener) => void` | Deregisters an event handler to be called when a 'visibilitychange' event occurs |\n| `registerCapturedInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler to be called when the given event type is triggered on the `body` |\n| `deregisterCapturedInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler from the `body` |\n| `registerActionClickHandler(handler: EventListener) => void` | Registers an event handler to be called when a `click` event is triggered on the action element. |\n| `deregisterActionClickHandler(handler: EventListener) => void` | Deregisters an event handler from a `click` event on the action element. This will only be called with handlers that have previously been passed to `registerActionClickHandler` calls. |\n| `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when an `transitionend` event is triggered on the root element. Note that you must account for vendor prefixes in order for this to work correctly. |\n| `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from an `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |\n| `notifyShow() => void` | Dispatches an event notifying listeners that the snackbar has been shown. |\n| `notifyHide() => void` | Dispatches an event notifying listeners that the snackbar has been hidden. |\n\n## Avoiding Flash-Of-Unstyled-Content (FOUC)\n\nIf you are loading the `mdc-snackbar` CSS asynchronously, you may experience a brief flash-of-unstyled-content (FOUC) due to the\nsnackbar's translate transition running once the CSS loads. To avoid this temporary FOUC, you can add the following simple style\nbefore the `mdc-snackbar` CSS is loaded:\n\n```css\n.mdc-snackbar { transform: translateY(100%); }\n```\nThis will move the snackbar offscreen until the CSS is fully loaded and avoids a translate transition upon load.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0","@material/typography":"^0.39.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_0.39.0-0_1534432578668_0.6795299110077122","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/snackbar","version":"0.39.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ee81bc2229d1d16e72c4a344a13d1f3474604ba","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.39.0.tgz","fileCount":11,"integrity":"sha512-d2c0swm6n6jkWmWcxZDzXW8NzjyF70d6h04gAruVYHMWEfHojjGyiPxPE6YnJntSiNd3Y7i/FWeheNiUOL5+xw==","signatures":[{"sig":"MEUCIDkvR/mbGTer/HslB2Ytpd2ifpN5ugm6Qf4zJD3F5ymWAiEAnU82Bfgr0D2WP7GQGkesOllMOhdBfifquxi89hSLG+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeKCRA9TVsSAnZWagAAO4cP/iBfvsZSu7vBNts9BSvG\nDq6oFa7FhOwui8Fk6tBYAPv3x9MtzqepGX2BHmCHdYd/j5Uq5IPLHzvJ1OPg\n/DQHEeDVzBJPO7dWz3FuKlU88Zu5cJKZFdzrFCEd9AE6NAGNRDvtvKTHeBgG\nNOWnsQfEb8e2GinGmLyHMF0tRchlj6yLln0M6EdFSBAxnVIMc46YbNZ1Yoru\ndlN9CSfPc7CrUm/gCDLdh8frpZ8DwLpIyMFJrWcSdCjMhvsvBWXlaq8zxFJZ\n+ePm4Ic3ZIZlP6Iw57ONYKeuzSaV1Czh2VtkATySdLfB9YBttJTv/NKrqaQD\nx+O8kiJ7gb/pPozjywrobK0U/fLxNnXYTJg9gtaWcM2+BZ2Ulf0OGlH9ubwp\nn6S2YoTCxmFftuEAg8CRfgfCybt0NZymOSZ1dc1V0eKFmMGBsUaYtm7gWDc2\nEijecltLdWhdY1au4HXf2YkSYo9yqzxKgOOKI/2hUuCx4XNZBbOXKCalg4za\nFznHhZtly7PxSXVs827Cc2UYF1yrnobEKsUB0asHHd9NDOPzdUeeSeo71Z5X\nr3AOz07OluDvgcNkhJp+HAE35fH8JveYH6EmXRsvTYN+hAIttX+qhAkZaU99\nJiyrWc/SN9O5Ij8YMZ1n9DiffLNbeeG4PCxupsDdDOXr2oHj1N7h4aeaKijb\nx/N7\r\n=Xsza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.39.0_1535391625979_0.9247147574298951","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/snackbar","version":"0.39.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e8c013a12495b5ab11cbd638c527b820581efcc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.39.1.tgz","fileCount":11,"integrity":"sha512-cvzu7eGJcs+taLO12QeTYMlQyYuWcsAftRc5ADbC1AF08mPjQXvlyJscSkzXZcnXvh1/jVB+r+iW9eHL3mAOmw==","signatures":[{"sig":"MEUCIQC63aCEv9JvJ7aniityCaylSPVogNpvX3h7MM8w/s+TjAIgceUz2qC7WRirIkxuboLQEz8VHqtF6ietEVVb71gElSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTWCRA9TVsSAnZWagAAAgMQAJJYkZqQ43DrwIp3bwzR\nP8Jt5ajE837iw3QJL1oF3R6jEtNOjSue2KW9GlFFgQb+qAU4Csh4x8z/Vsge\nTG/VaKTDE4vTA0XMrfVJtRtVo6ikctaaJld/sMiltRuEo4gw7uEbnzb9uo1P\nCFEmN/Ss9FyUyQENgcgzv1rcz6P+nHlqEts1JvXlq4HtJgy/8J/XM/WvaYi2\nMd44q2516LoeCxNLtyJqH8LJlM7o/VtvAqFYv2r/eT2R40OzLHH8L0KfB7et\n3Un+WsnQeesOxMxxdC7PZF51k0SoAX5YxD4lcXoPnalNC4j+xNlGnI2Ru8HL\nMCIXsVHpuq1Sksx/DkGDh6168XvpOEqAsuZflnkgq4IW1l2EWTAXwcLOyWGh\njtU7BWM1q/F76WI+Rdv9T9WvgzlLBXkdfkF8d7A6AnXU097oLMpMS5CMuhXe\naTVQ5KsNVa2Z/y8mzqeDvA2PVJeqKfFv5bIvRXTQv4VKrDJ0eErxVCE8mxpl\nHQ6RQ2+4mogyar5Pamm8ptWxnb8QI9gVr2lq3Ntk0mnFAJUJv+2omlxeZyFs\n+9lxu9y8Hy7pOdUXZCEpyGmEXFObVgDjb++waQqfqWRfJMbQGqdetMkmLJd2\noMmH8d6MHGFIuCCGoTAykWBuu9c+g3fJ+cEJxDrKLimtbr7TJisSf5Mm8A/+\ntOfT\r\n=vCDa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.39.1_1535751381412_0.493482180578388","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/snackbar","version":"0.40.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff8ba9025d028add7e322fd50cc0fc0e00d08e16","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.40.0.tgz","fileCount":11,"integrity":"sha512-sop2M0Zfm7oqU5Vn18UzK83ZUPiihSm2+O+TKWKE9Vkd6fcOHkJ0whDWfSkkKLClUjoOuC1Z4vstk6qGVkkYfw==","signatures":[{"sig":"MEUCIH/DPmxNifSEcsVispoA8vVOw10NxQCnLH4abVfjErdNAiEA5XmZHQ3Y/0bfLtKdkJ0Tv1/IbQjvQ0lVbzye9QV8QHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJ5CRA9TVsSAnZWagAAIL8P/1qceL1/xUaby6H0spcU\nNIYOjAA0Kf4wf9cGWFRk2vYD5sDBD8xY2qtj+L4N6bRgZsQ1bh1qag0MnUv0\n3yZ2sLKSApSJ5Q61Gq+HT56F1k+wy4KKs0BF8H9L4EAMLAYgbq9HDc3wjsVA\nl1tEMwzEjk5plusqXt28ZxFwOoqUzuhEU77y87GLyAfx5hluIvg/eLNCrf9O\niPLQvuq40dmFFPcO32CTdxdtP0wFPzOzPShDSwGhMpCfzJXg7ddJGztcJAHZ\nbUfdI0KMsUo2pP9V/zdyUDahn2SEAaG3xYs0OeGnQxh5sDYOJd8WPy5OwqMG\nXHXXvLzdFzW0rGK2Qekz6/cRrJ2KNNRGPLEVbCR/9S08dmWDrF8vtehhnsrF\nE9c3EDGJS8QkmfEcWCHO/pltvjsUmLBhAa8AkitDgLtLporhFxoV39U/Ee45\njbw7WIdOsfPr7wPh+67eVGdrujCsAZdofTLba+37bGI2w33Rpjx6Qa5XLQBZ\n2Msv9jKJcs8dO02SD6qFC1g1MKKI6lCcdM43NHdugkBOX+Z9BOMJAd1Jz1Ke\n1PDnWqM8yY6Lzmn7qgR31CeYHz3mVkJ3Aj/eQaQh5hs7TmlF9rq7BHlXGbdF\n7aNt1/SJNRj5xceyIAt59tjrsbwrIxGc0E1duD/1pIsGRQKZ/vP/geTzL64H\nu6Ki\r\n=BQqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.40.0_1537819256804_0.6690082674332947","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/snackbar","version":"0.40.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1af2dfcb766686daa2d9b41f2b20579ae6c26b54","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.40.1.tgz","fileCount":11,"integrity":"sha512-fNK5Vijt7zJ5+qoRwsOUjBzc66saKIrfoBANY8BBrZsGzfHyzyQmkItlF5O0nQFhGFEAoA8oVhKbLDIpJ+Hb7g==","signatures":[{"sig":"MEUCIQCmCb7ht2fyAhMCVgfd8ABQj+mczbUqoUhUV1eZXSNWaAIgDRiX/JznqdfbfQX5T/hfTRV6asPA/qDYZk3C6KTueug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8P/CRA9TVsSAnZWagAAkqkP/3BrJ4Xf6+3QBcdOK3zM\nX5T1/A4UIUAIaVt7oeFmu+Lm58/GzYEhNia9D6TZ5dTOk9t13hFbTN+R6uYc\nQE3qGyqjHixltAX5142FeOganvPRrlBlt7OqAOJvtn/lL9NHJPVnQC6TxDjs\n8oNv0xt9WiObq+iMSIXMwcCb0Sr+QqUWUPSqYrJ+5X5Dov0tUlzi2Y7VMBlh\neNBkSu5PzZTGuwdHfpsp+ieRzGhabEmwg2U0RZvaOvHcBHrxwP1Fo6fmHmKD\nnOdbTa63yQRosA1Qr+QOy32KmXbouNib0sd4J4U6rxDzg8zThM+XL7aQGOGS\ncUwymhIQiMwmAq9qnhkuL9tSequke6J6pGPT7Dc6y/fiGt1yIDW9i5KzUx2u\nvUFYFEGGU2hRg4L+OW4Jgv71zRBF+UGL5INpbV73QQRjPS1We/umil7tjVmr\nGMynO61bQQ8xMt0+bLvBYXAoZVk4UAoD8v5X9XTAN0CnqaNyeK8XyTY/HtDz\nH60ufD+oB1b9d2uaIDVMv52rlhD3MCuO1HerFBxaJmZDTdbTm7Z8c5n7nb8v\ng5c9ZUeXKgM+EFc1iBLfO519c22qkJ4/NHycyuD8ueEffCMuom1Ysr9Lg/xp\nLeCDHHx28W47OU2vzy6yUPjE3uMAWjT4/hpVVMhwQztGx4PHh93jkih1J9iE\n1hhK\r\n=eQ4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/animation":"^0.40.1","@material/typography":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.40.1_1539032063058_0.3954510780329603","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/snackbar","version":"0.41.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"011528205d7d2f62fae9452099af5186dfb1a810","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.41.0.tgz","fileCount":11,"integrity":"sha512-z44BspVFD4B3p651sF0sHYCdQXNdPJR/MkHkrHT8bXnEql7B8qpBsGRKgnPzm1kbAjG5jPkdbbwhbH04WR/0IQ==","signatures":[{"sig":"MEUCIQDMMhBEXMu+gLlfNMfIV4BThSgBuXKciklFd1WdNKbWCAIgdQoHsYul0UT9PHg09cbIFOl9XGkBJq6QEtjWylhb0D4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vmCRA9TVsSAnZWagAAYEYQAJYSDn0rQho+BELrv4A8\npBzR65c9ckVjDXp3IRAQlUT49cYXatOL52OqkHwI9D10eExzzXMucIcYeZte\ncQJ7Zg8B7iMWEXKGVxX9502zQPPDYOSvXCwoWbkD2XxG9vqZHhpRfrY1xAKl\noCMKCmGqpec4hQgYvh2tDqiDMpkyUNWOkLO62pfalizLszu7/fXWFD37yMM7\nXeve3L09ykS9y6lOrov5CmCseUFzk8WbFnV302303zdshBzCzRZkI1bVxHiJ\noJWqzbRtEW+Tx786Kj1EPzNWiR4b5FJETJXXlIxsSjzrVBeBlQHdqdMaVZb9\nJYoEWGIEyiWQ8S4KwoUAPUGZ+FezwO9z58MU8qffjXPvM2ZY5sJn4cloncv+\n+UUawJQcot2SRhf1sX5IP5/KHxBE4/RkAKGY8RZAKLXLBSqiSvDbQtIRjlP1\nz2M2Rx+kddL9L9NW94A0TGHgUc1e7Oyp76GY3bL9r6Ft6JFLD/GtmXMPGmRd\nSfadlYLUlzVS+DxHLYfh35gKiQu6zaAp9zawCmuXtwIy87OWcAEjrVLh5T5X\nrcWfbPTyCxx8A7X7Bw3qut5+tdHRrzd+qv/FzOqsn551saVTcsgmNzajl4Aj\nxJQXQiNHgvk/tfAGK45UpqjjwKqUfkY+7R1EU0zhjVNXb5D8Lz+yjE3SkPn6\n0WNB\r\n=rn0V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/typography":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.41.0_1540844517940_0.5311348483858396","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/snackbar","version":"0.42.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d62bd8a950484397a238f21addfc877e6a8c7b3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.42.0.tgz","fileCount":11,"integrity":"sha512-P2prZXj4ZXLhA6qG45sfDFeqDut1mgr8pwlkih0mh3q0aaTGHFUX0f5PCC13KmxHiIHjmkiZZSHapoj6XYrAEw==","signatures":[{"sig":"MEUCIQCMxAutN/pexQAUAABMEXk4lDt3bLpFKQNB65bYzknQ4QIgPiw5iAHHHw65V5N9WDeddujFBU6qp01DkOvz2tfG/Qg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXFCRA9TVsSAnZWagAAfHcP/AtALP/7ZqJ79t7wBvTd\n5AJbvwrLwGEGJTqYtH5dBbDYihFnnRqBKhaREwZsCnzyBlagkzAlpfSBny8I\nu5q0qEc6xdNKtQt49hsXPKWLocd9Nm5LgButlACpEpdVn1WyHEBvEl0k/Vih\n7KCQUXGBXk3Btd77v/Nin+bV2RN1xDyk6i0H1Z+gEeRbe4K4/yt+nhKk12gU\nS5FHxXzZ6V6gXdpouts+re4Pn3joh5cKYo5iyckc7JIaW2y6D7ai42uuG9u9\nzJo4UZTbJBgtuc9hHbbJsjUJlr2NM0HN9x+xU1WvgRftygLeDQU9K7z+6HAe\nyOLQDk7k0BQ5Kfod54x++/ZOTwEhx6emPNuJFhbinhv4bQ1bhrMnjYJ812/N\nKIZL1htg2bEs8ljR1RKuZjbdXoYN01ar8NAFEaLQSm8mg13oMfBaTevVax7F\nO7mhmTzVBZVvbKlL6obcCnkcxRmwYCTYY1SOPDi7G8sl0EdzNU+Axsiyc2h3\nky/KIxZVVgivZ6mJ79cIm7o5VMZAEivsuxE32yOeh7dydOUNrHha/m9rfPnN\nB/84a34hNuPFFXJahqI4AtNuDqea+h/SFS6dCXeQNfR1b5fx67ywfVUY+nIc\n3+6lC0cXbIfcVEKKCQelj9PLEi4RvTVvsFBEHK3HS4KeQkobx9ouqthOrVLn\n0da9\r\n=GfiK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/typography":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.42.0_1543964100833_0.789560823554686","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/snackbar","version":"0.43.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada324f959c259581206fbd01b1e0dd0738c9b41","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.43.0.tgz","fileCount":18,"integrity":"sha512-jmyQSDRLHeZWitrQJM26gySxBeY47zuAyouVsdm0HioYiElQWsn2LJLvl74kLwYByHtK+sFNkcJkKUh+Xm36OQ==","signatures":[{"sig":"MEYCIQCtfrpCIUBDOGqIYS2H4/sYRpKfo1kx5WSHecBFvYFG0wIhAKU4vLULvDwnq5hmfMJHqc60YRItCN2AL0habxJ6othP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61VCRA9TVsSAnZWagAAarUQAJALYiuv8ZHEcjOjh9aT\n10S03vRCZtLzTRn4hfzsm1KHXS8+uvwN4JhWpGO2W+8Jxsx6eFRGr+27iya9\noSYXNttCFbTPX+aquOXljv9k9IydRR2NyAHB99rQrjC+QvJHk+tueW8gM6KO\noVgCxucGmabw30MKvvGB5bzXMYsmevq0Iy0qW9P3d0kOiu9052mZoLeRXU4f\npfL5tWX2eiNdoBxiUni6ySQG+SsU82qmDln0n4Rb8IQO59ZwKStSkx8YYTF/\npMFuWtig9zoYqN6yt0Sq2DOuDQZ8Ize6haq95177J/o0UBZHzOCeiUVZ7Hze\n3sv9UF4cUPl+qZ3DmRwOjuVbD5Na28F7Dsa8a80bagAuzAV9LMDAjHHeTyI5\niZ7LLiraK5eO6gxlJzB/VsKbyqxSlrz63FCr+vRZMDZlL3eY73AUFUEecOPB\npf72/qdWgOhfqM189uLxFlDO4uBDQZ/fNxoxwTt9gsrGm+HxIN3wJEJO7CNK\nlbczr7qrbpvUm2lgmgyg/E08CNgB1w1V43VCng/OEUOja+1NYZti6M5s2SUC\n/SSNBzdH/kBvqFE0KcF4wLdP7vEMf0+ikRCHJhuhzhVfZvB7uVeL7+Ii5vxD\nMwJlQebrpOrsy34PVFhXS+QDpUfee9c+eEWL44DUIDMvl76LJdC5ttJA/V6h\n/YVm\r\n=PP+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/dom":"^0.41.0","@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/button":"^0.43.0","@material/ripple":"^0.43.0","@material/animation":"^0.41.0","@material/typography":"^0.43.0","@material/icon-button":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.43.0_1546890580837_0.7571252426117916","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/snackbar","version":"0.44.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d98672b849f5f295e4fac2d474a9c80f11945518","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.44.0.tgz","fileCount":18,"integrity":"sha512-KhCrmJm8Zu/ZZPuRCGfMKsZ0vudINlNgTjlOau0kQ/UgR1xBUvLOE8NjyXZr0RQz5obyW7xpyIWIpscn0IUeyw==","signatures":[{"sig":"MEUCIQDLNW4qih7Z61buuoffPXnmfmuGXBAo//3NTj5T1POFEAIgGalFvZMkyeDUhbW08OCRa0zPN8VKddbrNcW/YiJu5NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":408115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINoCRA9TVsSAnZWagAAt04QAJP/Zt80jZO9QDN8tUng\nH1zcsMFEHqCTqvgTIHS0V7RHzjdDkHWr4prSANbkjnPinS7AshzeV98YEMZM\nPQQ9RtMZdZTGHgNLGc35VoDZAoyr8QgE7Fp8EFzfrQgY5ZWBrdSvEMptUKO0\nyqflQOJ6RiEFYtXAtgbZOqaxUyypFOK/JgdKEd1onJhOfB/5A5X4DZRQPM98\nhNIB5kC/nSd3hj9rPBQIk8T2vzbMv4TpY0+sVe4coUE+B+Lxmgu7qSHBRRKh\njOhGGScO4XOn4ZfWTqhGCpwvtr0yhS/9koQjfq3ZHLI2tkYlpilbAgIfJxr1\niEc29ZiEvZKa7aWCGMMqk89yKgeU+pCr3RRYpR2SCZWkZUbi6zPd18YEwBu0\nSnkFDhswVYTc+MOnl/cOMh4El+OmX9M/gJN34GLdZte6/WXkYZxy/icgHTVJ\n2mPX6/cC7B3pL5Cv5xU2j5rhr2LCALSwM4Mt0HYPoeQJqm9dEjqEdTVYo+Ou\nRYWHQ/GqBpn1W+ngOhSYf3wr+iuJhJWhMxabMdMujxB+rmai2X72x6ZppFS9\ni2ThMGO2EpvqwLtaCo1vJzFdpWcD+FA/Itl9/0KVnv5AWRg9VuNqBzDPQW2i\npr2meRu7Z4OZRe+ZCiBTqUQa5ooKSJ1WCRvBF2GD0GwLoo/vk2nKeMDaIkQO\nzwhW\r\n=F7OK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/dom":"^0.41.0","@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/button":"^0.44.0","@material/ripple":"^0.44.0","@material/animation":"^0.41.0","@material/typography":"^0.44.0","@material/icon-button":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.44.0_1549304679973_0.984455163262459","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/snackbar","version":"0.44.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8548d7234230e2e56036a55a6c3e0b30d3d9b2eb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.44.1.tgz","fileCount":18,"integrity":"sha512-WfjYxBtNWK9RvnAxqjAuu/bMfpisgtM5tHHDMs2W/iiw9dIF4Z5HTKcQwSA040tSL0NxSBGAYvbDO68j+1WSEw==","signatures":[{"sig":"MEYCIQDE/BcA8OIBikNF9AIg9Q2LbBLZrpC7pDRTjWLDZrkchQIhAOgWRRiDB6qhrckw2kJjUEjuzvQGNKLZv3D2ErM4wEi4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":408115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIs4CRA9TVsSAnZWagAA4+AP/j6iAMTfB3/5VDhq6fnw\n1Mp4ZsyEErzUExw31ZoL7vJ2NlzKM/adrwhXvVvUHKZCrejs3fU8V+Z2B3Mk\n0d/fyxaFx8/qhqe3Mn+12YFlWupRlPzgeR9oWoGLZzK6O2zmq8uFGrAHnRDB\nGYVEWwSe7csRZsYViht89CQ1rAHJPbPKeUT0MhkkrT1SW2EN1Hg+EsT5AvGL\nT9ToqjTxr7eR0l29rr5eVfqAeS9rGSDYPxasdJNfIO6X6ix+Ltz7PurbGjpm\nxZiw1m8K9q5R9nMunzlD2LcxDORv2sFISAemoRi0LmEkjl1fxrFSX4a6alyX\nPChnIguUI4R2DtaHbxI5EgTZo5t0Y4jMguYzDl6fJE5+LBNNEJnGwanZUwaa\n69HgmielQFcb5TPDblMkg6hdARDW9DqhG2qiir68UtxVFU/Q1ksJM7AQLz2C\nk+K1jxfkYu/9GyVSYbkcyrDFKFwV5yhoVyxM/qyGDmL190jK6E3zYV7DUWu1\nenVDq9H7iaksbBJxfpf4nZND1b/xkC0hlopF9aUWfe1yFqVjIaPpEWdFtbQl\nWi1v8mZobCGrDYHjfF6IhNW64EQG4ZZ1hvUg3/tWnz/o+W+m6/nv4bwmyOBe\ne6QLUDxHeonCdi5Tj41+QcOOBZnmAYXO1pFBrpGgSoHbUPn38y++ka9JUOaa\nr39G\r\n=1sW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web snackbar component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/dom":"^0.41.0","@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.44.1","@material/theme":"^0.43.0","@material/button":"^0.44.1","@material/ripple":"^0.44.1","@material/animation":"^0.41.0","@material/typography":"^0.44.1","@material/icon-button":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_0.44.1_1550617400058_0.9894764538368965","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/snackbar","version":"1.0.0-0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4007cc718fe54ba60ad00e10f04da1c7f8c7822b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-1.0.0-0.tgz","fileCount":35,"integrity":"sha512-Rm/yuwDMohvjTvDK5ZOcmocLBW9C1PRM5nnBzWnIYBUBcfobsYumRA8k67NiFxX5PCrN4tRvn2CF3meltJf9ig==","signatures":[{"sig":"MEUCIQDATd0djssPs30VWzP+s+l3h6Audul7Od//UPw1LnTK9gIgdBh19eTh4HwnfACV1ycp81JWyQw60Qd0CuYBsYXb/VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdySHCRA9TVsSAnZWagAAbVkQAIjLHVnYZ024fPtJWG2U\nKG6h7AMHhPwVf7ca4Ee1r244AdlfP/n5u+jlhEkYWejU0H0GBLsK/d7AApP+\nwfo6Gd00gV0c1n4pntGvMbHNmaXbrd26oMqun5OB17jPTH3X9jLCP0NloEoP\nQ2+vU/cMzrbOf/hxBLMSLGD1eU1Ut/vZEfaeYMPwIb/yrsfPsX0yK9WnMIwf\nkJ6+U4wZcZjX5WmhUgZFGXlZ83zFlTfgjWoKd3Ah+vB5mFGCzuzdhxRWGZPp\n2LKx8j03dR2kczPQgXJqZk1lLBxb3kuStgXeBPrOndg8XevBNC4ZNLH5+jj8\nwSFF0pZQ+Q7Rvp9AEIzWXCokfvmngK4knrikv0+gJyZRPobtqb6hdHLcLNnt\nIaZdMbvUIRoOkDKsXE2CuU29pPyhnx4ZmeT7ZAmTWIkTWQcNyxEFgW7Nfyg2\nU3QXyDCDA20TvQJMoxrluVAbb1As3Blm9iFBgDDAAp1CQjm/i0trjpykuk+/\nH60QtuclHBYWmrJfk9oRB1FgbjqPbOkD7Hltl0cJN8KEvJQfLB6sqHeikdCh\n3FtB3UE2zcFGQyQT4G9vLNOgQaZF5hVXLgstZQNdSenbVQgBjkZRBaO+1694\nxcBhTTusynhnVcW54orrUjRKhVScPcro+DtR/PR89ooX4JxGcjcpPHrlCHrU\nHl5C\r\n=WqMD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-0","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/shape":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/button":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/typography":"^1.0.0-0","@material/icon-button":"^1.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_1.0.0-0_1551312005799_0.2760006881014565","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/snackbar","version":"1.0.0-1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26fe8bdda9f0322867f9fa83b65644c274774ee8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-1.0.0-1.tgz","fileCount":35,"integrity":"sha512-q11iFZsaUbRaKqUsuvln3hbNm/sdVurmOfGYSXvQhVW8pLDIORZcJ7fo5M8swsoxGu9c04G+cyBAxlbYJQ5JLA==","signatures":[{"sig":"MEQCIBGDkz1f7RtUJWYMHPfVx571k7C8K7+I0xjVSuHrYYmJAiBaqffXn4g0RJae5XP8mwCAhoi4WjDzAx3yZ4xCNz8Jpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXfCRA9TVsSAnZWagAAJjAP/1IKjKgdS/lubln3WzOB\nakQYUkodaknXY6D1z1AV1G/I+btJHOzAW032djazTQkQdV7Mr1wvqW2W+0S5\nvlBFltOpqmu7Bn2w0ZslexvZzuqgl8C7ANJg7+ByyTUQA3raTJHD2/xT9pqd\niM9E2pQpV/WySPTFqfaBshe73l4ZJPSWFt6wZkfM31Wt9bJJfTys/7kTH1X3\nkWV9zLZusTHOeDqH5rqi9lzHiy8MqFIgwnXGwGD+FUufydeclHWOcPcLoR0k\n8UJtXVuSoGQ2TLBRh+5a+8JCOkzeskPIvkueJtMIjj9HG1o4kmwGD+xOcznV\nU/rheeeWEszw5a0a13Jye7XU9NeT1eOifAKpNm5iC0qk+l7PgBzPY5eVahu2\nMx3btafAcPghvbD9WYYoPPTXfMa2WL3ATkxVpFhoEwnAkA/9UT3ecS2PZjgs\nWB1EqSLSLookgAPXU1XpiTf6BR+V+slUPw2EQBztfRgfbujJ0Dkow/M+Uq/w\nOmgMoMkG6IAxzrk7IbRSbJqmjj9Y71FNSuuElg6dcY7K2Co3Pa3nnDtL1/0G\nKkWCoUj/6ea4p8fCE3CKh1cheZHknHi94ys8rKxJGAqgveeTRe72UgTmGyX2\nPNABpHzqQ8X7bzyVl5tOdanzPOdfxguT4za0En4X2By8RsQOFYv4G2xoLQiH\nEX12\r\n=FX7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-1","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/button":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/typography":"^1.0.0-1","@material/icon-button":"^1.0.0-1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_1.0.0-1_1551742430516_0.2576295760049838","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/snackbar","version":"1.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e9496d0e4de90968d8bafc0cddb9b662be4bdd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-1.0.0.tgz","fileCount":35,"integrity":"sha512-w+cK2zq4KJ/aAPkxQR6zRVoBU1TCdw1qNRwybKKTsPP6NmZ7UZisb/HJUrb43kh+xhPxYmgyCo320+VoAz3wcg==","signatures":[{"sig":"MEUCIDb3dYfXe2Vrf8H/DDNDEAr4JifXmu+kEiyY+7641cgKAiEA3nESfuT+qA9ggKL1Q/eyLMYC885WTFOUwt0rwz+tadQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbZCRA9TVsSAnZWagAAGjoP/it9KxOrgWy6nXgkmiDh\nBnuXFuE8C/BA74ph2DZ+XJozLpCyIo7RKdk/Vu8TfME2pTm5AdwLgU0jRcY8\nyjHR066HHHkejOc8AR/pRHxLFodggyksr5uLz3Tb6Zeb1x8JuxTvlEteoEs3\nTmUTqUOBFyQdsfht0DqIYUl15JqXCXO8Tkw93m95z7R5963tZZWQS0/CEWnC\nONE36yIzTzn/jrNuCs/AxMnEXJBhJl0F2MbDSxcShPMwCKAYtnhHT6RA5CBg\n+fne+nNey87yKdX63hu1T1MMtEvCBWVqUuCHmzwMPJE4YsiA9VGuK8yAwaz0\nFAWHk6l/Yf3bKWH5dBjWY0kDam0ozuUQT1sNF6pdd65qedR/bD1orwJ1mg74\nwXMr6zkFCFHoOdOafaHn8zGesr/dLy29M+QC/U9Xj6vYCaMFs2S1WpMrFVCW\nf/xB7UWIytPuNu2wkbSwthHKfuVNyIlM6rPBOyE7Dc42AtggJ2nDtpuuHKcf\nxK2238e+jCBavzJW95dUwiU+KKTe6Si3U6P+8NxBNxCkjqG/VWbXAjq94J8H\nHT46qPBPiryOY9I7zGXbq5TYdmeBh1pHovR6afKlCv0bS214DxumZ+uGEmr/\nSV1R5KnGFUW5mqqFgHdxlp9lmmbTvRN8p4+YoVakJmEmqdm9xuE5n8PlKOQ0\n3FtE\r\n=TQ2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/button":"^1.0.0","@material/ripple":"^1.0.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0","@material/icon-button":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_1.0.0_1551906520991_0.583556022313698","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/snackbar","version":"1.0.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@1.0.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6406cace0b7d44c210ec8ae71ff2c17097699161","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-1.0.1.tgz","fileCount":35,"integrity":"sha512-Gts1N3DA7uEac7JZ1kNwTN+ljgrMDzVGgLAwgcPFSssndW08GSkmZSAko8Lk0Zb4hDY90WtI4jPwuzekixIrWw==","signatures":[{"sig":"MEQCIE6UlhpshFv+gzEtAZkJQARLoZuO0WtkVtc0UnMi6pnJAiBA4IRnyh5unc1Zf7FJx72AQrgS8Pyy9fpnPEab95vp1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtw7CRA9TVsSAnZWagAAu50P+weYwtrVe+0A9TrtzcGJ\nf0h1hsbknX6pLjjyulltQ7Mlt3S0SA1mFRpPHcfRxDc6G6DHH1OOzM6/NgHX\niCB22qK530O5I+OjLjYBAcGpBH2WKbQ2xyWjAMShofnMOf7j2RNr2pwMnWE6\nd1AkfSjk2md4LUiC1Lh4P/26E8DFmeHJlWEWumOaypIXUIk/SAV1QAxY3zSQ\nBW/FHxabWJR2g3fQXGlDMReP+y/n0xZkrrqCh3kTBgnm5Poh53pRkLF9uxSf\nTsahZZyustm2XAZTustvPPJ4HcY/WRoXqhWpE+QUnpFcbAHhnWuw2utOzVV1\nb+qZBLiEovcru/LphbEDC7PTgNiQ33IfyvkBseyC7tcpQZJUTIJZiCuG3AoO\nQWDSNWuVhejypZgq5ULrsOPYVuMeHGDkEfq2aThxtcxVAa3S5uyIPiWmFFj/\nwJkBe0Ff/MJz6OVkua0Fy0jZ89WLbTKwZ6dYOJuFkjs4km0+fWdd7CGkHiGo\nOtYLuiqaiNVzevu+Wczg5PeXGusRP0viKB9b0g3RWCwjd1nrW1FqXnJTxV2W\nbAbtJRcN3mzAU97e/41z/eDV9+i7j/XHvZPjG4dJG+Hq6atQO6QVrzZfgRep\nQe+TZsyfQyO0ikacMTgyQtjuG7tGknC95xFd7lNyzsRmoJSWZAzHfI1OBLEq\n0Taa\r\n=UeZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/button":"^1.0.1","@material/ripple":"^1.0.1","@material/animation":"^1.0.0","@material/typography":"^1.0.0","@material/icon-button":"^1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_1.0.1_1552342074915_0.7013290113257638","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/snackbar","version":"1.1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a7886f4d76903abbd0f0f16db3374c4a27e7d97","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-1.1.0.tgz","fileCount":35,"integrity":"sha512-gPTvAg/Djzz2FHVruGNvdvOkNoeZPctc1hasksBmJPHhQ0nQtc3JsRPfNTLAy32k8aF2+JlrEa1YGMAnltkuPA==","signatures":[{"sig":"MEYCIQDN2uOO6URg97umFkLjN5llm9wBXuC+XOI229gyfz+3bgIhAPNNBGLIVPLqQcbyaIX38lW23+qrEnrHDgRyHM3izp8C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzhCRA9TVsSAnZWagAAFYAP+QFeqcs/4kxDNhxhYp3n\noOhpB+Y2ZwL3DX+b4+63iegMZLVx8DijN5OSuRJvwkLo6aEvTCm4l836Csv1\nxfFf+CZ78ESg0ATCthCJhC5FdC1WVfUdJsWwwnOk2wCEMJk0QtBCYuZl1zzT\n4bfFQyFba4Cm28M4st0jGwsmRvm5od7O+YQCrS/TuHkXgaJA31b2FHBbzE6M\nKpd8hFQDgV14nDEep+s7oPaNya3PIVID3atQ4wmVyN1Ft5fMVw3TJHf3H+ht\nkqvfsaXbWz/ZqW4pDOvYsFbhzZJ8/UQ169Dvx8ju4HkJeamLuLDvrCYLstOp\nmHU/csG/q0udCpgWTFmAAN/SbrAT05/MKS0vfcENBlDBcjA9JnbwMnvakoUU\nwltp1Rc59aCC6utVnXU0M0fJVqvj50vJzrdw6KdOxd6ir9fgDqvI4N8Mr8h6\ns2drZs8vL/NAMs+ObMlSp2EkwcKXRTUkSrmHOXcV+TH0TR6rf3PNU2F8ScgV\nJUNTy+NRUfB9dU3FrSP85hfJIVMrZ8M4IoN+TE5XJqRdqbiJOG33sRP7bs/T\nE4IEKD1lzeHKPUiPUntyUoIZDWdfwwiPrhVMGxgL2WlqVx7P+x4bXd6lh403\n2slYCui72DwN5COoPO6AGJZraz6doS2NBYqYTkvYwa9E/5djF40SrbJdK9fr\nK2+/\r\n=10RC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.1.0","@material/button":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0","@material/icon-button":"^1.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_1.1.0_1553628384489_0.4658039987860725","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/snackbar","version":"1.1.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@1.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6547ad3f2fa02d49753ceb925aaae0403d101d31","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-1.1.1.tgz","fileCount":35,"integrity":"sha512-pnWAJuEC+Q+EF95kjEnBuQu7P6hSWeJQ/R1ljd1VthUd87M/uBhqOcoXqGrPbFVYlOj01Fy5/wctf9wFIJdQiA==","signatures":[{"sig":"MEQCIDsIPU74uZ6H95viOr9t1UOloa5B1O26+rHz3ro+3ZJPAiA5CcCzNlNvR8s4gNjGgZNNSLGMKTVPpj+tWprByOkbGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uaCRA9TVsSAnZWagAAfRQQAJenrbpLDEhP7DPe0X74\n09eb7LR4nzUNQL3JjtpXoOBuO0c8HIBpPWntCImf+5cM/6yX56rm3Z1IOtm/\nMpOlhPSYcGwxQnhxpp90fVBSgSrVrByDgSzoXP2ohGT89dBv5inRwzwIMN9j\n3qa2eqs+GJwEZoPzjKjnyuKh15m2hdC/w46ErYm1uO976iqvRt8SumA8012C\nCY3nJ70jBMTAG5Bp9TLu17frdwWH5ludXHVSS7MyIvaZTh5TWOQvJhJkK1ah\nuN2fhGOVgdp1LO3Hf4Obdx/y1RbHdDzTqF0IDhnqEqvPiqZUEwwSAVuenSRC\nRV8CP7ozvuUBJm74FLD4434fD5IlKM9wb+4NNXNBNovdZxm2xmFF3Kk7Etkt\nOtNepDDYVatnlrC8sr94wkMUd0BJRl2TEf4LH39UBDfesNNgHGTkBnoA0MiE\njFb+s11s/7UjN55YsYHA8nxttj3dS4cbFFY95l3riFiJyxtW7oEjPuqsoQf6\njDsDW16sdrk/K+IpuBjuR40VxA2utBhXByWFQ/PEhhf3+WaFpMwe3+zMUQjV\nCQVPMdCRDCATnYU6m+bdTBAeeSf0tGzE414s3hF1Sn7A5/vLY95QCWrul99f\njNdkTomAACjTMWMYD1CG9pqDgiFSbllB1M5gwlO8GHvdnJuHRBo+ct6SM1f2\n5dJA\r\n=U4ZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/button":"^1.1.1","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0","@material/icon-button":"^1.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_1.1.1_1554754457711_0.5524821096935382","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/snackbar","version":"2.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@2.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4965daaf156d70ab7c4fd670d95b1f45c9b76ab","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-2.0.0.tgz","fileCount":35,"integrity":"sha512-DHtvJ2x3qW1HJeMVROSMFmZlw/2AlpLhs3dNctMWAaZDihP/Ql6HPjS/RY4ShZip/rzCDnSiB0yOgg9tWuyv+g==","signatures":[{"sig":"MEUCIQCbDQ05fQiZAOJIOznpl8JRDvjOG5CtGHIv/HrJlRuw5AIgBdG+cevIPsgVgYT1RC0DnLw52X5KVUdbW2QhXKL2h4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzcLCRA9TVsSAnZWagAAnJoP/0Kyk3rIi6kMvqfksQYl\nWYprfAMja58uuxXyCcVwT5XJ/mzJr7mInaZTLW9Dv2aW15VG61YdDUdA7rnt\nGL0RrW2wFSal3aETe/TQ57xdOpte+jiklQpJ5JiQShOzjm+BHjCwIPLCHWkO\ntzne+ioNqm/lswjtbIBrQes5gs27bNaj9T864yl4KZH4ozh2Uin9a4kzKK8/\no1bHQc2H9RLnIH5DSfOEEd8DAjfYtXzL4IjCVIIYTWgmLQufHB2OZ3QlHv1x\nHzmgni1ec0W0338xibUPf9r2XWPAoBTxxCW9IXceqbV4Y1dAygg7R+x5Q+Js\nshhW6B9Kv4E4m8cCWmcsH1p43bJZ3X75sMzOe1aJ16hUdf3pD70+kbd1WWsQ\nKOShNUS4rxpebx3rkZVBJdz1PrsZTA+pWdVoJ9ThMfbCIwiT+K3qElI5nEEU\n1AEWDSTj/RbbP24av92dGVBzTLEZFSLzPX0jLtbnJCK+/8E/uKN4P7hW594U\nvPzgeIAEbx61Vq9PbunGbtyBmDweZzOP9GxwbJoec31sLaGqrN/VXoZNMhox\nprIPPOUUD4yyqGlCeZ/lPE81y0XmYNGafp7eq+d+3d3ryM+hNP8lOHEt/LWd\nBpfdknWEnT825v4Arc/63y/kbrkelKFIqjjxLye0Wf65bizh3HZsan2XUSNK\nCfAR\r\n=ginV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/button":"^2.0.0","@material/ripple":"^2.0.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0","@material/icon-button":"^2.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_2.0.0_1556559627192_0.6613960814146618","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/snackbar","version":"2.1.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@2.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13a0bab265ae2d45cde415b11d384e04b717b683","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-2.1.1.tgz","fileCount":35,"integrity":"sha512-Ef7+FYaQ+s3E/DgQqVsU9Oe+hhU7fMiOZqKg3pLCqQSpTwrElJkgyVE0GDzu99rPfgfNfabBLRiouROjfMf7Cw==","signatures":[{"sig":"MEQCIAGK8EMd+6vjPwVhzhWngydUmVm6own18AxvqkYrd/AXAiAqaCTDiq0KgRkc93dCoS5pMw/Ni2qzHdcHi5aBW0oxMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQUCRA9TVsSAnZWagAAOA8P/R3p+7ltguOOq4DfXZIg\nOZhRPJKZpATKonzvBqIhZ8tG4bICgsDAhQvXUFYzDYkKj6c+OsPZgOvM4KUF\nA75nSRrhGojZZdUBHpCtGc9DKfK/PIdEbvHm53Sa0PlRY79b/Z+qKj1OFMnx\nrBZw7wpVQcUypCEAmWf3/CjqVSKkdV0SpjnznS1I0asvQOl+DiG+OkelUitk\nA89lC12I7Yxcvv2xIBKvBKDERjXzHp7rzjAz0C1+tGQaIenA8mwyrx9SrsCs\niJ9ZMw5xeYT5L/29u+ovS29fVhqlkmq4wfx59dt51HY8/iYc6eYOgUYqbA+m\nzZl4QyYhR1VZcocT5EP9grGJ+a2Aap1traU7qbp2oD/wQArJSz6ghhYNm+bX\neuxLXkSD3Y5MAm1wJ445wp58loqjTguUiRbH7/RARPXnq5f/JVkURyOqJxrW\nWSqDlID960kWHFJE21D9k0EqxoB13xHcDJ7ebUo9hRLLvXYHFZDSkiMR28vO\nc41rRjbIqW9Zyh/TUt+u5Sqosn9fe8c4X/RI5CyvdvkVahwcwAOf7EkLbSH2\n0ZonZLU1DpeXz7OZ6KmKZ/HGCPC+IZy/9DQJP/PFQ1AZleBbLlat2HH/ORky\nuahcZp090japNMnaq+wxPUF1OONH4GodCoQpxL2YwiioU+X+YaiMk5wecltI\nGDw2\r\n=6/a3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/button":"^2.1.1","@material/ripple":"^2.1.1","@material/animation":"^1.0.0","@material/typography":"^1.0.0","@material/icon-button":"^2.1.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_2.1.1_1557509139940_0.03905077650284117","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/snackbar","version":"2.3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e3700834373808eb8845c020de38054008447d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-2.3.0.tgz","fileCount":35,"integrity":"sha512-/ac/i6MXhIVvQAwJ20SCBFos2TZ66YUJRUfLH8C7UpH+ukbrZNohLwFzoVFOZtbGMOfS5jLzlVTI8LBNezng6Q==","signatures":[{"sig":"MEQCIBu0i6sWPRrEWnzTK5HbIvPnGq8ngsUsdxMGEm/YeZS9AiB3pPkfL+GGiNXeDTyTKmFeJd8Wqai/aVneHebWI898lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":468685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7acCCRA9TVsSAnZWagAA1XcP/29cxAMTqsv128LlgL5G\nC9BOAA88M90nyrgn7Ahb9JBeF95xArRDWhRSEWEJSDJf8nuBonRRukaDbsEC\nneXlWaC6f1Zs1ssPSceP9PF3aL6/CX/+doChVFwNJqbuRRpzKzUVGnVB8iAy\nqgZkfzmpoWooUb76SafLyxkO80lx4jpCr9TK3jKUD/8t3+0e6QLiwwrvW0nG\nVKvo4yNv0wqY2Ec/uAi9FC4pxcKdkYx6tzEZ1avnRs8TnEY9eM6NeZ1YgQ82\nzpQw1KTpw7egoLLbfs2LBRLFyYgLxDxK/tcmtojwOa/GuBe0xRXXmWVLtIn8\n+AwCd9yktIovwy37Xdy1l/fkxOTswQEM470Ajf88GeJ/kMaQkKQJJtMmNFt+\nTxnFKAErr7R+kqFrYpJiwb5Swbnxq2KiYlE0Ohy/IwM9l3HCU6qrjWi4r5OG\niBQOVl0iFdRxctRjSvbKt7I97zfCkkAFBLImxd0nmSzfkjRGrPxhVJNwtW71\nJjP8CUt5KX9pIvE7MB+s+nx+3PbMrUdlcJSZAtSjhb4+Q25scBmTI4nODBgM\nT4gBIGYhHR7X0W68iqTa7mBr/eL5mnzTIz3IJ5xR2dBKkJcFwdUrVsgrz+HU\nn8oNPS7MEc8TnExml4AI+K2LIk3sTs9Mol0fQ6JYmMves/JGcjVO37ZhORUk\nph3C\r\n=YhSi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/button":"^2.3.0","@material/ripple":"^2.3.0","@material/animation":"^1.0.0","@material/typography":"^2.3.0","@material/icon-button":"^2.3.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_2.3.0_1559078657758_0.2522151200199001","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/snackbar","version":"3.0.0-alpha.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b5ef7dab0d55b9e6f0acec91be506df26822bd1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-3.0.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-/WgEDEAox7fkRVKRepbr8CW8EuDjrfeqHcfmJ9rw5Ki1WdwakPqu5/ZmsuFlYoLWfS7/y6IPrnjdoatLiLogZA==","signatures":[{"sig":"MEQCIDKwZoF3STAxXF3ZXCnOmJSnod/VctPZC0mDqFYLloL0AiB4V1f0O8Lgb9+6OlhJ3R4nLuun7Vd3flF6k88xxCkjAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpyCRA9TVsSAnZWagAAXZsP/3ka55q92qNYUrSdDPzS\nPpYolREBV3dqZ9mvkCodGa1lfEW+jpXvTb7ZQPW2a7REHfuKDuZLRpUWo445\nOIYv/CVrNbZ44tgZLlSrNM9Vr2vh8uX9hsW/GMh7z1Q1n6/6WFslaQAW4Uxh\neEB9yKviaj84JPwxZNyXMXLfG9SauR5rn4oIDyu7pZtD3VR+0LCRZ7Q+yPKG\nKzv2/uUliuIKocpUwrExGASQgdo/4KUw6zGJCnUK4UKeb5wAbh+yQ5TIJ7oi\nbl35+sThZMnEngRB9DuhFywSEAg8niZlcwWX9az0QqeCNvDnLj1duSxWS3m8\nZzxe15giulIB9XOceYCkY8n5f3e4iGQK6Girx9h67hmCYqUuxtIh6C2e+8Zm\n+0gRHSpNQYSYOGzBsXWzype/Y3ytma7sLcxS1KVzfOf6coBermsaGLKRf+BE\nNFvglR5NRCEvlZaLtXCfS9ZZYJGHcLmeuAVRZo8qbZ80ntqTos3YxsFgEcFJ\n9FU7oN2/O4ZVZzWSRswb1fMa6OiXIaR1Z62ByDLrv57Vr41RTFrNyue67tjL\nbsgvNg0wiqWGerT/DJ8A2wzwENuVr72JCzNyh6Njlqvp9L5fsg4Z53fcBDXe\nkM0Xn2ykohqgMBmxS9P0fNBuXJ79d6sTrA8kfR5Hx8efUeSdmLlZM/m8ImgN\n7308\r\n=7qzy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/button":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.0","@material/icon-button":"^3.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_3.0.0-alpha.0_1560312433382_0.742249218985424","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/snackbar","version":"3.0.0-alpha.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54df28ea8cbea0fffa14e27f3881b2a0f58b2590","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-3.0.0-alpha.1.tgz","fileCount":36,"integrity":"sha512-C9Vjy90rR2a9ha0UxeK2tiUDHLyMFZU8l2yOScFS7jWEO7MpQhopl8mdUYxsXlH+KICdK0Ixu42oiDbeL5QdIg==","signatures":[{"sig":"MEUCIBgt5i7gXtRZRNiFuxny1Nunln8InpFttDm9gNyDgupyAiEAu7K1P+SkwsPM8eJl+T1CXsN3rFkQLo9zpcUnluP73zo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxICRA9TVsSAnZWagAATZQP/jPIB8aLHlDt44s2LBIs\nXHUfC0FsStK/D9FE9wNxmTxA4WCzscgA+9Pn9ljtBNX8oH5SgrVDUr14DpCz\nsm/8Bb1KxQgHzfWmq2aUD8EKMGxDUQuIDnlCrZ5O7UGPnepA0XX7o+K6s3j1\nYBfkexhNFRgAEhyHQEac9jeejsA2n5/Yr9Qd7vg22ZThPDpEFlEraEpe3Cf0\nlOoCjac2CEw1opUBr1YPQ1uCzlEFSyBf3KZh6Vowl2cBryYMylIuEQVi/S3s\ndJUi3jyQOpOAFpiqfTDJjmI8R0Wid/QGYUJpoAjeuyOHIWze0PvsiZgt6NDd\nlPnxUjVJlEcQ/Z1/ugfp32+J0sdJaBPkeqqyzn3GG6jI2+KjF2K6A6WHnAS2\nnRFEVbYeUOMrcb1tUJ1Rdu5BEEuflzWBmGveq5SQn6le/BG5AnmWJ8412fjx\nrdnFVCHJlySZ1jd9iNAdwtRecjWKfFDlz6Gmu72d+/d/VdqsB5NUihYRGSpx\ngJbkPl+fNCou36VacYi0ifPZKbAP44oE5mk1LHrm4oNk4k7/4xgpxq0L/OAv\nLKzBXAZvP9l46W/h46hmwmI1KGxWnTnr4eIABELTCsfqBhFrBkBPgUR0rRt+\nLWcoVMnecWtmQlca0P12/v5bJOMYoovWGM/Po9DnDQq0B6jcFKtokpmURib7\nCJSP\r\n=MDFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.1","@material/theme":"^3.0.0-alpha.1","@material/button":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.1","@material/icon-button":"^3.0.0-alpha.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_3.0.0-alpha.1_1560366151862_0.7076204645087931","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/snackbar","version":"3.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ee8cab099462533759df72530c67c329cef796","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-3.0.0.tgz","fileCount":37,"integrity":"sha512-ndEgWG6+ZJTiVP5ZU40FnWLGrIJ+nFaJVMnFsM+AF2BGk6+AjlRybngNGwbEk6UfHtTSoZLGuI7BJYemwGxQbQ==","signatures":[{"sig":"MEYCIQD6umJrF+4kGUvR/CPS0rMYbER63KutOOzEJ3FoytIdDgIhAKUt9uRdld9nsb4g6lE679zhLkdeMzQW77IxmuUByaFj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/8CRA9TVsSAnZWagAAOPgQAKTabxgEMUcBKWw4D6Ul\n0QzzN12g8Qdz5//2XeOA61SsVM0nm+qI5lJQDoMqzIDyyzPQclwC4L95/zjV\nFLZBudykgqYbSlZRLKVg0KWDndh4nI40L/1oDmat4tYUqF7WzH1TdvZTepXG\nUDSeFwISaVoTPMIyL/0NU4w8MnjYjhqbzpqAybiS8fDj54SEm1GTQfe4WfIe\nGj06AX+KOSIWvUkp1Ex2lEsd07VK0iCa3hpuFvfvh2rSczDQlWmPXEo4zGeX\nBj/MV7y9LfJBYhUZH4tNhzI30S65PZBOGWFPDRez3SV8ARmpWz9CTMGbCgZU\nun165DkTM2aeHc/G2T4m6RnObBxMEXMTxrdTklQeW6jOSKk3B34s6A0lAJem\n87TC6kVgySfCGLX/3vSyoiyMB628eRi2AIxa1vUoKk1IM49pMUGHv7RW3+fs\ns5EKKR403lfRO6Hu7kA/mvIjgWQvp1KumRRAb9/+Ijbb2bC6VfNDdT73LSGx\nk2MMMlDqJLROmYmT56vJ9/fKKTqD+ILSeh64bEeH/MvxweUuPQqbR95nKkAJ\nQN51Oshqf9UQoLc/X9kxS6h4y64/KjT1YTKN9f80i4QQ2OfrmQnkU0Bmg2z2\nVv1wauVByPMrCTm9nQ8oLTCg6OxB8tZ9u2DzKcOqpmr3MFt/Jo8m2Wzu3ecm\ncLrP\r\n=ffyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.0.0","@material/button":"^3.0.0","@material/ripple":"^3.0.0","@material/animation":"^3.0.0","@material/typography":"^3.0.0","@material/icon-button":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_3.0.0_1561501692228_0.9115308487762903","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/snackbar","version":"3.1.0-alpha.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b754d06420c3582709b78419d6868f2f0a8d46c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-3.1.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-QbY+I7GwHHeDZjyEyA+Yc8/+KZ8vUUpJbl5aDwKLtJJqqaIQCAbxoVLT29GCRvsGPNoOUIIAXJXrbrWfygXisg==","signatures":[{"sig":"MEUCIB3UuQUkj8yLD7OKkewz2su8uOKLwKParCkHCLjbzIyqAiEA+ATmGLvSHD9HSNeZLY0ozcjxk0EBe+kjQANoj1gZl/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdE7CRA9TVsSAnZWagAAuKcQAJ82MrQFNvIMrhHvIDSB\nBxUK40EYniJkkcPgb5M50PiIlnhtdcc4WxygAkMP4tPIeW6K+4MpGOLBf68l\naiFtMcDL0qQjRUe+kZPx8uRFd1n83YcWPZXRvorUC0liZ/KegJ0hnfEiIA6F\nhFxCXFwqkx2rYCz8zPiSa3bBfxjB7zhW29QaHqeQNea/doBoA73HGTMU5PvB\n4xk4geNaUA26ZezmQZUn6ZWdwoG/LmniXup+oQ5MRaH5pK65/+Ia4ZJR6fpU\nAaESFu37QDgmz/hhC2WzUjY5qZ9E7C3kc5p1kYfEhuLdxv6Z9C86FWckOu/4\nZj/3gmcRW7L9o0ck3QQCqrn9+uBjBSRJKThLC33glIi97Qj1+jEmjpDjx2rR\nju5SfbC0pz3zwIRaYrMQ7KbPSfnmUodH9wtWgUUDnONKZT1y113/ZYrXAeI1\nkWDYDeKejHAPgxrBDJt2lFSRG9n+jQjtJ9AVhFWOUWStHAl2gndj3p6uru8Z\nAbsRrpfddZnBgNuJdeTqBLBi9WO5mPb9maDryTzmgP/GepAXUstBWqPOcSfK\nArq8TF0YR26sndjR8Gibn4meVM4936Fp8bqtFFLzu5JEtm625AohfxkaDzUE\nA/0GpnNpjAndQpC7xglW4BU7Gu/zgalesZi+muzbk3j4EKuxjtzFxENY3wvG\nGoey\r\n=w6F5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/button":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/typography":"^3.0.0","@material/icon-button":"^3.1.0-alpha.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_3.1.0-alpha.0_1563283770886_0.33336161165781286","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/snackbar","version":"3.1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec0a7e291cc550e5f30487972b56d4fe72daf0e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-3.1.0.tgz","fileCount":36,"integrity":"sha512-A+wRzcJbHLeroDUigiZppiCeXga2CK3oyQz1WUV1nf22q22dT0+pQVW+sm3ejjBY3fMpc3xOnjf8Yg/FAvfLPQ==","signatures":[{"sig":"MEYCIQDTczsbVR23QFpsG/Wg9FqyT7cC40uvZUG+8X8AU0C0QwIhANcdwXYv4orXjtfbJB5nOdI+aPahcH2DRKhQIluzTB/9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKUCRA9TVsSAnZWagAA6kMP/Rw53al8j7qWDoSFD09R\nnL3NGSnPnNwV0oEV5ODXOtCedpzbRu3NJ/ZQzEiVtwyGVMB4Ks6Wp66ecb6w\nuejnc4WdI3H/LN5MY1JXd+EuMrPs6Nfh5v5FgqPkgK2R1/FUKqAEPNthU8yU\nApvBo79G7yfRG0gj+NQOU00oD17xoW5WzHzihgHZdbwHdZFob41pJwns+a4u\nd0Se7zFsrLYYtFUwcJy0o8fW2+ErbSHiMeMLa/pIJYnPW41ENxslBgBQ6qtI\nMX0La/efJyeDgMJyHWIKPI/oNnJaJ2il1tUftGD4qqrl9+7Ms+SXDD30EqAL\nGFpC06NGSO2BgWrB8QYFKeHEiLrmPbU0vnNECoz9lVDYEU2Ohc+TunJODSy/\ni1WlwMjUBg/sYwt83hm71buUIZJQtduphybUbKumCPfANHHvHld6uJl1mR6H\niUONPdLW+R/z/xnnJSHVpwzlTYxX1nzkSgIiR5E3bgImKttB5+AOupdt8ItX\n4KgQ+Ap9NPyUEbpDP5IsMjiIGr6FerAjP79atn6aFOdjHJ6H01cR/XbVbO1m\ny2zm6dIFa3tC20HBtp7r3kDjjo4kqDP8aZqPUzDGwv5MeoQZCH4srkgr+iC1\nDZ3voScbJzcLXBCb5Lt4C6wx2kUc99T86m7uCGk/U9HBSi44hd6TClDSqQTE\nJtBK\r\n=oR09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/button":"^3.1.0","@material/ripple":"^3.1.0","@material/animation":"^3.1.0","@material/typography":"^3.1.0","@material/icon-button":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_3.1.0_1563832979696_0.8450311718894505","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/snackbar","version":"4.0.0-alpha.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72cf7f9ec2f16dfc9327783a4c0ea33d60c88f86","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-J8BcAgqSmi3LrnFe/NrOJPoAi1Pyc0UUMqoRdYE3m6FKBIJK8KTqtCA2sEWy14X1XDD7GKes2t3Mr7GHrfraGA==","signatures":[{"sig":"MEYCIQD2VIXALC2QUcfZ3yq+Ybq8HmWEHppsI/h32LG3SK/FhwIhAMPwjH+KiIPeB/80njgfsbrGk7cd+cWK/Ny0+STpwN/T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4lCRA9TVsSAnZWagAAgpkP/jkwXo7bnJtaxGJo19Tr\nZFPkS/nS4lzeCoIiJhdMKqS6r/P2rPcJuYHid+yV3rv5Qu7h8MUN3Krhw1/c\n/aR9v7dAFiBMRpddN9wDOS4k3+1VwhRxMG5o3j6bjz56W3uOoDtG4A17yLz3\ngpfgHopC1iETRZgM09cnuPp6u9sUswlnLo+jMIQY0ukHqPpIOahbyXZxGHbg\nHTeBv/wU6LPGltC7eUf0VhcXIPQCiHpslGPoOlf3jfIvY+kzp3reEB+qWVmY\nIaVLTRCa6i6L04JoUBvjFriNCLN9fF0VEIcCiBAbqabwkx1Mev+7zKSKtmGD\n/0JYSrZfKMVDf5Tm614b+0rwSgGAfUde1RZgAsG7VhBM8vb2Ocs2YwDTYmiM\njJuwAe7L9TYi0QT8LIY8MIZnjRZ/yVmj2sBz5eiYw8qNtZb5fQka7oP1m8AV\nqlNRUWIfmPpXuCa0ww5QsB0y5Yrwzqh5K7s+ZsMx4PfCAlJ+QFYvcPJN7uyT\niQn6UAhuGuJN/zXV4P+AhCXIxcTFDV9ZMCWzSFgZ86U4UcRYA6uDYwEGCENF\nxVe98QeXRQZFZz8kcGGT/e9aH8S9O1gX1o5dAeRURuXj4J43HVTM+xGVgbXP\nL54Gkk/rRvBEcABoDJKdEIn8QPy795vqP9OrIjBBVc5qjHzjkYYAQB2fovm3\nDygM\r\n=OUl7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-alpha.0","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/shape":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/button":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0","@material/icon-button":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-alpha.0_1565212196596_0.32695166173279744","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/snackbar","version":"4.0.0-canary.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ef75121c1f2390b99980fbb32045239f5338286","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.0.tgz","fileCount":36,"integrity":"sha512-ZKWUxNf/SNSwEVRYv2aui9KVQZhterlCHSlkxXChUhzT63ovMxp95lhxWmnCyxMH8xlMe/LXl1W5EULs6MdIuw==","signatures":[{"sig":"MEYCIQCWeKkDmxkBXXyAYioJytUyhkZVzAlCp02/9uE52dnUMgIhANqd4PbrXzEUXO8/hO9cXrZrloxmeFPp0CLQBzUnKr7W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEzCRA9TVsSAnZWagAAqJEP/0Ko3Arx5S0gZTKsgRkz\nKhgY1hNJtHdlvv60iTpBq+4nlaM4D2kDackXOKA/etIOx+5AM5dhqju2tKve\nxwgk2i8qVGSd5e9o3CmkNx5XRxryAurx8pFH7Y9J/2p4GGaoT/up3RB6c1kK\n13yD4dh/3sW+FipzvL8ILEyWyxI9urbCLgH1pzbcqyw1ARvqCYa/CfxDQLOr\nZJcEdPUCQwD2X7RG/fYY6z9Ld8sDCm6c/P2Jh9Gy44Q/3Y5jBU4RVEH76PcH\nfPexAeZNYhq7qmvZv8TuYIYuTexPy8CoY0OsH7NvY+pHuC7SQ088VKnfrnAH\n/20OzOVHGS+PXmlslioDfhXXYblDXRvVkFobsakXgxcbhHbOTiHJYjF+alTp\n+5SKO8llIaQQ3Q6fuQadDvRVJmlNS2ptvIrmxhGmb0ueCjqkVGG62nk5IAsF\nmSc6tibLC1EbPrGXuv6BBiyCV4Isy1rJ2aAuaIwiU5o8kGa0NvCqif0hMoKW\nkFq4K3d+QuumXD9T7tLStThef5I8NJu+iOYNqxSdelwp1LM4Zmmcl7akJeiL\nowUjSrU1DcIKG2AXtuwux0c4tUU65FcE5nF7zYwNUvIUPZnjqXPM0speRypL\nHgOhG/h1EUWp4CPhNAOCWZiOygscFkw7DQGvXopq5ffwXTkE0Y3yfznK7lRp\nt55Y\r\n=gPp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.0","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/shape":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/button":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0","@material/icon-button":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.0_1567658290806_0.5519862367952177","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/snackbar","version":"4.0.0-canary.1","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c934ff7fa48d930365151f5479722068adb8c510","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.1.tgz","fileCount":36,"integrity":"sha512-alfQxBTSTuYXBcWrwdaTAb8Bd1RbGRupcYMPWfEtI3IuuCcCFKZ6inupTeo0R1XV+PldOG743msmRKH85gMeqQ==","signatures":[{"sig":"MEQCIEq6wePIgs+2RH94Pno1QCJ2MGljdYhvy29yikiwtdPcAiBDXzDN3U7n0rUbA2tIl6fRVQelVMr2dKD/G2s4vgMXJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQyCRA9TVsSAnZWagAAk90P/3C9DdVIUxtBXnUgSMxd\nbrL6pqoGb9tYsyZ+SZrl8GnufvpkM22GAtTr6Ca6TP/QPS3ifEhOGQj2kmfb\nE/DsaOYmgsslFFpo5W+PJ7FHM9iYM917gr5/3ARDQ88DVyzgQ5RjwnWdUlAq\nHvbRuwWPdklvlOy15YgVylcO2bhu4zm+hUBkYljz/Fk7Te0yMKhxRLNOuyLz\nFDy2+naqW6UzSoRvCz1fO5d+rNIiorYmg2MwZhlupLK9s48M1D6PFuHr0AAg\nj1B45R5mTo3F9C7I3WGocR/ud4fz/+Gt4vI9D6HFCfsxj8PLOAj7rKpiFfqD\nNZG/E9LhsHiwfvtt2FvUwoSNYA83FVh298RIFjipEil8Js5LsUNqeGjR+WeS\nypG36ZE6PjrcQsn7zm7JCGX/+IavWCUtwSQKWeKudXHa35g11Z6gzx3wbOSg\nW3p7qenvsbUK4os+NRQfeKF7azEhgra5gdNa12kUjCPof8bHWL8B10Egwd4n\nb+cfX9CscTXzTuiik8Ei84nnBxXXyX549dvgw7ZlQGER6YUF8Hfj/Rp859f5\ncHLjotR+WmbFFourlDNv7ULLCAdxWFm+/mHfb7RVplNbyw1tXmOcLZ1U6wpI\nHgyJXkfoi5w7jd9pRNvYiZBOsKQSlhwCRcJwRVvGuM9Q2qlY72i9BdA+6WEH\nMwfR\r\n=obxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/shape":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/button":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1","@material/icon-button":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.1_1568060465536_0.5290433161707384","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/snackbar","version":"3.2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca59459d18db2e5f79078554c09a813bca55bd16","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-3.2.0.tgz","fileCount":36,"integrity":"sha512-WVA+dJYbzDMlPpXCdkGEQqi1+tHqV8a9tKBYlr4Vy+3UUaEl6gIomRiWNnagoodhOwGQhyugCeLKHtmVn72IZA==","signatures":[{"sig":"MEUCIQD5jkapRCOwypTKYdN+Co61WvQN8fzIsbgxN2e0vXHYfwIgVnp/VWFwIdUoGXIK3+/htMPdtE4WogVQkdAtEHv6a38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":345921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5tCRA9TVsSAnZWagAAnc8P/iPFeUMdUftGO2GUN27H\nPdg+O2jufqQFug88229BMZiOWPHJevd5hms8CtYIExSIEgnY73rDHXnVHtsV\nXk8U9TGlBzJ+29Z1DNTum8JdADVvtdMc7aRuWBm8KLDK0OjMur3tDft2MCyZ\nKVYGPBsQZFGjYolSBcwMuFhBGrgrfCrMIL8aPEw8YKwd/i+XZKacorA7NIjS\nWTZ2DSnOIVhZ8/110ip4yRRjB3iLRHpH0KTBhaQOYvzs5wiPUYoQhBc1zp/3\nr2Tz6C3g1sAPwxaSGW0sEnyTsinXvn5Pifvh60v3PVcj7Da6Ll2LYg4boM4k\nnxSco03kLcTOJjPU74nYBiLpRKFNv4KG4kWOtMG8QF8essOkfCN3grBuZqhE\nknSfGwe8sEgBnHsFJnifkPqC85RPbr6u+zTb8t9EE9madYupPE/nF+0+LAJP\nhJ3Iaizcng7pQaejxHxYV8lpazLSgcP72KzTk8/WMwkvR42iHcN04Rfq2+vd\n5N1pdAeB6Pa+rGJjIxVGsDbsJcqm5FeQK4wjlba9oM2P1R4tCS/axXyoC9gd\nHXQavbQ2rMvjfBIRMCCPKeoNw/eeqx/8EXUIyb0krg+vbVo7LoKWEDQxDUR5\n0irKhO/OIAStUKVMqtY8r790/CkvMmkY5xbm+zs/VBv7VPwLw0+D946E3UF9\nn7fv\r\n=ABGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/button":"^3.2.0","@material/ripple":"^3.2.0","@material/animation":"^3.1.0","@material/typography":"^3.1.0","@material/icon-button":"^3.2.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_3.2.0_1568325228704_0.4403088067928391","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/snackbar","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c53dab32d2878f997345bcf99368dcb83509937","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.79d881baf.0.tgz","fileCount":36,"integrity":"sha512-gLrVC+l4/Xuu4QaBdV43OkHkvlVThn+hU2ZRDqGMxDuCauNhvP7eNyAnZWWD3VE9BkRMag0lpJwIYcAGAaeBLQ==","signatures":[{"sig":"MEUCIQCxib2XjgxSksLRWLkVYfIJHtaHBnt8iP+d1r5jh3o7RwIgBnKZHyYcV1acgLWs89jyZv4aypa2rhVmC7KQHHxES5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev1BCRA9TVsSAnZWagAAJyEQAKEM0ETZpQIu7kaOaQIs\n4Luw9EoDgLNvZlkxzFgPpy5NlLnd45adlpRAHvi5vSMJhsKN95kDqJ9Ssmat\nB5ZQHJCuXSCgKtReb8z87KllnkjtYA59WtyGLeG6yaBu4bPCl2y2emg59O/x\n2Z34nmnWC6G9BRDUOmnYj0vEsBuXT2R6CMGoBRLXNONpsmHPzBoVV8+mOzrC\nQ8neLJwgHcMN84l5QpbQt+coHEdkAomWd74KVQ713zwlC5nD5tn3UYvWtEIv\nOW1wG4MIjPW03nzS/loeXHX8YzcoA6tDinkmRABrKA+ABVHaSzFjro62ACuW\nwKAse/3vzFqrni7ucq35JAA0DJerXrwVV5LrTwUACPR520Rn1VYhxAoiGT3E\nVuG7Q+0H95YmsB9KXHeqtovDap1FpHSKOxW+pvu/G9MboUkuliVcsaX5kRTR\nkQi6gG/hJ3FVjVP93Jq8t3iBbfUuwf51zQEnFNDya+7Sn2DdfQyT11g+tfLj\nnYgo+ulwGraMAZvx82sjgZWoe7kAFS6MpI9/9PJWNSv6omVciTXZmFO9qeFc\nIzFhTe4o0iVkz6ieFaFXkrqUoubzRKsExsBnDUAAFJZJ4bqDaa0RXsUd0u49\nFw+ilxp6a0bm4sY8sznbYrpqsNDFfKJrwemlSFx0tYuP83AlHCkZl3CJTwSG\nYLcD\r\n=oHE0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.79d881baf.0","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/shape":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/button":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0","@material/icon-button":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.79d881baf.0_1568341313053_0.013815511337708974","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/snackbar","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b55f0bfb50e1913f96b1a650c97cad4ec3942b4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.e851d4f40.0.tgz","fileCount":36,"integrity":"sha512-8gIaKsFDYQ34eWrOPAAZCId7d45mApQmdHYjJ9Ou4EnCiE/C4Sw/xyeG+iv7iM51l8IKBBcYqPr72o6A/WAQrw==","signatures":[{"sig":"MEUCIH56/t22H1OdlsnicZegUEA/0nFjgLHoj0kB42FX2NLDAiEAsfl7EOtgyOyN03HptfZenwBoYFqv6qHDf253ipqliOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYQCRA9TVsSAnZWagAAkrIP/01G5XsNnfR8wcbXnBCB\nFaY+mIPyMkstYXEjoexbHOuzv0fUK0sGTaHmdvTo0704g1B0m4b+oGMLh2DP\n2OE7OE5hkWK+MmORh0jnRnI4EiogxNqgU6cUr8QUSYXzA3vlIEEqztJmy5Mm\nUV9xfeHVwb0QvnZ4UGQUfUD5lYzouHVApgTD2+Z6GIiN5ndvDwFXNfaAaNAp\ncEf7wpv63viGgGi2ex+aWXftd0pwb77aWLeGu/v73HjJWMW2V0AIhr+JeDa8\nEwvynz7z/k+IpTYIOyTRfwMbNzU6v9nD2I9ApaqPLbhzTSOiiIqqE9+GgYhg\n0DdUlobThhxAdeST0U9a6Uw6MGnmOBpCggxXPJbpqe5vkWfnRvQIlUB3/3o+\nD1c12umaiO2eh39PqG2EIx5hs7wKqdX9LP773pHWcev0TGL+a+Udp8Rwjnpp\nlA59FzuAw5lVydBf6yM0SLjNlGM+1AQiur/VaricQFSRoF3yQElQqpj9RmnI\nLx1fMYSgSRlOMWRZn5bDCXTAjiFH5X2E/qHSk3GHKTuMQES1QUenpFTnE1tj\nX4FNWL6Ysg9g9mpaoBpyLZS+YllLQ9HWDsbNrDEzEwa9bAV6bULIXwE/ko52\nuaAXe0DxV8f/yy+APiPllIyh/RAGazhyzT1sTxjvU1cCrFi1xMqeIqt6nwt/\nQdrA\r\n=PDMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the 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` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.e851d4f40.0","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/shape":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/button":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0","@material/icon-button":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.e851d4f40.0_1568347663685_0.39332059017855636","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/snackbar","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a1eb38e2eb67b1f5cba78e029f8364ed396fef3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.905884690.0.tgz","fileCount":36,"integrity":"sha512-VW91gl4TfEAsLcvb6TWyVnuDFlSI6AafZ2JF0WLJG70KHnPm960VHa0zvy3atvz/Viwxpqv4Qd0XWcyxao7mxQ==","signatures":[{"sig":"MEQCIGKxvjLbd8EQelJNe2S2k28M3GWl2hhdtN7bMLg9uFaTAiBz+1FJRePuPvFBD2nWKUkeZAA7yvW1JJqv206V+PYLFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9NCRA9TVsSAnZWagAAP7QQAJMou/Oz1w9sla+LqN5t\nTTEdE+JyvS7T+89BPLuhkaHcG5nU7Vh8UvQUCPoI2JXa4hunjxFYPaRlz5ZK\nVVfxJo+gZNz3u8tXZkz+4bIw2OxEpJdhd4Lnbka61d8tiq/49BrOPCvkD4n9\nnJRLR8oStt75E3gPArNPJzW+Oq46E/KdpEdr/ptIDtsdCGBlJlRluybsqxgD\nmbDKaakjJiWDYOLizLIDATiH4tQKdg/+n2k03Gvsumu68CIWQSjmuTbqICRI\nHmHrXHziK9t+z8TeWUGcbflUzSv4ZREQW/CrPVzZNd0oXXuPP4n4qSpG5MjU\nyRct+GqMA+4TVZ6VsEvtafBtKp554xrS7E2ZkOUSbo51MISQKhaTFc5uxxm3\n6SvCkdbBvcm6jYqfc6TlrYQ2WRGNHIXDI03awuNJXguf/d1LOmmGkkEVrEQA\n2SW7HvAginukl+h3ReH3uIWQZWbi9q2N2R5KqxVScAtl/A506c83w6Gbzwtl\nelBYoamUS0EtPqFZU59vQwDs4ut1pRQ5CbRyxEQZQRSqoMAXjPdikO2xOlvR\n1bP1fpA/5bqAJ66o6YnOhHObmGv0x1Wj/c//KQnoEOxtWV2xAdL7WcETHqfa\nHA1PSfi0OdzaDjBKU1fDbuc0pEGfXModCm9+2fRtr8FfFzRxqAAerEKITAKG\nGmai\r\n=FWP5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.905884690.0","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/shape":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/button":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","@material/icon-button":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.905884690.0_1568677708483_0.5906588536729875","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/snackbar","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7779c5aa79a4a0347f328e16e61f4d7569b07db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.199534d61.0.tgz","fileCount":36,"integrity":"sha512-mIwVUqS4Wd10HOI17LyeI4a4HPzZFJzeDkNWPEH7uNkeRtugowGTWpv2s6beSGqAxicu3+EY2lfQirU5gc7Fwg==","signatures":[{"sig":"MEQCIAKRfS5wrWt4FDqquG/3uTpWq5PGyT3CivAbK3+wEyHGAiB3cMN1CiES2/oiWnESDpj+M8+4igp3ePhT2dkAvs2pkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlvGCRA9TVsSAnZWagAARDQP/RtzQez8CbLKblr64Ybp\nvsrzKdSqYYW2y9NDvhUDbY4LNw6LOi7cdcR7qZoRwdWR9cbkA9tm9QQtPRaP\ngLy3F4EAfZ1sTUUY8jCpz3nNCkKLFA9Qs5ku0Hw0ujBAQ/bOdJDF2BioR7SD\nYsRUhT+r1d1XDENUh73j+rdg8OQmMyBl92Co9gITSN76JHbxDhm1KgcaZoQv\n/uFSc9vxti2AGaIbBaL/otOb+p7GM//bUk6XB2jSlQvKDoe0Q+2HLQBffMOX\na5o/jT0lVMPSfrhuU4jX6vaDdjYDOVkmv3EQ4OUp9KvZLM4CpG4eKmYs24+p\nfGKu7S1v+LL2PzBVwy4Mfan6tUI5NHiHmrzxBsdNLhDgxdHIYLWztgQgHr9p\nzHQZzfcc3vZe2XqHT2f/l+sKUmCPFpGlY1WXmqy5BIkmUWC3MIBvAn+8gjUl\nKj5ttoI2ppYFjHZWSCsbynkxVDrzVH4aYhJ/XyHW3+L8yzQoMf7F+9XyLvxD\n3kwGoEJJb8PBUhbOlOx7GoahmJzFm1ovAV8NRQirTsQnvKGTc8BR/5H2coZS\nhqR6rASZmQoRykb8eWmxRJTAXlmRI3Xp0h1Ob2Q+nH3Qskk/dx/0BPWoyiz9\nkp4MqdlTZciEnPH+KP7+lGYZHssLQhBkC3jetw14SSsUg5quETatLAx47SHq\nizIX\r\n=6mSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.199534d61.0","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/shape":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/button":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","@material/icon-button":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.199534d61.0_1569610693538_0.3856706396231875","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/snackbar","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c74219a51efaefd0150c2bc8664fd8dc2933114","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":36,"integrity":"sha512-I5O5zOsap+clNaXXIFEYbHEzPWbTCtxw8WEdJVPJUOSl2uk3qUbV1vWJePzYtzVxOi9f13ANz1DYk0UzFRESaA==","signatures":[{"sig":"MEUCIG4F9W+ol96iBX1SUpKi2o6I8dQT7Qi2vvBw/C/kljByAiEAiHUElvYawJQ93KarpqfvvxfNLmkas3hUzb6aP3PtDFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":367816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaeCRA9TVsSAnZWagAAkmIQAJW6JdKtBZElTWIuQcpF\nZQ7kednasceYN/PWuY4ErHiRM5nXqXFbZZunlFllUIcj4ugDM1e7eAO3Bt+S\n6UBMgDWTqMK4ZNjeedZN/BDbhVZrKf2p0WmFeEC48tKNA9Jr01r6AWphWI2m\nU5SM2geGa65L5YB4KUTqenWjIhME2qK1JvThS+f6sAw1XONc/tFvbeCx/BB5\nyFvIsx2aRkR5+yxqrIcFdk4fjsKaOIwgLEHn4GfSG6/JzxfeRiV4njMbTsXX\n0/CdknkA2ZGWaA2cD1kFWLIteBa6Oo7xcXBH/1f5Zt2Cp1gou6X8Rp5j+J1D\neKs+HXiqzilkKZynXgLzxC7vK3sz4sA0SY5d2AByG9QiMkYQI8Y5dvmI+350\nRJ/0saz8Sz30WFWwpOk++LtlX+rvZxzhX2ocxT+B+uogGybNtsuqIACGeBGO\nvCBQCGJeOF4W8TL+Sg/qO0dwWcjl4N2B2MAf+kyFszEn6XZSVitcyyA9WB1+\nZ0WwaggGi+uuyTVkbT9/4hcezXIXfgR4qNQBAk07njJ2sZiaMaLx7WhPIanV\nUQ/nTzEYwo7W1ePVaHArSe4/FKWHO+QRqdFjVcmEYmzTh0kMe+P1NNnLAE0e\n3poUC1RUxNWQM30gDSLTow2KL15CokWsipHAVBjix+kvJjumiGS/D+gSwHYH\nkA7w\r\n=//NJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.22d7ad2fb.0","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/shape":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/button":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","@material/icon-button":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.22d7ad2fb.0_1571165854196_0.980269955951361","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/snackbar","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab3ed85000911bc0e7800729a44f08cde5491266","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.735147131.0.tgz","fileCount":36,"integrity":"sha512-uOYCCOn/1f9r7v3E+WVa5+TzJ0FFtpnWuctAwdeOZcfyYpK9YofY3QouX4KsaAZgInJ7VoWWBCQ4wfhVlwjSwQ==","signatures":[{"sig":"MEUCIQD8Ck5lapt4BiU0Vr2fDvRqYmHKnydfB8ohXzL8gaX1GgIgdhnNYwo6M/zFg/iPNJJELOhTo7IEw17NHhBBlxi+lZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEvCRA9TVsSAnZWagAApjgP/1i8+LnrxT7zo4Sq/ZRP\nrVWzNfYainIqO62AOBl9l2eQubu+2FUFiNsudWzx523EgTplZ0KuCHbOBZfL\nwYaHkt29HfYMICy6oiwtwMtZZMKXtOXYBkPTet3p04JwlYG41sCs3SGENROK\n4UvG2AxIzq1ruXuDdRL5z0zEqNrZ8rhktdoEUi/e+bywu5pvJ5/2jaqmgpHI\nJ6U0Xu9uEutThW2h76akn4uSKXDg4NRavoMvJZ7qHZhDHUuSYAi8151ZwgAX\nAh/yB6PMD082pBfaaoPLGFB571JD5ZY9z0XZMEjCWoZRK6D13PqLdshmGfaB\nDwWhjhAM7DUNuqQgzlGzuHgEUFuu16dpUAp0QvM0oADz3ZRhs+7zkF30R2cq\nX7ukyg+YnGH91gU2OOT/IJEm0JV46vn8b6SG5RJRAA7oB7UIoYBZvnXiT4eg\npJD4VGGCwwHspMSaprNUG3eTt1d90InWM/Gkt2PtPrn4V5LkXSeZhWFehhyV\nmoptdpfsA4/UoEyZ61TYRMAkn47z6K6HPm5tPZ60shIF/4i438PKEirb7HES\n0rZ2yR51FCMZ2GEc+vViBcMT2OqRxjcesxS3pftg+Cin2q00K6KnTmZdLU9F\ni4w0kzMIATJOZb9MiBQlEanOYzg+L4E4HJSoks7LyLC4259IiM7ZbyvdAmTj\n72FF\r\n=wGsO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.735147131.0","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/shape":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/button":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","@material/icon-button":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.735147131.0_1571189039459_0.07770362464084157","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/snackbar","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b06ba9317f50513fb18e6ec09247459421ed11b0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.062ade5c0.0.tgz","fileCount":36,"integrity":"sha512-d5GaJ0DFt8LfgR5zyZP0rC/kgn1k8dxXqJ3Na04xP6mbCkLA5EXqC+6BqKo9KHZo2KNhCjgSFysoiydGFp4Y2Q==","signatures":[{"sig":"MEYCIQC8zJHxcaSkEPzuZBGStz0XnieaeIMTF9anE8u8T2L6kQIhAJi2INC66uKfrk7lWI0AQgT+CSkrVawq8VpY6qcdBjFf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp72ECRA9TVsSAnZWagAAsB8P/0CPhEIGxoidb+vGFldp\n+7oUAD5roYATD4E137d7vHOFClvvRHOmGotMEMhwOmxphcYtwQzN4nWBsD++\n6MKl1BlADbrn78WLlnyDaNE28AGyXGntFiJ/FJ4ZPT16MKSeu79E/nRCycQx\nXCZ8ixOx6RWgZfP6Qff9hiM6whnCJiurUQmv+1O81rlUa8fs5WHuYX73RQwf\nYVsu4mUGYjfmkFMH8p+vbRT+R1cjGiVgpAdtyPgARF1kgKmY0C20UD+AeM6V\n35anVKiRFggfOVgeYJTHnVsVVWZOHUb7iEY46Qsu2SKi9FCy7OO0itu+3pJE\nNNpKt11MK4JFfkFWxEhJQqUuohGVwoUtuZF1L7Cpe/izcRZq7z9Bv3ctEhc/\nn42k/y7o9i2nkb2gdr2Xm3gkoHsrfLtBOTqb5WQUvV9m+G6J65n/ekQhfWP1\nbHWjXkp4TjTsMIfhauIjZI8PlupzaGKanyjqNdB4rlLj1FiFPn/qGaY+Oy5t\nE0D6z95XImleJTkTmXEyGtRX/Di37KbedpxNL12JccqvRi16gYsghhMclhpj\n3RLmcK9JXfQfeb4485lARjDognQyACDon030Owkx9mzJF+6a0eOcsGFoINv1\nVNj1GEApYp/BY3Ku8Z7IcS/g1Lsw6/wR/t0pSBOmc3mii7+UfGR35HstBVi4\nfRDF\r\n=h1W7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.062ade5c0.0","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/shape":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/button":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","@material/icon-button":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.062ade5c0.0_1571274115801_0.48725747691966603","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/snackbar","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a365da729005453854ba2bfdb5130fbec4dcf07","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.774ad4f8.0.tgz","fileCount":36,"integrity":"sha512-NtQLwjS1Krf9QRWVzZQtPTliaTFeTwEQbMeAll8leBcp3IRc3wP0NV9D2K5nT6KPPAUjjksmpoGi11Ju7Mt20Q==","signatures":[{"sig":"MEUCIFQj0+KNvFRpwoLcNAQpkRNUxKRA2mzD/DEqTW+Y2stJAiEAwEO1X4J3bXykCwNhkI4jwdIlMH8GsaUDTXk5FZzzvEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+h3CRA9TVsSAnZWagAA+SkQAJ/Mh+dpCKewQI7uc4UT\n9MshSlQ0g0M5JdktrPETYMVDgiEiGqYTsEtqgYz9Rj8pkCIZXhhNkCbaL18G\nB+7bFRYCmGVdy1kL3YSiy5mR7QqUEgRJ10SlJXxR8KmSAa65gekeqVm7JKMJ\ngGxv85gNXymedz3z9LW4L0NAsMh4Vyqi7lVP7fxvPXjeVeeTmHGjisAMgEjY\nZQVqsaemxWvNln6KpFkwFxsxzLwIXx7Z4SX+WT5Wj+uXtx38Gtw0+ibHvB9x\n5vahtGJLlbgep9hZ1m7EK6OPxn1a42Gr54tiFLQq/zOeDBopFmikGTshoGV9\nSCciqmv6apuCJHrmDe2X9cSDMQ6SvMKdUr8xTLnwyDdkVzZlEnTY1rCVaIr1\nwyzm8WuVcn3+kV7/cSUl69YWWshk9henomGq//xvQ81CppDz9a+c+RZ50yJZ\nOkjpjIic4oYuzvyUMlxIYHwN7HGL3WmhFIS/o4F7wGXzxGov2gvrvDJgZsjK\nUFrU7O0UddT4NbA7qVI0luQ7btInApbs5mZqghAVAGMMEpMKbJPtGblGf2RH\nOsWbM7Po74jqQ48LXW5vVTzr2t6bPc32/QhfSAfFp1lPzq0z/qoRARb4cDGx\n5slU51ba9C7rge1pL/AiiObdaZRcqCnLxCHkoqDFY4bKZd2OM246ND4/aoGV\n0l1m\r\n=GJHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.774ad4f8.0","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/shape":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/button":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","@material/icon-button":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.774ad4f8.0_1571285111018_0.6650927907966597","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/snackbar","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ba2bb3261666a1882de12d2e3d187391e53ba2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.5916d18c.0.tgz","fileCount":36,"integrity":"sha512-FklSC+pCC/iwTogDThEhhTZidRbGU1hD8S5iCPXQEmDpDLC3HoFdfGSJaA6rCogZ8tPhKPN9aXgFRfGs1GT4rw==","signatures":[{"sig":"MEYCIQCmmqjgeGMc4w/TZWfV8aO7de7F+HKA9kjc/XFTdT8tVwIhAIqxXZxAe7K7XCcNkfia4AZaTVAY+NrGmmA+OL/pAZUh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvsCRA9TVsSAnZWagAAXoQP+wW1ysR7pCs7J5UIne/U\nahvFGoCMigpsvngMAti5+plExAI6Nw7c16w5Pro6SrI/ZHhPwN0ubA1yb46y\niAjql/zfPAPn9/zGvg+/MEsFm2JWcLWc8Xc1NKOdCb3hwWvLNDF9yVjmUe2W\nlnLnjYYvgg0ZIAWHw8H/oTejSz2QkZHfBK9oJJibZ4/s7KRo/aY3Aejo2g5y\nURhDVuaWsNsvepp/Vn4NJM6rxNHjowqjAMO2sUlPTtekw/6DyQm878cc7hWT\njZBt3LwFB5FxVu/I4do3umneMAJCKeKsQWcdEv8snYHn66pyENGJ1RFauwir\nmnF1d3PsTMR6vpBpDELc1KuClE6u6fcNKb6wq2F/zn+fL7Cf7S9jkMxpNt0y\ndS+mP4saP1PeFakATtV9cMXdOtgoQGCj2jnnQlX1uirac2rXe+//DB5+Ar0Q\nLKTbRj4yaVCIAbzIKxpnZEwE9dXocovEalmVv2b1CQ5o2cfdg2AVAd38f7NO\nIvDcB80VB2/ziiEiqtXF349Ug0tKqfdQ4lfwFBB/w8uZe+Y9ydI2Z24ppzfX\nHkcjzohzmQFzimT5zdvA09QY50HD++v4UYRPd5wZ2r8WXdmMd2yvKQErOgxM\nrWtUo9LcGKYblh+YgTW/ljXH0yeB5UfhILC7iU9DS4V86NzZlv0EsMRvvhvE\nK+JQ\r\n=kwOD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.5916d18c.0","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/shape":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/button":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","@material/icon-button":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.5916d18c.0_1571429356118_0.8317233877046424","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/snackbar","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1180d28a06b8e7442f8c93b5f80e45e40e4027b4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.d4141c95.0.tgz","fileCount":36,"integrity":"sha512-b0nn7EriG6eiiHpEbrKz4YAbEy9ciWGw5L+rU+IO2T9qTEQp/r3/PJa9YQp+tdOS+3/tibzW0RE4gqgWHoeXcQ==","signatures":[{"sig":"MEYCIQCfL3UdCkl5yKtgQ/7TQPWl+QF4ANnxg6KWtBWVUjHVrAIhALgXo75aB97+7NvruNosWT3jQtFYjl5i7igMDcn6Imhq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCrCRA9TVsSAnZWagAA+NIP/RunxSAxbtQTIgNkKxWs\nQtVBBAKUGlOuiXGArVdQvPSywT11GGKk4RQAV9gXlkHnALSa2EcHi8d6LVRQ\nEmAUnQLNJL82yuAuHa5T6pIHo8KTo7JxoPXCD2dR0/qUluOHc3R0d8kC6Rlt\nNV24vUJhA+EQE47pJNMy5ZbLSDko7EGm45GkLySDFrlVAP7tZT969QM0zxXx\nCHkfPYxq5Ari6IIq2D2By04AmXwlOApzV3lkDd76UhIMTPchxftFNLCaSBER\no3prk7ajSkdIkISVMui6X+/YPqGNwIMQ7IPH0jzwqbObzWnm2fD+uBhbluv9\nFe6vEYF1PNTREs0DYsEm522MfvcqLY31Zz2qNrJw2tKUDsWvebDmAEV8M1aA\n7F4kdZn8oyz5Nt3qkpWoNg7Vx/Igsvu6b0wVLdZC3BOCzR9XSMU/+hAmWQPN\nXczKKWxkZo2zi2S1LD7J+49UCiwNrzZFfxKZ9haJxwgf963hj5qdAkXxINyt\nG5jhv9SWmxwhSlkVwb/A/+WqTQ3qOxPKKbaf5NpIE1rF0thwkQbKfZcgePmN\nNoiB3y8Jx72V8rM+ETx3PvgkHu3J4/msOaxa3fSikHYVMvFq4Eg+2J0g70VH\nIP5B6HI1WyDPrxmG/jcFFV7yFD6jKiV6zyffqIZB47yx9XPhomAwQbe5WL6z\n3djz\r\n=5+ao\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.d4141c95.0","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/shape":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/button":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","@material/icon-button":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.d4141c95.0_1571881131564_0.3708278515526593","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/snackbar","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8e9681b920e4012c4b1e438fe1593f379c1f89c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.2b878b3e.0.tgz","fileCount":36,"integrity":"sha512-O0xYDtQpHt3KnS4hLb5MnJThgxkRijr5MWlkeHTLgbTCOYQrt7pQR4XVC1qtYl98nwM/K6JxqB6mBKyaPWaWqQ==","signatures":[{"sig":"MEQCIEpTyfO+lbeHOikP4GDW+dWQF9aFVUkGTeEcEUsPzLw+AiBakRA/O9L8NuBTm62CrBX2R9RTvbb/c9PCltTL4K1IgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslnQCRA9TVsSAnZWagAADKYP/iry1kbiXeWJOkBQ9yvj\nrWuLGtsowJnPek09T6L8b6A7n2/T2H93ZYBxSaxsVFNP5IwF9L5bIYqKzzci\nindS6vf6gyIF/VFvUXuSmZAuYcERUnTvQEstOt44rw3EEkXgZnhNlgJWKzrS\n99pScl4M/2tyJBuxlGDxsLIW6/LPwgrK30nIyLbarG55UP0KJod2iRiBUWUi\nN/dgZ0Ir66c5s5S+KbfcKR5rWNMCoo0BdlCPQ8bAMd53axfLZ1ARup43GCIu\n/Kt1URigJpRKHkelDP5jIM2KPviATTTAs+GYYMj/iQJuUya7Yyfs9ArYEBN3\nkwTZ2Ve7v8LUDmf0cexeraQjbts0/2SVybVx3VGtFyvf6R3zeTF0o3zEb2Ib\nRL09J9Ox1LRuO4dG/7dLQOCfZADG5/DikiMlqJ3HtzGXoucTW0vg87R25SNW\nlTc+o/6A4N+lpWAicyFIQlAFS1mzChEKXeXYDVabLapS63SuVvxPtNJLDnfr\nmYo+OPrCMl+dAZG0g2hDIj2mXR4QV/NsoWptTeBNT6m6prNh90NIyR7NnCKO\nGtGzz/mLojLd3y7KWvKq/sIutoXAhH/x4Csb+rgvtxH0WNnUO8EmwB3FOuWp\nQGAOFapxf0z0QbmjHAFx+1LLEfsgJO564ypG1ZWcNDYlQWj4IiJHMCyGI34w\nJxjF\r\n=qA3P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.2b878b3e.0","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/shape":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/button":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","@material/icon-button":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.2b878b3e.0_1571969488133_0.5242019975671373","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/snackbar","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f16f1d2d8b6a4921a9ad33d165e9efb719e6752e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.b06c0efe.0.tgz","fileCount":36,"integrity":"sha512-tDkUAK25kcle1qfsnVI8AQo/3F/G3vkXoF45a8EzJJmhAveStQz6q68RiblvmFOXpukKO5Zp509SthEvSpGSfg==","signatures":[{"sig":"MEUCIQCNKZvrd2rgzVMYkt0LK++vRYTUmPg0gP/Vss6al29f8AIgf+nQ5wAz3eX0ZVEPhSYkWxBfyOFgWKJsEa1F0mHB+Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LuCRA9TVsSAnZWagAAu/gP/0IJNGuXkQu84RB2kR0I\nlZa1hM495qzeVlSvozBmQIuXaWDQto7r2tDK6XtdoP9+bs67yLFRasRbj1vU\n5p8QdkzlVPRhcV+HigaKPH0TBSJgVsJ6Q6kX/I4m5RcTe7U4Xo55QqXpDacB\n5ryIXVNqxvRQ3oUvDVvp7+pNEP6gg0ZVzisKULE4Xy0LHSxTHPS/xl8Xa7vO\nRLG1m9x3TMy2l3M8AG8ej3Lgen3F5Ql+qbVArbMEod7gdGQRfz5iCyQFV6ly\nARIOg5LYhX9dwRLXlwdas5Kfp6igbv1jYcWE4drQIYv+OICnmNs7maOFCVHe\nrerSeNEoJqDE7t4uhA4cxkfIatZrQL7vQ/bU6yMaYVRz5vUHtPTrXV97mmVS\nY4eIyzn0D0txCJeBzZwLLz21LIqF7hC1gTeWZY8x+EXSY9mHOzAiRIis5cg7\nzaWS0Sa/O2NOYJE1W9xDo0Ilda3A0cq7VqvQCeabQLuT0rUL4Ky0p287UAM/\nALzEI/on76avQ5zx/Fi0cBEoG6Xa/nz3bJfUUQsM7R0vu91Wfqt+h3leOJeK\n+ql2I+RWV2O0gARHN9kgGvquaOnPyYu72PyliE/NqzmKYmUVg5HGzYX3QNwO\nYXO8Bd9FZpNRfsMrdFEjeJxk31oTxqO1ALQ+N2kPky4+BFR2pger8VFsKEpc\nmkbd\r\n=egVA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b06c0efe.0","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/shape":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/button":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","@material/icon-button":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.b06c0efe.0_1572053742519_0.006468579861411916","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/snackbar","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac6170564227951928e41f6403f30d21d6badf4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.01628efa.0.tgz","fileCount":36,"integrity":"sha512-jODFnkkZlBqypjWtTbiXTdYslhjXt7yb40QsIF7jp1rimreLI4o9SErWNfFECknqTw8pezRerr4nZKsqv24EHA==","signatures":[{"sig":"MEUCIQCTbpF9WWikWhU/vlE2GE76EGkQOF0IN8tJ7BjlbkLvbgIgOynYCDKzjdyb/NTnl42Xd050kU7g6FW2CeViU+Kc9hQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HbCRA9TVsSAnZWagAAJ2UP+gMBQmkiHkVn5r4d8ZCE\n3WDGtRE6nJM0XGOHnWuOz2NaXmSiD0tITSRDfUqDrho8N0DOYmL1tGkmTkya\nioULZjjdhX6vkGAZxP/WcmNzvrjc81D/zhm2tLPJJBdUW1QNYuhcwFBncTIZ\nrBrRVHmLvPqiPrPSH30hv52YDH9tVkkn4cdNuQcqMAg+Bt12ECq2pzzdttPp\nbdvNvKXXEih/vu6QHooba/jSifkcRgqIagwl6h8qZLJrcTY9OKqzPGBKclRm\nPhx+s4hXA2UuFLYiZmb6t1xDn2qrIr1bk1EHn9Jaltd1Ihd6Sl9ZkzUk9XEp\n0Vqfs7aeQTXFXO3cr2ifKSV+rdxF+OUuPcBXS2NY3TXFdJVO+Eq2RaHDQRPd\nWUayUIEoQ0ZJho0GE6J2PGKcftBZGeeJSFD0jjr93QgeHp7Zs26QAsULi0yq\n7LHPZ6PfFpN022Gc4qpdRGAjphxBJq7rMRO5Cco5YYFwAiVnCUEuhwd8GdxS\nl7iIg2jvXtGViTsG0VoxmHfICyCPC8jaTLPuF2v2buRuEF0j2J2AuuK5OtDo\nWpcPYIO13rEbzQaASeQQVrCDGKcVgZE1CGlu/uRhdDxa8Os10N5tuL2PLD1D\nJZtavZfpx3prYlwmjPcHSurTnRnNN02Is5S5yRO4Igv81TX35FXYq6yJW88Y\nE0G+\r\n=dBQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.01628efa.0","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/shape":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/button":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","@material/icon-button":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.01628efa.0_1572307419568_0.7245832795255369","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/snackbar","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9eb62ae6591ca73c8af0354becdca9633b7cc2a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.b5c6d66b.0.tgz","fileCount":36,"integrity":"sha512-DeCUKx01aJRP5xyvTrJYctoA46y7atAlmVg7fAnc0tDsFd9kWDC+6Jp9qEHNx4PmwB2mhL+5TZcKZkhUuoBE+g==","signatures":[{"sig":"MEUCIAUxBzL6d8OcJOQPZOaXqF0MUxxByTZArEdA/RggUT5jAiEAzt4UAkg226O/P6QrVJ8kTB3HH/95TAH+p93tg7nfRbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2LCRA9TVsSAnZWagAAyVMP/1GDfpY6z7G74qMd9dum\neNg9ilxr7I/AXH5r0nQU1XO4FOyDJm+iLWnPwUhxuat7R8IdkKW+DaO+yOcI\n7ItFOiB84L2GV88Bu/5GLsvSQzN4NSP+rVEKrj/U6DRBCz2uTlStqor1v0sK\nxLVkg8rZqwm2NbLuzVkBNVOeHzzmOZUaPbUNov5nzYqiI0i10GMvUKTlXiqy\n+uNdEJWyrXphrdymg5jjmtMEtgGnm3CDlkdobtLlBeWd0yY5iElMgmKmKVLx\nWYy5KQVIe1QYxrHsR4pVBqNvp7k6Hn3sOCHsZGng+AIIHuSqJnW6F1AJZ9Wo\na9lhP6L0jPTxNJLaHU32f5t0vA9hjWIlWcrcrLTGCElNL8AtAJ1i4QjAsdtd\npFa5vuBKgxzCsWbGCmnHJz6ySThIYvKQkbw/8jaUc7+H3ho2LZLtyQiPgCxb\nD7hXI/A9bJUmJBsEGJBta4ZYWFrNiz7TMHahV14481d0LTVhwhizBkr5v4YN\ntA1H5Z5Prt+LskIqODKityPDH4iqTDlvqz02+hRmoXnf5jbPnpVWGBVKh32d\nVfPPeqYEqV9GxCw8a94IU3p07SSIKgGdz+/Jnes06EKQQMc0efN8xNClaCDq\nOYO82R67QNDW0aufd139z9opJmeUpBPYqJ5casUTgb6L/C00dS8+MRDa6W1N\niyfp\r\n=NpRB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b5c6d66b.0","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/shape":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/button":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","@material/icon-button":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.b5c6d66b.0_1572371851056_0.11018369604459766","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/snackbar","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eda7b78dffb8e3a3f02bce69b894a1b493ad314","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.cdf858ea.0.tgz","fileCount":36,"integrity":"sha512-hvlX4iUbybD6WXTzB3LX64W5OnLdUuA+EKWSxQ24VYB3cRK8sMPaw9UX+hzWAXN+L2z/Aofmjr8Qroyxvp6Veg==","signatures":[{"sig":"MEUCICOz/dASGueoNmaUeu8d/lobEbecDgb2/G0oAav7vb3dAiEAhYyDNGwA7Afl1BDo3lk9p6SaWsWeJReDJBB6yW+RKwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHKBCRA9TVsSAnZWagAAsyMQAJdaMnY0ntCDNhVRF5dk\nErHqsTwZGkNm6mHtDBPrIKX1PQ85PHOrZZPEBXHzoT5AQ+ax6vzj5kHja/XZ\n/8KaXJp2N7N2Oohz3WDSCNGPz/Ugk8nolUYEMI4f2Yz+3MydpUf0ohEVBjg5\ntcsZjIk0Uov5H3SvpSybCGfaLqN3tB9PP0LFq2KN+WrziGvhec1bzNJ6+1Pt\nFqqaM4sXQKyyX4B1LQt75SIYxCjFu2GYfQzBL5t3n93DBINVy/mIpsAkXucq\ncR789oYIcn1Akx934LUYbU0GldYsANJXyb7TUcgZ/V6Z1UTW2Hc28xUaaSN5\n+BcjMYIL1UjMw+HOboctLzyk0sx98cfCkKbnirMyuxBq44N+mXpyAOMfR7PM\nGdFTq7MfrZbNcjUoKAZxwTk/RMIbvajN+0zrwrJxGBcyt7u2J3VOFee8rI+n\n7fDQykhdaSIL01drplZB98B7f4rzVFcv+JgNRE9XyqIgQEwz4xSXWYoG8x7V\nm6JHKXBl0iO067PoGO4ih+Xh+XjeqLdxGVMCdniGOYuArLv+aamgTovAlPhu\nC8hk8WdwI89tGXBrWt+EJMKgj2dOGUIXFQaCz0/2/fTGgc+lH/mHnVdxqfNK\nVAc5uHc732HZ9DsLMArEroRBd0ttQeTNwCmFQ/4zgInk5bEQcBmNHdGtXU5P\nYnVA\r\n=/+jw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.cdf858ea.0","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/shape":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/button":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","@material/icon-button":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.cdf858ea.0_1572631168735_0.38788004718216595","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/snackbar","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4856715eb551ee74e8426c412c22ef8907a52706","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.719b57e1.0.tgz","fileCount":36,"integrity":"sha512-57M8jVx51RDRNkTw42PfKss6o91L9E9zaC1vgdkQvIVn3qF73G3h2/P+zIH5bX8exr1E3MIgtIFxWGWBU4MUxQ==","signatures":[{"sig":"MEUCIEFfnzfkfCkOIZzuHpado/WHrldmqISxvUDx73p3tiGhAiEAsKNwsmuqzEAIViWDxGQNnGKRe3cmrNcvwNI2ncjYuFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI9ECRA9TVsSAnZWagAA1pcP/icl375m+ctww6KPbqXj\npdPOtC1oaxf9ro+YEv6n0b40CsF4E5wzl/pjDRsJ2j7928/1fZq0Bebhh4pd\nZOVA8s5E2hWHRkyYl14xUv9QKdlZpWoisuP5t7Ls7q0RU+hCFgqPco2BYzlE\nlys3WvgVSWDLYBP4jRuUTc7aVhBrxaOKiAvfj2WzkojEJyKS4wwOwVnpfknL\nP1t3KjChKiytEdLaQCrD+30uP8s46BESZVofVimAXL/MqxIfWEGmA8WmCUzU\nV0ERVVnRz4aCWrcc2G1GraH+CIRorjwr67d+VOLXvUUZQnB4O79W5DFlZsj3\n3Dz9FOBQTKG57FB0w+iieUsHt91l+rVwuME5UeHfTyGIyn42hSckNsi4kg6E\n5IRLNWXDvMBKTw+WPuBYGRzTM7hz6H29e+TYDb6kF4sMdMCcoUGzss2bjh1a\nlPOx+tHp4GZ81fOlg+gldFDrz5Xz+yurLF/zyGpzTXByXD9/1Bn+rw0dWuTL\nDIK2zOhtfflEFzxaR44aPmVyOyAjHjKEQHf4PkkEJR5t7WyFI3teceaXioId\n/7C/nCeX89bl71AwzvSANy6eIRTPC6Xe6n0U3cSyZPelNfj5Bc7Tqene3UBS\nlekh3sov6Djj3Mvs7WCcd3nnkEmfY0CnJp2/CLZ/KTt2TZjCIiPf0pBe9fQF\nr1D1\r\n=obnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.719b57e1.0","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/shape":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/button":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","@material/icon-button":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.719b57e1.0_1572638532601_0.5317905360246058","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/snackbar","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22211f566e44b8553a24d6dc0a72b4f11a352c8a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.97cbbdc2.0.tgz","fileCount":36,"integrity":"sha512-HT7ESuL+RacCk3k71x+Y0ntXbd1E4nSiQCe7zo/77Tl5LtoJI6aj474ypxBcBYg3FZAChpbSZj465aFtPjWGWA==","signatures":[{"sig":"MEUCIQDZCIKSAmk6/hWBLyLEGE8jPn9kczugK63VTm1mtyeKJAIgfTJYfVOmiNiKctV7a6bWf2gYSGTnswu0TnN7M52RNlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJW9CRA9TVsSAnZWagAAfIEP/AmnpcwbA/ztJd0eaMDp\nVb3q2YgK9ix714ETZmfbuvalhmYl7KCzGa3wk3XZ5tPsa8vYHH7mXI6I8tLL\nshNbDV8K3Bz7yzo6vlETa490xWWP7CIvkH+dIueLt1C1gN+2qeSuGzrdwPHZ\nj85ekvwGGKpiMqdsDBQdc4cql5iRB3SYQ5u555jgUIGcNgunL+6TXipY5zyq\nXFOPOh6BShZQzUPUVjWFqJlVsDZvdWxJSBa4Lti1eRpcjP52hC2nv5xxaOsh\nsxTERjdGPbV2YQiEqhxO6sN+Y4ApEi3fyMf0IDbMyW/PqhyCkYRplYrJuF2X\n9md2DEncwDur1BM1aO/ibaPSsh7IYjdxfnXiZcCfqs5cuMPktahStjGDhPeN\nfNngsIYaokXy9VnhV8fC6Z1EFNlNVibl+uzp8xhjgjsaHT9w/chjp+Psfqib\nv1LLmMbesnqOgvmSLEC841dM/TkgJHfsRX2sMf5TMChYUidjTwYWQA2i+WYg\nqnHiq6Ew4MxES4gn4K5P5Ly9bgO64P+rPk7bSdLgFJOi4SxPLGvhFLwkkJPt\nFfgRSdh5wdtJnE8f7Ch8WpEgrQFfVohetQGS16EIKxQPYvHbnIIh2iNFvd1I\nGj9TGoaHXjj/mf1KnOml+ruvDJUCTBdnmvutis6sUbN80x9D0K7fxLBxHHQs\nT6gs\r\n=3bdx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.97cbbdc2.0","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/shape":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/button":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","@material/icon-button":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.97cbbdc2.0_1572640189122_0.5129171778876029","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/snackbar","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"821f7a99fc244d9dd95e9aa74dacf1eae695546f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.8e36b3b7.0.tgz","fileCount":36,"integrity":"sha512-4RRfnAXDt3MNMRb9LBlSd8HC2uodr0jzj6+LL1C0/dbvipppyvSuCHE9S1jCkaYz56q4C+TcdAJSm/E1PTVQpg==","signatures":[{"sig":"MEYCIQDeyceq+cETj3lsdlvYOFpi6wusfyZbpXvZge23xXf+VAIhAK8aAYRO79K9kTmjpqBjx60yjDFF2WXp3uedCQ4+bkh/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1QCRA9TVsSAnZWagAA3ncP/0ynQ1rTM0yUKixeJOu8\nL7+hbJ5Wr2uVLSIywSHIKdCIgSZqYfLPrkBC+XUeO8bllpNBtvdKrHtGTmfv\ni5OjJl5pU/D7xuosfZkR6F00Gs9B7snYzrYoR6sB7vDhR9VWGYVOfYuZim9/\nWkAM4d+P3i3m54PBBi3pHqbqGxiLnVgbGgBkoskzNH3CLI8uC8KHqatXietv\ntuh1QTB7ytkq2KUlc8VAmTiRz7eYXesbhvHgwwwYkdHdJGIK4kJbhPn92yCq\n7+AcI0XDqBIctrX2IccEgHDqTk7N/cUCJie3ma1hjbeyTNS8LsjfLHFdyDdR\ni3WudpRR0tyqHyqfbv/SzrOEkYmACvtXXXDXTQTXZi8FGHOw/3kBhLLGYaHH\nVPoHMtCxoWtea7qyX5k19g+B/8rnihzt0fcjYFMGIghSZWl6W66IgvGI6Vne\n1OxZL6tIR/NBkU30NPFblCykd1hfv65+PcyHZ29YTg4TNrvA5O3+C17kO+NB\nmIx/4r1KuLqbo77aj19D28bCfhEzPmp4teAuzZtR9hCfMgxI/eT5h7X+d6zs\nfqhC0UQGjkD8eLrHogv44FGBL+nhL/Cgs1En84fI2mFuS/xSGtjs7V4oDfb6\nvjlyyvtI6t+PdQ/yTUX8gOLfZ69gt4vEkuz/ad1cIoQU0lD14DrhNbP96ybc\nzqEB\r\n=ePuU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.8e36b3b7.0","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/shape":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/button":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","@material/icon-button":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.8e36b3b7.0_1572642128133_0.31807976628890633","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/snackbar","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3505806505df132584e1c55d7fdd0848457a0788","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0-canary.62d3a09b.0.tgz","fileCount":36,"integrity":"sha512-q2/Co23GJgBPphnSPZ1PxMKAff0P5A5nyZhPhxb3h2UJTKM1FuQXx0jSlbQKXGRnhsRsNnsqvRZkkPrsBuxTEA==","signatures":[{"sig":"MEQCIBvKk+nsMyYSb5VMVjB31bUDlnJLw3KttBL2ORCyxiJBAiAd7zWj5ZnWAiNWwnOc4Umgkahw5gkDcqNXG47WHgn/QQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9+CRA9TVsSAnZWagAArbgP/3G37ZTyAnZj/s4Nsc35\nfukXv+16ePFi0LKiC0zyodYWA34BHps5VCz9aCKm4elTmE/NVQ1GL/8lfrYA\nzMdb6npXtFqSSBTUstCBgFD8BkUw0OaJk7szaEoc/1VsDcP4xcw/kGWY9DGC\nXKWadbZn4Qxnj3Hy0mj59mxO1xOl0og/a4IBALKF7fe+Lhdejryq+doF2D+F\ndk3ZxUuWwBWp7o19WRhqX/0VBN2TcRBlCzrX4dD6S4U9KFvACKgZc0W+dIqK\ntdaisw9jB6my3d7yye9Y7KHpm/xd9dhx+ExBK9ChAIIpD2cX3a5SoQy8D/gd\nHR8oXHt+oIHAs0Q0mY9TX6bVYsWY0hvgRLIRD7/g2TbnA4AUYs0Ch7oH85Dp\nbwGKUQvQtpQbQ1o53O4/jjvnjTqh6vf0u7Dpzxrz9MGq/UyWtmcixZUPkko1\nQyLnR3EsN3qwQ3H4xIuEe+6+2o6ELgvS8Yn4zRORYC+GdFU48LuRxFkwngs+\nIZvpyTG5ouImCI8F9oIzulZaB9fIoSqNamyqYvnOe12xKe8ap1beNI/2v2Eo\n05RAwiTkmc2oNSuCPQuWijC+bdyUaDUjDitk3qQt4RvrL+9sgN3WJqsly2SG\nkuR1q0Iih28WarhFuY6P/YRHKhNCyf2eZwtlgweuAD/mENSlzhM5PdzZD1Ag\nxPfC\r\n=6koQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.62d3a09b.0","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/shape":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/button":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","@material/icon-button":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0-canary.62d3a09b.0_1572642685921_0.8872290112097276","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/snackbar","version":"4.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"347445f9dc5e783c673734df909aff02bc2b29a1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-4.0.0.tgz","fileCount":36,"integrity":"sha512-QiMgRCvoOkacbYCb0UgeU13g9FqoSMbRU10eY+X50iwV6UHzUiGKwEMvgsG8kni2F/VdQzlnP6aYMkhIaAhdmA==","signatures":[{"sig":"MEYCIQDPn6zwU0C14lIiAnrQudt5hB8T5LjL+tFqohC/iWl1oQIhAI88VtzZiDrpX7E9DcWQqMV+ev4TDu4norLWcvUnRF2K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcb1CRA9TVsSAnZWagAAWbwQAIC38zBNit7hjoGe/dlW\nn9KmzCrASAqgA4PNOp22YLU23HNH3Ebpj3IUQ+Ywnh5/6uc+PEAvKHtUorJY\nRAQchk6jLVYzTaD8WB0BIbuA8x80HzVou3Eb5/5VljFDo871Hy6KWtEEMgaY\nkh65yPdYD7uCCTpcxKfM8LSgDIXIUJNB0K+152ie5HKX7yzzLFgpwmZbGxS2\nBPnKhXMt34Gh1dRCXBM6CI541um/j+dWahKE4FpM3fvt2hmw5dhUsab6QnJB\n1YBmxPWgdOqJemZ6EyxhUQLZiJXVQw9LNj3cqpBZB2l70l++XTdPe1wGcRGJ\nKJ/2G8KvlRP6+L3V4I2p/i7Srjhdk3iztFwf0oDOVEPhFY35D+46y/9L8sA5\nH31oY7dnX2rEf/Hx87q9MbE9p+YD4GBTYT6bJQT4G06F/0CUSUs7QmcpqeCP\nK8xzeBmGHZ00hjaxNCfR/aDvDQ7nPR0BWvHRN9Mk2X5KT+H3FEF55mOuOvom\ntfvjJzsEQ7O0XZTeNIAOg+3fInBI7BGW6gx6wSFQJycNPB+WhwLwOV7Hi39T\npvgVKgmH+urCGCgAzAGwi3anGrvxlzNZo4m3uXniOSOGECuIJPPwZl9PJboQ\nDJVhTfK0gASgamtUp8CbIGg+sBU/isTn8i5wybnjrT9I7ZfMybEDeS2tKEoX\npSJn\r\n=msM7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/shape":"^4.0.0","@material/theme":"^4.0.0","@material/button":"^4.0.0","@material/ripple":"^4.0.0","@material/animation":"^4.0.0","@material/typography":"^4.0.0","@material/icon-button":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_4.0.0_1572718325086_0.024503387235112806","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/snackbar","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9a1c2c676071af1f400657fec6308b3088c03e2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b5eb51e94.0.tgz","fileCount":36,"integrity":"sha512-YCuNffJSsucArF4ZUhDHGGQUlGaXoDCeOVRMp8HY8UPTroy5HSnxiADLZ864Cz/jdUeosOsDpM5NXozuCdsxww==","signatures":[{"sig":"MEUCIEnealEGlgY5NFk1pK5UuJMsqbpStZd2KsnKSyX2bUg4AiEAl+rbBApnRh1NdoyHTegRE1x+hQYeI9J+PQEcyt0vSGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOvCRA9TVsSAnZWagAAh0MP/i/dWg33J7Czj+7nSirj\nZjgKv2s6b9riTigVG0AMORqwJgRuVnEGl6amnGdCosHG3FLlbj/A8KgX86Oa\nDEPEj2GPn/4RqP2I35M50PkEY3HSx0mWO5oYe5FZXpNRiaaSNawKJri4RbWa\nuh3bQc9b5sJz7xkKqoV19n/kmUU9/BHqr3E73pd0Cfoha1LExGCEvQEK9/yo\nuXrSg+KHrujffJDtPPlTpLqE+Qwb+CUQbIB5HJlI2H4/0eexFY4oSxAY3qoI\ncu6CHSak87QuzRba5AIk0+D1BqO6oKk7DUWr2Ow63Zs8ItGAVDxoYkU8qJ1z\nbzz3WOzPrigamJNqNQj93GAzmOGb14dhl9DsRwlJ4U3mvsRbE4OyZasVy/tY\np3e30DqKiBSx0/9XaaAZZFqlhdElGcw2dNnDkuaw51RE6/bcP1xf6xhtXTZz\nsclPUzg5fqGNH4peFf5hkrcszhF8VoayZjJX+UDCjyQlDhl8a6UYYbKIj5N3\n3barGeBgBi6ahWab4VYaTH5n13vo4jBMNvEuodu5cNWbcMK/2O8vCiixlpG0\nIaRNloG2jqacQT3s9BJ83GETvR2lB+adlnWvHuD7R2XlYWCBvladCSZnaU5f\nxvMh8kWH+GMI2zeoOfK4UVD93AXLviUSTEX/aT9vSpJgPwi1B+NbTfY1dnQE\nGRAW\r\n=tFkq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b5eb51e94.0","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/shape":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/button":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0","@material/icon-button":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b5eb51e94.0_1573151662565_0.03350913110167175","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/snackbar","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41e059f21c781d5fd9964ce8373e8af4aab57dd2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.58500806e.0.tgz","fileCount":36,"integrity":"sha512-bxQVVeJmEMEBLS6th1/gchOVd3eOPHQnXGl1j+LWo7zVsnBz+KXsYLYwf5qoPlfN792byf/ZxR4Ohg0EEjAeQg==","signatures":[{"sig":"MEYCIQCj2Ju8RkzRq11AIWb3bSZ2oiNNMUCi8CfKSbZpfrwskwIhAKWHTtv9Cv75C4CaoCSBl4Cg68jrkDEPP+TUmQGR3qeA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYt3CRA9TVsSAnZWagAANQkP/RfOSKAlI1StVhgw6yht\nDgwqQ9dhsVANGlUl3rx0Fq6A7/k7ZHxEiM74K/adTJ7/v6gDtrvZj6YMrrBy\n0rZMDPwG9ChiaFfpFq2xoOAVH2Y3cdH/Y9b7EZ7iRQz8txYgXaVVanwocrC1\nTWXpaeIU134oeXV43Q5bc2QJ/ENTDs8QQab8ooNH+783Aw509sVkAP1BpurE\nVYtJfZE6bPKjeotq58nf1PHrPOFdDom888FwdSeRNwojaLk//PyNCs7RXuKU\nvTiyQJPfwafpBm7eoCzXlW+HlSTLxI3q3N/mW7LylZfnPkvKUt1x8s86YLGx\nXTfcajIO6aMK88BLNYqGM4gZ6E8Eg2UfNvfGXFpLdNHMb+9pqdi5XzS0In7t\nSaqyAHwE09mNEVerINB7km791a0F1DlCbzn5BX0mlTJ5U0INOUl2U5Ox3Ioz\nc7P9NsD/s1/v8F+6PNhu7CVBkxWY7Sjl9W2YZOwE1Utccjkg9Eb8FIkvJmxx\nCvP1IxpU7zsicq9dJgellLeWn8BVh9OLXHsBQJXFlQIkplUbkPNYJiil4pD4\n3awA05A3DKtVIaKYOZPD8eRO4NGPf2BkZVvhXDwhHRSB1XdR+ahmQqGjqNN7\nNKRLrk/b80wowwW5GjfmkdXabmMbyS7wtgccGXLhpyxwssBzra4AJOns4eGg\nZ9+p\r\n=7bmL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.58500806e.0","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/shape":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/button":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0","@material/icon-button":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.58500806e.0_1573227383298_0.8127172113706687","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/snackbar","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1412af5211fede69a4ea29f1804929d2a3cb27e2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.66299b646.0.tgz","fileCount":36,"integrity":"sha512-oSQwv8KKLpHamAXCMsp3rsqhBuDE5lJTp/a8ZrOvzutEwpOr/Q28nnd/cJnQSzihuF90QDkjxFGDyylknHdspw==","signatures":[{"sig":"MEUCIQCX/4+LUdLkd0feZ13QyRI0w5EJIKOclzSoJlq6qiqDLQIgMHq1ly8piBTtbOP2JROv2J/ZqI2gbIPULgVIizeAXbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFICRA9TVsSAnZWagAA3JAP/i7nbQdbQoOrs2WRjGNX\nY2jucAIqAux5HcYeNezI39mXh6RZcNdFhZGH1altxSjRQwKkVeqLWaxyxZFq\nBF+234qCruvMTgixNDDft4XyB63J5/jkwGaYHf9uteD2qDdb9LVKh+D/vABi\nLaBsnTQlgh+POzpd961pzk7tx7VS4ua58xMe1u/mOlxtvN37PFk23a6nxnve\nVJFSTq3HYOtFX7He9Cs4Z5x1U6rQ/WMH3js2elFKR6/BEoZMNcAfO9ffD4xL\nq0is1TGBLmgOLppF2Whg+eydTWYK6Ktatiy+i4lXu31S7XbBHLTqNsh9Q0xA\nc9XJKuD1VncjUpd0APJA0rxMuCCRJL2YbMcbhYM3wUBqFpzvDKvmZ/+CzxAn\nNLoIddPgx1zJ+qydxryqsvEmYEoqYnofn5cfmfk6tlkVo4o6qoAWYVVs6bdz\nfZtVSpe3uk45JsTMyZu2nJiKAlVQWzyJZfiqWMkgu4K5ikCVT+BtY+6u9bdL\n8G6rzoKf26xN56jdlRTfATxMvoFaprLmw1hv6PVDcjZE8ILeW6NcLJSlcALQ\ntWILbXF95vowBbdks/Us31sQeOC8OwSiF6yoCwgbu18a0qlJHbEMUgQdMMEM\nwwSwh06t2BHcjDTU2P175jZ1eweJCGK2zoS8sqKpbCTEIAsqLYrgMBbrsXQL\nJHAQ\r\n=NXIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.66299b646.0","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/shape":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/button":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0","@material/icon-button":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.66299b646.0_1573245256508_0.5022986991966154","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/snackbar","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d47dec6007518bf1065a52ffa2b4e51d63a961f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.821871e04.0.tgz","fileCount":36,"integrity":"sha512-zuBmixQmHAuKKcJmJOYrH2sgXTCxRy+lvL5Zvz1b4/l7NzMRmcH2WamG0QMjULYFEanb+etITNbOoVt1g5x7bw==","signatures":[{"sig":"MEUCIQDYgLIRZ1TnuLb3AUyFEoUOQGt34V9dfMPDv8G2XAk0BAIgFsMV8HVfaYVi4j/DQgZezin11bTixpmHNKiVPI58eAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4SCRA9TVsSAnZWagAAuEkP+wZMv8B8RaltXQlxVqTD\nsWuXFmQgVweM0cPJ4urnGjNBa7nsmXbbO9N0cIVVNWkGasylWaxXX4EWQYGZ\n1Y6Y8y6G5y8y6JMawqnsIfbyDMt6DhLk1Lg8KFnEfRDiWhWJnE3j8sWUCPE2\nrWuVD4bwpRPBg6hooTzR3vYgg3KVcUwGbYYe9QlUvVQwkVWmg1Ktx96057HJ\nXZaCtws702DBmIata1W6DA0PZPp50c5H+EpLg1Ewn1ACpWBwFN/OofeDaNJ0\nQ0Unyk03BMgwpmiXhChuspLg59pKbQHGyMSVYvfvKmEPL/7kj4bwcsFeEscx\nQs/2NJfKDpln7ZW7xCJrHKjaIAEz/6nXq903trNSv2llcUywA+Hj23Q1voLP\nULItbW7BHwNSGjV3wxUgKOUqf+PI6W9RXL4DZcLJ4lFLbvse9CcOEZGzywG8\nlkk7NS7lD9+iMvK/EEFLuxzvGdpWOY0qCmD6T6A4uzkWl6CjiGNHL3Wvsg1r\nEys8S8VfSIzRSjTuoDd8mdtZrDc7obwSK+GsehLCmCQ5wCXmGTipPOryauU9\nhlSPXXHHCfv88Y8TnRI8rZKXOgfRmtPO56CXg/i4/QyUjtrcc5iGoPe0Da2u\nimNTrFFA+f3RF9dEU2jt61PSAdIC4EjtoewIjPwJkrRCIwAHpf/wmPZoStNr\nQvIq\r\n=LzgI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.821871e04.0","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/shape":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/button":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0","@material/icon-button":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.821871e04.0_1573248529675_0.454783805307603","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/snackbar","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ddf3381a6e2dc99a929c4bec5aa31f2091df450","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.491fddc31.0.tgz","fileCount":36,"integrity":"sha512-pwCsboHIfE+y0PRYUl+cJp64njg8NDOdGYuxq11lmMK2IBsYQraiWJYmexudV/wp4Y0muHV7qE2stZhtpl7izw==","signatures":[{"sig":"MEYCIQDDpQj4dN9CEPUXyF9Sv9rBFDtpDiM6/MFkfriKZpr47QIhAN5FvXijArgaQt/71s+g8jZGyPVTTBOhY0vbCie0EhpH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxec6CRA9TVsSAnZWagAAIjcP/j+m/X/kSIHXbRqSWP50\nNnXRHm15MKs0oe+lqL6zycGvoEhEG4EN/HedWEpDpojyJKD53lAl7QEkyU3j\nUBTgSCa8MvseeokwAsMaaBidqjmEx4uwo1poNLuHJPFSn3xDlt7ro6VSzDZ2\nTTYzI5NMoD4EQKfhub0NTwHrpgn2Ngm3dhvQHdP6ZJB0sIc8mSDFfyMoCU8Y\naTEbxxBBsfkCJ6/iZBubSOIt2LShgxarFKRd5xGVGYhXIIJsncdcQJzj4lZm\nbwo39aJm2R+DXR9c6feXh2pP48UPjjfi6+KKmkVfXu414kE+sUfoLx4HPogz\ncSVzCIFxwXeoFNO17yoyK4INDOO2ZeO/E6IrLS61zbVhwouQY7Z+cPcWurM8\nvDguaUvY9xsi14JseiZuw4nM6rRCN8HfHyv3EKGpqaJMVppU+MZPJBPP9zOT\nU8rJKqKUp+gEyRSNrH44hq2erzU0z+Y6peZX6K+AyPplN/u+pVlrQe+B1UVt\nIIXGes+MvexyWPP2Y8XB23GxjIRmMa9snqw7qrGNBqvTvIIwRzQ21R6G/Kam\nYh/cFhxHVcAxJhl4XqeooUmP9ez1pCviJIyjyUyGsOd0uhqOPImQIvAOIw6i\nZJjG89kOsDuOiXORGSUmsf3p2yF2LBIPySKkp4HS1sQdFhHZTPgmqpW+EcR+\nMNgT\r\n=a0sN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.491fddc31.0","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/shape":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/button":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0","@material/icon-button":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.491fddc31.0_1573250873804_0.4995365590294789","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/snackbar","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"141fbe19bc05ebb15ae08bbdca5b2e7abd5aaf3b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b0cecf145.0.tgz","fileCount":36,"integrity":"sha512-b8CvHbkIH4c0ri2l/ZSJcIJ3t+HSnC1t72mN9MNcJKYtFu44oDYNqk8fgyP1AhPJqOJzGGUiP1kvL30O8q3Y8g==","signatures":[{"sig":"MEUCIQDECHnIZzeUYLcU0asL8UgXirMU620PFYxdZi1XZoGSBgIgINrDBx7AT9GHZ/lP0OL4zQvE9vHis1gqT9ubVsrpSDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwixCRA9TVsSAnZWagAAW0cQAKElxA0EWYIffBGJtnj2\nsRkZxORWPedUew4m3AqPWPhGTccRYZ3pJu9NW6y2TLqHgqsnRWp7gZyI8CwL\nsQgw22Hg5C3QXI7Qxta+2edTecumjPY0RyfIIKyeR5d+CCUwWJuguz479sdR\nU+ZWpkoobpA+krbFuk71Gf26kkEckOLJWlKcY2RZ7br8yzEFGi+P0MTiNo7k\nWBh3Iq6aQvsoEyfDmD/w+RnhtaIQv3iYZ5zAAwsJZCBxKFZnEubAGEvfvhA8\njXLxfot+fFOQMd20fwyj9sJmllASxtV3eYrckurOTxrTeYQEY65cVBUjpg/T\nScYUsM6lwtdo3oO9XXe5z2uyAYjidUuZPalkfecQI00sRsIzsXWaXMVHhRUg\nUXwOjKeCCitIioubli61ttjlV9tNj8/IFIB1Pyv6GddAuyH4JkZ8y+Ut0muc\nMXCJgv2HuYrtJCXE7p6Dq5JgjD4m4fuMD9rAHv9Zb9Rjc+5crY3lYfSPNkak\nMxkWBvs4hxY2Apt+5tV4mRGHSUGyMcqLiRLB+L2ZVZr7V9G0HLBWdpOMIFY/\nZVdjvtB6MVHIjCMBD9qqE4KMycCLBg3Z5aXbq0o7vkQXb4WglaJnqlU1vLY+\nm6WpbauAvm9AvELdJy0vYJTQZuJOLqlzgr8IJbCxBPCAj7EZXVuTXOhN6oPD\nc+hK\r\n=11S2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b0cecf145.0","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/shape":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/button":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0","@material/icon-button":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b0cecf145.0_1573324977017_0.11814040532747971","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/snackbar","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e1a2fab1efe6fa7fcc4555d065546b718095daa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":36,"integrity":"sha512-DNrF/4EXirzXMyNSMV8jTzHtIphmli9ysuBsypYLiQbuxP9STDrp3mrmLO+q13t9CUdNI1tMwLVocgcgbO2JxA==","signatures":[{"sig":"MEQCICLGPsIHH18J5Wsg3V/AQU4e8Cvvt9TAOlBQCcfIvgIhAiBKtFNiQyCnspC6kg9ledMGKIx06ZCt//FkbXPlGyoY+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBtCRA9TVsSAnZWagAAF3gQAJvtc07mV5IUfakVx46Q\ncO64NQjCVNdzz78CUcdxucN1D4DoBhOPU72+K3vfXV5zglNidLOn/B+sM3sr\nylEg/XLjVnEpOMrWA4xdM9ZJNJS9Dl8PNK8GKqTg7qrH9RC22U5RW0eW7OwB\nHGdp/L1WioVl3A1wleGsbb1bVV4Ewz0akw6Y+M3J2ETkUkByTi0zBant1Yau\nL9/OqmU33Jet6RMZ8jRGayzspuJALEquB3C8aeN1qn0cdJMahueDcjec+83X\n7ucvg+PaAtrUzx1GtgWDWk8rK8AKsN9Lf8gahgrwqmpZrOuwxeCRYEh/eBEc\n6nAJ3i46YPFH4wYtJ50+AxI7wAVU/SASzXTYpp4zv3GK3kJMguTKvWx1fgdJ\nbqf3vGfPTjlw6UURriILmxDMW67eylHSbRsOYEurgzA+utcO+5xeFpHZo375\nwEAJA41Misa9KvFTHub+/rE5o8n5Bdq74HWlNOSbxcDAbsSVArbU4NoeGLs3\nCcTV3jAGCPmGAxf0L1GwYZryifHTeUSdDB5FMkydWILE6jOig8RcFNtzgcdN\nAL76xZcSuLeLrxIbbyREzg/KQf3CmMT0opo7LQGyNNNLycqsgCzznCrQhUfZ\nrKzhFPhuVf+vcrG1hd9tHJPl1jOjrc/tNVwxBTSpvtdZj4TwREgKKYeTDBqp\nC0UB\r\n=kkPK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.afe0dd1bc.0","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/shape":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/button":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0","@material/icon-button":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.afe0dd1bc.0_1573486701391_0.026386269775031224","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/snackbar","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69d91f887fe98a6c7f8420cf245f2843b15541a5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":36,"integrity":"sha512-tBo+kuht2qc7iDwt3VbqdW3uO1g1yw2thTmtyPzuWAZ6uFUeRw27sEt8E8ySGhmZZs1r3VPKziV72dVe3++i0Q==","signatures":[{"sig":"MEUCIGIj2M94X9A29v4gIXZV2SBJ1WYUPV0lPHH5HIH+EJn2AiEAgHBazmz3vqHVvRUmhPx7Pq+gs8ScTWNbO0sKwMNbb+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXndCRA9TVsSAnZWagAAKZUQAIgRuspfQPFXSRSwstNg\non1wtOJY6IUSs5v4AM/O1jwrPtj6u1HlsFkYS/Nj/dFXWSsFuaL5QqHdIoXv\noSXZC5ao3HvNnGoVn+TFpexjJKiD4tf5OecjsyBl2ub0iHrURiVQkPFoNwl3\nCrob371V7OimSQdU9gLtWghc6/EvsCvLDXjnHS8ffCur4cxim3HjlnkEiaoT\n+fPhbiGYoC1QI20NZoQfJTvIsvnzFTSJHeujgt7UEe9wPEE7X9gEL1W2k+Wr\n4f3KzfF+CDFzAIX51YZfxHekrgWWKB70x9u/1sTA5pOU4kZOGf93V5yw6RIG\n0IFjN9iPK9aym6BXcYnSNkUHygD4sUfjCXz0IScCO7tktjMhBqpxpSRshYbP\no/3Dg+JMDq80Pya2HiA7rnpiMw/a0m4psrfPE/wQ0sd9+glDzXaZv9qW7nT4\n6xKmNZJN3OoreSqg6jc8IJAo4trTisAgIX+pElfcUt08K+3btIHmEkcLc8E+\ngNwWkxKFB7KuxwvzzuY+EiWi9JhRng3HzloA+W22sB+2oVd0nukinuIZKFRM\n6tN11nde7XRUgORK4BY8ArSm02ikjTE24Wo/VUf3TfcnNcjrI7+YgsDUel6Q\nqF6Un7RFJWRbY+sxHFj8gQaIaiHPeOzjeaeW7HvtFl8W9KueIWSb690o5uMQ\nYLCS\r\n=8Kz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4cfdc40b.0","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/shape":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/button":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0","@material/icon-button":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b4cfdc40b.0_1573747165439_0.7898150903363566","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/snackbar","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca599c7b0d8b74883cf2809e3bc96018f3c9dbf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.525989b5d.0.tgz","fileCount":36,"integrity":"sha512-O0EPl3qmJSLTc4FajFQRTHzOB5UwljuQiU9BbpcfZd3PlgpwAkrQ9viSB4Zv0GbPKPj9akNmrAyyQ6O+ptjX2w==","signatures":[{"sig":"MEYCIQCk86kFwXHzAkJ31aD6vcJuGt1rREGdV/7OORHvfDK4TQIhALP7ZTLmLLd9+WR9Dhvz2KZVeF1Ii2Z4Zj6bQmjMxADT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePQCRA9TVsSAnZWagAAzp4P/06I4fFUKKr24eKgmiLp\nEyLnMTW+8+DXPEp590CrAhouKDFYDWyhL9VgZnZv+jcB785VDTL5Q37TXDIe\nWLI8wdYI5+Q5z2SMtQ3xZ46KpleEuIiUd0Mr8XB4ZIk/c/JNoFi3gkYdI2D1\nAUq6o8XLjHvul2SygjkgXiuwOKcrOSvCHlphsiu3sxYohKfjAPuCVHWao/K0\nrOt7NDkP+hqobGv8uuLjtysg2WEL78sis5OYi7geSdGmMqtu9yzJY4uH8eUd\nZCdMUisqSXazCTtSFuQD4MFuw+yOucAhWutYzrqvHxl1G6MEugfdbvnDB25L\naq9hwf4nojZ7X5olo5sWRhKsfW4Q5RcrGS7KUJ3we6GFzS7wmiQB3Lty9MQn\ngJDFqJAeQbqSTb0Znwd7LSRxqRh0udam89huC9JOpgjapyY7MgAGIpinJUfN\n+Dg38kOcjkU8+EzxsitsqO6hyJsGyKdPFhEnD69PKHCG+HTdCz6ymh6Eb/ZJ\niWIbWibpq3LZMe/sE88op6spVKzevL9rqxJzYCTAsUanPK0ePbVRWSqwQfcG\nlQydUbw0gy+PKd6PoLuQx0gMje54PMtupSznbvPCkQ+WnB/SniRHltftB4fx\nDtadXxlaPZpaw7GyfOMBoQZdFVsr74iKJSvnnv1XZx7LB9LVuPEWr7QtZ8RY\nSW3K\r\n=zqlZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.525989b5d.0","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/shape":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/button":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0","@material/icon-button":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.525989b5d.0_1573774287802_0.41776133127355375","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/snackbar","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"569eb68927e7eae12d6a815a282d54103fd96a53","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7084b403a.0.tgz","fileCount":36,"integrity":"sha512-RUCQWhSe8AOZ9ufrcNQv00vPB7REXG10wvzkylJ0dO38sVzy27vODXyU2FgXDGtUc7+UlAQ8tia/cZwrOa5bJw==","signatures":[{"sig":"MEYCIQCIO1gQWOLeHiVk0YWHUPK6lYSUjK637pbZUfW7Yl/1wwIhAMTRn0fHcJRDbRAI7mkkmD1zhP4phx1cVJd4yXCR827Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzforCRA9TVsSAnZWagAAtzgQAIh9uOpQpJEwtt/ZRPjm\nmIHmtD5yHbmnjvuhL225dy13vQvWA83yxEqJg925gxwsWncajj7lzB/PFfIJ\nj+jYR61rb/9MLK35aeiYz6ZG2Tp9G+EYKQaCUsmQy4hzELicc3vgg/dfNBKR\nLQokKfiOxHTzhzDTzJcE9nzqmdsbsu9YwkzffaeQg4zQ15Q6ZGdqQ9E57CP2\n1ovUpigfRKNSDfU1sc9T9Y9tNffMCgaBGF1j8CUDqHuVl0r7gUNiU1e8gy9/\nTBEJgtOl76UMLHV6+9iQFxJlm9ZBHv3ErsgPZI8D1MyD6UGXps0PSyzvsMf4\nluIu317KxJIHhxw/83US1DRwt1zGOF20916QKgiqvPvjJGFBy4EL59olRGjj\n9ETwPdNBbdEhepOuS6dl5pVF2gh/a8g10GoFTYujQL38/2NxlIMrq5rr4znN\n2wVrSgM0M5PD0WyEfEeS1EVKucDBxt9ZHo5694kHFEYRiveJM+NRVKHC5Hcf\ndXfpoJ0bSM1ZGLp5oxTKa/OCysbdlIdxp1WPQpKVXuTMbb7WdEgxhHsGMYlG\no/Wiq7RCVvbb4h+AORLAE6PRx/6V+T8AzDZahE20DJV+Cvgb+R8FX/JIwmig\nI/eaG1wzvNTe6bjM3iWFrDuFKUVdFFikOsPxqNIDqQx4QaF8qXtNLRGHcogS\n8EMd\r\n=ZREJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7084b403a.0","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/shape":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/button":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0","@material/icon-button":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7084b403a.0_1573780010880_0.5502051776200576","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/snackbar","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd229e9a5879f578f8b376e58dc678d58e61ca3e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.3cbee6dac.0.tgz","fileCount":36,"integrity":"sha512-1/FBZL0DXE0DwQm7n78p9RYlpGgxACic01qhzwzKN5k3ZoDN0Vh1ScIXFl+6XeOXOuNwBpb7EmZzRwwO2C4bsQ==","signatures":[{"sig":"MEUCIQDemi9ZdBZeKP6NI1wEYkqRIOC9SZoIril+1d3EG5m+mQIgO7+6ATkdhD5pJarUtJo8sU4Nw4NeBDdgTpJoGBadwY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzye2CRA9TVsSAnZWagAAA8MQAJ/OVCiteeUthtsg3N9a\nsH+KscRAy9vBTePA0qQ1EaC0PhUneZX2xgHy1zO+B4VguY3VCzcVTK0gjv1c\nY/tuqZs2uge1N4waCaSSbks5nhcyrGpvRBEwMX4irv9140Ep7zSGRlHaZjLx\nGr+aYS3aMjFZzoXvh3xmhhPaqoADGEqzK4UPXxEAWIJCamXn4WG+01n0yihT\nHJ5xE7i7WaLVfu+vmgYYIhbMzbzoIMftmfS+Kssnjg1eBfeo5iDSUQfziH2f\nQ88nNJoTdmy1Q1e6MVupnU7nftsESJY7hedAGgM7Y0hpOtVS1nHyPpsNL/Jc\nv1q74Qr+cAJWkjwaSYssxJVeu49m4HdUTv7BILf0AdnoV7Dzi0JpMZsglpqn\nNGl26HYHIdqlrPMiqohXvw4/VMNHIMy79Rdz6UVpiO15Z2FtNDaJ6RnjKw2C\nw/GgmBr7hX7KnB7/u9jZI/iEK96TKIQzJt0FIM1yzGHDzPG8gN+h9DcT4bxB\nJv83YMTR8zr9ze5dcl5pK0i+XTNlVvur3XA5QuSGxGMkEJ4BvCDe/6DxLh5Q\nePt/7ERdinmIWC538F7UD8Q7w1GKyTp0O90wdK/oYdwxQUkSfj7h0N6Ul56a\nOxVzYEZNjVz+4inL1zRwlbPz6PjgN24pM3QHZb8O13UFk7UQ5FkR2eMMciTy\nGHeB\r\n=g6w9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3cbee6dac.0","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/shape":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/button":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0","@material/icon-button":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.3cbee6dac.0_1573857205922_0.4744191085928353","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/snackbar","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"745c0e358ff3963f411fdea28f79569e0e471be7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.591a6ad44.0.tgz","fileCount":36,"integrity":"sha512-0EUmW8TznuGNUvEVvh7doDGdGaiVXjoTJD2V20WBnq6R9sSwlO4qqTIeYFpaOaEot3aUOr1bf61Lj4aYdLloJg==","signatures":[{"sig":"MEQCIHF2sTP7h0dqO6rqj2c8x1jvGhYS9IJRb6Q7tfgyI+eSAiAyG0oev4r+VT3mD+mwv5XAXAZEyd68OF+EBXUkrhMqtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y34CRA9TVsSAnZWagAAzlgP/RcVQ09LceybgCIn5Uf7\n1UCy79vj8aX/+gg1AnifZksC+09CgTth9Y+WHjTYJ8KyObOvV+qZDdvuY1Rn\nCr4W0WnQOKidfIkkBEPmBdC0CsiGJQBi4LM5iY/ssOQWj5HXElPbappvkTFv\nqbbdZQa+jrjpdel2F3BEg0eRnW/MGGHTMPv0WmunCtq72fnaJtxgQh/e5jam\n7VOmRl2/6xPNON7jj+seAWVFDTlV3HrJpJtgSI6k5lkTB5WMYoE8WXhv2gvs\nBTCns53CD8hfnVPASH7i/CQKDjbwd3sBAyXWeyhMFTmpiDShdEVz+Ogvrfd1\nu0DRqzjlCDQkFmMvnWZ0bKpnVJZiiL1nat70cf9JiT/2LIHJO0+h8Thxzl+i\ntjIWv211sGIkZDVPk3COcYHYVF6J2Dmzh4F2vkWme2Gl0WrRFw6HRdC4HFJm\nGBEiHA0MGo8LU+J8a6/jvNO7ibWcQixfM5p9WrJA51zvTslw7+hmIlElPkS8\nXG6AMFNWwZv2fj2qPF6ifzPOD1u6HYffkQn3TYYzbDBnPtT7azBPZg5yJzdY\nu56cuYrhxnuVO8ApGxrTujEYzNs/8lXFeVi7snwygNtS5IgvP70BbbRdn/wo\nj1fqPNYmf02/a6SL4OylbCmtrIrAzQJJBphx69LIc4ytZcIF2hFL/CjZjX00\n69Y4\r\n=+r7t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.591a6ad44.0","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/shape":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/button":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0","@material/icon-button":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.591a6ad44.0_1574120951685_0.7375787482402438","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/snackbar","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10a9c15ea7a88febb547064b231cd3e693619322","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5729943ba.0.tgz","fileCount":36,"integrity":"sha512-6fyHp2L6Y+/2slN1qhsQ9rmJuSx+rPMku5MYV0Sh5l5clTzEAbtRErZ3FNgA5JKQEHyn+WSfU9IA+iFg+tYfZQ==","signatures":[{"sig":"MEUCIF+PSyiN+4vb6AC2lcaaKiwzg0yeDgbRqfifWyKwBSLLAiEA71r66pEen5lowUy/yxxldsWl67i9fvhcPSM6Vx8Iub0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1M0CCRA9TVsSAnZWagAABywP/RwLvFxYqQIamE3JGhI8\nrZpwt+I2Kmo0fFuYQcr5L12atimNHbYkSc4FirRfr+Wsm659D80c6c7xw/XN\nHr4l2o0auuJ1RclAiJvWWPDoS2rpegno937VHoI3mrT5r9jIUgq3JP5v9GzN\nzhP+MAyQWsRNwXYJYhlZbguBFG21kMTRuLKwKlqYRvoA7JPj8QORnGH/OqaM\nLLsrIsOso9JqejH3LxvgQl/F+3ObzSyCXpCcpSdP004nQnh3kzWmuQHfIgHv\nbhNxqLGjhVAzBdVNluUIleat1LFQJ+MY0OarXtlxbKJfp3jyNXgxKSagWNdb\nKFzyqegwSi4Xd3Qc8bzZ+qhNRuPgn9nHyDAcfy4wI4WkN3DcDdd0eOikjl4M\nEmhKB68x3yfwcCyO7US87keewScLk7D7IRxGzaTnDPxce3ApgU5fZDCXPirX\n/59WjsqHj//Yk6MpIJh5sfAVNEPp1g0j9/CZ25sQTzncNFGAWcvWLsAxO9eo\n+5g47hldUUxypsTszRuER8gqOMsez+88vHTkj5jCf5yyvAK7a3YGCIipy/BW\nOUiPJyzLeBANiUwKws2vgM/gTLIkkudHZBF1+f2lvcrsjKPMc7gnPJjecQGO\nQk3derywQqoCiIk+74WMt1dVdwFB0GsxQ4rQG3ujh8YgayGrykBZjwL2sTDl\nftsy\r\n=bTgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5729943ba.0","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/shape":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/button":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0","@material/icon-button":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5729943ba.0_1574227202169_0.01758327950065275","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/snackbar","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"404cc5f608424f053a26e33a83b81fe6b73bed84","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.e89750dc7.0.tgz","fileCount":36,"integrity":"sha512-oxtYPs30laBoPoT2lF913HtzGjI90BPi71BOjeGajkG8cJvtUR91RG3UYjy+DhIBq1f3ecUEAwb93K19YRviVQ==","signatures":[{"sig":"MEQCIFA61/TLy5Sg2mjdMJ62tdTSl4Wor7zDkgMOZ3EngwIXAiBFRYPG8F1y8845GG/989v+MhhusjobMcFlDYtw6R56LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsZCRA9TVsSAnZWagAAn94P/jCy9odO5Knr7WDQA+d7\noJRG1ROrdGK+/FtGe6Qa7B2BhYB+QPA2AhTLcTL+6czge19l+CBUiC6Vgcrg\n+T5fY+CUsz0n+EcjsXTQemTH0BmYZZq3wLexF4jf7uzboOKtDHPyFsav3hEX\nS8kIl8lVRH0Ychs7tSXROqU9b6eS3wFB17OA3RQzAjF0HQzkSj/DErHuaGgG\nANEskt45VB/kHV75GNBotc4ZQViCi/BDl0xSnBxTJ1nhrIpGehDNRJx4Wnin\n5KrdY4QNJf+ohWH38W23D21d7qybrkXyrT952HWYtBi+Tl5Rf8emou5FvbuW\nqteJtDjMmooCpu0H98z5Cj/VAGU/YesDfwYMicnTJzu33jkKAGAL2s8aNyiA\nQq4Dw6O5uqrtBQf19ConKUT6WDNl11jKWUJOxGsmr8u/g8gvLHMg7cpWnIxr\nx+4BwnoGI5w3CjRqsn+t8Z0nUa1WCB2ASILOYVieKAQgNHIhrZnabyF7P9ux\nH4+Zlo3ku2FbOnXM2EmEkPZndYvTwnWnxjtsx4w8/HCaU7oBLZkfYffyuWbN\nSrpy6Hv8Sik1gAhiYDQs/lkunkrVGliQ2PrfN6buVECvcNLnxGKi0Kri43mA\nbC1YVryJpoYudeC3vMLCbqiylMQKLGnT91S3rdK2wXVhEagNhWwCs4ncnzaG\nFPbX\r\n=Y3Mp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e89750dc7.0","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/shape":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/button":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0","@material/icon-button":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.e89750dc7.0_1574820632631_0.8337454837813181","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/snackbar","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47d5c7b22ca2f32bdc17aa6d46d8b867c49b03db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.3e560b33a.0.tgz","fileCount":36,"integrity":"sha512-EdgOpqZbI/vmRoj34gKXwMMQL7IRgez9MvJlp2BJPegTStP/pTITWJEUEX652XBtax4ebHJn4uGywbVAofNfXQ==","signatures":[{"sig":"MEUCIA2okVo1EykZbq6H8OPAu5diUegTWiAYRfvlMJZJGWqJAiEAqZZgAsRaRPTgfp+FFRevvWAqPbaWfuRAgPFGXEWJucg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtECRA9TVsSAnZWagAAnTEP/2LzhFY/KdmkiNRDxMpp\nU10TVFJG7Pgqae4CTPkx9j4jMRXxuS2fq8oVjew7YcnTtHTZB77RAT7PyPV7\n4AgMkOdbuOsAptTQB7v7/gw7ZAnPTc99Gb43moEB3vPitbvs1HK54XWySmh6\nRTpKQdM8zT30qqGVzyJOU5IA1DuC1rvqOeHGcMVHaIUk108pjc+KvzxkuBct\noF9b2H5IycnB2b2OyySrv99iOLmGv8UFHmc9y/PcTD9YHANOpMG2RTCgR9/S\nPjw9UKh2w6I/aAa13uuqqXJ8Lmnj+5GHUKssy5kmYjYaXFyldU4lWk7a1yAz\nkwMxsq3uBRqpHtuKwZJtepSl2eZdIn47jYCcJDLvMju2hUWNpuJsCidZZUSJ\n2dnLVyA0iApkP5RjPi1GuQ3iEQ1Ym+oA0P6Gv3zlPFMoAQQDeEoc8e8SBkXr\naB5X4wD6k/WRwI4xPt6nMmWfaKJBIWrEp9uK5W/KjRenkhUekLUWmsh2YdJ0\nciw66HfYVHXcjsHbBWVpusaFST5DZ+oT0r//ANMI9yjTo2ypZ9kCWn9YJwvT\nJfiWxb6vKN1OBE3DGE7OS26xr45jJreH4Fl9agOSyWhsj4H1lIdKkrHiZ/zJ\nQpMZBodVlvWp8DHYJ7QATXNtHgetTFwJIRgiQ0rw1UHGm+BNsqaonwX5nLdg\nMUoh\r\n=bs6a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e560b33a.0","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/shape":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/button":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0","@material/icon-button":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.3e560b33a.0_1574820676161_0.36760544058569855","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/snackbar","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b75c2b6f0a4698a649182d590ee80b16bf2e3024","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":36,"integrity":"sha512-ZbTQvtMrIUIOFxbcmHmk4V9GvfQA1mY2R1DF+4sbYnfBxAcla41xr3UZPMg1e7ivOYywhlezUrkuKMr9ksuXSw==","signatures":[{"sig":"MEQCIEbzcsbu8U/qvTraAZHyX0tPkHNjRbLmfZyNpWzhfMOiAiBz7gbsIaDc3/AovWFHcQe3P4ZYe3FRcA3f83QEUWFo/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtbCRA9TVsSAnZWagAAGzMQAJC7Qzl2sYiGttuoY2Su\nk76Ye7C0DK4T9/zEEpigafHXefp69GFxFgB+FqVj21eZDrw2hq6KQJaExpX1\nM20OyyB23+UCS2W2bwy4HO+4fpirf7M1eCQy9FrcxIUokzkaZQ97V1C14R7P\nR1795hvZ9baNcfF6MC73mi013Zb1ET+XFr6uYAvfsBwWJkVm1rzeNdRsVmhi\nHE1Jx3uk6O2kclymggYtNka8131oiEETfegcqapeN7qYfFpkA6O5SYq+gKUj\n7sJuF+d7hraZRRAZLSx8f5Ev6BdYO+OKVq1iEaUmTQTxPt4xK1I3XvUOKjHW\nIDr0zxIwBQS/GXpiIK/+fEwIWgAQkxM4vMR+n0VuIiBJxUQJTHfBTBZNopQ4\nEJ1VigfVsatZiyWyZ3rGqbLCh4gL/vQpWCZFBE3V+DN94E1MNQ50kQwC+AqI\nwBIc7V8kDOMe2He4Vdn8oWd2RWWdVt/vgOw3KEsQ+CEtKXJlFC7aoKX6wbuV\n2sL6Yr3XudRFU5/xypNdVHsZwSwATqr/3Xns12Hpxgbohnw995v1JIxO+Phz\nGuo8UmphVjvQ1g571uErVPkhVBeaUfc9Uv0rHVEu6wxGcNLjL1gTHukEfiXG\nrDGxN5omJLKm5Lyl2dZzZRlcU6Ce2Ix/kfW7tE3xhxd00EBehvFx57ZWqjuE\n2f6i\r\n=KvTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7fd17ce5e.0","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/shape":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/button":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0","@material/icon-button":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7fd17ce5e.0_1574820699412_0.3447831031835533","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/snackbar","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4484d375d25f31322648bae30a1dd6f2cf6707","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ec729683b.0.tgz","fileCount":36,"integrity":"sha512-HB/5dl9CuNFsq2gCsn+J8/omQvXB9ONL5tv6V56MRS6Q8yV5tM13ZQcd5No6impWn9nL91mF6TBzzyIDUvMaAw==","signatures":[{"sig":"MEUCIQDMynzJeFaWdrBQR6CNT8ONYMc2LwBcuUMTzUy2IpfJcQIgUm7Ta12RTlVYRTYDNtiTz16fcGhY62xPAXB7CVufmcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pyKCRA9TVsSAnZWagAAME0P/A/VjQCYbLWAVF5mnmup\nVWnTIokT68tZjSKDZWfmyLTz/3jeI5NLCkcsv/dHjqEVY8kJykEJ9Gq9zyn8\nJsADtSM92AChY17X8NiyRLsT/8GmT1q3tcG30VpVmOwOJ9UCy+7tAQ8Z/58c\nGw6G8XXXxe4JO64Ris8UZ4/2ngCZYLppHznnQCJhOF0M8rBCtUOdlOr1h45K\nb6S9oWqPEYAVIOZXVVZmpEb6iKk5+937Sai6fFWH9yHQYh+MNWQ9zB5hPhWJ\nAbLI27G1Scu3+G668buFFuci8jdZ/VvqOzPR3Gyn9ha0VXyanS1b+/WWPpiV\nPiJRovDcGG5GkJW9MRGD9ZLirhHD/bngbiAtSZzaW1hhGnvKt9a5RNH5QIvs\nNS6qty2bD3qn6k/NPTashZ0v0whcULVz/YJpx3TKs9WffrOpWqxgkWJu4ZIO\nPijM2ouR2INcUMp1UidXa0FjyXvEgSvfNWnqdYBQKZNP8aXwvfpusURZTV+H\nm6dqvDdvCHq/WY+Z2nohMFZEsRnysIHjOLTyI7aaN/lo9mPoTx7UqSS6T8SP\nIG6hXS8EV/pBIKDU7EN18J5JTVOGiCYUPQQirLz2jdSRI2qfrIm/u9YIC259\n9QOgDKgHgvYjpVYBaVHrVsL48jN2aLhzjl+SG1m60qxPP7bAUg/WWJSzfGjm\nhsec\r\n=8yh3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec729683b.0","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/shape":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/button":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0","@material/icon-button":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ec729683b.0_1574870154253_0.3379588361594352","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/snackbar","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0b427b4a31897e7f528a10184ac103e6ac6c655","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":36,"integrity":"sha512-4TpPUaG4CrgntKPaz15jSIBMhGNnCfp914rsUCIFhxfCvtDtZ3a8r2ktfZ58ODRqeTUnhIbPS9q8OuvYGWoqaw==","signatures":[{"sig":"MEQCICeIR2FL5U++gNi6j4DKGsPBsA2L8WSFBKH+pRi4FinBAiBluFBxrI6uTQN0g1Py+j9UbRxhnSvWupcgruncL7zvZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3svECRA9TVsSAnZWagAASKUQAIjwe3Ii3Q8wiGtL+x+e\nnHb/kr+PGKRvah/OS9CQk2+cAyqbEJR9wsIE15g1suW2QtGo8d7nlqcq/m7v\nSd/dKt4vkK1Ilof/oEMAU9ZpozCgXn9xYrPY71+IBidQc2jFBEmDTc5Pr7RT\ndjza+TY+Ccae+0SI+MJne0WuP5azWuXf0WYViusZlFmS5rlg43OdYluI/l6q\ncFzKcLXXUFFR4f6P9BNpcBrZdLrM1UUrF69163xcttN5TXbAMH4c5ivHbrKj\nbgYpd2A0P4t32bF2hUrKnl6kz50mcTNfnrEC1xMC/gioowM4flJ6kwmJyYpL\nACrhNJ4u2qlcBGEexh4kbI9L+L3RfSlVE0kh9d5teSQjrG21ZZYOvmjW26G8\naJ0+Mfey0l9r3HUiK3b79I9nA010JgBgvd0s50z20CqEJTDQ4SUNu0QNgr4x\nZ/ksxClafxShivlmNQEU0L8V5e2hrAr7tVnj3uR/n9S6tAYYnqpOS4ohc3sI\n+oLbLE0Se02qNGQ9rL8sheA3bZMzToA6lgLXgCSTazbxZLAu8i0N/YIxfkuq\n0jOZtJ8JFCyZHXXX1zxa8ODuHRgYmrnLMGofm3Ho7XcV6OyFucvRaOAyRirO\nRQhhrpqGE2HxbVzimE7KqwIdaBZq2gj3G7y5hd2aGcqKnoivbqlEpotdmWtz\nRHtk\r\n=qYQv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b8bc4a26e.0","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/shape":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/button":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0","@material/icon-button":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b8bc4a26e.0_1574882244322_0.2056966840978418","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/snackbar","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05735242e876e389abff2e421058a3a322ae74b4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.f978109c3.0.tgz","fileCount":36,"integrity":"sha512-UZ4gtkiRnkrDJrtXhPttjDCwhI5sdS2jOoC1p9cR6Tib9YpHyavGmHRWOdz8/wa7hmo7yzm4HWEiyNF2L8jjpQ==","signatures":[{"sig":"MEYCIQDXhaHFZd7zzGpgw1m5p1+JfTwnUqDmEuvbT0NNGsiNJAIhAMMmMdh8Bg1Bdd1+PUUFjJpPtlI9KPhjraM4yQ+XnpJ0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UT5CRA9TVsSAnZWagAA+0AQAIaDc3/4QgfArts38P8c\nPiCutYJkPmIaG8eghlzHKCAxEWg4aemu1ccXzkueLb73CqfHA8JB2PuSKBEp\n9IbqQrNnlZ68+B1wEiu91HraIqwabP3d1NOjYfqq5e8qE97EIfr6JW59TI4R\nIl6nJNM0n8ds/ZkqPwBnj2PYlt1JKNFrbbSuFvHeDmA6xfer8IYIcVSwFtaG\nz1fi36LV+HiaxOqaEUyT5yZYgjf8GDwrk5/MQI+3qt+JGiM53qWWJ1/b6j7I\nZnsvdNAEJNgQ2ZKYiZW4LCkLnjWzhFMsO5ZWJoRlwD87dfiOpFsguIac82ZF\nxFiW85SNu6hys3W17ePZnQqDi7EMnS/yCNQ//VpnNn3pvtL9XCTLRzTqkPEw\nUlrxr3DfD0vff2JQhDUXvPh+OYe+r6cdk1La1jpjJpVkKYlcswZ6cPEOsDvy\nNu4pKqMO5l4iHdO5jy4t//3/tkcym0zkvVPCXMHKJ5rnCjA7RqhmbT7hAGLZ\nDlwk2b3Ux6fL/SfStkS9NK7bd2YbAq39SEDkW9N6u08ah8SLyQt4stP5QUQY\nko+74ptYNaArTKZuOZip5twMRixo4O22KqIL/OFQWA8ksGMYHOliqWfc7ngV\nEQIr6YbpzWST0YMDQKsByb6Kpb/pwPlE25G/mEp0nBgdOqAbXvaCPsSEz/rh\nq+V5\r\n=xEU6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f978109c3.0","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/shape":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/button":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0","@material/icon-button":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.f978109c3.0_1575306489398_0.7060213520650129","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/snackbar","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d01f89fb7089252b4bf991cbf419a176dbc45f68","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ad9dfe706.0.tgz","fileCount":36,"integrity":"sha512-KG73HP++o4NYQaRQaEw2FjtQMrTJMgDV0cpDUBctnAdTs5FqSvIqwEs6BdF7I/wFUBbay9MnzMN9PoFHPZIG9w==","signatures":[{"sig":"MEQCIDl0fhSD58hHECGtYtn6kFXDxhIqDg02VNdQP+lXIJ6bAiA/siu1bhvqb0sAUork0A8poaIdQCUVQec8bMFQY/Kc4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1ZCRA9TVsSAnZWagAAMLQP/jDqsSKDuML7S3Gl67fn\nTRWg2yqnklUUj2zRk5FVuBoB0rYP1kMSy/Vn1Dn6+cHIKN1kzmtgCdR9qG1n\nYhUVDA03NG1zzy7Ab+JtNWR8SMgever5tLlg31jNi3xUSP4Tj8YuBV8Uq5Fk\n6pHIPDczNVFLAxP8ZC4EdGK+nQ8uMOepu6qO5lYxG2kNaYRAei81dlAthb0m\nhUuWVJ0qEZ4eEFdyfyPkn/mfo3N7fvXzwecI0iVPJ2TSNCH36F3Cty8jQ+ji\nrsDDSc/IkRwb8HxJ44fCNOA4df3VW8IFF+m7CpSe2DLb5t8nukuQmR7nyvRX\nARmGBlJk2AiX0fDm2yHZjjxNT9e1vZAZ9b22QMUAOTje2Y/dfGUlWFhtkMpc\nbjVayli67sgvuXjD64bs9JNG/NS3Sz9pdUP5VmI3XJvEmz9T3YwkjVQ4jdKm\nCRPogJRxyZlkbBjAHnOjo9oLXktrzyb8+HeNumGeVcDwXxKjKoteqZmNhw76\nqsr6AZ46CVoc2eSYbkVwYZYP7fd+HJRFVob2GboG+45gX6JVTZugQdir9ZXa\npdDqKpofH0/2gYm3KhgqeDlAjxV2Pr7pNRANhb325qN4GE78FyTxtxL/gMye\nisBRTynpkdba35MhT6HnItI/emdcG1ZasMbh4XeNmqKS60B75j4NiFgZwVBo\nw1hd\r\n=6k/Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad9dfe706.0","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/shape":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/button":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0","@material/icon-button":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ad9dfe706.0_1575415129082_0.7675664789801184","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/snackbar","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a42a9bec368d9b73ad3ce2c2c221fcde73c8589","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5e45d77f3.0.tgz","fileCount":36,"integrity":"sha512-jZWCKkL36+fNZlM1bU5yH7ACxccbiEiqn6csEK4lg7AlDRSv+yxRkw8Sf8O62oj90IvNfRdjCbPdHJzxv7qGBw==","signatures":[{"sig":"MEYCIQDnaSTCi6MprWNqQZy1DaEf4LiQ7iKoj38GXLIpOuvPMQIhANTXz++6ZZFdrrsiM8JcOvXkapiUf4dSHuDUthWY0NFH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3ICRA9TVsSAnZWagAAOG8P/1KxP/c7kV3a3FvvNtQ5\nb+mmIvweEWpuRRCoB4S7KpUUjH1t38iDtqOokVFwi6W4tk/QQmkVsG/KfjoG\nN8jYzo16A9Sku5rSthCZddV6GVe67pLqyguq/ejQDixLfcn9ib4tbRmcp+hM\n+5mOE0VJXfr9apC/FXtLsvBnCvLXaeTrp1mTl962tD3FKrAVp/aWmKsuCN8m\nnXVmt4LyCiPyNtBRP8owimvvx04XF8dAeJwImZXJZb1A0JVSleENE/Ol8raF\niUMY9g+xzKs01N537gUOogQhnqm4ByRtP1lLurW7/yoqdpyxw7RxQb5ZjgCU\nvhSeYvnO33Pe/+bgxEoUDGUl+YcMTze7p57bjDTpVU8BiVX/T9bMxntn+j2U\nny+GbQyT5H9ozVBSTWwb1ekdaMFvdxB/1dhkBlefvGQVQQuKPDC4ghUEY7bT\nXWkaSV5/PAP49nT3eaFzb+di90wGlVIkerOoPOR6F4BeHWP8QHPWifoFvwWp\nVUHp9m9MvNeWZcx34e8A+YkWuIXu5KlHLQN/aUkYEsT7A24OCKLb1tR3/7N8\nO6RxRWpWImUXvp3pfdgU8lesvKw+zvAQ6aW854rzhHdSAcndKW/Qgtny746m\nebVVcvY3JAenepBlPFWSWOodFm5vs9d0z/Tlqj73j5S98KmgT7z7CDbMillT\nWsc/\r\n=ECdq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5e45d77f3.0","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/shape":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/button":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0","@material/icon-button":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5e45d77f3.0_1575415240449_0.3588048875391512","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/snackbar","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3de41c429c3f17bb9da72ea5fff59cbbcbbc484b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":36,"integrity":"sha512-NkheVincoo4XrFSQ+fb93BcdWCBn47QVnHsGVKsKqwhcPoeFDUSdTgbz0DiIX8Jv7nNUXODDBSeL18QYje9qYQ==","signatures":[{"sig":"MEUCICo/8Edc9Q+M7gHvHExHbS+rLkqLRPli8jTyUN7C8mVhAiEA9o5eMCZwMeI1p7KZwGdjn8G+yU+yPqFBYCzskmjYHt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3jCRA9TVsSAnZWagAAYe4QAJ88IHoi/6UR9P4iR8L+\n1z0q6ad899Bmc3LV/FkG6G9w7gWTTyXtuTlnaJBFQUpvIr/nE5dIzBMzjVZv\nYLtv1UwGHA7E3fqouSIldHa8mdXOtSrgUIzxdqqMzH1/oEYkHPHZb5t3QDPQ\npjLh4OcVvEOfXAPzXnjDEAEOPCJiwEFgiQRSjJ1jv04JU3rV/oLgvmaEROEU\nZ3dIGJQRgxIHeyNxRylNbQuofAhe8V2koeH1+Bn3iTzjpSozyIlW7aHyBtIs\nBpLf8k97mM4CoUXv6/ymAzGrnYqaXy4xMcfknQlMnN31gDU5WkNK188j/gfn\nYFL5+tiS5M+HKPTLa0uVsE9wyvsV8/PFdQIS5F70xJf80sm3OBIrWUk/yZX9\n/aP8nEJhF4nq+Vq8vkkVaw+zh3h2njtdjP5UwHQ+eO4g9Pzwt+V4KYNj+quR\n1sqDpfJdw/VcVaQxR27//yuPcshuUfK9Na5wiypQxVvvB4x5NUH6kKA8huKT\ns7LuzBiOv25qVQyY6KJYDRSrw4aogsi7vIbMDZBByVeYFsYvFR6dzPes03w+\ntf36GbIPPZoetyx7bvksQUkd8f2FFAlR1SSaoXt05ZEfHZhtJYCQ6yjs590I\nMiD5eUZkc4MPrw9kdL+6UqlvF/75cfflSGjwipxcnTpoO+yyDtw9a4k54XAF\nAoil\r\n=dEAZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d10e8cdf3.0","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/shape":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/button":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0","@material/icon-button":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d10e8cdf3.0_1575415267170_0.4142161119114003","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/snackbar","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b927d23dead2c67ac4850af2f68f38e7e1b8b791","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":36,"integrity":"sha512-HR8lwlKdolEM716vqAYvCrHnr0uI31ZWLiazOBP/mWhvYmRPb+aHv2oP9o38ONQlEeykDuJeYifraO31Mf3Omg==","signatures":[{"sig":"MEYCIQCPB2EmnagUken3rVJ21CxQC96t4rVhunw6N4ASQX7vCAIhAOtntw0sI6AVxSDT6C3IcSkT5GDj9mV06bYMSTXHsqb4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vX+CRA9TVsSAnZWagAAvJMQAJFUv3YQajZfltbkZPut\n0nUd0E5H7phZon0y6kZcPBUIfTfy1g9kYc+4SLW68mRLFnozBkcocWLLy2C7\nXP/pXkTXcszexQGxl5qrRzdyp3BC5WaBuFXNDo7IrAvVcq3LlxghD7qOStjz\nu/y8xjfGH9DGbYSdzv+wICSkysUVe/iY3fXgDTNugXLpJXyIxgfgp7cdVFgE\npyI6ytjPlDumfj4WZce/BfmDta5mEiJHOFXdrnL+2TEB983TOnFqp9JBQd06\na6H67XDg6g1CEnuP0XTNRQbmpf6xFSBg7798XykT0oTlXt3N6VBN+8f7ULzv\nil9SBhqleMSZ6R25uQFQfYnfW3gTyfuJh3/G7WRCiMkfXQGRKCi8L/uDKS4l\niqzMXl/JTP1/pZTwUiKJrPttspfNTxFJ9GzqAiUV9n6qoZ/ps4fuBxlYqTz5\nmsFXKx9iILkFXkz3eaeu94hejsPq8fIceQJCaAPuz5YMn7uWqbsg+EIoOSOk\npKAoMlQiXb5MicikxcjNaHwfOz5n5bvPLSSKWnyHHgvUkv0BCpGB4oaryxHm\n5pRYpOKlnZaEncxRbRMqvRqdr2Yud0gz3qxWY/HK8C2JC8z/VtRl0kW+23Xg\nBWDYoZSdD+Gb/7YiEhz7oxQxKNa6ghfffQsTLZjK9ijCzFvlY6IJnlpjskdy\nQexm\r\n=5YWJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a5dbd8a2a.0","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/shape":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/button":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0","@material/icon-button":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a5dbd8a2a.0_1575417342142_0.8875457727608773","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/snackbar","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dbe4ddec52ea279d3997f49803c1ebbcd4aa0c0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ba879b68b.0.tgz","fileCount":36,"integrity":"sha512-rel9fEiOn37L9C3tm10RgoEuq8OSYv1EMgB3uwkvAYqoEVRhNHbvyaDRfF9QUBDNc821jdSD8sIB8Ji336c/CA==","signatures":[{"sig":"MEQCIHuMWn0n2hn/kmln/Aic2xV/LSlwD/HGCATgjzfAztCuAiAiKBA/5ALirO1jrdeULP3Vp1E0sXfCkb/lxaEltrk/Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BW4CRA9TVsSAnZWagAAedgP/3bB1OonLMuCMfppmToA\n4B+szXG6krRVnUwfsZPzODJiGP+Q2hfILCKOUEsDudALbZpw269qtzKlgfsE\nVsw6Uhujuy3/gfzlLzlcCJT+phszaJERwtve09OvgDRccZwl6+ko+2r7hohD\n4kxD68BhL5NUaQbiYc068zxP6vvbSLM7+JfmXOizXEWkZKugGdmGeLukOyka\nDypV5fX88oFi8nZE2vJAmT8F8DsGPY9Bhu6rov0Nx4zqhhlRgDpv7eyyT9Su\nQcO36nYDQajlGdnd+6hgDk/fznx5vUY18/Dq94SuFlHWiHvkWNSSZp8RXDN5\nzP1aL9KJ1x22X8V/jzhlzPPvQcrjcvK1nChb/9LeAJQencO1TuELv/kbTpZk\nEkBGUwOnod72RGaAQVfqziLdB0/IoFxR6n0gOd1JLb5wlcTpHG675WH7TwjZ\ndazf5rzDJWV2b0Jg2RQounC6pWDMEcIPrygmC2sUJ6k//V0nU34sW1nRZTEk\n+c6I8GAGeZX5hPDeOrSDHMbQJFDtOWDJ99+bOn491x6f8POmW9wKv9xcw+rf\nYc8VwfA8MffY/00gPExDECpLyjRGpi2Gir0DcJ0CrcrVuJ8C3FADI+kMCDQ6\nMwpVVqowLH7SYWI9g3UO/B9YSGBEkBy+QigQBEkEm+wHIe7pkifs5Wo/1rUG\nFbkf\r\n=IJ4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba879b68b.0","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/shape":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/button":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0","@material/icon-button":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ba879b68b.0_1575491000206_0.6000557473866093","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/snackbar","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"669e358dc4b0773251906ab3518c8b8e8c3e893a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.aa0eba489.0.tgz","fileCount":36,"integrity":"sha512-AQ4J8bE/e3UomKkFkBflRF8/JyFx5TVG0gfVBBa46drBXERKRxmQv5b3HdHIzzA91wc77FaWx893mCaao6E0JQ==","signatures":[{"sig":"MEYCIQDA1IiPBQzzKISpT+yPkkjns9+ruAlvaseBYTACIrJgMgIhAIKtKtkOgWs2+AfUPwilOpnfAe7sl59AH6XpDJ9J1OOn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYTCRA9TVsSAnZWagAAu84P/RRb6o0xY59lW3sXMtXz\nftOFLqk9kvHif1HD5VaFdF0UiWVxFy+i7ZIpMuIYm+9uvgUI7yJWVe/yPcwd\n60JN0EWMQeXB58+qxvoflzvyR0oMMqCBAm7+p1v3a3p+KE8/DRFfHyGc5jU2\nl361bYr7Ob9VxUVE2YCHoFqCGoridtqBmQmoOkgfrZU/AOufxbhxFNFWYP2K\nDvVMQnELH9zySBdS1WnzImCVKTJaUVK1Fq1MwFd6RtVOCI+u2j1vf8M1/bBq\ntcIcccKehNv54vIEdHiEYFUdvVbSwYtosh9VJlcSAd0cS3+C+D9cHWPloJ5W\nDTLWugxzJpzPEMQhKI7AoK/O3wSCeTwZOFskEvMtIPXNEaUjuOL852JfECZJ\nlYaJ2TZG01mLy+gwbTaqGoCELQXotBRlrPwrazuFvz1UhSBkUtYwX7LcFgGK\nSUSgtec5eKrFvbizFH6AofF1A1smR1IZqyo4f5t+//HgY00dN6O+nU3fUQqS\ngkfEAK3K4CS6OWcfVQHmOrE8DMHZR58gcXWAL4PAeFSyhCRZHKlyde2WWDU9\n+VLBXNrwvL6BXMQANYdAFdxALOd696oByxw/vIhC9dqxh6f1t9psuLen+9JY\n+5zsk5AS6vuYKBUDHFxg6H0NniOn27CA0LEhb7Vi0dr3d13F55YeKzVUP4id\nRfOj\r\n=p8s7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa0eba489.0","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/shape":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/button":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0","@material/icon-button":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.aa0eba489.0_1575597586865_0.45265916732389533","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/snackbar","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a09419ea7554effbab657734887598f4cfcc6bea","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.cb7b71a86.0.tgz","fileCount":36,"integrity":"sha512-EdNv28abpap0jHUKNdEpE5bPVKwwQgfnMNfctfByptcHt/DO1H43FUz+fyQqzFaGMuvT32aUDkRuKAiEdybxSA==","signatures":[{"sig":"MEYCIQCOe09D99lLntxEZNyj/Gc89IUklNE8JWTOkfjZtioc+wIhAK909XidNiKiQgeFwqYrYm622IcM2u5l7ISF0wdbAL36","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uq3CRA9TVsSAnZWagAArAAP/iPJ8z73rAJIdPbSif/L\ncr2EsWXumIMalICA/hfOjkAtfjTtmNUrXBRpn2hdbU6KP3IrjFQ6oofV04hL\nnunWBd9V9dgzr0asIMf2Fz8RFPEYIHfn+V3E8VxSNh17I25s2wdV9/6tjHbX\nyEnkUFd/2KrrdzGdYcWWQpnnGQz1GtfVwJmQw002UaTyiIbZLuTEAC46ZUlI\ntvw/d68CLo6tOI2Z0W8bP8BFtRSWazPvKYaNuVyceppydlwcZjTD0/zKYjGV\nZlhMFGxyT9FdMRVtjJ70+taIiaoBzpwiaQ2c85nl/PJSh9VDUmN+5bJ81Aiw\nkRThjQqe91P5wl5RsI2R5uoj4p0g/U4zVv/8ZaPMiLpn+rik7ftnPzQpv0eN\nzqUMJMbc02KYg/S2977PLrTrTeay8GmQaDlY1Ecs/DycWkP5TSno/fvHD52K\nKHURn5aJ4xbmiBzdJszvGiA7qkBURxwTeE/uNAmj/FkHuZZo+GSateWUr2z0\nhDksSYISJdkjPpFXv6a9oJKAVeCnn+6kamyWlGrO7ZS2DepurL9YduA5lK8g\noo17dt0Z9RbOY24NMuD5KZgvOmGh18tPz1XMrOUUWEjWwjDoKB6+9MrXf/hP\nyS5/qODIwJl/yElvk01JFqqr6WbrrxePR0IHdR7HmJKltWZZrY8Owvuf2FeX\n6Cyl\r\n=zdFh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cb7b71a86.0","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/shape":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/button":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0","@material/icon-button":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.cb7b71a86.0_1575676599061_0.6895719473362842","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/snackbar","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05b1923474892229e04c8ddd4314def5f8469f3f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.50f110a6c.0.tgz","fileCount":36,"integrity":"sha512-IartC6DaaaY73G8oDYsboXsuxLdhQz0xV0LTTm4B23eLELjy/Fhtjcmbj/cmc5aGbRZh708JqwTw8wfX2Zx/pw==","signatures":[{"sig":"MEYCIQDW/aNjWRXdpedtx4uvzwkMgR69A5cXR/ytcmzHTYNDjwIhAI9+lJZyPnYWS5WfyyW1g6z0ewZtYSfUMfAjUnj0xlup","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788uCRA9TVsSAnZWagAA3KcQAIVn3RHwzGwDgGZzzZfd\nQ99hbtWj/fBCvQZ4XkjXKoiIJzoI4c330EwKSEClN+XyNhGAhhP45OTyHW/Q\nVgEPCjxq4HirShNUFH+ctMlXJNdxmGNqzULmDi6AKSu3XBF/aqf7O3Bmap9O\nVD8mj+CZismI2L8epe7027WdV/tmUMzWpdqu2NeVsegDzIWR+BgPpIsEutSe\nCDALPYdPw6SpZhyu81QETXNeHeN4ptlqXldajGHN8whBeFd+bGtoFrT7GJFG\nwddD6br0pRJ8O0wmfC1aknm1H0YFrOV/6YaPIrUFTaTsaW1SqsUref61hfiF\nGgjW+Gky4FCOAb2oh8qCnOF+79sEzrjwFpBT6/MQfGHu7forWdHrXu5ectBT\nhuM4NCJHSKeUQmRE/DbkI1zPV2rOIza/bBu2BHFZXMkwNg0SNUb8077kt6TR\negg5oTfSdNdfZItXRIZ2p9YwU8GnrN5yn4L7+WmipSYn/KdszCcGsihRaBP6\nPy5bEje4uPsmyWC7qnSfKO2HWctrOl1mKa4rJvm4/bw7Yc53j1iouYNaKWoZ\nJwO8bSGI9KuF2kpVkxOJEMbFMAjts9dx2Ac/gn5PZDQD7BcYOhWiQyhNpwUD\n7oq729GLD3QKCEi30vStkV8uOrw7Fy64FtNqtD68RF8goWR2rB3XwMqkS/7F\nb0rA\r\n=9Xpo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.50f110a6c.0","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/shape":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/button":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0","@material/icon-button":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.50f110a6c.0_1575997229607_0.649877885932536","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/snackbar","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"714881de8c8e1fa4a1f72fec7e0d43285fe1d572","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.878a08b7c.0.tgz","fileCount":36,"integrity":"sha512-QK69Qw2Gd9HqL+O/v5BZ+9eWpufeFmJ+X30xrI6Ftyb22qjvvaIBUBra6mkXXJNsgwiyYU3KWHiGUgJX4ikyVQ==","signatures":[{"sig":"MEQCIEOdi1PLQUJ6JFYhekIxWpuihPrTXuOXRsG/5LUogaKNAiAfihWejEiIMToUG1CW847MvwaOpEpcDE9bVckLUCZDfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U7CCRA9TVsSAnZWagAAyV8P/jhKHHz9asXqEjjhuvEf\n6QGLln4pumgrtuPGMkMDPaYwOC0IDrWgRH9KQZoLns3YhPHlnbFPhMEkNkr1\nxqU+7UMHnRb5dpYfZSVQciqUePwu1MwHLaG6R0mxjbHnmRpPdgMWmw/BtZQN\np9Y/HQd/5VBVNpkXKyHB40Jl/6SZz8JQQbAJTi8P9LwkFBd+kyx+G+cN/zsc\nGqFjCjULvI83JMGSWFJMpXYU7U6877ot7VQIVMFSFwg2ie9wgEzLOWOq5tZP\nl0eMrQ7T7Rx7CGpCkPtd1uXt6tWKfaUmOdVfs5X1eoIC+WVNKyDVzuHrP0+L\nt4mLH7jzrKT8nhAm2JPHNcRHGtA3yMJ3zsG+3RaGP8BLH3nh/w3ItFvQ8TZ/\nNO7CdCVpt4pLeP5hlt5hgq0a0hnIVBMzNSmnIKzt3KLZFIre9Cx7pcxVAf5o\nG+7yEzio2kusU4wp8bDsOmof+Taky7bzVnX2KjfqXxYAaCU2S3DVHR4c8HLh\n3yLa9CWoGr/u0pHXcN5/G0Hdp+DEMjT9TycRhv3IAgmS0E7GRdaPFzNLb+de\nKVNqLd3uKvT+q2lXx5aYLHc51pt4z1OV4wvFCoUC2G41pSc7oPrXui9+XfMk\nsAXAt4MMw2lVuZtnuHgoKGIpn19WF4Tu8ugudLohxDwRkweLG4s+eoIA0FAc\nEibd\r\n=yGCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.878a08b7c.0","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/shape":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/button":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0","@material/icon-button":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.878a08b7c.0_1576095426563_0.6112634500033205","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/snackbar","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f2c64092f780cf17afb0beae65a2205b31e4bb6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.397905b4e.0.tgz","fileCount":36,"integrity":"sha512-FzSHFK23ZO9mnAmrZ3aKXh6mJ35mWniDB5ndAHEwOqCjf1rgVB56MlWj9U2xTiAtu8R/TG2AK84vwX7IT4jaXQ==","signatures":[{"sig":"MEQCIHkBwgjb4UFdIUfGZRJIqG2RVmH9Fu0ucPZ79MwCXWoDAiA9ewJn/wG9CSsz0RTlrSe0Jo24PyaMuY9rvuzQTPvZiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apdCRA9TVsSAnZWagAAjSIP/3BkYvxOPeUyi8rRyfgy\nP2tsakgpE8SPexHPb1zhQ0kMFeHpgx9mYYlRe5jQy6cmO2eFpVE70XQ/dTJA\nbBoDvgIJ6mkD0gNnRF1zPz2S4hyoLHSoTQM5L8+AWyn6/jPiHxSWUk4lNo8q\n9C17vQ2Hz4PqxC9YA8mWcwcjGtM8ELNa0PCPPDtwoufwRH/035X4N8UtgHKP\nh0LQcZvbnlt4EzUgXpD4U9vIRLo96iktFERHOPlSEpdJ4rbyl66QZpo6287P\nzvIS7bOUg1mPYgNKAStlTJTA/I9vPXuOBanvhscFWO9z6QI+kBFvcmpHegvL\nyQixcr/0w2C5ZytHaoh4p265XkmGniH0BVM8Ro0wlNYIMimLS3nr72MLyVQS\nvHlRQiY1y8X1AmeCjH8sm8TJU6JT4hQn3vmJh5Vr5VLFjDl9e6ZoucPrsFsx\nOOVp1kROdWdL1LHOQRjfVojfFCBcwN3P9y9qPVuDWzHoKbAxwzj6BTLkg/tL\nC6ocPC8lTMcamjo+1ieweOTGHzq6c0RqrDoj+F1NwslDm/3Kz3BxTzNTHla/\n4JXDFFKS9sWS6dxxkf2MsFNji9ukQaCR4by69gDjdDWYQ093QC886yyjxJcA\n/Z3Thd517MeGLdfCOPBaYcpFZuqB2EafDteOCYlCyTU4Nrj3bBLCc57INu/f\nCupN\r\n=m83D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.397905b4e.0","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/shape":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/button":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0","@material/icon-button":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.397905b4e.0_1576118876902_0.6344044471606762","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/snackbar","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8107c4a413bd97c1a61c8af0ec3837c9f5f68c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":36,"integrity":"sha512-XQePCy8FJqinvvRy7OXC+vWlnJSnXMH3tMPHdvIoE2lVK+sGxF9JiuYARJzOFlmIQ/nhNHT92znLJFF7Kl+ETg==","signatures":[{"sig":"MEQCIBczlmwwojFWGTbR7aPArfegTOuXwPOH2fbTvMDsOeI5AiAyDl38zSqtFWzj5EcrKZWOF3BltlXERp76idVNbQieJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o56CRA9TVsSAnZWagAAUiwP/RtLomZNsl0ukI2KT1LG\nJYZSCIkqjZPV6hv28EChB8TGK/AZ6xbqtn8H1pYsPmcxBI0dhCeFeQMYKArw\nXJK9JRJp7zFPja9tgSIzxlT9KrgFjFlTdh9hJQXM7H910XAIsk/5QqB064YV\nJZtv1nAzWTPHR1L35K56q89RAZvSmCQzK57B9RbR8ELerwifd/gnziqw8qS2\nbJzULoOAlbuW8oWgTadWvLdJImUzARIR/UUaPeT4rWu74eEmeun3rXRcJ/TA\nZ8LfRCj6p+EdutVo/18TrIk5xJhe1bK2gFcBUCoKy9Dyt431MXxToy+8sSyR\n2yCLesmn2cvVsmSxlk9Wd8yexsKfkWdpquXu/I027Xi28sMiiZYmPNRYfDrE\nbMGmPpB6uJWV7A3vCEuAkEcysfocYrzcr02rjAzOy57cgdiiY6N5xXPkkAlE\n8xDyO2piN0yvWnPc9ZTszgr3G9wmb+bp143ngqUiuUsDS8eMjv2794BUyyYs\nclWGBH1uupE/eIBP7Na739Ovs7rr3AEypcU02dcCql7YsZwVpHPm8gFrJNdq\nX6sNndBrd9svuRE4tA5zpQE8Zd6HtYGyiMzjtiu6rZ+/SwngzheI7bDaAns6\nBAix/tojVpjwWQSCUPB+kUJnQwbnLB8EqywMrTZTv9UVzqHGwzK6kigolmRY\nDkXf\r\n=T0n+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1fbf5bd1d.0","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/shape":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/button":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0","@material/icon-button":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.1fbf5bd1d.0_1576177274545_0.7387008472795429","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/snackbar","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"420b748003d4a2cbbeee1283cf3bc84c8b778dc9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b723dfa78.0.tgz","fileCount":36,"integrity":"sha512-/qLem42BQhvqnoJBNjFA4Pvdz4h6PhVgPo5YHcEgPBkdwPvle8L5RKkdCdGaI+eBRjwXzT1GHmr7nuwSwXL3tw==","signatures":[{"sig":"MEQCIEvE0CUwJMloimwbUOMIUtJ7+B5LwfHTxBMAFW5fBjHLAiA4e3O2uMUrnUiO5mrh1Acq3GBWO6Qlxihw03QJB4RNHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p7HCRA9TVsSAnZWagAACyEP/RKHN7oLZTI/fwtGm3pP\nYL0iiqHLxbjcuRpFoc99pyZHMePVNNHgTiSK8aUQBXxWfYpngQJASB7CsNvt\nrLBfM/82KOCq5UMUDAkM3T2zZ7/ZA3iwsegAQK6gNiwq/Aj+vnyKnr5kF/cg\nF051DLAx2f8hELcGgrkR6zMzFjmVCIpc8oqCO0X8r2RskSBAhM7fz0+by4NA\n4GBQttkkRJeyD0b5q9As4zdy/DSJk76PEZqgUI3g79rG+K6xwFzklbl27P0y\nVt9jN5K4RRp7mYL9LRrv6ap6w7YNr4JEW6qgx64k2TMqQV0xjqKU3g8NrVRk\nqAPGbNTQZjY/zi9/1YDJv5WgR8IEvYoXgIeYOMSNzNlhejwIeQ3gia0i7AHK\n2RpRT1k3fP+H6/B3UqkunoBW0pnTn2+i+8R/7N0+jBVuHYOhuo1IwiE6pwVT\n7SGHelMWAAPXAYYROZwi9bMZnsduSF+Eix1mMKMV1n9VMmkIXXLt00IY31/t\nzqoW3xV6Q8y5BJhkvVOa4MIKwj2m6u7mB4MSXu175vPj2RjSZqMlGOaVzQc/\nE4pHnfw2kNHuMbIoLL8Ck1kHRwXRnQ9B+DGmwNW/rP2+zYv3zXJ5JsihBBbW\nwzfWfkCi7yk5Ujc9kYAZRe5I6DeMa8YOJbUKKwZaZVSrWtotLtv1gfvaJenN\ntK9m\r\n=QvkP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b723dfa78.0","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/shape":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/button":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0","@material/icon-button":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b723dfa78.0_1576181447108_0.16449805511430737","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/snackbar","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4ff78a661e8354124a2c80da4f5df11dd2ba804","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.1c494e567.0.tgz","fileCount":36,"integrity":"sha512-TLfrBTdKgLa2iFMqrOJvS7nj96RdOm7wf9cXjrls997AZKJUJj0FNeDaR8kcbgcc0Rq6Wf2NiHceeJTvEzcfMQ==","signatures":[{"sig":"MEUCIQCRhZ93Ge35wLh3GpxKAirU1IKYkD+M0UApcODY6vn4nQIgIzOtfqytjT5TSuyPtBzmb0vBgC68pArmN9Rk/ivl30Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s9ICRA9TVsSAnZWagAAyToP/0spZtFjKBJcQffb9nqH\ntZ+Qx/EjPp+PIAw34YEoA04ZgUrvHO0nv0q+bMS9UsEWUnNy827mtCqwd1u0\ngQo5SycDqUdGs4RiLCXAw8noixzSuLu21QBHA3xvpT3AjZYePg9OUCiwdT7T\nfQgUXqlCAswsW35gNpcI49YaV0Uu7u3LgNNHB/HDySTdpTnzYWgej/+sGTCZ\ng0A9lpS6E9jSHiDrFaY0BoledlbaNWt5SHe0PbyOukUDF/tF5R6xa5eWXPHM\njEHiEugI+lR1OiWGgjzqoN4qK6m0TnDfKLxZiSEw5d7b5AC52rXqgvJcgKoY\nT5WAYoFaWw7zqFicu7ESZFKlAIA1m/92s5f3WWNWRfN+COVELLDhX5fA+Pm+\nXYZtWZXI6mt1m2TFqv8bv+M5qRi/JTaxjYClN8NVUXiBZr+apRQvAiFMCPju\nXVGAPUa1msthYZX0YL+jglJ4ydb/Oq0WWUWJ+KhdDZAiSMlTOHTSDrtv3P5O\n8gCtVw/3g/hu9TpMPuYIgxYLGe2RKEa+VrPyEYBnmlPgtbyXt7IEEqlsVWc3\n1OOz93nhmQzIM8IuJKdVDMaHe+QnbAVVI40BCPZNqRVLmqKP9nN7VaKQ0VSM\nQmSV8HQPkTKwvLUOAhi4687iMzaiIFureBN5Yeg1E+HinPiRiINykwsfVwb4\n/8Qp\r\n=6KaP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1c494e567.0","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/shape":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/button":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0","@material/icon-button":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.1c494e567.0_1576193864025_0.9835993180700946","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/snackbar","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b07e16f5bf40461e0c3f06c32aa6541eaffb700","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c9e98a125.0.tgz","fileCount":36,"integrity":"sha512-sTUU7ZZ30fgeX2YcO33eZgvu4a/SSPA+uul8ZYZNd0yog92KLs9vlXu3uEdpEJMpuOcTbjFf75H2JxKGezLetw==","signatures":[{"sig":"MEQCIE9DO29wZRB5z7G/SDJU2ktDVDzFLmPHuTUy8rXjTGbAAiAhxklYb2/+8P2gbS9ai+vsGPUxymeb6o4I8vTh3K9MwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Ro6CRA9TVsSAnZWagAAkvkQAJINdzE5VWzTmW08HxWu\nUkrC6P0jZeMJK7iDMHJKhhn0oMKPsDLXRoCsg1jgPnGvU8cPbrlOVdSh6MAU\nZTRoK/gV+cu9yVZmztEeKJAq9pcaHajlQaoaKI2YY/zWGe/4CUEdNHIcb9f5\n4Dp3OtqUt5ekUKpM86WiFUKJZTPCTOQOsg3BxoQdbU5uUwfHJX5kUHaz5DnA\nN35v1WihP18fWGCgTsWf7bWno9pBfk47tPOJsR5B3hPndC3UCFGOwTKrgHdx\nvimT2LP8b4SOL/JEDzMJyYTJa+KM/Yx6C2VPmaU/vwDJYzBmJm55ETfMpBC2\nGqtkaiAJYOQ+5Y47FQggTE8d42bpTrfhciH6xEDZyh1yihCPHrRlln+FtHH7\nbgko1fQoqDMD9Uqf66scgiuwc7ckBsIaCxBm1Yp7uXmdC0OkjtNEwygtHjeo\nLPgJYuMmoj6HbML50D8ZucT1mRQ5OQXaeEfmQfpWMx60DA+2P/lPbE4PYE6P\nMnCKtTcoylHbhd7tj380KOz5sOicnZsPcwdw67vj5EUYRpdol4g0bwCI7FEG\njwFYI7DSyaMdqGDaYxYLwV+ou/IyKdj/4IIk/E3ZLXIo32YTdtX2yv1GmxAG\nH1OUb8DvWXtfm0Ni1VAAcaSS61U1efeF6jNVPeg61ERrn8k6ySUdJCpsrRvu\nsFxV\r\n=vOd7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c9e98a125.0","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/shape":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/button":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0","@material/icon-button":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c9e98a125.0_1576606265565_0.6384130049730594","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/snackbar","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4aa5d73db04de74b65f78f1637d06f8c4877aec","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":36,"integrity":"sha512-mFqtAK5XnNU5iIUttOSO3wd0d56IaO53DHpA/3ECiM1r+b7FEPgBJUtdVYJ44XikFuD4OMa1b1cmd7Sg37ew7w==","signatures":[{"sig":"MEYCIQDoZJytZp516czc82OIMLNtO2hp8+d/Y5/qWCP/7hyppwIhAIMv3k30eGukjiyYxcjthi/noXN4147o/es1sm1HRxJj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfmCRA9TVsSAnZWagAAQesP/ilCBgbMjTUogdCwXvE1\nAvAShQED7rNrMz67u0NJqVQ6k9O3c1mSfGgJwnXnhr4doN+vFnqhTl73IaN3\nfHAprUNOBLsFJ3xYtDI0d8pqhP+rm0xAi9q0yI4husTGcNw3Qje8XQMFBTIw\nQi1AjE1++tX2m1uB5Ekj8j2N5OvKphbP+J5fMIvAnscEpOZVDK/qNIXiG6Wq\n3/B1enOYoKGmomeTbe3xIoJYbEemLy7/BFkg289Ej/f3DWzDxuuhKi+LSmhY\n1qL1KHJOKJdWpbnlKu0CZz8hfog4pA2I4KNCJ9NYWnmHxAx1Fbao37xr5wgM\nLX0iE0lwpdsCqtuBIOeQKAiZJb9l2GxlGNA0w+dNDAZo8teu7dr8gQA99AwK\neDLkOG6IJayAwcQ7vMckMPKbtR0IU1qY5CIk4rjrZKULNz/hnWc7ptjBCeds\nDkxvmU3amrq62CMlthBaZzYyY5cdms4KZUV7IBlPfIV8VrbZSTqbT7+AKkaN\n50viwVcWZloiqmSIiem211/bCwmMfH6ZU7tsBtaeHQTsRSS2PEnD8HCvBjOD\nN0ExkqAaofWeWFNP1O0gs5BXG/DQWz2B7RZ6qUbETfHYvMUwJ/w5G5OkARoh\niMQ4cujl5IEtIbpyt4mN4mKGrUDtaN7TE3tNfL5Ryt/Zyx8A21Vmrz7AID9Z\n1lpH\r\n=rZ6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ffe8f7e3.0","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/shape":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/button":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0","@material/icon-button":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5ffe8f7e3.0_1576622053956_0.32945491155922113","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/snackbar","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac6fd1641b844d104658ac04405118469f1bf934","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.47949b08e.0.tgz","fileCount":36,"integrity":"sha512-YpvWzUvO6qafHRDA/DeSs8W5eWoHrAXsFK7AgJUIWF9Azup+ziaq/gCBnHXlyZtVv9N/7qec+70oUawdz7Q65Q==","signatures":[{"sig":"MEQCID+4lQnmkAXB+c9s7ASuzJEZ8xXwcvfJrwV08nmcj4XlAiB34jVtISV1goVL/P2GJxvcR0s4C9SK2+8a/G9hB/izdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mS8CRA9TVsSAnZWagAAbp4QAJlYlOzo/SexpvhkSQAd\neyRxHQc5fqiYdBDqc2Oq7L+4ERiPwUv07yE9g1hSzhr61WJTRd6Rw31xEAng\nPceNrQwF8MtCZk1aHfikndlLT2LlwpArf95YwknuNFP23qxVCCm5iWe++S4c\nzSO5qmj3aD4z4MfJ0TofNMGtk3w1pu00nADKCbw3vVv1QhdQXcY1HHCUQbJa\nxoKgYtUBQD4mV+Zd8nTr7iVOJSvbMDmDRl5oms4mwm9v5feDrqmR/BiRvtiH\nc3jNNnEYk2ARGCe5dtbZdNtAdynhGiJjzMqky7b6gTae8/aHTuvLj2WZ6Qcm\n/BL/KcM4UKB7FN/qhhMG8zwYd07HAl8ErHBi36fGe2B6TNYU4cRBJFT2tFQH\nN5uFiqOOWz9htiDj4PoDzpojkTSMb53+rjWhv+W4KOYWamtWqAYL/ez3JiGX\nWwd90Swb58PG6oCLjHMMlo+/Ghv6zhk1/yY17dEVs/VKpoFurg6Y9VpFTkfp\nnh09HpkXVzG4mPb25NVc2/q/8mThK3Zh2C3lM2tWEwNb7RTy7/4r+McHN/Rz\nsiFJekJZhr3emPtMWVyMU6//Y37AL4HiJGzgCLoC5RNDaxrg2fFRFVKKIj6J\nEanAHt+EAu/rc/YdtOkXdsRvDqeTyEAmyfhvmF2iRxh1YmtJ1MQE2v/YDXa6\nPLFM\r\n=jrvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.47949b08e.0","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/shape":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/button":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0","@material/icon-button":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.47949b08e.0_1576690876001_0.5906111873129232","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/snackbar","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61ca595be57f91a26dc25c4b9b9bff1b5eea3386","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b240bcc1b.0.tgz","fileCount":36,"integrity":"sha512-Nmt8QXYS25gCXDSePIWqEOff29qyqfFxncnfwKldjcYj2lI2arGvY9nrpAQ4zLddcyvvzUxYti8PO7aZRWd7hw==","signatures":[{"sig":"MEQCIHphBrSNSQNVPM7Hyc72T36j1isVAfuZNl95d1/KKxCoAiA23ZtsktiDGivu4NJpN3Jl/FI3K0GiAhIFH78N7ewQhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntUCRA9TVsSAnZWagAAZxsQAIV9zV0BAwyMX70Teqh1\nSzbME0Q5Vqz1CGgVpgVew9c/daQyec18WOlpr/Vfh3GPGIpdbaQsRPyFGJmS\nsi3+6uNN4TsUPR8xwqO2zRCP4t3hS2vlq/Tg0U+dY1MlbnqlwNm30/g575+y\n5dQ6aMArufVGlsQ7zXkllSvCKfi+WUbOdqxuhVFq0hDsTyyoZYO5lOMRK8El\niNlEE3kK7klk4Hdqt+/FXk620UhwnmeJVgxgPlpaIOdrKxxlFD+VwF0kY5Cy\nwNkvFoKY86OuVh1rQ7JoCMjaqgVazMP3uBo4XJsdCV8eJKOhHnEmT62ZzTN+\ncNxU/WzsB3mAVLA1dvh9cqJBgD0DLfV4hRGsEzfJz/yr6fNcqmtsQ6cKicbW\nT4XsKvMleoYsSPmNvhUjq7crLEK6CoeWZmw6jv4OOMJn+l30qACeKYapfq0G\ngMM54enlcfUwhBdjpI8Fpjm9O/TMHVjnPRQg0LB0nCGrGMUsbdnORqDX1WnY\ncNTWY5WeC8Fkd9wfw5HfdLW53kOz4xnov+3HyME6B1jmC5zONp6nlW10ztqn\nm696+lTEBzpJEA85iV3rQo9rK4+ZISKZtn5Qww7aIIESGtfOVxH3kk5zEzmB\n0hlAQolQ0rtDHLaj9rG1z01jiy4f84avtnKt2HhKDg0XQiMtB22zc1qxnW7x\nRCnV\r\n=zZyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b240bcc1b.0","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/shape":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/button":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/typography":"5.0.0-canary.b240bcc1b.0","@material/icon-button":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b240bcc1b.0_1576696660121_0.85527727003269","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/snackbar","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1f91464d94caa74122ac2d77ff96945e4a709a3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.391674a26.0.tgz","fileCount":36,"integrity":"sha512-26RxkkJtz3suokS99RXSu2XyT/ufxeyvZ21HSsWw+wtgUp1fJB0Le26BrzdUzl4vc1kmdUS53WQ+DRbuECr93w==","signatures":[{"sig":"MEYCIQCZNDLYYqqwQmQSrUeFOtn7YYcziVRxLE/o0OITeKCEigIhAKCVd1zzHplfD7vMBcBOHJMObXTOm6PkHYpqsjKiCFka","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntuCRA9TVsSAnZWagAASvIP/jTHDpgl9999WQnBz6Uc\nbGtHK2TEIY30g1tel0TfuaU3FBY/WfuHU84uyWTukbEJYeHlEHwh7InWop5e\nprVLHRsidVCrZwkX8ujJAXVKcBdtVXh/e7mZ7WrJa6KaGtqabgEBdIgLS/Dc\nMc6JvkaZy0MMAC5PfoGGQc0TMUW2DqWn2VLFUJqNW115Y6K66EgrUSl2rpjN\n+29A1ZcxHlYxoQG6aCgoXPKk1j98ZRt21VQZ7lB8fKw+kyJxJ7qDvsuOTtTK\n8d+2aaBPvbvktOTxDeSHsniI+0RZMjaIP10u5ba400pX0s/haVzN3V8V2/JG\n5ha5usv0+uYt3Fj/rkKHmTbeEJg2gkOCEM5OHYQt4aoSQjkFfFtqUw8T2W2B\ndmp1rLZDjNcsNo8mTR0Px6/ZByMc8mZv0YJOdUEFCqFYyHPIU2x234j1mm8/\nu8C/TGMribVXs3mSQD/M8YS/hQDCUJOPqx9uQCRhXfWUOXhoDGxxHj1GnHlI\nGbOWWElOA5a0wbyS7XT9+SJuJoO5U5l6T+f+HiFPQwSCdTwR2gJoMcTiIJ3W\nvkKjxp3x18f0B39cT7zYGkTHNtojsrEDSDrgC4vNGYC6Uhiy+Kxm+ien/l6X\nHZpr2Vt3kEZz7msbAnuXjaqKmRGrxlUZ11TTxHmaYXqfHQK/9EGGOGUk48XH\nSlIk\r\n=29vz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.391674a26.0","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/shape":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/button":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/typography":"5.0.0-canary.391674a26.0","@material/icon-button":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.391674a26.0_1576696685680_0.11440041779490895","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/snackbar","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21f1721ee7d83745bd83f69591ed9ae3db114e89","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c4837746c.0.tgz","fileCount":36,"integrity":"sha512-bWPYOOAlYlzxgRexbhXLB76FOz3qX3GMithdWDX1H+hDaGJjRw28dqvJehBcwjAgf2gGRkgmaOSyaIHmKMBdZA==","signatures":[{"sig":"MEYCIQDyu80tvEQ2eX00ObM40UDIx23qmJqDBbP/JJ6nzR720AIhAPK//vpfJv9uyITerEXRqslxU6b3SmbfuaH4J5K7qxwW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+WCRA9TVsSAnZWagAAQRsP/2bxyh1U5f8IlIKqVkG7\nTxPvGewprjl785q3jMCOkY0ZWU2a4l3DbZUvz54+UqJFEyl/Gp+YK4+y414s\nmUdgY0TTwYAkXzRYIcfjOEKCI5/kWRRMUTRRbOLNxnYKIT9DidUwXJ2Zc1I6\n9eiyc1IYOiJmoQn9qvScrjQSXngrqdjTAJ2a8gBrlQCeHo8tBJ+Vfg0PlKat\nnCcGuDA3MXhuM1V6Xkcnp5XyAaZHNxPssdCQOU3amoBdSAv9HrdU32sBMi/w\nwGz7d/ZzZCGjOnCU3AGm1OVP/ysfBrhTx2F1sXLIVQTrB6Id5i5tet20U8NJ\nrgfNGM1+EYAbeZLduhfdZJx73TynzhqZdowIv3pb7KCZEpIKAyJvbBpUguK+\nR60J0B4WUoijagMYMJKFbLuZMZ4MDRxZ592rNFuet+CmIxxwmLLktPvV8q0/\nLapPs1xxKuCUeXzFoO8iISNGHXzB3iM6ZEuzU9rNPVh6DrSREW5UXfeOBadm\nLVQYOyS3XmFSdT9dXAeUDBA85j5plgYgUO1dZS7GpqlMNPpDpMKzm+JbNWeP\n+XE1qoBSkS7jzzNOVekjBflV0DYgC1zYShWxIYvXxKR7fnqetEaNnBqQUF8w\ndYflEB4cBIGU/CfvYgQYsEjYhUddx4jXYJgR81t6kVbuMk/ZK16D3PZLH/TQ\nvkhc\r\n=0e1P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c4837746c.0","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/shape":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/button":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/typography":"5.0.0-canary.c4837746c.0","@material/icon-button":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c4837746c.0_1576697749737_0.290642722976334","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/snackbar","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83eecbad55cd537180153e9a7327ca348bd03563","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.e41a70425.0.tgz","fileCount":36,"integrity":"sha512-Wyl2wowsSdEhHe2oJEip1Wfp/KOd2ICtEP0lYKDax7RvN6vUtoFoKgUcpSYBaiy4Oz50k1n/ICAHykBjf/6wnQ==","signatures":[{"sig":"MEUCIBOSTGE0+fkHQA8z4/DwKlHRB3rHVKd/7E7wr+WgphtUAiEAjK8BW8j/bXoK4V1YbxLqWrlVlOj4ZaWdk85iZ19rll8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRoCRA9TVsSAnZWagAAvlQP/1jZakVdXo0/0VlSrwAq\nJtbh99LOxDH9vN9lEK0VPgdOxP5RNqimWYFGvJRUpEXILbdHptYAzZ5K9Lcu\nSp3mzWXarDqViqHulsDWwAy0jLdVlYjQlfINijQzssgo3FNI+9dpxq89nyyY\nQQtZcrQS7M+dvNEJwtW3Cd07oFqOLdN+MGy4fgEfsFFXdVl8hRnqhu85bTdL\nFGM+CjLm5ea4ksmWlZ+ObCfASmtseH3QArsmQqqUN5GzmRKJfHijpJTdkV9i\niyqYwrOuQJUiiMiEdZKHo6PFbUh8+4smOq/FUjXFInK5jOqJzb3WtKi/ahmk\nFCdfqwlxC2TzCr+SB8M6FwyNIBGSTFi/yq/vgWoK3UcllN2flLPEIKWWx4fN\nkehAP++mISRzQjywLjkUgs2J96vFvaBm9KY/Fsjp+MKAoM8e31Om2XGruLuo\nSvadsCvS9n/SJePXcaJ+qzWdBsQ7KkBM9OKiAI4l+e2Mx371Rd+/dgRXYdNU\nigsoAWNBTdR/mcdiLarl3WcHX/BSpDmLVZcr8Ln9w6Gq9QZuvjSIBadmOuH/\nNXsjcjFZcuGymdoQGPbO5tg8ednq82G/h96TMNP7aDd1qFn6emV+BYxxXTyh\nNUIaUcltx+J7sTYD1mKXp+NFvMbfB14I4WQmAIjtrnFRQr0xy9iIIHimKyF4\n0Tgb\r\n=na6f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e41a70425.0","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/shape":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/button":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/typography":"5.0.0-canary.e41a70425.0","@material/icon-button":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.e41a70425.0_1576711272029_0.47325537179543864","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/snackbar","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520befe978438a4de943ad7f0416ab8bef547290","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.bac43eb43.0.tgz","fileCount":36,"integrity":"sha512-AJF9fZweEREbVjROEbN6E2XvG2UU8pcYZwxnNFZ+8FBrzFozz14sDkuQpqfpbRhe/S4ppCx25/XR2VNYBG68EQ==","signatures":[{"sig":"MEUCIQCh8yAmwvb85WCfqx7+NOt3Qbih0mSDSsVb9sZuF1Gx+AIgAdXoWlvhR/wcxA4vblf7R6eimrzGNA8sFPi0qDlZXzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rVHCRA9TVsSAnZWagAAKlsP/iN5pdnj3qZHwJN91nHX\nm9iFBmmpyhG/kVEuCyNMrvminqnJyZ/Yl5iiofUVP6rJtIgENtOp7kibfAAl\nSQm82gEVQ2I37zJeZ2VNyVT6qLsCkkrp6bSbk4PkJc1S20s3ynJqrw9gzepQ\ndS3/hGzoc0QEE6mFC3l2AJg2QRmhU/dluA9NSODLXzB4ezYQ1P6ggGr7/H/9\nNrO75KY3pA3IqGcTorWSk6siJjlvVcJkpkaDTC4dGh6yG8IfllYu72UvVRrh\n1VZbAm/BM8BaB5F1hxTcwB+3FzoMZZRilmRdtKTctWOBo5R1wuTd+O8Vywu3\nj48KIOVfh1T5UcKQVAQi6myMTRT3Hb0NNcCb3Z4gNuMUEGDroTIYqHFK/Yz3\nrWGPfYJKkn3Ubk4IXhoa5g3EpMBPbMOpQxHjaMDogb2Q4AMq2LW6yyo52GZj\nnmj1LxtkhOoz4z1y65XDaXSyR7Hr+fRMik8rA0JhPNmyfkDCUyK3zdZH+G+N\n86xc48pVkYOrCCS34cWHR/nMbJvVBg+SpypXJkOMsU0KOohJvmVdkgZfTbgI\nd0c1K2zez4A7puh76nMKmmxiIlvDV0mvek1pVav01k2+fK+Jfqoiu82PxgZB\nPWlPLQWrfqxeDnVxQGIJVO/wih0K0GScGG1JcGoih28Kyu23lR21IEKFOLDw\ngMa9\r\n=gszz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bac43eb43.0","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/shape":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/button":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/typography":"5.0.0-canary.bac43eb43.0","@material/icon-button":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.bac43eb43.0_1576711494737_0.20825573765496252","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/snackbar","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4a93a55abc4f61899206908a55ae45863702b1c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.2e491de55.0.tgz","fileCount":36,"integrity":"sha512-z0HdbfhtRFIDNI3+BEwHnQsrQNQYZPXqZzk2wSo+WPfs34w68BDlz5XgD+Q8f5ga+SzjLv2TIQxOM22uRDiubw==","signatures":[{"sig":"MEUCIQCF6xMcL/9oMMpdsBQ35mlb5aBOOsBco3jHDbKEnKsorAIgR/n014MxuR9fvUcmHMqbbAnlt0BP9jt3lC0GjiZ3xZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1YICRA9TVsSAnZWagAAUfIP/A6s6N5hyzA5AgXlJTlB\nc7Gv6ecxo5NwmAu6+5GrbShu2Td+dch8LcKmfsFmWKZY7VWuWpKPKO+uo6v2\nKraAsNcOnRR6FQ8h+T6KDNlDzXOhjPYtkytltxJUFsy1OBP3pdPkC6Nn5v1I\njdrPmMNjBoKh9h/Gq8ZhrwqnvBqCvYszf2mucs/rnLvKK1KeLMCKd2yR+E31\n1a02EhDu8GHoBG5hz35lTY2NV76x1+fgyD864sH2BFYTDSsd/CFkfnt6rMcV\nW8JXVQ2YqYFCyMPw6/r43/gdsUtCMpEfdlqs/A7nYsX2CGTK71/bS2OnHBZX\nCty2m1fsdMuug9WxzzXeBtoLO7zA4Sz5ktFPvoDRtd6fYvB6w2WknXeQ0Rjr\n5dxIKzhIta6t2m2iNSCRZpHJRbRW6kcOOoqeiHSu9PduZe0F2EMeyrysqXRT\n48GsajLM2loCU2vtjPWnYouTn5hjOYrAOwj39y8/YzRIPnF/r1JylRpf65cF\nEMMWfh7uW8jOe4aOXmWqd/U3SGX4pzHDot6J/RMRyMp8D97hfmlxuhWFfSwm\nxIUutN3U7fxLYpmyQ3VT074eK2U+IAXwrB/EmxHo7nKlYRBiScxM/krcAnCB\n1Gtc96HzNIS83OoMRRSZbTDm8ozvzhX3L4vov3YTtlAMvoTU930ywyqwTMWC\nWQG6\r\n=gPEI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2e491de55.0","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/shape":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/button":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/typography":"5.0.0-canary.2e491de55.0","@material/icon-button":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.2e491de55.0_1576752648590_0.014328464398378093","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/snackbar","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b05884356759618526b246b4714d7af8c61afb28","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ae101c144.0.tgz","fileCount":36,"integrity":"sha512-Q1K9MVJRKiJVR8kVMwUgB7IyG44e2LYcxOp+guSGfsRr4kOrAVPHg58J+la00XR4qzI15rS1CksNG1UnpDPy5w==","signatures":[{"sig":"MEQCIBoq3V4V/eYaOVO9zWTQg8HlFCZrMfEbtWy9bN1wZKgGAiA6WpgObAXb89CYdL273bYfYSImC5sn5aedH9q6AzgCGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6SPCRA9TVsSAnZWagAAm0EP/2DdC8JA0IaBT6YAMvpy\niJK6GgwNtbbTu/39HPhKIngbOm973m8fSBBvOKEFbrrVVJapwZIsTk9q9yOR\njXtP4fFtO32K4zFSCpIomiWXkN0EfHyIWimymrAtIqFVOxGLTFGPEuJuYU4O\n+2Zfiq5vSsWxXpUP8kYSMVGzxEgh9RB1GiIAfJHRXZW5DT6ucZt20r1lugk/\n1+GAypHYFN7GxbzcLeI55i1x/jFe82Tx59XKYo4uPLw8YNgN+xHausFCxUaB\n9xPYWEwFgrKtgviQuJ5p25+JjOdVrAGI28TZ3qhxlUoAbbT84bmdshvAcDy6\nGuZ0bCt8sNlYBIQV8fhCkgZwqV3GZ14gqc64v2cQK75Xo3o+XQJ2t1x1M6mG\nerrGlpiMLWkL1bAYTTz3SMHYa/xXCUXg/HT+4XBcS2ugit1Y1UH68LvmqzRc\nJk4OW4rXRrs5YjlT95N+HoKjJ1V8/F8MmbcNGaVHhMCnXC3EBs4EsxLa/FU6\nQPWOm28Hkq5IWztDxcXezEUiHdgcQ9oZdsZBEvlZIIfE+0E4ji7rHb1RL9Ta\n0sU//ehS49kmN6NKW6DAuduvU4o5bPZaqHVfHYDcClM5wYUy4sk6agXScgY/\nVkbvd7sK/g9/tniZUTrQjjTZ/2joOX2qyK34UHqKl1tD4pqJ+bXR+vMJoN8P\n7GRo\r\n=mG8L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ae101c144.0","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/shape":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/button":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/typography":"5.0.0-canary.ae101c144.0","@material/icon-button":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ae101c144.0_1576772750495_0.3320875163407462","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/snackbar","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c73927ad31755401b681458c34af04d5ef562833","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a51c31f26.0.tgz","fileCount":36,"integrity":"sha512-BxHcnvqalQYVt5tvyft7QG3UE30eSrtuv/ZyoO2sJAKBVkCaXKCClh4uWzb4DS1zCgoj6buaWxw+U/avMGAoOA==","signatures":[{"sig":"MEYCIQDDs8VpJF+pQTN65D5WwNMU/Gn0w/MwDAFhVZtIQhvziQIhANwLqZkOVYqA+HSa/u8GXB8gKZPXPZnVbgkRhYKkg3bS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7AfCRA9TVsSAnZWagAAs0AQAKPP/ZaGxAYFCsIFw0n5\nxedSBei+n8iPmxt4+Z4Ht5vG7+n79vZfM8427meKmW6JaozukdOAWtfrAnDP\n68QBzuiTQnCMOsK7UP371VaJF04s+kHlAOzLMO+ZeR/lqS5rjt2HDPnUgsgS\nFRPSw6MFVg/wnXyID6f1PA+RUsca3GhiimUS5GORzGDQXP6HfZ2uW1ZTmJVh\nqlPfD0iS4lORmO13SbitG87xk/fW3PDr+LFL6WNdCMKi5mr10zjKmCxHRRfJ\nEjCFfnzRyQvbJjyxNp9pvl3sgr1+MDz/pCi3UOarCPFRnNHkvtcaD2WLmlcM\np0oi1zMWNMKjMskcncKdGewRq1jUWI6TNH1hZiurCbR/cLuB/8sHgN6TxaiJ\nk0dkVYcGwyxZKrNNukvi8D9E1mx9uvj5q0o2NWgjjuYM9cD1kj6lfrM62NDf\n03o2j19j1WpVzorvynLBSVdosUvpdsWSuCDFLhAhxwD2xM8sHYjp7shikjCR\nqGCfJQZ+qrGqZ+iFBKL0H1WbVYYGPpY21K/XqGbLNAtl1rrrnjVmuJ3jexq0\nBCn+ktfVLSUPo0P7c2dkfr8EXVREGUA7CgIlSymRyCX7OoL1VUriPcOahtHu\nljulKqFc2tCWGjcsNKP++4djpkvG+9+2rQyc+ijBKHUUe6GKDmN3GP9yZOlP\n0dKn\r\n=Nm8i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a51c31f26.0","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/shape":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/button":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/typography":"5.0.0-canary.a51c31f26.0","@material/icon-button":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a51c31f26.0_1576775710975_0.30629516593872985","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/snackbar","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"785c6477a263ae3997dba2ea5160def5a36ad350","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.21fc4e13b.0.tgz","fileCount":36,"integrity":"sha512-Oo01KZLk47sRayooKDriD/tEP1H4AyFKPUWzqIuLtwX67AXk6pUnk76f4XLKd5PxZgkNJGNVYCsJ3R6P5t5KTg==","signatures":[{"sig":"MEYCIQCMgbpr01B3E7EnH/s7sFw268JTg/3EXsvltVLqp7sZwgIhAJZtGzw3AqtRmUm9SjkyjL1vKEgKCBkKN1zsbQ1EkjWm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tWCRA9TVsSAnZWagAAZH4P/3O9mxqtPTVS7VIkO4Ia\nqlOsEhTpJa7kZuUEDG4XTGxtuv/hrr6aONOc7CpDXMMQdDpHFvvNIfhBwxLm\n2eEJy9vuzG/+SWKBJQbUz4aTcsvVDNxOZb9sX32AqCxzN5ydRp9WeUgP3RmY\n22/XLJ7QZIK3+BK+3FLNZw7rO2Cd6FuDiKVzHO6rVE86PKXfdfXJWVpV5oIR\nIOBsx/nx0dC2EMhgQpg/EL64Ca4T/XjXN8JWJLywUV8eNPVSYdQdKxMuiYP2\nRVXJGgByaBTzgYHOpxHPpeCrfBTwGAgW5WEqlvVbF3vkA56sF+xTnkAtg4H4\nmWBMKzn3NN14WUQYI/quC/AJ9FZz9xjMq12+HD3gF6D3Iazin0CVMER61kfX\nN2YBfUPZhaQSJLFhueqZua1qI+R+fTn/Q3GpZ20cYcqcXYA2mt61ZaM+qFzw\ngnaVwIr+3qMd1f+MAImqvP+Lzlbo+YwHq7xV5Efe/Knai+U4tB3MNGkYXGWc\nDkheFcrKmKgHjenr//bFNsDPT+oQLdl/RoIUYPtl5ZQvB+D2JVdBeYymy/hN\nxZRfyUr7Sn8c5gvN12G8G86lTDs8UvLQJrOF0D9WM5kjn3mWRBE+NiivO2HE\nBx/IifB6O79oBVQbTSn3dfJtRzqyIFqeyJ7kX48OiesA5/dlakMBADsDsd+R\nZoaM\r\n=eNof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.21fc4e13b.0","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/shape":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/button":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/typography":"5.0.0-canary.21fc4e13b.0","@material/icon-button":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.21fc4e13b.0_1576790870520_0.30800544131717733","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/snackbar","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8638ff8b46caadff0f6d1b6d73807738a5d1b411","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":36,"integrity":"sha512-k2ROw5TOESUjSwGP11NNZzweIVWBdEJ3DRlJLh6Up3zTDgNPAHboYr1nXHd7Hyeg0NGez7MBV30V2OQ96UkYAw==","signatures":[{"sig":"MEUCIFgfAAR0w+B3OxaVbkf0nMiBBcrXUsJLxMBk233JFas7AiEA/iYOusFUi4KRdSNC26KtHXK+MIN7/Bv7FBQkpSZFQMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/izCRA9TVsSAnZWagAAyR8P/1mMPCMaMwJjdFSA6L2k\nQfVlCZjEfbGFy/quqKHvCfTqbhVudhWv3VOq6WnzxYBMroUteoctseBsbe0Z\nQv9pkpo4Jv0XLE0oAxit6Mw5n/pYstptP1lJNa8bFOlYFP3HWhotuADL3p8A\nr1SbLF3qNc308jw83uIcAJWfd/uvseee4fv6j2CYJ9la9rtXJwpTQxM6ex+t\n5suJXjPz5M6WlLZCA013I51uRCU/LfTblbBiVKrLouxa3c5EoGJ2MHPKWeNC\nRXwx/UXOAeixlyyxT19aQo2qaGABPZLVqg4ols9+jdiO5RIfA3rA6+VdUioV\nZiwtM1qd6BL4FlJKHxzQAA3ABbF6shKTVVCBj9kfIgqXAGo/GOUc144+rZPx\nTP7i0x5oTx2zs5z2Wftd5xNO7+XXWOopn5lqyHzyH7Hnl69+bYI4C+XhH1ot\n92oVn3bN1o3ri6z7EJOJWIrk6PsXPcVxozjC1rvwOtJ15JKeqxvKEWsw8wcZ\n2zmmt1NSL+DimnimvkU9YoLe+rW+9CZQ0099zisKw9vDlaF8Q4bU3MufBwsN\nZ5W+i/w2ghN2FZrTgkfpK0Ip5pi21ustyC4OGM5VJP2cFDx9cQ6qzuYMfSoM\nldUuiqXqXuKPLVFw2ctbwG6nd5O1xvgzaMR7R4HZGLPgzE2Z5jqxPoPGNzoP\nI7d6\r\n=EMg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d2ae6e17d.0","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/shape":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/button":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/typography":"5.0.0-canary.d2ae6e17d.0","@material/icon-button":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d2ae6e17d.0_1576794290592_0.06927840556952947","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/snackbar","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92b890493fe645ad3f840801234f45c397a89bac","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ba30399ad.0.tgz","fileCount":36,"integrity":"sha512-VpEoa1jped2exqig/HQNtSDBp0o2WxqBrpTJG+n+LPoPEg64lCM+i1733tfZdaUw5sh70hQlMcWd2Dpg4DzygA==","signatures":[{"sig":"MEUCIFz9npX2wepCsv++YSrPOMDg/Kxie8xpi8zSygSHARoiAiEAiJRCWgGBgIi+Nq9P/iZVV+r8URI6ymlpdrb43KYw+gI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B+JCRA9TVsSAnZWagAAdYcP/31TUvciMEkne0jFeiWs\noc59FpmMIfsz2bAQ9j7eyY3b8DYH0ZYajBUXm8mDxrOHBFTj1HCyIRE/0c8T\nQunSzIZiRrRWGrjh3LcY7EYAvrzu/XcOSgXmL8ppOaHYKHciXSThFHRKyeCc\nK0PMVXM9uXZsNJwlY5lTbrgwzHOzOMBvZocwSrmItK1uPOKQNyMxgAVts5XA\n0xxOeM1z7xvboAOtqrlM83+M8bnwk7eceu5HtbiGrN/ZfHgObVvh/qzDwOyx\nFve3wBoDomNVmUwQPjqFFUHbPe2E4kklhn8iI4G2k/cGlsVX8cQX1HqVrCKt\n2tZc032RnaHlEXBMPWhRt7jWhakqPB7c8keAEQI9Z1pDqNFNEEhL5VXh7f1s\n5Gt9rp4v97dlhlAUT/lIE5IDTHVb9dEhlkomeZGC8oGkCFSgOgE3gYmu6hCu\nrOSGedq6Kq0HMFH2CqoTQ5HIz6fePUOMZ5GZCkXEuZTrp5NdRKrA2B+qxU3I\n4Kz25XI6CGGe6uWEDAUM18mSCgT55Erh5aZT7UZePLIdCIs6KLCqMVluzUtP\nddNmJYLuysLX34aP8mLUs+PHy++E0e0NrGLWOCiCaiGk5OA8azhkpD50bgtb\nhRxhly8gvuqocu6k7O7v2lz5tjbgax0cg3Pm5/MpH8fW1+IvJGfJDFkd0thb\nofGX\r\n=nB4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba30399ad.0","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/shape":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/button":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/typography":"5.0.0-canary.ba30399ad.0","@material/icon-button":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ba30399ad.0_1576804233409_0.5173267621399984","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/snackbar","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8a0c91ccc738350e9a603acd08e8842a6ec4403","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a08ccec35.0.tgz","fileCount":36,"integrity":"sha512-lMnslq6F+oQAf9aY1va4qUV2shqkFfhJfxRQpf1e1eNwhJf7rtwrmdyTvw4Bd2mLTAo54sxmrrvu92zyCRh+pg==","signatures":[{"sig":"MEUCIQCrmlIo/prW/rqFElGwNy5a52MvHrTzItip1TIj+wq+hwIgW6PBR2eQ+cKz0E27zKWOr3Z+DHw776HqXnCoQzQJ3qA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vj1CRA9TVsSAnZWagAAI+EP/0r3rXwuT3opUJugEXCn\nqQV22cGh6s4bEq66L6gD8sB2DSwOmVdqJAAjYqlSn5yZKHzdajZaErFD9OfG\nrYbOVuAuwtnV49Sgo2XV4Zqb3lMGEX4BD+xfmYzFWHp7H787nPkqlP0j/LRy\n7WT4dWr2ukzgjbb2KadiwbJrSBcIKO0uONghSi3Sidc1m5K3LiM/krud49fD\nRtgNIvNL+ZUwTdsEB8vU3rOWpl6wx1dSKJvuBYJQ/Ufx//Icc9K1QoDBtoKG\nsZV4VuSCqyBM6h0D/fizW+9MWYmo5YnJWD0LZG5ED0b9ekDyZr4UJLbVpufj\n9fhfWkOwxRJpLLZdYBWIZZUJhPuGuFMg9/gUYaptBuCCtv4UXoXbsNWP0b+t\nQ7u0iTETlDUwtMGrH9xN5pqqruPCIw3Xaw7T9HEysbwjbdacBoluVNut/qzU\nzml9T1YkeE6/1W5qs+HZEPQvfrMlRC0T27PikP4bT8WZZJx/DADWSaoH1ESR\nTBKOIBhuWe38pt+9Anl5IOva84Thb2sEDWvPICLI10/h0Gpvc+P0QZqYMcqW\nbgVvullvYZihbYN1Waph/KT6mI0Q1D7VD9N31SI8ON4Sjpa56CKMITYbiGNw\n0LK7auC2xwQ2WsAog7CWvb9zwDOX0yMdh0Lnp3sQsBvF+TJMeteg86gz1lMW\nEg/C\r\n=jeiP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a08ccec35.0","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/shape":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/button":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/typography":"5.0.0-canary.a08ccec35.0","@material/icon-button":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a08ccec35.0_1576884468777_0.18896454948372954","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/snackbar","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5976bcecf95991f83e837fdf1de3e9a8957817f6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a2f75105e.0.tgz","fileCount":36,"integrity":"sha512-9Jx0JObA8oxlq8xgQATsEzdHt0XlFslA/R+iTHiAWeGK9YPolodyCcvDFgBkhg5wjsGhVTG/xK+xydrfYuZelQ==","signatures":[{"sig":"MEUCIQDPWtSc1lPnMQlRnDANz1s3ZjI3YIcvYLSpm64ZYcQtvQIgasBP9NyTS+es8IluQ41N7PomFlPXYO6vglaphj/nbCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARobCRA9TVsSAnZWagAAgDYP/iapnLfOFybHw++cDTqk\nbFcIoljLEZMc5qIbZb2eMYYgcXt9sVEV5/fK8p3ztoDXaaz0LrRrlTdj7VoH\n2o7U7/AJr7oWjxpPGZyFTsFcGVWS1rP946Rblfvkai/DAlCZBFj5tKuAxov3\nEPEdbgQUi//9y2rIvZenth/VbMdPVYK5RRW/HMS1ugD1NfqFVun9SS3eobsi\nWWauPlKxEbLjP5cKOQUZ500PNRkDRTtX/m8Tn0Ljf0KkPZqSfaE9/LgejXr1\nW6R9gm+4z1zApD86I0N61zdZML+F0jI6h4bpGYji96YSgL0SeErfVw21lZNr\n76j1w6Rp+69+LxviOsfPXFlv99lrpSXH1hk3kBDkUtlhi+SSj+tLs68uij0B\n3hqgGcXJbGvQCSDKjsgnAKtQ0TllQW7YM3iasQDHQHfDaQvKbjrYkYKygyhM\n3vycHUxR6FL4gtLZZygkC/xHyYVZgw3VRpkuYGbH0rcm2+Q17u2mQ6i1Y9Es\ng8/y5pnwU9Is/ReWG0T4rXzgMFXcfCeUBYnVlVFIVbY21/cBGG6tt0qOQBx+\n9qBfzrBbmjUGZcQXHD+6a2Y4iVUt10GtE8e3yKjWnhsoYrL9IDdfY6F/nT8h\nXrPgnjp1Gqiyc0XOG0u7sUr2KJITPoSp5/gxlUhxfCj1CMzRYGsIKhu9KblR\nUcpR\r\n=NfMa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a2f75105e.0","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/shape":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/button":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/typography":"5.0.0-canary.a2f75105e.0","@material/icon-button":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a2f75105e.0_1577130523208_0.26929792347494774","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/snackbar","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0feeae9082a270b49b785b0a8746513ca9dd6f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c054a24c7.0.tgz","fileCount":36,"integrity":"sha512-bTmT4Rjwy9Hi9B+D8alYg0cphlvBZdcHrH6XCrsJVqfzxJ/RAuwzkiyloObeUedFkxIF+kY3t9XW0r73jKH3Uw==","signatures":[{"sig":"MEYCIQCa5ow9V3EVdWw7B7xQhL5IwCTIxnVBJ93+Eswl7SNZHgIhALD3PtIHQV9qC4hkQSy3DMLWZlMrlSt2Xg21aRDSxO5l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATa3CRA9TVsSAnZWagAAyjYP/0Pt+zITqTHYdMrnIDfG\nXz4XfPcNPtCwNt3yy1903Hjswg5NSreBgzZLc2/eF0LmhcLTbVBcJP+Q/Or5\nZmz1511fTMUe0FY2jcZAtf2847uhHdUx41TN1qbWeG6gZJD2JDPGKgi2gGHL\nedX93YDCrx8w0vMKqCEPlMRWywIG2boznb13CcsOoL/TQ2BcPDMlY3DtX5sk\n38tarn7NeRhtruYJhWHu3fGy7ZBJV13uXesOxHFtz8rksWtJmcGeaRFiaY8/\nAsdFYJDuSJQk5Gr4MDMb9eQp5AA25zwzpRZIqS/72KkSGfe+VncrLbNzEEQ6\nGThgohveP2dTK3RVEVPrU4WNqbq1jzb6u6PJybpmIAllxJ0Vj39lTUb+mX+o\n66+XHbBqCoSJprIH98RHnlOXmhkyj8q7NvGpbZokFg7uHhsVtsFKKfHOoSyd\nur9iuiqH8Q5BV+kxcV4RKcxYDVGTDYndJ2IJ45X6HVG9yfuDbOGO618wtu45\nbq46DFl5lpLFhoO62zAsCdQ8DErQyNDGzGF/PMXUTMBJ9oJmey7I4UdoFcQI\nzN4n2E/awbJiLYhsGpUWCWAZqm5pAlc+ijAWeCiQxZ1SwSeLA7fIO7uzMhDY\nVe8QkgbEBN4xMSoojNf2rJQL3htfAVbpsNlzn5TrGb1duiBDrLNM6I3NCzYo\nLMuV\r\n=BaRN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c054a24c7.0","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/shape":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/button":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/typography":"5.0.0-canary.c054a24c7.0","@material/icon-button":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c054a24c7.0_1577137847041_0.6009364498043286","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/snackbar","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada8df0a515212e71457da0641d54ff82d08ec00","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c6808c51c.0.tgz","fileCount":36,"integrity":"sha512-8UGqGT9UC7x0aZ/hTPkYJkgWDxMfU9peVEubAD8I+GwCxfeJ67OmPZbnJprYkL4kXz9pohMZNdDIiOCOmeqjig==","signatures":[{"sig":"MEUCIQDcTakXl+4HYQ5zF9/Rq63h/oPaVs1cKVBxTJk0DnT8dwIgX6FYhSfiY2zjCtcrUdbZG9Co3N6T1CnLu7LxxkVXVOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATfHCRA9TVsSAnZWagAASfkP/3T8cU2PlLjZv1efjIsk\nXzgj5++AQmFKNsZCN45iX5QyNEPf7S2Arr5yv35ajDwuh+cnSuMLSebiGcIN\naAiWEa40sHjjQtcJ/6zfKfkaWNCtL4IekzJJjLFzLM91lYrkbkpDpU3gz9BV\nDGZKPoMBYuB3BWeEtYXN0VMPpvVh+WMo69Dg+UwLDVt0N0P0qLrOPsevtwZN\nBOgQg/t8ICaG0cKoQEFtTSrnsicXlG0GesZacKVSmSiIne/YTDdIlSv3nK8Q\nXyqfVE4YZQW8jnawZ8K9x/JNVwLPY9JVhLQV8lHASSLajhlyz7ZJvo70kDuh\n6nDfzOTJP+Q2onJhQUI4RzRZCKx/bp/ON/emXtD8tc4Kn64cqCQkcihboE6l\nES+t/qlM8hpA1trdMuTb8VxR1rc25EXIF0KG2spEd30IJXD2Z7b5ognXTwFc\nZsI5UaQcOhd8KDYQdST+EhmgmjeGtAbl2Ez+J0aq3ULW6ah5yORKTIUBvjgF\nwBO6Vf023eAAQBb6cboxzyjrV6YM3bJDBOTaxPKd9NrL9YRSlsmYCiuLdbav\ncj5J5T2/TKf36FN9QX0JUKWdUL3/Jjv7rM/TtHf/8xMDe80hNPYxUMmx1r2C\nogdRz5/0oZuO5inlbTBebYWmOeUURlvkMKHYhehxNC8c735XXZR5dqankkLU\noDUv\r\n=jVdX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c6808c51c.0","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/shape":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/button":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/typography":"5.0.0-canary.c6808c51c.0","@material/icon-button":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c6808c51c.0_1577138118702_0.19386108107786404","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/snackbar","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac39e73dee44035abb33960dfda473b9f8fe4c68","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7bce9cf77.0.tgz","fileCount":36,"integrity":"sha512-OrX/35/R14WcvmUWVBa7hFltj3lxX7wwMkhX1WIudn/nfcxYyfIIzSHl42ieQltvzlsy2BeLPcyVfAbHfpUAQw==","signatures":[{"sig":"MEYCIQC1lJyzhEnIAhDQ0k7bHXnpEJfrz4H9mKRwc1mha7qjGQIhANmkqlzppioKVpwbyGEfyuLkWqJI14qda6jPZ3gD5FpP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/7CRA9TVsSAnZWagAAkzMP/jPAVEtI1AYQndCuj0g2\n7+/AtjqAv1WrVI85S2UaJUPTUCJ2NIkEVsE1LIgy8mNGH0uVKcxKm9aOxONz\nNlkYZ5FHRsFyF5NsDaWlXWqtT8mw3Z6gQv6fFAGJAJL+xHjLP1rLWIaXOE6b\nwtBWz0gtIY6+wN7yOHufa0lzVCxUF9JEBEkqZ9yQQzznlBpzbc5Ot7Cv2nRv\n4vWOqzJgUclnzzkbO3v8J8jUp1tJkEZpp1+Gb1DUL3eRNtVpqVT6da9hkAyQ\nCO2IvDUXWyyXuQ0bD0QUyH7Y7v/vbk7NSvQceO5/r2w9iyGfof35kWhLjjeV\n4PK/FifTgFeSw2xQpwNrWOrXSQ9z7RvJHQOlRi/xUTGIettmOZHYL8LWB1Hd\nvVSuvo7or17wYSqRiIMp+5V1J0e0G1ilTmcdjQd+b237RoalqmFNiC1fWkpb\njFPUIpG1BWRHM2ulXon6LIP0Z6bJUVKMJgO8UUFIm/VvJmsVV//rJvlBMqci\nKHdOYnnzlZ+Cto7Nd14UA7om9mJCBdQp3Mzmh6vr+LaiJ/IzUqIgqrdxfApU\nKFKxRDU6K2CTiUdlsiQRyuisOE+GqwYDhdFEDU8/C4FcuqPU2EDtTm2OC3GI\nPXqeBrVvTBjDuLGN/rc2i41SNOT4uApzhm2aUgtu0+SY8fadcEJoh4eTVtjy\n6/Mw\r\n=LjdT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7bce9cf77.0","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/shape":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/button":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/typography":"5.0.0-canary.7bce9cf77.0","@material/icon-button":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7bce9cf77.0_1577385978763_0.5546386393114442","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/snackbar","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e28c0e575e8d74a5a06afb02a094ff9e8e4d3f5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c92f038c3.0.tgz","fileCount":36,"integrity":"sha512-TVXUmbX3+RGHVtzOk/HcwA8BFNMz/JXkK8DORoBhrtTd6hmTrJ7xkdMvHhBJPDLIoHGb/511WRiQwgnXcajIVw==","signatures":[{"sig":"MEUCIBL/ZXodkIvivsSrGPYrr2Y2eOimXuNfNjkujmfa/AzgAiEA6AY2RT8z3upoeA44SjRg+Nnn7c5aK0hfYg4NfIC5cXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRMCRA9TVsSAnZWagAAW5IP/3GBpEXefpl+YM7qifrx\nyvX6A9oBkqDITPim9kbZbUyBo1Jgvux4gbGVwzgM6uv4NWykbmZmRiikwMFz\nkxAKYRpbqIbwBMVDF9OPtye07wgz6Ss2RrISd7EON1ohnzYYPfAD4fiRz64w\n78nD7JAbkI6Tlq4JdG0D4b4cZ1CWGlNrVLSwhXCXfsAMypxkZ3Qf0kYpqwvq\nWWLtvr2F3v6R4zraFH7+PNy8jtrLV27fv8qb0pSLViu1WA4e+hR3CaRbqE2h\nuP7yaQPYxMoP2pigivtzVNxDDEFS//N7x4Bv9Ix2e0PdqRtfm4u4SujVLUzH\nO7vP6eUN/FNtgauT3ZXMy1Mrg5Eepr24q8BjIIakFOEyKM9ybYx+nUfPNpr7\nkBDBOWKAb7GCr0JgHd/qm1WVACTwyFAwR7ltSjhJw0JRhGQOV+yChGqakywU\nut6bz0+thfdaqMoa7cqbkxW1hm9CMzVpoZgI5KdxptVOVREDlrsr1lvWRmEH\nKr+BpI42OZ9J6IeeVYDvwvWiwzNrEK3kxasKIHPjOGgH3JkRz57AGsheKLAE\nClOUf+o7tSIeURW6V7gj1dwGIdbLA6uX4O8ZAYobf6f+62hb3G4BlSQGZ4L3\nqO27S30tQdi575SxNXB5WYFISgFh4H8KqsEeCyTA+Wkw1T1pviCZa0BCYOjV\n0Pcc\r\n=19zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c92f038c3.0","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/shape":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/button":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/typography":"5.0.0-canary.c92f038c3.0","@material/icon-button":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c92f038c3.0_1577743435917_0.6055274936018356","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/snackbar","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51d7829ac08a16132b9dfd735a5461bcd9c819cf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.1f1ac7558.0.tgz","fileCount":36,"integrity":"sha512-LTKRP/WvoeReNfagHIpDlqZjaHxc2EmjYCVAg5sCG28P91txT53RPKJGjsMvRG1A5v0+u1NwJSNsT/1U6kfI0Q==","signatures":[{"sig":"MEYCIQCcs9Cbo3rGArtNyYnUazBBFSAU0VCQ0yQ0FaSKSgWLxgIhAM7mRaVrTrXbsGBDbyF8hoXPi+q6iTFgaS8B4qSs06vG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliWCRA9TVsSAnZWagAAuhUP/1hK9Hw4o7XXXruafPp9\nKiGUVaV3E+Pk9/81Mg17I7HVmLsKyO9aUE1e2Ln2hidQ/Tvjvlijp+uYxK7F\nGgI65WZFGBIFWtFdP1LRw0tkpLv+lXmCaTIVET6hNqukWK95WMR3v1CxsL8C\nL1UywjCwj0EF7HwlbAOwhxZuFLOeODTvmj3oFgdQqrwZid3kets4y6c4eW3G\n76HKkyXCMcmEn4Nkv07py8Znhjf299RtLwCgP/cIPU4aHsFC2mc65K/gipD8\nJ2IkqTY5Q9FKYJBs2sd2OEuzk1/yta3KK7blUnGYDfvxkKhzTMD93jzR8Msh\npyZDueztarEyDNP2aZ2Jnfivsx0AZwHDCIhEFGh5PBQwd+ZHMSah+imM3waL\nS1s5+n4pGWnGEx+NqUpcgqzE+9h92tcPw80QqKWDBjLqVQ0R95jp1tICnYzI\nyNxu/rWOJMF2W58BLtbg4vifXtfl5eSi2l9ei1GoPL9HK7tBLTLuimlz4ScN\nwvPd3DNWHkvSZdE/AalMZcu0Xc8soYUirHVTDnYqI3Jcs/pkGCZxZQ0vlDu0\n1JfwKBtR72kMy2F6+5x2X2lL+psaJpmCnhnR4WQcxiE2MMllUZMITJyw1y8N\nxIpQjrERmmmsz+iiq8QmlK4isEiT947frWMQz8bCOLjisS2x3bnqlXWXc31y\npJNv\r\n=XWli\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1f1ac7558.0","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/shape":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/button":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/typography":"5.0.0-canary.1f1ac7558.0","@material/icon-button":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.1f1ac7558.0_1577998486466_0.8873189303885773","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/snackbar","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a797861ae5b0e6b32c23b0c7669c924bf0fc1a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ec26e799c.0.tgz","fileCount":36,"integrity":"sha512-ys4ayxZt9QA4TBzS0QLUxWv6ZH41h9Z+Lty95JCEBMGJAkRl9GfjN+mao3ObWilS1r1Ne+cC/2bBRLWuMzuDkQ==","signatures":[{"sig":"MEYCIQD5ybaLtI2FjqQ2MccjEHDCpIE0T3/dYhOq/wMUqW61vwIhAKxYM/6/ShNXeqrLT7b80opLTQ1Un0aZX4mxVzPrgpcw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPiCRA9TVsSAnZWagAAWEYP/iXKFttuOxUu2QlUiHJL\nz42hv+k2BDUlWpG6NJgWXRuNv8vihq+mltUwec2ipzJJ4kFfAEowr5d719yq\n7/1Wm1EOJsDwuMzr8trq0xD1TyFIKTt/0PIY6MdwzMK0G5jrqIHE9I6EMZ+J\n/w+lxtp1zN8jbU5heTEkuXFvfJEvLr4zovEkxhu7C8rHBNH0Cy4eoqO70l63\nZeERGVobhFHqNLOZhim0R84+i4QozJB3KK+e/dWg/rerRIhz1HZBm7JXKQ3P\nge/Q7brjtpGAqc+8jruQPVvGdwOwbbobCwaa4GvnFL4CQy522IWjmFbOICRO\nJiNzGmoQGTHdKResj442JwKp0p9jOaUx6Sf3+ig3sxYUwY9oXvy3hqrawBBP\nxUoOlx4Vn0TcIX3s7a+MwO2TV/G2RSntD97Ac0bxQe47nkkNSZG6omksVQzU\nDJoSxUNrflj8JaugTX6AS7TFaF6fn9bQlL6VmSj8LbSSmj+nkAYVlU7FLj9Y\n6BYtbbjMeKcJJTLSk7lftjO5R5ZzJrJgzgfpeb1lAzKHMc3Hx5oUUwXOxC01\ndjg8TIgKQGNdp3TiB82AtBQPZKaOn3LDrj/MDz4HzNGTT6ZKwd39rJ+u9f83\n4Ny5ce/8axPZXr1uMQjMXpKjXobAaB5hKWXybN5OSkeovP0nqJmL/XbzpPH1\nx24p\r\n=kVkb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec26e799c.0","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/shape":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/button":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/typography":"5.0.0-canary.ec26e799c.0","@material/icon-button":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ec26e799c.0_1578001378155_0.21487359859554767","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/snackbar","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c71ff1f30e4d219020798dc5db3127b7b68b12a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.0a40ced40.0.tgz","fileCount":36,"integrity":"sha512-NalLp8FyD9VEUA2OtTC3qaUqUQxQNkSWRVECnxzeuzTCZUCmhacyIRURLQ8KtS3T61cM1qh+/nld7HeziUvUgA==","signatures":[{"sig":"MEUCIQDN50VWE7KPjMRCC5GguzUCrkujT5yOnnyflxkBmKe4QgIgYGPnOS1mA2oYlG1knc5T5h6krvJmrKhWb784jofd8yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3WDCRA9TVsSAnZWagAAja8P/2gXNXuwcgph1Bm3HwGD\n5YBWuKVJGVyYU91ixiry9c1QlARHoGdFaDSwibtLXw3gzI9H6dwbLpNS9qzP\nhnBSNfsAeLmioS8b/UoQ1HL+RXVYEzk96O0j4M+29dejGeJhfvgjVSV5RN6K\nip8+CYw5VvagkX3oPWa2kAdQ8tDJUuVv3OF1vJWIFIvmeoI2DNAmm7+1qqLI\ndtTXPiDfT18DI7rV45TDZGeA8nqTPpF5xqybRUc6r6ElqTpaxWm0EGa13BHY\nPWatA+75P74wFutSLNWUd4N6oKKGwZELU9a1uf3zzT5Y34gEhmOLHh2z9Jmn\ncdDlvYut3FWRM9n5k45hqjCsHJZ+geud23tfYwWP24yq2GUiGLAE60qjzpUq\nNuWByL9b5NXBUoFpF58E6wwJZhmxE/+7aaSY9zQGYBJms/t8i7AQNclTEAW6\neSHV3J7G6GyXAx9rYghJIkAPsqEpI2vOJmHSbYyETW3HMw4HS8lE9wvdJOYq\nUM4rck20u155PPKYDLYNgV5MJI5Re5KVyi7RzzF0Hyoai/52Jf2mo6lOq45z\npsS/6Ggnv/o1NoyfIv0SCjKvlz6zt6bNkvTFxPxibZtNKOJeA3e+aw+le2tM\nCoBsf5tWt8TDYhlDu3or/4/YxlyuNJDtnIUdFCizyA8EH5EAjDqWN9YwuYNv\nXq0M\r\n=TVyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0a40ced40.0","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/shape":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/button":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/typography":"5.0.0-canary.0a40ced40.0","@material/icon-button":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.0a40ced40.0_1578071426929_0.630018980288187","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/snackbar","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba49410a7a023c6400041faf6110dfb87c97ce14","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.3adf84899.0.tgz","fileCount":36,"integrity":"sha512-bG3ulrpP7geOn7vh9w3Os5D4PZh7YhudjrgFap0Xzjrxq4rxDGegdRC/e289DPYKriew7w0wqN23GsejPlqVeg==","signatures":[{"sig":"MEQCIB48FEhYWexWn+svIfnP70BVpdAAaDHVWezqUHUvBLhpAiAWnbL8K2Cfr0up9FzVv6YvZDLSQ/BriVlhCUYON+O2LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aTCRA9TVsSAnZWagAAAMkP/jybUCOAFnYTFqk6L4VH\nFc8DCT1sQzFZ5ZH6JfitK7y2+AZUNNfaZRuM73630lOGOjBnSVe+Kf3mPF2O\ndm0+r65+5ZUD/ZgkCudfRuV1qTEHkkrGaE/y7xM8MBwgAcXlIJ7TtrwabUX7\nHJ59pkW8VvM39TbnFHycizvMGIdH0LUN5SeLyEuhqEiN+GpNUX4SafPjr9e5\nx7tGsD4HYzBLb1om14/eMSBrRF1jVPv5KC0xVz3h0If8K0gvyfUvQw8KIOjz\nkLgpeYEiu8KY+KF7q6d5HLffaCRs1OvgBqpVDQxf0K5IdKAPJSZDrsd5AH6n\nx0Hg3RhAae7/7XNLyCmQ1FCcAglHNcuH0XB0g7ya4RK8yyHk/94tCLLtk9TT\nKAs/9M7ZFL0vvdbPVdfXaz4Ba8FCtekefOg2NM9nbg4ZBSb/axNxK9XkNKbs\nyDmra7yWVs3MkUE4LvMU/m6WVIKpXCHLVVZ/aFczjdfAklDimp2eEMPNvFLw\nP3VL0AYbL/nnex01SC6eO29MyUsVKcWZZrhGHE2ujvKqbIsJNPxotCciw8zi\nl4A3eqR0qtXXBr9envWy7DoGB1ggg/T+58PCYohPHysO/EjE63BgqDKkvq0w\ntCv6aZNRNyNAyXXllHHV5wzkxhwgtouTBPNwE1YEkHaOH6jFKbFDbliU6ZDy\n7HVt\r\n=wz8X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3adf84899.0","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/shape":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/button":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/typography":"5.0.0-canary.3adf84899.0","@material/icon-button":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.3adf84899.0_1578075795298_0.08992065108054925","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/snackbar","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e9884c28c3c84021c3ca85a8759e14a5cedcbf6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.0d42ee650.0.tgz","fileCount":36,"integrity":"sha512-2YkoZ6HyZA0JzuY21IsOs4zGdT4fpTEliIXBWEZjxKNHobYquxUlrICaqMgXlifKFbBpsrQYaptMqZxySE09aw==","signatures":[{"sig":"MEYCIQDN05Mtngfypaj05dEXN8iUAl9vdKq2/FggdjUWH4zp/gIhAN6rQ5PhYF9jyrux7UToXtU5ACOIboo1ZgSmuEWUWqKf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QlCRA9TVsSAnZWagAA21MP/RyqC6+Zu5gbRGSeDsn/\nMUsMMNrCJ2c9KN/VhW+LwOx9x9r+5s1D44ClmyoUgg/63unBmL1/92Q7s3iJ\nwjZYylj5YwAYaTIaelH6r+o5hniGrRl9f+cq9qUDwAui2MSVFg+hyFMKLlxQ\nxvVso3upBDPxeNgMbSUo4TSVL4ZdHNUogU3512szdDRqCZsYmWVbtl5rfxD9\nOwCNEDp+9JcE3TiP7xR7ppWC/hAEW/CTjFsAc2lQTkSAWJ54YAxaPrqgcPyg\n1n8IGJXXwVoq0rIStsuBugWXRUtZPbi+y8SjCv+tpVFu0XbSU4FpTQI5g6OX\nVqlhMACmBAG0SRzRqie2+CNBpmOS848Fj2E9lS9C1Oc5f4EUtWE70A2Nq54u\nLwTL3Juaww87u5ErgCqFh3YZU634ITX8FGt1g9VPm994cQ3RPKEnnAdChOnj\n/tlM5CDoeD2mwuEuOxLFgHBVyeWXFQR43CPeMIvZeUyXnBA49QILQhidiQl8\n9qFR8vgzz/dZIfT/pgXrhcyqayBa4VBcWXWV8R78hM9F6OhnCOKhbFVdhuE3\nOk9v8KoN8mu33Pe0NmzdZXH6pFNSYioySKqy6mmg9DMD5wm5YOVao9LKP7my\ntaZEsIQ0WLEb7RMAy6QqJwf4VtLdL4lPO1xhNcIfwNun/KembSPSRSMlrvIs\nDu33\r\n=4mOl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0d42ee650.0","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/shape":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/button":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/typography":"5.0.0-canary.0d42ee650.0","@material/icon-button":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.0d42ee650.0_1578087460772_0.051674175625823215","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/snackbar","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20964614b58d9b2eedee15c19c879fe455f2e99","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.847dd1ada.0.tgz","fileCount":36,"integrity":"sha512-Ob3xe7kj96nogbtwpSAoqeCRlLrhEWBsDMatQFeQPLfvQkyfo/CADX1qH+cZeFO4/D2zMpi/H2VrhO1y2Q3FBg==","signatures":[{"sig":"MEUCIGtQd/jhF1QweBjX1CzFHDHuXgEFrEEGhfNagdnYtZRJAiEA9JFMI4ySuXRXxao5xTwGD2UoKyNj8lx5ygXVLjb46vA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4oGCRA9TVsSAnZWagAAgAQP/1Vwwd/uHSUITblWVAWE\nld2aGtEmWSFvjKpMdj/jZkptkH2TxWFqet5+P6XScVlmIB9Px+9sTZOkWtMi\nD8tpD5tRuvrVrkcfWe91raAulhScfoa5I8rY+11FnMfYGKRuLXe/rx0DYfOU\n0Ab62Mh2MTUmjB+g6BbAvyV/LMld5d9fyE1WSTfvzUz5mZtze1p2DFYH3zJQ\ni+VW5puDr29Aelhh/u1d0sk/AezD9nF9aOd2AAH52ePWqGFiuWGG4DYPBqJz\neUDYAEPoW1/leADm4Jsc3Z1EckWyLgK0nZFILrhLpryP1njpzDMsp5nWGn85\nUj+d/q/lRLtvupeYbx/BHv70vgIf/iakFoDwz2QhSVxBLhuzD4MtXOyCTFoo\n99Pnq75oufXNEy53a65ed+bivnYIo3HE/7leb1QW75aYcb1oN9MOUoiEAh3c\n0mTGE1ZhEoBLy/iR0QtROw4MQwaL9qzmIA4n7SbYbjrD1i7BSUFb1UuotuNf\nSdnIVZra5HXUHpqrkumrT2mvQ9a/3YhH4xmJjTJg4qdM3ii40NQ65aaeVy8x\nIVASf7h4C11VGV0EBVpLQVlSB1FoCTHqXJGUeLkzqmXaJvJ2Wgk9ERr/SdA4\nu1Hr4jzEiKygagTr0yJL2ayH9HmqAtjA4j8N21exiRvyySakADwA+SeBfQiE\nV5zL\r\n=nyAR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.847dd1ada.0","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/shape":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/button":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/typography":"5.0.0-canary.847dd1ada.0","@material/icon-button":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.847dd1ada.0_1578338820683_0.32769521369899324","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/snackbar","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee4b0ee6cac954373ea84fcb175b20c32984bf8b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.39df7e5df.0.tgz","fileCount":36,"integrity":"sha512-XzXo3aIXeIiq48phOpDZyoYX3mLvLqjwXBVKgkppsc4oLmHQiRIGONbbyCoHkIdzeNtFNUxVMBFTzE8BkDswiQ==","signatures":[{"sig":"MEUCIAYZKZ+T2ADfxXmd8kw00AeEU6hJ566nmQvkl1VU9sWLAiEAjua7nUwlOSOApTnKaDQW/G7/bFLWhO4skcJcWcdyeCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9csCRA9TVsSAnZWagAAkikP/jcpbmkyt9hifzU+J0aW\nTeBqDpxA0UWaF2cgMv31OpY9Q58LpaZgEAox3Vpz0jOVQ7PgeF8qG4NVLrDi\n1p8Rpxmgrm/ypn/dqSKhv3dWvhYofoZYzhpGCpksEFcaAc178g85ROnB6UGU\n5rPvTueRMo++8dU4Y6FmoWLRx2VVTPzydCpfIMQUNwRjaJWaKDjytA59+Inu\nPsUMSTORT1RigpV17pJeqie36Zms0qKrCwZ8M2xGlhXg8MleMyOfkuBXJUkk\ntsyXY1nKndzcBiOBlcKvOF7+w3wD2q5NvuXJmiRiR+bnM8Ufi1pRt9TNWVnb\nvyRy1moe/9jsA93c8PTKS2U0UtebzFMESfaBfPksnceHIsOz0d/Ru8lPn+nF\nHYfzWAWPROLlsqH6hZNzggS17vihmjhTWAJLKf885K2Al1PElivELy+AbP9m\nYIY/L4hSe68Q/blsOJyjlP7gQs0rGEjTuVTuzSjeUtwRzY1fBy6dy/z5UWgd\nakRLE/mSjFR1esP2/nHWOHvJ5cp6Ex+tVnzXrPS1GfNQtaTHzJGdsqcBHfTp\neTg9O3nm3FFURBzZjeAFhie4h2bvrRCr75LK8ECIPQT+6Dv7ORc9VSof3ZQE\noH0VdmM8j94GFPdQWKt/8c7bOzN15l/BOWFz69D7VMWAwMOQCX4zBJHY2PaV\nkKWs\r\n=JERW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.39df7e5df.0","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/shape":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/button":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/typography":"5.0.0-canary.39df7e5df.0","@material/icon-button":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.39df7e5df.0_1578358572546_0.04138015276458962","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/snackbar","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90b519146a0781991b48ddbe0f10e3235b6d817d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.f1a2581ab.0.tgz","fileCount":36,"integrity":"sha512-hSwvtxRMdejjfCYWS+sYMWaPvOTUvqES1cg3Zpu7R9lYJGY7KsuLRq7FkgLWokeXLw23C9CmQ9Jwb8bXLQ2wPg==","signatures":[{"sig":"MEUCIGT5YiyubTbusv7t0CbYArPhZcvvskdkJ6mfljipuJpqAiEAxh+l6I2DEmEKFHtwDMkUCrAt/yjWq/bCSjdieB2YFUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0VCRA9TVsSAnZWagAAC0MP/2cagcrVg42Ih9mO4wkG\nD4JEzPmerClWpD2gVYcqVjnd6tdg533MGqgllvSGuvoZl83f1pxq32ky8DZH\nDMzEbczJenQ/NtBuw1sd7HLAXPwi9/rFwG9XTv4QpIIrWBusXqCva0Ip/Wz3\nrSfdG6TsE/ceBkT+SdODN7gF/yzgkDz2MIWeEeh/dU0YTUosPb/FmIQCGItf\nzDAxn9OoZcPry8/MJvuojlkWEY0qmCROGATa0N4vY2RcplIYAVfwxJJXHcTW\nfFc5mRs7gTES4iTXlecfKZzgD/WY4v6OKYk4UTk2DLZELrgLmjqAuwvegfOZ\nSDM1zJ78+uHFBbxjmWG8iNgyxDvk2PX2CFw/QBByNG3ggzuzTYuCEq/ASYv8\nunTdc+CB6Qy2I1p5K1bmqIrST3iV7imYncxVE70aPT2EbrUJ/GK1CyuQ53Eg\nqHX8LDKx5Sii5krxv5zVVVH3eHsd8bK3JFl9N3CWQXKiTgippE3n8nSTeBHR\nokQ3CsiigmR923zYjot8P2kNmV+eDr4m2sGL+uPLEXjYFOgLbZSJaKZ1VFZ8\nuT0QtsTOz/GF9B7QUd9OXvHns8wUbsxAsF0jIyjTDqQwsoXgGA8no4kszNT5\nv04HRVbQDCZwCaJT6zigsu7bw5Lpt8hvX0GX7/TPab24NDJXbmyJ1LcvwSy7\nwnb0\r\n=NZMb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f1a2581ab.0","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/shape":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/button":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/typography":"5.0.0-canary.f1a2581ab.0","@material/icon-button":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.f1a2581ab.0_1578409236808_0.5955620204253607","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/snackbar","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aa0b17833ceca5dabb788837caa28d1f5fe7136","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7c7ddf347.0.tgz","fileCount":36,"integrity":"sha512-/KT9iZGmwb+ENJqu04V4ozV6b6+nOWtz8InhV74A6ZWZMVJttRz4nMDmznRoQCE3N3qntKyotyTScCma0loW8g==","signatures":[{"sig":"MEYCIQCujrGLVbvx1pZWXdkKaLkB21HKmYws/v8TVWM+Tc5ehgIhAKRqcLvUDYWJf1wmz+lkMJNSQlY0/WoNCoM+o7hoCrvq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKEDCRA9TVsSAnZWagAA0OIP/1VtvJE+bEd9BuqW/uPw\nKxOQR6aOMAkYanh480qGOhFXqX+gFYyn7icBOypMfuHjfLqqxcSdNLrULzfC\nSSJBFP9gVQa9+IhwdEyn6o4NiPHpU7sjuYMlUPownJSzXDmAgetVClEHa20U\nOOvJ3DyZ7a45erFMbAT72LJlqm9kwXut0bHT0rtkyTHDCbV7daaPogobHCN0\nuaMQ93aixDCXFX88QUqZwIVeUC3pDfzVPiI9umCNOvYVWxklhk0UxJAr3g0U\nJS9n44ZMaNkYCvPRe+bXiuyQ7BG2pIY8aBfSac8p7UTipz60rNPQHRHfHGLX\nBzLct9vm+dcMUGs7kTTBfvM5u8U1atd1PmUYGJhDg+3GqBjnwoXur/bcbZTV\n1BkUBpGLFCcjlgq49nVsuY7eNmLHNxiucwGg2BK6ZhoFzEuGiNp2ZBNezYIR\ndXS2Eczfx7Zez2GSYxCDSqkPGvdM63H+Lanb8TV8+zsSNztkrEHKd5LAOBjc\ng19OdpIcLkHbPoRolod/CyqUnyTqt6dzT6OtVyqrOFQd19blO9dwAZitK4I2\nGNWinJoJImWbbyqPS9iHI1AZVGxr0xNmSWTVkYC0jkB4o+1HmZ5wM0Yl/HCo\naDjd+/AJBNQBFRPijjoZVaTeqh1uXQqmmGZtGK2nuzgXiilURpN/MAcxZHsy\nfE2T\r\n=7Lle\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c7ddf347.0","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/shape":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/button":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/typography":"5.0.0-canary.7c7ddf347.0","@material/icon-button":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7c7ddf347.0_1578410243331_0.0071691380439691255","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/snackbar","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0f0b7aca901f8bd3bb09d3a251a1149ab967534","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":36,"integrity":"sha512-tHtRv0VL4FGbulyt8bwwPg9Ir9f3DRw3Sj+CgtR67+Gf0swzGDlM7ZHNb0gMtjjC9WLqPsP+yByAp9yRVOcOoQ==","signatures":[{"sig":"MEYCIQDgw++YUCbT1RHdyyqOc7VvBuSl1PXP03CyFYFMq2IxgQIhAIdKjsOxYSMPyUVUdPbyO41f5dP0JbiXNOJpjK2HCIj/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMm8CRA9TVsSAnZWagAAc0oP/3eJkHttgPZimYTb+6gD\nA/cOHPk8s47Y4o1DgUS71cK8Bs+5BiMtQgSDBjoYM/V53hdih/l3PN58TJIU\nFvNB741obMHYID0iy8fx5sDMJiD/TYoD6zT4hYTXU1BrduUJJP8uM3MIDpfa\n3l93moSg84gwlzTQNOP9IIkW7x7FDpO0cchP3cjnQU0DgEUSxBbYpt7TeDI1\nXViwzAVo6FQAq4nsX1LCUtp+cIiuWO88iMA/qKTUppNy+wbU/g7Kaosy1v9l\ny493wzvnVyu6GA999E3b/lr4LRq5I91BaSXPU1pnst/EXI/Bs+jF/rdY1KDY\nUmVld1OQ4RBuccL4bQvARVoVgHL6nHoZNxMAR0r81DyAUoAJ78vpNo4NK83M\nm0a9UK1bk/ICyb4/J+8pK3Igrv7p9XBddUtUNpb/UdSKsiOcUblY7sq9wG9r\nowqAnGmx9LWdfdVdq/91/mhJ9oRsHlij2V9mNXq54WEKPRgWPbO7j6S5/6vO\n+aNvww0OE0hs2dJt+sCUt9TFJdK5SAtzuxV4ZPmCQLzIswTh+QGlQCa+kdsg\nelqO4PEPlBk6UAfcqDUQzNEGNFTbwrPukXdvlnPoPup2e2ayW0UTADvni5NQ\ntFAMmrXYqOsedty0a3+zsnjy7DwuzZQwvLf4R5SkQC4wnOMg3E/O6lKA+mZb\n+bXd\r\n=PCFs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1c84d4b5.0","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/shape":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/button":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/typography":"5.0.0-canary.a1c84d4b5.0","@material/icon-button":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a1c84d4b5.0_1578420668535_0.271700259163298","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/snackbar","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91082215f497e01dfe57e3ecae3bdaee21c6c7a9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ec9f16578.0.tgz","fileCount":36,"integrity":"sha512-kDLxUhtAO2NJXSrSnEhWwWUlciYt5HjWjwkMQAWEPOjYs7ZopFOc94jAd2gHU1OxKuj7N6YjjTn+EEOhj/vsWg==","signatures":[{"sig":"MEUCIQCDryRnP+OmhlhSb5OhS0t1jGek/ZPkzlWmQYavr93yVwIgO+hRuBvblZqdx8+GPIYoEP3AgqzIYF7ORERbr4sqqfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6aCRA9TVsSAnZWagAApuEP/24RCOk2DPZZ50TlVdRJ\nfrsQxmeEskOwm4LN6Ke5o5M5sXMbdfIOP8Jir04z2ofQd3pqtdVGvn0cuYvH\n8uz6DskE7kBx380gf0h4McYh3M4+geDhKfF1RljHmJznSsN3aj1GcAaVEmZz\nFL8NFDl6TE4ahe5vYknKyNqsl8Pv+ttKlviKXJBPmC2oao+LsTEdvBcTrsAm\nuiKYC3P87Zp24f7ArL9K3JHXtEU/aa0lQTPUgNW0Xx6PbtSn0DFJUnZvyqQD\nWzPc0NEXzLFyvh0Ljjs5xX181MJ1C+zYIfUUzBGEAMFWd6AQlCurjpO8H6Va\n8GYQ1rSP7hpMxUHRkC+tVzv52Su77fyhKxl0ezajr+NQTs+hwDNpW1cd2vBH\nxI1RC4PjcaWztVqzoUiwae7My7h8RZHeMbCwOAeWF+1q/jD2vY9jXdqAuzsG\nxIeo13MsEh0VvAGEuaNr/DI+TunvSNmMRpGgts9tDRA4XukV0C7HWmLU6sNi\nYizVZ9jTbTQ0K5xb94WK+XjQqroItZBhlVSs46gRjjNDZgb03H4jbVJ69rG3\npASeYpx8ygomHoz4PWVxTvdSGx+a8WbfIn56wEyHHeLIh3qxb4xBCEyA7pR5\ng3hEa6S8dyJ94lc9isdI+m+wF4+sIh5ED517IVZ4z6YFjTeW6zWDFJQhGshM\n/NM5\r\n=SE1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec9f16578.0","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/shape":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/button":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/typography":"5.0.0-canary.ec9f16578.0","@material/icon-button":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ec9f16578.0_1578426010225_0.18814888020179854","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/snackbar","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"665456ca92acbc2f7031f481a92f61dd416f34bd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b602226ce.0.tgz","fileCount":36,"integrity":"sha512-70eKkKQOebqJ/RNiTUUUChio+Iyv+9LUBWOqe1i1BJ7kE+s8IMWED0lQUbALtwgP+iWdEkx7E3B2D4JZHd0WoQ==","signatures":[{"sig":"MEUCIQCSlYXBUWHMdFDj/PcqiZSElM38zcB7raOzKp7XY446XgIgRG5u5Uczr+BOm0fHjKn0fj68AiO2BPejnnfgK5WWE90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOb8CRA9TVsSAnZWagAAXIgP/RarCdjRxw/pZNPt4xp9\nlm/ttupaxiR+ukzPKyDrs22d2lg2a8bhNuUeMnfYVqg58nsXUXQ4qUL6N42+\n7zfy+sfWjeY52+8pd+xQ09Xk741eCj/1+No93ZnNpUOLivcahGwRJnuKkAJO\nNuULenKGZW1avS9oDhVQpMzqxC7vpY1ZqOrF2I8T6b9nLnHYCKdaw5ZYk/qh\nrdYYqMAvPp3EX5c2cj85UjQNcj26FXYhCBvDAmo4JuZk9xPmNmnJe6WZzF9T\npCwOILgEYqhcZNJSlxANyfrasPBShYaATSQBesCejeLmrtpoxcBnnzEmy1pI\nujtcD67noZuapJF7A5fXj/jjEQJmqFuf31oiJhv8ps1LFAlS0Q5WRWhVlMAt\nVg4ZUDAlL/dxAIc6ZgtCWxD8lUEb3emLKNBZJ45yBbwJ7O5j53cYp3REpsEb\nHpZGB6W9Dq9acoj5RRF770en0QlpKiv7bUcoeiCY9aIl7swVL6TVXtleP+46\nRMBp0kDAzkRuaIxeHxej3RbqsCxxE93eC2dql2dCrBrkezsBjyvX7MAgdXEm\nMsEGx0k7/fs0qGSH9h5dNIYomnzJmf/8ytxymymxAKCZmYBwBezhqFveeUqg\na5rkCcEpoGD/26yR3B93xZt1tWsxO5e4kKtIKOMCY7eWpoSC6WxAXk8MaA7Y\n1QrO\r\n=VbgK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b602226ce.0","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/shape":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/button":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/typography":"5.0.0-canary.b602226ce.0","@material/icon-button":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b602226ce.0_1578428156396_0.924829261964162","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/snackbar","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51fe5007b211ec026a1d8b6d1dd367fdeb496f02","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":36,"integrity":"sha512-OWNZmyzUEqjjHpae/0zrTWjoqndE3hg+V3U2mhEQ2WfleuLMwNBA2YW0yAuFRvGJnDmUq7q8oQNokAUh3dDXvg==","signatures":[{"sig":"MEYCIQDJWUVGSgJO4QcQyluKkrnVcLBrxfXPhq9apDK8Z0b+JwIhAJ250arPv0I9uojd9mEol9RX4znrT4av4UwcHklEiOEz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeXCRA9TVsSAnZWagAA4VYP/jM499iQkzdSJzo8isWv\nYVu/rVunqYaUEenwlx5HYmRMNGfdlRXL8ZHOKNcqTnzW8eIc+4YpKeF73sOD\nsNGm5sz9xieFKaosv10xf31tr3xymuYxS5TYuqZjICX0YbPE1t8/PjR15dfq\nCrT60EYq6sQKd3ehhQAigInCAt/phan6+AqKStvpj3y0/T9mzHIqthFwWRg5\nkyAbMvY6UXA68RD0HJNQWxbZgWnXXrWRznJNwZjx6tGilU2ZT3O3VQx852uZ\n9Cmcxa8g4+QmfMEWe+uaJtOvVsXwqK94VDqpucfkiGSXsixFkNkHsP5rjSPA\n2DIhqCs7wzd28FEUeb6ns7nnmRcBvsXARzFF3rudSnKgYNCMbgBPYBSMixBe\nNKzVcBh2YlL1MCTSzxPlLsTn/JnZds8vheP6HSpQfBbvZteVF2Wn2cHItkUF\ntwhhCo+G0QIyJqzVdhDeNQEPcWRjhOTc5dumWOo5384lvmdGfLML1WYoCvSq\njjZiYIdhE88BgnpchE3T/UWxQSLNcF+l3fYBEkWZTjw9jnv8kxc/ukUB4Yf2\nIvQDJX2DJ88sxdY/MKJGWBBQL+3qOW0vbZW9u2wnE2uLPGNjg71MjGn4HhFY\nbE+vzv5BkIOX4tpLUhLO50AMTGisZ96x853BPwXLnZyZ09dcTs4rwyp7Aw05\ndlmv\r\n=HxqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2d2dc08c.0","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/shape":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/button":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/typography":"5.0.0-canary.b2d2dc08c.0","@material/icon-button":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b2d2dc08c.0_1578432406619_0.47139741291963233","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/snackbar","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9b82a20b3968432a50f579bb1e381a5abac82bd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.61f2d7580.0.tgz","fileCount":36,"integrity":"sha512-Zz/F9CJTj6eD6Nn9a/Czp+hD6WrRsdoBC21vgkqgCZ1mue4A3MsOiJ0F9DamkwmQITYa26LpSOTQGUCQV2PQ9w==","signatures":[{"sig":"MEQCIHLH1ettmWaInk8HtJgfmwUtpCNv0WH2PIc6Ca0/8fllAiBeuY1mhV6YDhvCfdYyiag+hqaWoa15no9pLx57uuVhww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPrBCRA9TVsSAnZWagAAvSYQAJYDf4Wku4yId1ZATvmf\nTEDTiKqWwjXlt074DArBNhMpDWElfqcDKznpSp9P7qBEDvBlmL+Z4IKVB6pC\nZFZL51Gq94FFksX5eqZqaLJmQkdFuKwu3Cyj92M8S460yzJ5ReSePk6fMQ4P\ntJ4bdiwAmlQn2xTj61ZyX28D8KQDgPuxznrz/a6/Jy2IYHRLrzNepvSF1ZZg\nc5p8mCduh+zcdlX8liZhMxqen5HonZZ7TL3qQmusINpQ9AGjczzS4kmxcfSk\nmxhZNqzO1sz2+4UeOylSgKwOVlQgppRoj6R/an+HpbCRQG1QONEsCgHwkgZe\nIJ7mBtpOEma7djAyA9MozjHc7/SUQreXhebdr6w9IGtNzirhC06LoU6V6Hxm\nFbSAKJaVKNxDZq5Xzh7SMOfP324koMbkrVLlJYE7TGGz9UieI0+jJpA3Ccpj\n0YZqyFEtUb2Voiv6g9CpVAbDXHEpOtM5sr6vp8cZEBvmfidvadneujnD7V53\n3IFwBTLWpaVe3EFKc51XoNQWWaCDVmzUd27QkCKZGeqlOEfFnW5bWPztoevM\nQsDjjm/iAr1DM4fCNKeFMC2Ohlz7b0c81RSL2uXp7Vm6DloOVG1ca8Y2biIK\nznA78Dn+AJ3K5+IiheXrixAzH6r7IWHhvqmOmcQkLVw5WEDyr9ohagy5lRNV\n/lz1\r\n=8xqf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.61f2d7580.0","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/shape":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/button":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/typography":"5.0.0-canary.61f2d7580.0","@material/icon-button":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.61f2d7580.0_1578433216816_0.6281592254616475","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/snackbar","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72e0342c09380a3a7735e0185002034c54f0ea35","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d1be53a2e.0.tgz","fileCount":36,"integrity":"sha512-pwDKCYNDZBvUETi4Yn8/841QdE3z0S4GDIRyRPkh4yvY4rnlaW3/dH2X3FydWPdA4lkMTYN6ZIVB4TXSFrwyWw==","signatures":[{"sig":"MEUCIQDNuUJV8nRwrOPsnvVQEf5zYyf6T435GDT8bAiJZxA2swIgfSnzmivcNaTZ9/VndMct73gqPYQjNbUM3gbZh/6fduE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQOVCRA9TVsSAnZWagAAh8YP/2mdv9zFtQipOQrLk13P\nqDjNdSvqmQtz0NW0GWytvBKFmjfWsARRiddwv3SIOEQYH1QfNFFQOL4gDuKP\nGJ5yL9ONjB5LTHRwddd325lDXSxklq/QGk4iV5HtJANoQQuWtB5UiJuHNstb\nvpieZL943jYMwwMNfjbPu56vTOxde1wCN/j2rUDiSj8D9rcnuC16+EnU3Jin\nZ0kS1vYHJuELxj1j2jWWAXvGxcsAOT4MPZw1Fte+7KeK+hS7fACOsKnOuVKO\nxn2hr4tLqAun1T4CkqyjizTxUmRjke5w+03aCqjydl5naYtkA1QRa7Dfdnom\nWFSXiTs0maB7t4DypkjlRf4etn/vcFcsmd4WMphHOmDUxHeOZIXnvlnC30Fl\nNYNZo4uQD7neOraV0eeUP1afpxjByzyJNWapRKF5EWwMvH9MSy2Xvx084lKp\nKVqUW1XMzS08QzyqEYiqYzCedAGwbRe/6ZfmmxH69SC56dqf8jY0vQrcYv/U\nXMZj1agdiSMTa6VOPfAhfPsZUmWDAyGjfnM6+xyV+KnERfqs23V5sJCHLLgr\nFTMsGP5tvUYnN7SAkt0O3brhS55eRdh1+360D8pQDneOTBbeIE+co1i/lhej\nbe29VIe2vSU6Fny+0LFC2vcpy/tCVScyd2yFCf29FH73WlVQ+pKg/xvT5/Vv\nniZX\r\n=QzhA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d1be53a2e.0","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/shape":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/button":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/typography":"5.0.0-canary.d1be53a2e.0","@material/icon-button":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d1be53a2e.0_1578435477129_0.8392418228704546","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/snackbar","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebb01aed805278e90d44a33355ebe723af1aebcd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.9b0d06e32.0.tgz","fileCount":36,"integrity":"sha512-KTUbS0tNL6Yi7u14mDvRL8/OFWIEgK8QwpQ91GqYWswZ98MDhmXYBXqSbDKmBpIZS2dM3z6FE5WKw1mzEBU2zA==","signatures":[{"sig":"MEUCIQDVPLbNxTuQCwMtauO+ChPvS7supjao4CWc/5Mxmqz7OwIgTNnnQrOfjRBDSGhiZV5pJb+xu10AvawwYlqBLRNKf9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQQCRA9TVsSAnZWagAAcqkP/AsIl7ebwZcj6R4X1zeQ\nB33se6RqO1Kjtcyyjo7urxyLuaLak7+HIW0HjVE9P0w46SVRpYFjIAqG0msh\nOeA/LAP6VY4tjP3kiwG4Yr6zj2L1H++iRvLi+C80SilHS+6qTFkR58hStNmt\nvFriv6JYvTWq2YrcsIyskKXlf26XH4Sc1sUWXIJ28Yg2RfRKGHwM2+n7fn1k\nzuevBZ0iFg8R3B73g6xPcPEOLccW5d7nQDc3Snlb/8Utpoqshwd8iFkW1fOL\nnZ4V5F0xOvJ8/cYP9nCYx3VV8MkLKrBS4NJZgdJC4Czz9k57Tu3ywP2k9APS\naXGnGKoIgir6AQttXplO+g92DRESyOlKnHlm2cYnYpu0B0oDEYbztG+EdsQn\n6++DN4Tzt2AcvugPJWNDjueWhpW9hQc6189Xjhg0heUqLaeBrZeRB2d3hIsO\nPtZQIpSF9y+ZnGVgGZi7vYFgfrOeNqElhORE3uIhLE9DNJrOI+Ci5soY5zOq\nG63+rpgkSay8KMYMc3HbTfO8eX46boqsDzoxfIoicm416fOmkL4xI6NRMAXp\ns6Sp5zBGQ/H03xlOPWVX5Dkw4XyvL2CSNS+PBN+GWFPZiOJaLA9x1eTcCF0H\n2FGncGpq2lODgU3GuHkhmWjjnnbj31kbQgOhhoVg2Z8THqaxf1xiXOjlaYad\nwb3J\r\n=mQ8Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9b0d06e32.0","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/shape":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/button":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/typography":"5.0.0-canary.9b0d06e32.0","@material/icon-button":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.9b0d06e32.0_1578435600522_0.7569724184660538","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/snackbar","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f25eec248eff7d9aba9418e1d3d5b1588a4ebef6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.730c807a0.0.tgz","fileCount":36,"integrity":"sha512-Qg12GZGEv2n6jNCFBKVrXIswqjSSPdrTMTuc+yUAPH+JoWpxckNqrJAOMYuCFyTB75g5H+60MNHECQImXB4UoA==","signatures":[{"sig":"MEUCIQCle9HolEgfdB1fAsqGss3eH9zWpmfadKVE31pEg81YFAIgZ7vshn9mGskzcqttf3InNfCCHXF9Gzh7wL5/Tc6DYwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRtCRA9TVsSAnZWagAAu5YP/A3oZyWWjMx3NBorVMw+\nDFvyVVGFdR/Tzm+VoRGfLuWwqWNnXnsmwuozOLFc+x7LeV9S/vi1H7/6/uO/\nxX4YIT1karY5a7f56D/MBEqD5C+KT1sKaXv2FsWg/eZ+QeVxnXqjRrllVAJT\nwAnydtslEVA6UjMvwqmqFZa/4A5bqlC33jzpqmLtF26T2P0MtPpEnedPbFMy\n2zgTQ91V3Ov3IauaV684ZQHKIXk8xs/2onHTqIA+9b4W3hYW1Czr+r8WB2lE\nXWSw2e2yy01lfntXfeiYzhFRu1GOc7GQFGnah9l2xRga/BdjxQJ196v/dvcg\nuFE01bWTzAcgtYRsIZrU0VNdxYadpqRhZSdmsnzsiSfeBnSkH9Zudq9tG0Cb\nywYWmhsPZ3qUAdAgr9iCG9aRLrBAQzSdhfnDQFPNw1tsc6YKsSbAOFnMZz3y\nIoA18nLibzpMLRc35DpqqL2r7qqGTY40lKLkgflI0tGxIFqjgj3t7eA+eaCf\nB41Yu8A7paPPL6ha64lNoNDju+yq/YLWwhmXSWmrc6+wKjgWCXt+7nB6yMw6\nYJTVh+CGUYn4z2AwEfg2KEdW1FqAoI8xQiyJ5kiXZZfdqP8NPkVVaV4aLRT9\nQ7dN+hiPBXrkdxMsUCycQHVibd0W/ccH9ZAUojXEMbsIqISjG/sM+2ddqR4p\n7RUE\r\n=j1Cf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.730c807a0.0","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/shape":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/button":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/typography":"5.0.0-canary.730c807a0.0","@material/icon-button":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.730c807a0.0_1578435692711_0.20288733164265738","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/snackbar","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"000d70ec137e25d45bf3b9314bbb84447f0288bc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.2213152cd.0.tgz","fileCount":36,"integrity":"sha512-KpfjUBhbUfTdjuVcJnmE31H/Usyb457/ZHJ6K/pOVIlUE3RTE9aZBONKlu4D/7kZhaZcArrh0K81+H5aDZorxw==","signatures":[{"sig":"MEQCIDyWTp+MZkomw4+c0e4Xtf61Lq+fIt1XWe9msJL3SWDmAiA7Y63G/MgaHC5C8/lD/FS5XyWWSQQd9maKnx/aMEnobA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/sCRA9TVsSAnZWagAA+zkP+gPOYGXXOF1Cx75UAapo\nBJI/cL5zzIgKcVVefQfckkQ5s0BJuZbNq4nr18D11xVtQ3Nx7YDMgVbNyBl0\nDlobRRhz2DQaklgxBoiEdpyTu+ziEUnp5Z06Gj4yyGfPEPUz2oOiUb/XvXFt\n7iw2AbkcMEykOsVAAMbpjWZp6IFijrvKMfHmrQvYsIZeoj8uizAD2ibUoFXP\nkDcoqsli5nk7VPtaTn2LGcIZrt/FP+ygt3nZU/9XeqqiJTzzrz92DHq1Og3Y\nAhBCj1/sh1G6XxRWTa7GqZJu52H3wK3ikb9TCW60ZxLgNqE4oQPmnE2vw1PB\n6Vj4jrTAq6ViQVZhpe/D9svhhvzUwPdv+/2pS4utGZhmD50njgnh8ZwG+KAI\nuMQQV0V5SfEqPtxECWzG86EfBPiy+UgAojNVbaH3uhX9kARQZoW3iOiMGc60\nsPa4MVKXqYCa6MKeVNe/fmvsvCrDN9XaUET6Vll/tG2fDtgnRGUxVplhYPrU\nlY0LQ2IeLqzkU+EZehLGuWK63xGLPk0y72i74A6NRCVv7GdQNM5lU1bu0F0R\nQHFiALZFyQe6fXCEaQ7FLVR4ezAWxGoTjFnOqm3ngcHlXJi9m+VusjxI4NXA\nrGk9MduKYE4NkFAp4s+QHlCZEtl/3ZxHEEzmQXafVQdnTEMKidJeUhIKlcfX\nEdFo\r\n=a9h0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2213152cd.0","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/shape":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/button":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/typography":"5.0.0-canary.2213152cd.0","@material/icon-button":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.2213152cd.0_1578504171978_0.7786455491618343","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/snackbar","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25493ba86990488b6845f51099fc3b6d08fd8989","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5750f7169.0.tgz","fileCount":36,"integrity":"sha512-gyk8z17kvDDG47Cghccf5hN3eCQ4qVgvTMJXAxYVm5vx3HL1OWfQD/mQASsx3oK0nh6kv6mdYJbpSL0ytQSCiQ==","signatures":[{"sig":"MEUCIB4ZAdMdI3pQXqDIkep1GcTEu3fHlibfeuLaSWZR+l18AiEAhXvsfzFIpZkxcsoN4uR2oNGuAR8hmp5QRxadoUm9xKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhglCRA9TVsSAnZWagAAu6kP/jQrn7bL1Mb4pOB5qGl/\ngUCbHxeLw2zerz6m3VE2H7mDAM5oddGi4nx+WevWaKNv8F4gSm26wmj1MfDI\nAXWWaE9FBmBYGQVtn2hb39CNroNFSVi+aGQuVhFNjA5EMHBtIhlaYGpyg3bW\nVhylU7Lq1WVd/iudBMeMJD5QltNrPwvoISc7MIrwF2AGEpc0pHhGWiTr2+ja\nneGmniZyTnICsLVqC7A2e+82GFm/y+tiNFX1cWa9DQ5abxdbYr2RphMt52tI\nCg/xqgZD8EVEzyqx1VkFfY/Sf3TFRxrf40/bpBGIvnMBpxm+j/0CrEYEGjeg\niwkbI7JB03tviSv9R0iazmCxspzFIAWlnM0xt1o+fXNfdMeKq+1PG1KvMdS+\njq6gi/s5P9q09OR33ni/C5rKQYPg2+TaTItLmN/10icbIpRnTYMULPSq4kls\nCjR21k4n8Rg+c1aRLtjZSxsCU1majzQ1hnkN+rv8s6qF6GcvvZM54cNxysg2\n+JUpLLpExeXkv6+GnwxUHGjiAYcy7yV+ZeliHfkm0VAQ3oemg6LAQZAF17W9\nghdSg5yGf4XmLQ7rmeGBjFGQKot9eg48lICs5oxCrRMFBFKGtopPZGfDUf3u\n3xs0ynjjNorGHpQDccVHkxxksnCgt8sDyxryFsi8lZrGR5WIN/FdPqnLwqgY\nL4tl\r\n=iLJe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5750f7169.0","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/shape":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/button":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/typography":"5.0.0-canary.5750f7169.0","@material/icon-button":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5750f7169.0_1578506276101_0.19564865125218622","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/snackbar","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d08dc37432214965bea21ea5456a490b66eebee","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.f7abc7a43.0.tgz","fileCount":36,"integrity":"sha512-Xg2f595HmPIBzW2bSosrFdmiXH4IY7PbsgxbUuQdSpzqslUZ0KgBbDnSe/7iu1iwsYS6/BTgA7R2cbydLcD3sw==","signatures":[{"sig":"MEQCIE8GF2aA2URAPldUvJr/ogk1J4NKf58QbmlKAiOqHbseAiBIesKtN4/0bvPbZBYPS3d5TADZlPhYZ+9RcvdYO33Z+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9VCRA9TVsSAnZWagAAgk0P+wYNlckdudgPzI+/L+8o\nsMLguaeBQ+hgzrGaKGO0NUsngzJuftsbKNSIxkXxrgW0IRWWcnN+xYSkADCL\nJIaiMMjSmEdHfT01YHdXE9B+JcFZ3NXIOFoD042RyLUiPOaux8ac7PnvOJNa\ngUjWyPSs4+9OkLmhKMDflHlFzD6Q4vynC0q+gp3jTniBknr+HLAk3iXJCSKc\nSFQFLt0fdqaz2NzvzW4YB2t2QVQ5n0f0EVPViKvGScKTELJ7ytOfljmHXRmS\neGrHey6Unl6PXuX2DRBpnERK5Pm91vXjUoO2XlNtqCkV7U5XT3c/8KkRPBGy\n3QpiZN6gDrh7BibdpcvdWxS98XuNNtzjZoIQE/JMscG4FAAlggbj8OiQn3Ga\nasWWjVkV5z8ucsAENUoj2tylyG87JrgGFU2CF3m98zBzp1vn8B7M8a99ESIU\n2sQf8qszjz4HWXn2UUgmRpL25+X45Nnoa2vTWFrTDJXeqf/gXPZIYoTMNbQs\ntD+NcIJXEMR8mheYYEJQnbUrI+bVolmbSEYrlSP772v8rf5paobd4l8gACIp\nfdxijt3pvxyuapSCR0ZCXrZv2kcBSsV4gEOCav56PVO5WWfLKDf5xCxe+I0b\n7GmhHFtDAJeeKc0TszYA075o7kFJ4yZrmsxA4ztGGyyvVYpLFQp6nsnrtzy4\n8T4S\r\n=fbfn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f7abc7a43.0","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/shape":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/button":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/typography":"5.0.0-canary.f7abc7a43.0","@material/icon-button":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.f7abc7a43.0_1578508117593_0.6014487508405515","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/snackbar","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd07e1dc8fe39144797d65c75da45623f3ba451","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.bf7b4a061.0.tgz","fileCount":36,"integrity":"sha512-GZlSssu9+5bSebuF/AbTZ5QkIu4E8ee2gaLrp124uXHyeDhJ8zv14qnrt8FQk9hgD5AMVKxvWgVyf/MUuSuHQQ==","signatures":[{"sig":"MEQCIF40iHz0xQDbXnrkUQalwZFBGq1fM9OvFgmwNY/4DEvdAiAEicHpdS1vNi0d0FQyqkF1glYdHPWTYmoqdJjdAGtMiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiKKCRA9TVsSAnZWagAAILcQAI1PMNPf8NxUXpnVj864\n08Z3tLe3C8DNu9MZa+0Qiu/ucC3FeNqdDPv+H+i6BuKRv/f937UhcpWNK8uW\n/Td++XGMEmK8PSktjvQddoFazMsTGhR4MyAbgiZ91GVdmi/Tj054gC5vBnmT\neuTnn4qnAmPc2FH4M6H1QQFQ37EAeFDDdWzOXHoTrM7itM4+o28Tk3oXvylk\n3rjWXSElTFSH93H7MwNBM/6phIpb2fRMZBCOORpVkNlABcA5s8ZzNYuhYS4I\nTzmYLHqlRF+dUOZdxDm/QH/DYfYDfK2yJUZTEXgyB8pcmRW/Gb+jo9AZRXrD\nvC0PrtDPXiRfxWfT8LFSQnNS0l2liKR7BfK/Ov9lGnUzb1PmbG+ZscD2qoKj\nebFzz5UnNOO8Vvww40lBH10fiL+40pOaX1M5vyVg+CO4Cw8miSvkIdoNig+n\nWAdJVQ7ogiVV93Ir0v+RWA5xP5iCdcfFKhkJxbKYrYN02DBehxBt0j6UKhJP\nO+jXK5QapST30rgTlnnN3knW2WAClzRNh0Lu6dBAqH+YVH+ws2B+ENDacN8E\npI84JcWLtNtKxnABw+BAsCz6Qp2hV9cfJuFFWtOAuZ2YdqLH5T0R0CZ342qd\n6I/lGdzg8ZBVEFsgG7yHPnRGitPDSyLJL49MJk+nR9S+/+oFPD2bV+GvBfBA\nDlCm\r\n=ajsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bf7b4a061.0","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/shape":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/button":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/typography":"5.0.0-canary.bf7b4a061.0","@material/icon-button":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.bf7b4a061.0_1578508937816_0.923054237852982","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/snackbar","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e954d02d318805121842f353bfc61324bb0c06","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.784fa7903.0.tgz","fileCount":36,"integrity":"sha512-BGpFR/qS5HXE0SHBQT1vyvKFJlPNFHm5GoMZMg2ojV7X+ghyKC1G83ORPQD2LTr76z39eJ3PM82WF5VPWGF8jA==","signatures":[{"sig":"MEYCIQCO+0ws05iZKFWQ6qTQRsyidb1yWf+n5gA9NfnoNlyRCgIhAIbhezTlOEnbZOEqHXKUVM4lvBPTwcNf4zu0w73GphHT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFilECRA9TVsSAnZWagAAyRYP/RjUSLWPEFNAOH/2lHYQ\nT278qMlil60RdYNSyepcnW67v7pElJu+iVxkkhXpQy+6i+oU0rX0dG4w4pyy\nTHpc9/ltJDMZEJvFbCIGoxOK3MLm3QjuXID39t//JKjgs7j4ftINycXnk0St\nCmB3rw0jQrisOYy1ONXjIdNn4y1bdZ9pdOQLdDmol3kIc50XU9bOY6Njl3RZ\nQ3LL/aiDA5FQQJuEwMCFiDUOYf3QGHhlN5/1S/DLoxkU0DwgoH3qVt9gfowD\nG15wb8gyroWgnEckwSslKDkji0qhYpRJ2uSCSRPN16xDjPzbe9UTdhas0l3N\n7rvel7OEpsZI/Ll4SSU63dhCus93HHHkXoTUWtWlmTHK3/oV4Z+ndpxd6Vb0\ncaDbCtWNnuOANq8rwnbU/w6AFk/QARU8gBeG598oO+CAQv+YrLc8jG9pLA9j\nAUiooA+pV+iHqkvCNT5FlXH0mmTeS2qt4/vQou5eMa6+kD2YrhaiHOKSwlAY\nxfMTDG039eKkonV6kiNgyGdEwdjkqZTe56SOGJKml34/lVNFle3azYMeSle9\n8AyM6YMYEiI0t5MHAYz2I2XPjqTIeNshROh/MVdFlJ8FppjBv9JhvpBUZu6z\nzshvheKRFMR5s6SMf9m7jfYJto7vmp81+kMIp+PykQM1YM1WZpXzrxtMGqYf\n35ZE\r\n=4I4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.784fa7903.0","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/shape":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/button":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/typography":"5.0.0-canary.784fa7903.0","@material/icon-button":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.784fa7903.0_1578510659926_0.12895236142102728","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/snackbar","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48eedc3c0ccdb36c8473c1631b2e0af6419c21e2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.823c050ba.0.tgz","fileCount":36,"integrity":"sha512-Ksy4gDu/2VDbcedKHGlbUZoKSFDNRcFuqtn/a09CEX3f7XDSaSeWDGXbKv9Xync+sYcv61pzZJUydwWqWmyhaA==","signatures":[{"sig":"MEUCIAFqH3ba+Ev+q1YnF96o5f4aHzHI3GWagoIAW0RUAcdvAiEAxouomo6uIGIUYomy6MDXbViqyQGnc4Y+LBu+Hi77/PQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjd3CRA9TVsSAnZWagAAftAQAICC8WhzGd6OU3korFBc\naN7YzM1lUrJgs7VuTPVYq0W+bdOaga+IQBond2ltiPJs/SVnE42Z3LpBfdyY\nuUyRFxSznk4m21PN+VDyJsGco/e7SR7NLR2ZoSiDbkwnRh5LBEXolnRSAwzg\nMszxEzolPfxpWR0M3QY5PcZnaCi01k0UsfOUVypedSB68gYAT27ewFG/KdvI\nKDcQOov46WYHm2hS5Os5giXpRFzw681krlbUa6mzbHK0BYX2u/XmhUtj5zUD\nLp6+/2pj9Au15ZUbjS5lpt5acld6oqBiMHAdOiAW1Hx1zOk1Zf//BhgMvtmb\nqPzKPArYYn1hxctpuOw47yen0CHwuqXMGlgHcEV+34NrorMe2Z0qe7MAil0C\n+U1camt28jGyXv2fGPM9Q+/YPDSUwyZFCKMEZWcjbt73DjoxIzhmyfZpyAJ5\ney2YzcvGt+H6qvMs7HQpJtFZlpVuM8PigTTFyMuRpLFMqNDjZk8USWLyUo99\ndzQLq7d8N/sG6kAuYkJ5KBEC87sCPAOIFYI0jbJJRRBhdMk1nyL5vnY6cEAk\nQX6qGmBc6HCQa+BiT8Q/dXfGaTZxzgKirYwSi0nm6eFKomS71JeYyZRTs96e\nEx6GnBhTtWaoEiAYPabXpxnYfTSVrrbar4EkETJmgbLEJAoRArugqSG+CUxK\ntD0z\r\n=iPtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.823c050ba.0","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/shape":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/button":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/typography":"5.0.0-canary.823c050ba.0","@material/icon-button":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.823c050ba.0_1578514294845_0.08501815533800827","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/snackbar","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2af1c9723ebfd63b62e79a5155d1773d6b7de612","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.70c708dee.0.tgz","fileCount":36,"integrity":"sha512-R4RP1UwCSUCkTE/l/w9FjhrfC1L4Sasd8Muf9lrodNzCeN87ZATCBQbwIKI+wIxGZKZ2bx2uXzTBsZ9NFgiHzg==","signatures":[{"sig":"MEYCIQCM9c9uLxbsMELwM7M8kY4ixtJSpAG8Dm0WExvPL6uk7QIhAIHFr+Z0+H8NtOLUgj7UCZeyoIj8oDE0N4yMUM0JoCyf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjokCRA9TVsSAnZWagAAnlIQAKR+0WfNwLoeoaarmyXY\neUlD3H3i16L0xMGDPIIG+3Q8gpU1N9nOZj/dQRhCsSQ0iwzuedbwcA5ttmM6\npDIt40trwfT0XlP04Q3kiy04gh9IUgcLMfdFlCgrFQDHyO0+lPWHCfgg0pzV\nAQ5btDwz6YnZ6d3Zs5YhOMflr4mCcc6ASi9BFHkTjF5OVV1fdMg/XeicpdYM\nzwZLhNw5nGF7A9HH7RllIf9dS6J4aQBFQVuKMFpTh9eCqbpN7yftKhxeX/h9\nMMZ+U9ZUYE0S/mMSv8VgKaJkRd0t9Ms8FhcrW1tmIy1jVrSoigSHKSu4hmbh\nXfFDfe+3xWAq4qXA8fdoA1I+us/E/8AywPFrOyjauWbvIfmpmhISmvNWwBo+\n0NUwhauF4YVAWwk0sLXNtwbckAi7TEyWFcB32fVuX5it6XlgpIecjxlCli3Z\nVa/1jn2kom7GADHcUJGSe6TX2528CizIl+6lZL2dOQaqnLia+jqQIDLOPvFz\nryzK4ksPmB9RAzcC5NU+6oMF50dJKgiEV6VWJuXCWrAwQon4YZOpP9qTkcH6\n5hENptRwabbXGZlfhE6ZFCQqhy3jKrqJkYZ29kI/U1a5Bmdh3LqW621rG1OM\ncacwppNRIh6+ZA4cNvXTtFCDVQRgmb8xHUjDRYZ0md0gUUA5uFLLwK9frQcg\nPLBD\r\n=th0c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.70c708dee.0","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/shape":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/button":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/typography":"5.0.0-canary.70c708dee.0","@material/icon-button":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.70c708dee.0_1578514980345_0.5090654109477819","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/snackbar","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab75f199e549ef2ed607793e6dd21c1b5a1745ed","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":36,"integrity":"sha512-GK1NBzqCZguXPAvXVaPJcn+/UI6QYrdwjI/Nn4QgiFOCFdHqGB2sie2DAEyGfEefR9NmTQ/CVuhW2+fxZGMU+g==","signatures":[{"sig":"MEYCIQC28zSrhGxfmV2wjW0V+VL5uOXc8qHnHKdmTYHXyqy0sQIhANmdgjRSCT3qZxYPeAhRVqQDtJoU6PdHxBbHPvKyXKkC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkz3CRA9TVsSAnZWagAASNkQAJ8Om4l0BPzdz4dq0+KI\n4IALrDPmr2UCEtbW7G978BreFioQTNelkYwiGo4hXX/zf9RNNhkRekReVE/Q\n1gzQBI2ASdnyalZ863mTHQLsWGS7aLaMXAA9oQDq84jMr9jCOelQ8VY72xsE\n6NTVmWf5pB6o0ufQqpeleQ8pJmPd7LyLrvVj20dcumVDnnb4lvdwPRVISgH/\n5Via8MzKdj46r4DkYTRTpdhuwjVv/mdCe88vAT9EMIZJxvSpg8JuV/t4L7Ua\ncoW0MDPiENvZb6SPO7PHxx8Jkg4hfzC/RRfIpWnVxzt6QdddoQin8xYWdYLG\nQ+kgLHEI/l0i12DHdP8MiRSE/30Tp9F3mfgI2u1mN8Tr6vu93c4Aviv3esjx\nPbvocVCpbbt0MhVDaFB4zMYQorjbzIk9/cSTLUkPeqJ67IyMaLfgOYwcs+gh\nmXfROkllYeKefv5zxghJGvlHtrwGrPhVpkxrlUX0lBYyr4TNp+vYDpXyRcrn\n1+lwMtMZD021RsG0ET+mu8Iog7VhWXJhHmpKZ7GhSeEcxv2Btcid8DiSFz2h\nUFlW7gh0DiJiB+xzABCsHeCGB6tJCY491XW7eOAJ43JahhD/i9ssrAyU/xm4\nofUni1uaZThApMTJCXEiryYqOssYocbr7tv00mK7h6CGKPgCwaRnmlDE3j4j\ndiH1\r\n=+XQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ed9d13d0.0","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/shape":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/button":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/typography":"5.0.0-canary.5ed9d13d0.0","@material/icon-button":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5ed9d13d0.0_1578519798324_0.23806503719077332","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/snackbar","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b93fec21068dd63eac2a409063f115a7c274b2d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.4819cc7e5.0.tgz","fileCount":36,"integrity":"sha512-ENPwTETL6Gbk6Kg8LTAPwkjUXXNcqkAMSNjLPrbjgwqA1/ZVeA7E93Sum3Gjn20TAoncxppdZHwCVhXgrK5axA==","signatures":[{"sig":"MEUCIEMwC54fyrLDY/430pAdT7OmnekEGaYXzKFfC5hyC6FlAiEAq/zjoWeW3xEOSmswnKIn4+52BDxJjy40z9eUSUavjgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCmCRA9TVsSAnZWagAALVEP/iigkohB6fLoE+7hRDU5\nIy+C4epRKjpUSMj62SXC5utkjzXTDuc7YsEDiONpFalFU69otwfsN8XoK/lR\ny1SDZsVYSTnaw5xHhGBIxeerHny9E7BlNkLfMrUUrZEuzLXALFnwHHrXNPGy\npsRMsl2qU+bXa2bWhJFhm9ORLwzdj65YKo2PiE3nChnIx0NFMfo7OoU1w/BF\n39RmvTpT1lKjboNLkKgZFFeSVzz6hUdQS+72i9r2v12p4j0BpztFHZZ5pp/N\ncIEPrxtTLy8EL+jTDmGB6VXDve2dTzqi8ttRg2+obwNnesfIn9wXhTrUchU0\nej/QROKya+V9SAMTEBn54Zjljy2Sp4Cld7M7nweI/Vo9/2ZGJtdVdK3jt7kY\nUjI3wwqDFYR2STIGFsHQo6egMzy3qfWM8hrJaWBP/XTKGMBeNgvuAr2XcZ29\n+UZrFzIHFKwcM9rjswaLSyRIzwbLDHWImPaO7dskwWU3WBnrBC2NTeUBFo1b\nXCONQKwmUa/tw8FkMJdrstGdykPAzMfCcDgfr1yYrzIRfv2JropItEtOnisg\nZOT8vcNrLd4ot02q5PHESheU/PnMhEDPBEWFZqErRdLpjtVxalgetnnmZ6DX\nmD0BIw9mIWbFpQpHfaBPuOBp/1Khk4W0GXDWzHvWWN1Y9+cGVEmTdGuIG7HK\nN+VO\r\n=j0KI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4819cc7e5.0","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/shape":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/button":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/typography":"5.0.0-canary.4819cc7e5.0","@material/icon-button":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.4819cc7e5.0_1578520741498_0.4733987216538684","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/snackbar","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae6f8430c80fb12f6ae156b1da64021a3165d812","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":36,"integrity":"sha512-nKiYm1PW2bryCUSHN/F4Rt7KnF58qCpmdXuuCa37unqFLpPv7UO7dokawRd+FOuY21BuRvkFp6OSfKTKjfsvPw==","signatures":[{"sig":"MEUCIEQR8M1wEL7ved+aLV6cFh4rIHpwOaFitqcMS4YCMyWLAiEApn4+QhKx+a99XjlteyyWvjf0/qN2opeQ72CyCb1qZBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTaCRA9TVsSAnZWagAAD50P/jEkPMibmCJy5J8aEH+O\nUIx+dHloQIyJILCVdq6NkbRh6EP6gE0mvGLyQ9C22PlGIj2GLTnPrGLggwGc\nqw4aU4r+X+YQlkC4UtBDF/rNg//5YQ+v5sv2PbwPDIlr8QAc/kiiJhwRzMzd\naEn3dQjzBmHRHCGVVj3l5bzkgk2xS9ybecGasRJPxOrSTjCpABXEouUMk/Me\nqTjtBZa31EjBmgoU94O5KWvMCh3ZVkKl3ooo0sXRfNLfmgd9wgmVgBsCO0Y0\nwUwPboEksc4wXP/PyacU94Vsth0eXQwb42LBKEz3Lfu4JHsWcRA7/4Dl3e+O\nMmZKMqLOsLmq8hvZHBdQbJGRSYTS+6cq30y2f+AqKrRtcSBqaEvf61juJOL6\nYdnWjSh3BlsvlrFXDIb9K+9e0wMyutmaMOM2qozybSOWki9HKaQAtw7RYdxV\nHRRFnUa5XcZ00mJ0sVsh3iV08OcJkRyscOPDFz2nq9rOeCiQyt1zLrsBw2ph\nsXwpA1Lzb+QTe6PSmuW46t7ZFYfnSl6cRKa3dDxZe0REPCuOvF6IICUnZoGJ\nrdKZy4Nf8Ks+/cBx3NUcu8eFalQJEk27WbWfo+OqYZXiQt4yxY2au5s0Tw1M\noR7Pbmdn32N9NaHw/OgXBdEQ4e4lLxX+O9+obBfB8mUn3dbqVw5tT85ftDi2\njcn+\r\n=XoO1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe3ffd2c3.0","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/shape":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/button":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/typography":"5.0.0-canary.fe3ffd2c3.0","@material/icon-button":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.fe3ffd2c3.0_1578521818165_0.9446808456274105","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/snackbar","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11c43b37b201a6dd29b3378e615aa90a2bd195fd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c0e850090.0.tgz","fileCount":36,"integrity":"sha512-Xqbd/TgbdVSefGb34qBjVo1kE1wKFdNlmd6gj2207evkuhL07Kim+4CdeZMakf2om7v8L5DlI1h/bK557qKKvA==","signatures":[{"sig":"MEQCIDo2tLUuyO7nWVZR0fiCC1ORKh4d8N/zmyStKwqrhgW3AiBDAO752T5/fRzZ9Nop/mMoa4rBBlw1LUU7IZ3ib8PH+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZzCRA9TVsSAnZWagAArNcP/0CREgdVSe/PzUJ3S7mW\n9pYbq9JyXOqJc1CZo/CT6AD26EnoKh5R2wNajC3dI4wWqpdv2Cx9qnnVbEyH\nrN429fG1zCubDYFLVCLxPzTDStr0YfLM6KGIrtBKXWZ8JAIgubjx0TEBcu5d\nZhA8D6cL+PAeANf3nd7fPF0iZZCz57r0nGIIRU+ClOo7ImtbsaXKfr4TU8lh\ni3oj0EvfOFRoU2P30/DkcQE39vxUcWH+ldrq47W/Sbfgg54n2nK91ID8jUo1\nns0wahjsPG9clA/jlXcv0NHhWMgI55jW6AgtdgQ2pzjYFbEY3oNrJPQshqsW\nvMOS83gw1hS7cXCtwJnAlDEXMm/2hH06zJvje3bj19WZR6DTt82ppm8AqoEK\nil6f75MZdkGdLArskUb8/kzO3Yt+3ILlEUY9LnSbc2xkFwqf5JFxKWYylwLM\nT99osHVLlG5UnhVlfkuqw5PDNdkw/iWOjHe82Yphw1dNcf7PbGPitF5vHuyp\nEJNVRIOuMuUpHOpPU9nGN93/3EF6olAITT2zLP7yRWoJij/MAYYGPJTkynsw\nzageWM8AmGMiLrd6NiBJqFsE1amqwGA4lkt1XVb9FfJKWqqB8lDijNLSg+z8\n/3e+saitdwQQJSadIjtiA/BsD4A+s0BqMV9Xh9A+Ixc6fqgj7eTa34wXzWBX\nk4Hv\r\n=A4kH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c0e850090.0","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/shape":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/button":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/typography":"5.0.0-canary.c0e850090.0","@material/icon-button":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c0e850090.0_1578522227114_0.3496183020217818","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/snackbar","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50842b120919706095e4303521c5ea4377833c17","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.615f86f38.0.tgz","fileCount":36,"integrity":"sha512-/Q/LefrMUao44blY0CVqttAzmf5AI5BrTTTi4fOstwXlWL6L7pKi4XTdR9lEYt2ez7OI7pqxkWj/ZlIuMVT73Q==","signatures":[{"sig":"MEQCIF2kGpcgqczM3SKf50I0jASXwy1jK9uJjv7aGLqWPQkGAiBP6OAxqQDYoKZ23D7kUcXTZq0M/xV36lDoJQsSZdPhWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlp8CRA9TVsSAnZWagAA48oQAIzwCyn4Qt1dpL0LdewZ\nxC+zimN8Q+brlmWZPQDlCprjNynpX4+UD7dB0GkVN7k3Wpj0oBa05K0ZkYsW\nFegJKdk84gGBNplqr3mTejuSlZkkg7J/8sax9BbnexGJtDYSpGxGP/rK3CBR\n8U9IxMmrfg02ky3xCahGzebADKtcD7zGrSzLjivXcZMz/xtWa6cHUP5VfMMa\n/p7EABE9gAL4f36yUEF/F4CFUKYs0AC9eRmJ7wyFkWNzcAtgKiMPkYZSogMb\nPhE28bOMWkW6f5PJO9s0zagmVVJi5uMfC9swlRWVrL9nFCS0jnuvAzJ+KITe\n7LQa1taKFIrCNotxr/h3Y3EJ01obWe0RoShTFAOpERTQ23jR6VEEtsjTS2bB\nf568SQte7OHuSQN0joyZsXU5mvIUxd2tu2KEhaIrdVlBdIo2JTn/wSF9zGRT\nuNU3unfvcrDSxu0xC7XvFZgx6EeW7TMALanVqyYDvqBxmZVudrh8a6G4sCm1\n9LkgF1/QMZ4h+WF9S5o6DRWWZD90kM1GzMqv5MMr4uHhJCq+rh3OTe2KvxGs\n0R5OXqAJEoTtl4qyUKeDm/RDQ5NgGeX4tCNr2S2dJUcYUSSkZugd0Lo8oV+B\nfl8Gg6YiDyP4Y8OXb1G/MKYzmOyZqn9RI2bekvfbhc1bNAbJQxg1m7qPeYjp\nnvZa\r\n=s5pO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.615f86f38.0","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/shape":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/button":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/typography":"5.0.0-canary.615f86f38.0","@material/icon-button":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.615f86f38.0_1578523260426_0.8343787167227501","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/snackbar","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c7388fa019492a291e35c16cf76af44399fee0f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.1eb032637.0.tgz","fileCount":36,"integrity":"sha512-sgwN7VC0cpoiuaidFcZUzIcGeL+MTAHPn0nHzNK+gaV+kQHAsb/R3byw/lZpZK+WJUrOiJYBrfyNTYKO4+tywA==","signatures":[{"sig":"MEUCIQDppqfR52YNxi3gqW/XbxhzlkDIUjuka2jBa+Iyk9qQUQIgV/BfhwRxSKITL8KGnoLjH9Uqi+rjoySFBR/FAouJHvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8hCRA9TVsSAnZWagAA1mIP/0ZOtu2yzUbGmxfJ6fcE\nOMkUvDDt3Pk2lZ6cPl4gZdenO8ay+tbSoahEHNuNrGcvD1TN7cCeBCTU9d6v\n+3XxvsHuPVrGHh11BtUcrvl4ZJWRqV0y2GHGDIIhMoSN1JyRfeEumHrdktni\n0RbpGXT8ja5nLNXSXyndLjkem1qh7g2GApgG71uYMFDB7yq9tx2cImUgHB4V\njlIDr968T6QUIAYRfsKf4XGNLzRpbJTW3D6PKSVliYZnL8sdwiuFlpt5DYfO\nAD19H2t5DvBG6rmPNvw8hi5e05ANWqKN3WdDrnnoqXz5kpfjaM0DsJlQCsjQ\ndYxqhMyksGdItzsqPG+CjvEz56oQIRHyYPq2zI2l+C835aU8gexEla9B8ZoJ\ngq4FSczQTkvo1mrvQRbrBs1OM00HMSV+kqI+Y1BOFiGHGRkqbhmAHiq9bvKQ\nZ1Mx29NogQt/nMfSfvFqCD5dkzTfeoz71l5fh0Glt7z+tl30kFc/KSLersqd\nNV1BB41aF5hyA0Zomq6MdMYhp63CCbvA3anToQNeTCjTbB1s6gI3BZrextL2\n/LlKOkXv+96K6xzHY8LBnbikO3BNZJ5CnFXZ0ofjamg6xuXj31eZOHa/s4tA\nOC5axX513IoJxjqHtGq5Ez1rKOtQ/k5fLnmI57PFJojRF1tIE+2h/yz8GpVn\nx+Mu\r\n=0LFf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb032637.0","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/shape":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/button":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/typography":"5.0.0-canary.1eb032637.0","@material/icon-button":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.1eb032637.0_1578524449392_0.3343228045722757","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/snackbar","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f0d807834e9ce9cf62a5257fafb35213cfb53f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":36,"integrity":"sha512-8dZZ+I7RWX3vxy7JYCaKwyEgkEJCxt2yN3eH78iccS4i5wozEmn4WQukqEZWYZ86v2mxIp1TlbQp5//jFlLo9g==","signatures":[{"sig":"MEUCIQCxdarcOvgVyRaOolR0A2LSczrJll2pNyFf1wbVrkgxlgIgJSiWa+jriBowZ5zgDGsvdiRPaHRicgMkzhyHYATJTxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9MCRA9TVsSAnZWagAARJsP/A99NazzznRJLrDyb+kD\nhjz3b8bwoeFCpQk5Y5JlOKLIUaTb3iRvApP1Qc9pc7Cpxqdym6lM8hMSqSjO\n3sXM15O9FeI4Stzx0uhpHKEuhYDSWOLLNr7QqMqGXcXLuCnYMrKMad3KtSdX\njzuL7vniVMdbOIxOV7sSDNW2wX8wBIepcYj+oyth9zntNoJUGVEjJorlm4I/\nV87w7n0I/wxnROOAhfsX8qlA1avOF//zMe+4PxQCfLZEDRIuji4Hsw8JbHrW\nMdrOqVVDlZLtPG/Q1Wto+lW0JmOFLhAaaHscGLQlK2PZU7ENUiE2TqnfShX8\nDikhz8ZgOBw6XEVnCWnZKnsdhtn0QxyVOeDdIfaxH4eCswumaae3fuhqnnam\n3DJV9Dbk2qvBy/Sgg0wWT8iGgAf7UelwdwcJnkltvZqLW6mH1ctECwGRFtK7\nGqggkfLvMZPO2V7KrjlyTDfVxvz/FKURQqoKV//eMj2h3qjtL7o9vg5Ttl0a\nw4W+c3fovoalWfZw3JJ0sh/r0Y5KjQL9hxDhLtBjjg4PD/Sc7GvKE/d4ntDy\n1xH8u3G21xuT3gdGnjbA/f4EVeMtqCIBWnM6boWXc19zAswEuoGYBLP74ewK\nUkEV/euPcRrIL4nKbYlBKfNZF4HTp+tVKjeng+ociBCG6ksHVrXx1Tg1DRgv\nKDrx\r\n=wYPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5bc5ebfea.0","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/shape":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/button":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/typography":"5.0.0-canary.5bc5ebfea.0","@material/icon-button":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5bc5ebfea.0_1578524492388_0.8761317280733711","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/snackbar","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"751aeb550705af499bfb935f1dbf5a30dc6253ad","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.1112b8def.0.tgz","fileCount":36,"integrity":"sha512-51+bXx6zEF95W7OeEoqKvfkGmduV4Yd0juORpZzgGvoyC/5Kbg7etjjv42uhkA/ozXUbCp/NvTRZR/MSSMWCmg==","signatures":[{"sig":"MEUCIDydGqUETkdf2HUFj+kZ0FLW+yOuk5bONwGbNAGiax41AiEA4ztL2BD0c4PF1uzI4B0BneXxe01iu8P8WAhHVrwl0KM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TxCRA9TVsSAnZWagAAWL8P/3cLHQphCR2Idl9EVqnp\nW6sSJ2GQfCmooahV1p+wGfhM0IF0FVdKtHRGsfLS3FEGcbJKU0ClxhvVmXHI\nak3NlcQDr7pLNMOp66OYd8Lr4k45OFvJ0WALYavLwtife9b8CYuCcLxHa1HW\nShRJvbCG6Ve9MXw78U4Y10di5KHlhttsD3atGjgDM0Pkg8mZnAsZkydnqHyN\nIGbCqdNhjrQbCEN1hzAr/v0NzgDh0YgpZcqPcIt9x0B0Gw3uTRRDGBDc5isK\nPN8fgF1d1vyCDuOn0ZYoGnFdXkwV+Lxl8wSBFk/2EZv3VEN7in5AhaMCsJoV\n+K2m+0w9gPfD1njm5T5YfkvP17mPbbFVnRAlP2gTW20LyGEIphhvpcJnRnEU\nO8XGvGCpdSAmK9E7pISMOAGp78ci24laV84jmiRTKdVUxpclRkXrUfJ6WwiX\n7ZbxRBUECuDhyGZxJnZ8wWfJUX0P/Ga8iafZ5s4WCEY06K8THqoGy4hQodFE\nvmOrkP8WlVJ8wWyYYvstryC4AbC7wmWd9GN7u5boZU1/0q0acLc861elt9TB\nadB0f+HGpShn+rzePSYAbTzNEjfIBjwdOhpo0aTtYdEt1/OhrCtbcmjKnwC8\ns7R58gJSKLADe8/AVmObqAJzpvcqhhlZ4ZZ+z6P7ZX548BpUSK5nyS7dclj8\n3x2v\r\n=6E84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1112b8def.0","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/shape":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/button":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/typography":"5.0.0-canary.1112b8def.0","@material/icon-button":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.1112b8def.0_1578607857271_0.35213950106369674","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/snackbar","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35261a63b053f2110a4c881c409de99f4eb81eda","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.aab102017.0.tgz","fileCount":36,"integrity":"sha512-ZUqUdoJEupaRPTlOf/59QdE23H1neqilMWGvnjiz+7aRZL8wKrNGU4jfRXUhkWIPw98xXguyoWEwDkQpUJoZvw==","signatures":[{"sig":"MEQCIDAuXYIvC3U5ryHw1HBuHlPGDbCT71LgfPM5lQm9E+ZAAiB4WpSo+H9fuVonKEm9UuIQ2ZbEoN4iUPTFG+SMbAY+Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GLCRA9TVsSAnZWagAAHNQP/RLeottJfceZ58e8N6oZ\nqDqdr3KsQNhU11M5KKkukRTv9mJjlg7NSqRliReXcbp+4UlegkvENrjd6iwY\nEVHjRBJZy10d3JZsvXIkN18sMvGYCWKLG074lXRcci56UlB6y+6VhAP7Ozzn\n0UloAqXJPXu10HWZP4VT8WdmQPRIptHaYaznc20geCTM+eDj04/vvsa/nbPB\n3CHMxsne4Rkfrgz3DT9ugjK6ilptkxSRXFz5zJsZaBZgpYrbH8wfVtGlWHPI\nq5Gr+DQ/n6WQrjsCpfwW/JOVCN6O469giQaHQeRWq3l3aK49VVXOJcOyxGRp\nqDRIBBDHVVy7OVubghiDownrM6MY9kB/S3/g9JF9F3pkSP3wlIyQwACQWoAN\n49Uj60HaMIMfJsC48Yku+yCZtBxzH1svXIz6/S/PlIIeP6dTWq87dGKnFstT\ntrrwNUZIhqG+oV2V61T8RybyJIpWUMzKNOtrn0IJhoc9ERT0/XPUwfl7lTKR\newCg8GkAhttpvE0WKgZCz/DDFDt1b3rS8geqjhxyaaJl3TEeJSWktdf9AcgF\nmoy0dKzyTUDsp1/PvyjQvamDzNq1zZonZ5Hdjw75trHCFdG/JVA88Md5aaG1\nrtAfFpyuunvDfsz6FJbT1i3h5dAd055jyDTkRkbtZtPBJ6wo2mom1NTAVpKh\n6GVe\r\n=QrmJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aab102017.0","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/shape":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/button":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/typography":"5.0.0-canary.aab102017.0","@material/icon-button":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.aab102017.0_1578615178494_0.33504107228013136","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/snackbar","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7b364ec7c9faa9ce940297aa333c04f3249e35d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.426913342.0.tgz","fileCount":36,"integrity":"sha512-xFkuWdIgEqOO+Dp7LdFldn5n4Obca4WMsJ38PU3chBRYwELRY1S91x/A5HgYmMes9AyjbkOF5/EhJECscxbjfQ==","signatures":[{"sig":"MEUCIB7RVe/CBA0SYayAVVsV6D9HPJ4UEXtqbcYFvhpBbU6YAiEA5eUt7/LJQl6zTIIZwOZUYWd43hm4pOOEJAqI6nf6geE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cbCRA9TVsSAnZWagAAVeoP/RUIDxCN4reI84UCZtWI\neK5BMU6AfEjL+YnOLcl3fYymfhiizc59fbHSnw7d8OBvMsAJi2/fQ2vwvLPV\nA7agM3wxvG3BhkUJe2M27YU7+X12Jb31f6WF4vxU5iHAwkxVkAXqwXOTxC29\nLIkk28MEHYVFlTWs9IUWNA2a+Qe731iWAGhMjoii85wMyf+B2ppYmfostlbc\nlo4wd05REvbq28HVjrsvqrp49NXyZt3seKth2Bf6+4MNAs7yXilhABzLbKpr\nNRvSD2dD8gB/Ntka0sE7Wg1YUrnO201GBVPHUNBPXGbConZxPLpfPw9MX9UD\nZ9bfrC4o/VW+mWOpR+gcj6P1hReW7U5VKmIXFMOqQmHxlf0kyfYp64s2otIr\nS8wif7NR7KWZ1WhHPieod6Qnlf5aC4MSOiG1p/t3KspPbqRH0thShXD6aZYp\npKtq3AEep2IeL2Vb0adEBvgjICD3N369IKKvN8iHY2WRu+rAvKspomyfM96y\nfAYMLiH7TB7jB66o58lIKnjy7pe+IHtMuZmFVIk0Y/xafDDALm9Y/IfkgmMO\n9wf4nmZJk7YuBg4BcWgK4rhjXa5L0AX/ycob0R6mLLoYIpkiU3522RaSztu4\nkTPoo0yUmChYdu3WNqYuC7XKA6yflwZOsK7kT1UK/v5KfnMI7gQ5dcEYys7m\nxPrr\r\n=1bDj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.426913342.0","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/shape":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/button":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/typography":"5.0.0-canary.426913342.0","@material/icon-button":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.426913342.0_1578620699246_0.9382625928383947","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/snackbar","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70662197a07157a1f76461f31d474f1a5c63b4c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d4ea9a706.0.tgz","fileCount":36,"integrity":"sha512-BlSN0H/SDTaDJOWrkBzS36SRmrFwIBx93JIe2C15fhMYUeu+AuMHuCxSvW3drdhlV8xl5O56pxP++dzQDcc4QQ==","signatures":[{"sig":"MEUCIQDP16un3z7TDc6Mh51tY1bbI9+yT166+8GQp/I+ZwSdKAIgE5ixszcCjC+SZ7QERECec6eariMzpkIxW2FW3NELQQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOtCRA9TVsSAnZWagAAU9cP/1RgxzsQqGY1xalIWdXf\n8wue2gq2YF5xkCZKxEjW0iKV3esmWCIdir2Q9Uif5PLaPfTCeLNfN2jDWUAI\nKpCMbuCPC0FbF5ze55x2v5neHL93tlIARK8Z1dM9OuLpZAXn+S9zalBP4u6l\ne9HCDZI0rqUTtmfI1VKV5VUwhTOoIzfmp/p4UJTnBmcTqZsXrzEQcOhnxcMI\n6IFXxkeozsHmDUy7WFaZ7Zj8xNx1I2M3ftA39+q1QUgmXFfaZJJBDglz9Iuk\n4sp+N51cIVx0w+fOkzaf3WrZP1TvpOAD0fRl0WtqCGXRJHjWOGTXMRb1+Z89\nU/lRIPMpc1tuinHQK/Zwpq2YFg9UBEPnh+YZq7n/uKYUJQTzOjidIBGhd/22\n/1EFKcvBd8XHvIZ6kXDnAAx/jLdO0M6/26s6wHyFy9zmmVT0cQVnRf7FMRo7\nuYPlpAoGD1IEb2LQm2ShWXLmgpk6ctVyNZCKMLb91WfuqkKV5jHfRBpalQBO\nTdNX6JmVzGj+GeYm2h4Q1ZzeznHZ7Z7Tov0bILMMcEOHIwCSOyU3U0R47yWV\nUgk0eeIGIwsvhdBMyrO99mlTs+2nJdMQTkxSibPIVqaz9X7/zPNPHV4l5yyQ\nm4TC2Vws3a6EYVNtlQgVBqJPgjvSISXBaSFjxXs2EYrBjz8Uz1x+f0Utv3Iw\nYsNu\r\n=vGlH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d4ea9a706.0","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/shape":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/button":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/typography":"5.0.0-canary.d4ea9a706.0","@material/icon-button":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d4ea9a706.0_1578677165361_0.2858001814798583","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/snackbar","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aacf919d4ec334eee9a268bd6f81082869f628e4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7d4ee2996.0.tgz","fileCount":36,"integrity":"sha512-GtjWNEpFgd+4XNbHLdld9XXDtCtlBSdQQN0QeT3xgNj+tMKBQJWfwpEAXi21wgTEJLNrLO0qBzI9ml9b4JXf5g==","signatures":[{"sig":"MEUCIF21GN6duSEyI+pSW+XRkiSMQBRLywtLKWXwlk14s0qKAiEAqbBvOgWz8ox/xgzdNv46F0SO5AY4+jympACwgxy5jLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsOCRA9TVsSAnZWagAAotwP/iLYaUI6PxwiXMrevLM+\n6ET0PRFki+n1909k0G43unOp9mV7SEpa6778apLZWAUbCg2D8ZTf66y7z8Hn\nDZBv/UKUtN2K0h53A1Ks736lc2DRCO37cWDzchXIzCNqreAu0XisRZybuW1N\nyG3kckKmJOa7jTWKOel6pH5DnV1tr8xtm3VcU0LDtPKKz4LmJPc4lMutP4js\n/VZkUnt52+xoxKjfsxRJ7LtPaP40WCYp6PIs4LUA4ZCW1QS22fgXGvWOueD6\npkLzmkMm9+OiooQVYRu4ODKUaTNrxc7XSLkm/Lh0P9DfUzpE0/zUcn5GwTaL\nTncbqChk5h1+GTVWxuQarLzNJ/N3kYKoKqk255nRlTmef8jNYSi4VGeuMa/3\nBYWiJFtlbWAvZU99uFCrgSSMF46GSTeCtbxI812nsG4UgQM4iJ/YIclJ7M2B\nZaP4qsgkgqSCRWnMM/0j3NfFvCqxE2EFJSNC1AzIqyPnVRr+Yb7gPQeoz/ew\n2a6mcaCm2iXOLR1pvHp9McKdPBOVGs2tjBy6D33FWbV83E5G5y/+PJT1gQPz\nwObpqVTMTOazF8EMFA0SrgO28njWwcCKnR3hZ+ZNdY+9Lb8jZ6fQ23yOIvsM\n6SISEno6R9mZPuVLRdCegRPNeTYTOKYVZvu97WCuFFQT1T7cX3Oz8yw7LiB6\n2mKO\r\n=U1sU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7d4ee2996.0","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/shape":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/button":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/typography":"5.0.0-canary.7d4ee2996.0","@material/icon-button":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7d4ee2996.0_1578679053095_0.22164002171132502","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/snackbar","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a46225269b07f0c287f3698f207688bffb8fbd87","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.981ec9b6f.0.tgz","fileCount":36,"integrity":"sha512-4b2QaEHz0byq4ueq6l9Lly0cCM3vNo6xzfT6TBLxLnZ1W3SZzWzN5sxgAnNkXEJe8g789UmB5mUdCLp0LpApuQ==","signatures":[{"sig":"MEQCIHpvY3CKPTPnqnbE2rmxe69xrezxZLXlJrga67jNQeD2AiAllvBIm6TC+B661bO4ZBDBcLPx+4kUpf+7EIFcQLLugg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNA/CRA9TVsSAnZWagAA19sP/jPh/OQxNJ2vz2qk/xi9\nM01CoxzTzB5kxSZ0nefTIc1eFLF5da16y+3+PBtQvAv5fVY9sE8aBUfhPCHa\nWVQlYaCoC2cDUv2xHQ+r+tZN//IBIDRw8H3xqKWie3L5npj1xWZS2W8pX5Aj\n3OL1oPjSj9li1Xag/G2XJ7PEuyhtsKVMBb70vYhPOdByVEW5FPSUiAR7vd4e\n3f+biBR4q1j6CtGDpOZdT/1zPHDGyp3w211eVy/3naiou25Elpf2bWCIhIL8\nB9trTVCie86Dw08Sm1ibGDJt5CTKkevXaKdETx+udQKp0M9KOOke/Yj7Ji2a\nVQX/h3bmWJnR1lIkOAFSZXn1XJB4bIrBxn3UE//VuqLraa6PoS19vGn4GXWq\nja6t4x9xQ/hF+Q4g9IlXBLyxTXW/bKVgqa25FrhHZt4sVDZREEip2LQ7tlOf\nDf+8+qIrFsrWz2rIFWQ39qh+KKo6DHd3V94DSySr57hNgOj0o5nNLPPCbo5u\n+tCOofCymCOt2u+LiZTniQRFjrh+L+P41aaTzwTzaLfmobkfgucAjfW3cnEk\nRKTimIDg8d6saHEY4MEpfFLHhzLg8Fh9iBM1Pn3kxddnO+gFITVXrPPv5D+w\n+ATkywVxOuFaaNZR7FH3tAegzi51xY5wzImabWxj9EBnstgvXtpYYRN3825i\n3rdn\r\n=vePf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.981ec9b6f.0","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/shape":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/button":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/typography":"5.0.0-canary.981ec9b6f.0","@material/icon-button":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.981ec9b6f.0_1578684478528_0.026045396460328663","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/snackbar","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faa154fedf9b2c37e98177c34e2b720c126f48ce","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.737da83fc.0.tgz","fileCount":36,"integrity":"sha512-e7hrmFXuCQrbIKt7A0WGhX9A/fGaVf+FMWgvb3kHsQQdSgKRfI3C/uoFqgzyZbO17lIBnGcNTTuOu16Fcct91w==","signatures":[{"sig":"MEUCIGILXbkj6f2oSBk8NnOajiybcckkKhMx8NtX+SkpFQHWAiEAtqN595cYRRjOJ33g1/axX6opcmmogqFH09OMAO9zb6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpjCRA9TVsSAnZWagAAOUoP/3QogWD1Uf+FdvLFN3gv\nLLC3KvvYQGtIX10dzlzG9xq+blM9Q6y3KukAogsb3Yn69EpSc3j9+SItcxA6\niHaRzoaVMSGJTKG/5POAg3ukYKS2ee1xkszS5qcXIbveLwC6hnLQSvtfwM8R\nhkFj9ryRxxtoSkZdQEZEFcOOg+CWguxmck4UdBGjuMFY2gHvANkkZMfI4GQ9\nG49hRrTWYW5DqnTzmH6Lr7cXsY4p6GlGG4pcpS1Qpil0qsiF3KqZjiDf9fs0\nE6YN9XKNBI7/G1MxAov4LQ61pC+tEZVdPr+3rOsVC3cdt2Fni/11/k4gLIdw\n1Y0Z9n+MfuvZ6fsQAS83zoT3PhgQ9jL4oroctB6Fvw2LOyeI1J/RxOroy0A7\n1DxldGkNWgTDOBnERIbjkafWcDgv63wkfkfZIWzrySrZTKIfFO38XPrWgMp+\nw1CGjaDxH4Pj2yXZb/zqnx+/m2GKqTopjxMJCPeeZgvx87WIG3JAU0ZkiWrH\nrXYWFed4+E6aRGAtdkdiGg01ME4YAhvu8Ck7/T0s6UY7CazgT/fC4bIBgM+p\nw/+TTODJBjTNMPeykLYJ9fGo92USROm0zivfhfim0xys4k8n1uqkASwAh4qz\nAkZOIZMRUc7T8yv5AZNh37crJlsdgCx2uNRmKCLVTlKpzpi0yiYXRtvcHl/P\nW8iM\r\n=f8DD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.737da83fc.0","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/shape":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/button":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/typography":"5.0.0-canary.737da83fc.0","@material/icon-button":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.737da83fc.0_1578691171042_0.30145020675860046","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/snackbar","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14e13869de4693c1440c6f1a69d97fa4aa6188b3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.aca8e6c18.0.tgz","fileCount":36,"integrity":"sha512-wIsHPJPvkXGd2U9mEhl5W7Tmwr4JbMX3ZZLT2w9TqzjzbZCPXpcRAVY4TXkPc9mXnd+LDinSZk1qTPhW3sJprg==","signatures":[{"sig":"MEYCIQDRqKLBis+ayPHagImc1WH7ZLdruII+n2B/biS83CmboAIhAL53OS6MeAVfxCf9SE3TxCrx5y5iPFDlcaDQIE0Rvv+z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMX6CRA9TVsSAnZWagAAlrEP/2n/8bWIkRRjMdtMRkaB\nw7JUTHmTE0POZyXEw1Nts39N9TRihTE/ed1C4Q9Wl40U7ZQsytzCzq9iGP9S\nhvQt0kSiIsGXKCH+Bl0XFaztpnTq4pzP5NQFtsAOAoDj09OMZ/jN2nnMtKVm\nwVSbs5S+KxZaVQaE6mMObOcTkC5QbXh+3RuyiOAqXf2359gTUUkUorbaApPe\n1Q2l5pNX6biSN+apHv/e9vZoy7SnmfGu+r20P/0Ty0vdcgyehNKSh7nNbMbv\nxHSVNUri1g9rCsUc0zSdqogMx4W8fSc/hjsl7sSP01ySP6l1BendK0dAJHc5\nMDCFpMJCFi7vX3qED19LKMftbDddsnzGenV2vuMsgFuZVmx3ykIvRypSmUfs\n+eVzB5BxuZxRk2cRAM+rP5nEA/CIx5woo1clZCS3HleHPwfWSabwb7NAs/Qg\n7RhrS6/pZCxlDraiNcFb4mQ9I4UtHGHLa0BfkxprhWbeq71gXhfHZw7ZTJwh\ndwDWdqr0g+pqBDhFFqScD+Hfwm0D9SG9s/ZazDwuEnrLY8Y87krTD4991uSZ\nhDih8SLBLCWg/gdKeuN5NnSaTJmKrjj95hXgZfrVe0ojmGkQcOirCc5oXOaE\n5o5Q5dHUg1RUTC5GC4oFX/z8fkPBDsmugTbn3FicHpjMCWrsg9qdJYrF9Mnn\nmwHG\r\n=7W8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aca8e6c18.0","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/shape":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/button":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/typography":"5.0.0-canary.aca8e6c18.0","@material/icon-button":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.aca8e6c18.0_1578943993856_0.940420988297145","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/snackbar","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"638fd3093f58f9aa179dd8d8b5dd252bb62b6159","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c38d84e21.0.tgz","fileCount":36,"integrity":"sha512-BNGaFWQR1FoavaKt9RzOjA7m/aC8mEc6nNWR7+iiciSaFaMlH91GrjRv7imQOn0kvvKQDPVws2XIY6+mQBpTmg==","signatures":[{"sig":"MEQCIHB15mjXmRqM2rUlSSNivZcmxUeN/lNamX7OwfODAhwpAiAvpA8UE7zK9E1xw7p9UBa4m+dPSxSlWeRWdUuedcSceA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOvACRA9TVsSAnZWagAAW0AP/iWGqAlSowTwCpZQ6Gz4\nUhGqMK5MJmiKQqtzBVqrpgeE/ePa1XqLHXSpBzPXd7zocLXSmopxWp5LRB7D\nvBfq7ytYIjoF+oxik28n0+fyJcthHMCFdV6tqBXyt2vH2HaTcAhm4X1xZ7vl\nvt2oq/MjgEsW6zOxlJH7gm9n8s8BJVl4TJzLAcN2xa6m8ySukRgDl/L18lDD\nwKMUhm9Jo6OIXSewo0S6Wd0S4ExUfj0VWarhwTyn9YQpoz253RQZDQxu4IFw\nW9xRD09K4yo3apvRvAe0tFTdEDENI6p8NgL0EUKSylChw38vqWPOeXpjlobX\nZ+CTyOUMrgmaAKhdkMqAMkMv2vBGCGKY5G2195q67NhKj/22G8tQWl61s5Bo\ni3ZU+1s7ZoOHPCqcCVrowyRUMy9TMrfL+i3HdRZ4oJ/bNKV7xExvqHJJWoV+\nsvsJomalxjxjDEQA55FMchD3CzdpHIwUywvyzqwuSwmzsEicWPBif/wFvUZA\njexdup1cdYsCwplHQeM5Xh1/BmUv+3ySW0EiXZMkVA82kJNpRBv0JG5+zDAK\nI9doUlDhdxt6da5K7iBFvKap+QNIyjvyoaeHEk+3PNd5vF2A+oKIUDdjBmo9\n2yXGzhNp11FTyUJDUvLohxVi5BWptzQq5Pv7R5O7PfkvbVTktWR1HJu+pnzs\ngA5f\r\n=Pd1P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c38d84e21.0","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/shape":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/button":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/typography":"5.0.0-canary.c38d84e21.0","@material/icon-button":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c38d84e21.0_1578953664472_0.8507512787895233","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/snackbar","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"109a786d986d012dccd34b59ff7ff8c9e825d3e1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a4db5fbad.0.tgz","fileCount":36,"integrity":"sha512-vJh4g+iz7pSLiSzNmE0oTt0HtWgIlChgQWnqBflDrTO16z27OfD4NBdpfOpbxapWjmEL3n4amSL0vzAi2f9Dgw==","signatures":[{"sig":"MEYCIQCHI6yje+q5LkB7ATYdr4d7u89FPP7RjHn8VC3wSR9PUgIhANEl4DuENkJHekkvR/Q6PjxkrSy1MQFUsb97yv4bRtQS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRgCRA9TVsSAnZWagAA+YsP/0N1uW9Zv0mtZurMjZ//\nyxatYsnRBB/fsCJ0NTbWVP+1+Ab1mjMOvhoIpdIWK34nDCoRIdMAIMEAqCZg\n2kTV9QdCO/XwJkoRfQy7FnUSAqzR56cazJQlJ03lSGYDOvwqWlSiv7rOtYAb\n/bWRmmz35eRwTOiTrgC5RzKOahGXVfzv0g1XYKntxx2N6BY0/8t6oTLrln7Y\nK9Ym5xtVQ8roVT1w3Ivb8Jtp1hTJouk8h2XOGauQCWd9sAIJxhwvv1cw19Jj\n8hjZ+EIh/WEZ+Prw6cFWaFis//8oFKXRYvt4okRrG157pMXzKMwsRlHQLxcA\nF8x7+Mb8NqQyYRrivE5PtL+z1iqn1nJ0pnx5vTNDBkV6oPfSLFnxLcqWxbqg\nY1OFD5CBJuEtORnqb92XlwXd08eH/M3X8qaxUyI+1I2B7qLqX1TIzAs9/UCX\nwEDDJjSpa6jZvn54n3u2t6OCDzH+2T3Ts3idiF7BakrVvHcco7bp7Lp2BGA6\nA5s1at3RDJtP3Y34bJ7/TxEhN2k2Nzav5Y/B5v8rvtplRGF/5t76r+MiBtbd\nfZU3yKEnXqgfQindqWEiWlpNr6e+tyG5YZ7/s0Pn2kInCBZY1OmKroMtiANT\nmmqqiBeGGFfXXBjjKZ6bpKGIIby/fz5n1EGHCpQp9EBkkxRivYo7fy758Qfv\nrFpt\r\n=D3bT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4db5fbad.0","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/shape":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/button":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/typography":"5.0.0-canary.a4db5fbad.0","@material/icon-button":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a4db5fbad.0_1578968159919_0.7197127121836624","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/snackbar","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cdaceb5245c1a25059d3e54d6ad8eacffd3697e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.faa9af310.0.tgz","fileCount":39,"integrity":"sha512-jN8WwezcW62GetzA4bKE2aCBXELK7brFU7uqLaMVnH/hUtIz4RYIzMl1Zi3L521+0CalBXrXnmF1+OjadnsYhQ==","signatures":[{"sig":"MEUCICbGr1ndQ/lAXkyL5C8k5RdmYzioALEUi0/8BqXn91bfAiEAway1LPbk8fZugNnQiYC1dfYZkyTtMmMm2kQ80vUtHBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfI0CRA9TVsSAnZWagAAz0UP/j1jRUrrd1Aam9sVstuy\n+lBBNoy1uZL0schSJ99cccvbyMH/EyBEQWBN4tC3oxX0W5vpWIMwmZVOQBWM\nNTwwpM9258C4mojxIga/AOrNtLaCH8Fug9RP0+U9pGwDSBPh+5VN6fQ/9Emo\nmShqlOogayHV+wTPTukVA+VvR3VIOPKwLlBteK90wgsIP+zOct2kC+61jcyl\n+P+MxaNSgjQ3/Wo462KCwHz6SJ7DrEBrac7anAk/yx2bOzevFCM+hhY8tBAT\nN48F8kmmtRmrnDBS/ckAxCeZ+cij7t+jEOSUQJRZtYyBvkdmU+8i9aUad2kT\niKr2HNz3i7SXMrxrfSkJvft4BPe6VAwt/p9g+Is8/JgDGhLCuJfyk+RSC6AP\nxUhB6/HWx7N+ZmNc4Z5wIZCTTJ0N9tHi5MTWteBxV5uBr6Dhg2KnkJENcWsh\nup1Hv/DX7w8h7dRAjqrdVnWcMPlQWbvKZWuu3BUuGGV//h6nOXVd1l4lVmHB\nG7/VVmvd2n+QnSiexY/41DhwdTiLRn/RTAHA2i4a0bZpJCBJxfA1lDQq9bkA\nXk3Q8LyG6egNHbwHrdAfVXuHUlJ0pQv47Pz40rwD4I6R91lvUsagQ5q1t/xn\nJsSQM7z5dYmBl89CF1/41HHegqkpynTrBFGGIbLcJA9OuHR8OLHRr++DNH1A\nXWlP\r\n=6mNC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.faa9af310.0","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/shape":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/button":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/typography":"5.0.0-canary.faa9af310.0","@material/icon-button":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.faa9af310.0_1579020852286_0.47974409328620116","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/snackbar","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51567877ad2b86c92cf0d0cbb319e80a27663b56","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.60354c577.0.tgz","fileCount":39,"integrity":"sha512-nf3MFU3g6DfDQFNrXMT1/QC17aHwl6Y2RzkIVmyZzP17jlEnVuciRIFaizvRrcqsP8q75Hiv3vu2Awkllvr3ng==","signatures":[{"sig":"MEYCIQCS0eWUIOSIjRBX6RezQDzlW/L/9Fnz0XkasBHxbaEi3AIhAPB7xA25krexd3v9bnXjNy9PJoKFG3UwRV8ET4cQkWjO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkThCRA9TVsSAnZWagAArggP/3KYZFBp5hV5aI803VQA\nk6iSnsLJhwoxvp37EipAaIWEuRR+ugo4urqJU50lLlpdaeZ5vz3ZdIclQD2t\n2yEkfb3pQT0ie3BgyhyECrreSltg3JzOh0jEfHpa0m9jOPqTzqRJTv7j/CxY\n7aAQ3NquKoVC9ghp8AarGv3xmmdxIQDE3MONsUHMOMvuxillh8J57cvsHMEK\nHBHVpZqe3OUmD800FR8lM3nA9DBiyRL1guHBCfUjDYanlp6AIQ5FTO9kIgcq\neSTn5wtAe5PzLG3WGaj8hruB4cRbUtrTFRe+g9E5UOSPfLLp/PaxTKY5EhkE\nV5obBg1bgGtI6rrqok2GUZsnUbF6K9w6sxgCt8VK8T4bqIBIzx9vIMh0Viq/\npzxRR802KrDsExkOA/WeMgO1m6u9DLKDQaVp2xVIpexYf6Q/Bn9g8c+HLyDN\niwg2lInVWHNpex7iIlSibIdIfPI2XMAHrcuPp7rbgjrwcwJKi9vdzoMm0MRa\nIGDqckOxeMJPYqqoOnkYWQNQ9OWt4Aa1zQR/f3wrb3dOPsY1S4X88s3UqoPR\nG+cPZGHg60NxNfdr8ykwjFeDNsjDLuHEiMF3P52cM2uMfP2Xhu8bcjHrpYzp\nJceZtYAXcKwQic+kLwDlnqxYmuwO42Io1XqImnm7sp1fp/Vo3/nS5UeBkdgM\nKvbO\r\n=9hIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.60354c577.0","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/shape":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/button":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/typography":"5.0.0-canary.60354c577.0","@material/icon-button":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.60354c577.0_1579042017184_0.8960875218172157","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/snackbar","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3944259e0f6adcc3b3ea684ea65c50d1296a0e49","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d07c78daa.0.tgz","fileCount":39,"integrity":"sha512-m5pVkaIdRpaP6JsFZk//6IBg3IvlqfLDpYi24f9MFSbhrJFemCQrAKidRH8DDaFbjAoKD68BTlVBISwow/wFog==","signatures":[{"sig":"MEUCIQDu9Qa7fHue2ptpFaT/nthQelgxeloOP8z9JKgVRgaN+gIgZoZnLYZDDk+z8DJP+j99hYD+2clVZzzh0MFuYwXlfLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlE9CRA9TVsSAnZWagAAeGUP/jJTxZPV0yfXnTlpUoTT\n1FKEeHtTReP5i1RjKKNc/5as50M4bfPYxPBT+x77vBIMdck0SHM/m1dunNSv\nMDgQkw0f9PeFEL+vP4l19P5BufgJ3G7qdtP1MWzT4JF+0jBBOhnhflXbaBZt\ns+je8ZmZM9224P7P1YGTJw8ChOw8hdKvApJzTb3RjA8THBtnGWiw4Q2x5d6B\nvm0DP7ZPkUT2d4JlBFb0/zvgpuJtZ+WqHSaZemVO1EwAMLEaYjEDQvSmrj35\n39GfCF19t5IUP6Sg7cE1qL6NsRTVfT2BW0On7vfNKAbIiqqGxiB1nbBG6pOW\nft9wKFJjmqxgFln0wkr22U0IGoFrAD501+aoVhCarEP/KRCpDiFwDZuRXuqr\n2XPtjvBNiTae+lxzfhdXEy+YCrrFFBUJIxPI7rKe+eZnLct0VwVAFOtms1HN\neDoif8WkUQD6Z4d61NDfdxBS9yTeC1UUBPNBszF1InBjh7x6Ixi0BrZjNB/L\n17qrrU14Yn4RfHgRL5Wq3G6TzPeVZ3LvfDiz5Y4eRiG8Kszuzhxpzh029uir\nlBuwvOwtOUoOdXJulCHKv9KCXVOpxuedT3fQOSIS8iz66yVRem2JD7ElqODf\ntaJ3O/yIhz/ZG5xEbtH+gQMPchh1XxpyPILCoKrI5p3YW8s4OGw9ao9SS5F1\n1c0M\r\n=vaOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d07c78daa.0","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/shape":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/button":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/typography":"5.0.0-canary.d07c78daa.0","@material/icon-button":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d07c78daa.0_1579045181430_0.6912810797701496","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/snackbar","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac82b05568d6bc9aa5ebe258f9a8435f3725029","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":39,"integrity":"sha512-VgkkJQWZSExzhZm8Edh+QEZfse4wFccU9NUy0pWbke202+xPlTVxHkfxtiMdEPOehzwdEM6yaq/VWlBYR5kZBQ==","signatures":[{"sig":"MEUCIGoLawIX0XDRJFy6URfMqq5fQvYt6ZrneQLEmEXpeE3FAiEA2Blam152FhSO5+5CpT5Ro1tBq/RSdKD4+lxNUWO2KDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5TCRA9TVsSAnZWagAAn3EQAJZk4vyXEUcAO7cE0S6p\nC9e9c3V7B37c0Ii2jv5lM/5Ind66ynou3cXk9i/3Snj7o8jWecmcW0cWJRv4\nvbRg0uvrrc9+ugZCO7NAbSBByw8N78M5Se2fxK9X3oL4o/Bvy/+4uUU7/INm\nfHrv3h2JeyRkBsApoZUoNDWM+sl0fz/w4iLKbsrA1Envb4gp+z4aQT8Hjnmj\nOLxDUbIWdoStIvAT9LCjISM+KYTIcidDOQgGVH0PUk+KU5CikfOZNtMaEVEt\n3o6W4b2F4xL7PT3XFdFLtAOuNPwiGVd9nmKdAiEdTiXeav95rTtOGeSgM0rU\nzNdXgJZ1ouuA8pl1jHUq90iLujLY9UVn88qNZCohFMwnvi2ObZVOEIvqXeFj\nLVIWYU2jyitkmIsPhAKVjRl5vy5o77CZNuLROORnGIFdtX0QQ2lLRHJOxRKg\n/kRdwy+tfyG+FPFGI0OluBYPQXEAFfQw8ha20F0TkR97Z8eyW9BEsWsymaSR\nTGzgBgdWurOjgsNa5GPbRQ26KS3SCwpHjHpOcYX7XbrDBclvNGOljKS8LZeM\nNsE3jRPs+I+Px/5Ep3IxU7a26/CRdhWzCzH1pBS1GGEOex6f+icUdjuP6qwQ\nsrqnxmCus/PRTTCF4e1fkxMl4Qz0Rtk480lJgYX1mMUX0909Icmr9dQHRIwP\nCg4J\r\n=dZHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8ddd5c6dc.0","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/shape":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/button":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/typography":"5.0.0-canary.8ddd5c6dc.0","@material/icon-button":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.8ddd5c6dc.0_1579052627319_0.5342584832585477","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/snackbar","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bfa54b5f6c2db4c0de67da800fc81127a5f2d9d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a9511d870.0.tgz","fileCount":39,"integrity":"sha512-xxnllBDtcfmSr5YhVt2rT7fe7Zl+0r+FbaMFIOM13jYhpgckOMkjZujnwtrmquR8D1dhJ6W9U0YJ0zwxDZNyiQ==","signatures":[{"sig":"MEYCIQDoiR+zJMfoggWjBF79+CJOYxb/9yA+RU0MPnIzp23ZQwIhAJk3lfMsdsiOnjr3CyOEa6nSX0ePu8ZfWkVM+XR6mIac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2PHCRA9TVsSAnZWagAATe8P/RXtzy2yflKDKVpr2C9J\n3+2Yzx9b5ayDyLlpcDnJGOOEie7EkYbY7Tc1y/d5j5F4Di1reostkxWO8uuc\njRarydLBeYOUKE9E5GlOrIq78Hau/i2Rv8zTUKNCZKjy54YAGJqUN9vAPKRG\n9aj/YKjeXsuOjjGh7y7q0Y9bPlBb5PrftB0BIL8LXfJdkBoTEphw/OqV28q/\nPbpHTU/HCY0Cwo9mk4I/0sXj5FKd1fK5ICXtFE7Z3la8Az+etZq6XV7cqVov\n3OhSu8gTG5Z9R8qUp0H4rQbCqNPgW0+C/lpIxaZqE1Lmb/D2FJ9/f2LiT7AB\nIdbJ4UrtMtQGJQdzs577D+y7vr7w42KIA1uYRDh/ISVicMEdWkvbYIbIymIQ\ntpYPiVP5lWxu1+XU/FI8WlQ22fzSWvXhiDuaTHemc/kblSUJraw9g+6mrzGs\nNPNyligokpfRLgj7QeInuJG+KE7QhbXJS1j7kgu+UAGg1NXOOoH2+w/H0Alc\nzMuL5crcD/DXl1iQX7NZrLBPUh8NA4+IK8v8f7khw94xq0yMFoZ9xh2JFaHt\nmgBjrteYMEBEaPnLYVDvjB1JrV1YYt+ly1qZScVs6yfzLZgmwE2/dfJ1tGSN\ndXeie/4iHGZ8P6cD0XWB+vP722pZbsrus34hlXYk2qqTdSQMzIH+5U0xt7x/\ne98L\r\n=8emw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a9511d870.0","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/shape":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/button":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/typography":"5.0.0-canary.a9511d870.0","@material/icon-button":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a9511d870.0_1579115463019_0.5870984885967607","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/snackbar","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba697e0af4f88bf5c7c17ac7773e952e346abb62","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7c8583c4c.0.tgz","fileCount":39,"integrity":"sha512-G6IDBerwfWVYHPA0VFHTPKy5F8nybL3ExZZtDuaeXUMd+lqY9C9wSnvYVWC+8tS9nXn4Ojc+4Qws3uNUh3jWDA==","signatures":[{"sig":"MEUCIGK5h18mKyhG/1xj3GB8r48PARkYdtMrK93m0HA+8e2iAiEA2kcExN90E++CNBmCewC4MEVxN5Bu/LaQR1A11gvqz7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bVCRA9TVsSAnZWagAAYPEP/inIcE0N2+pCHDQ5Z9Co\n7biUzV2LDoP14142HV3oPbFvk/Z9+pDcqVFHthLPVRr2w9ciSzBrR82SlMjb\nKhnFNUS3aSwMuTBWt5sPsjF9gIBBTFFMx28++L+v53SJ4WUNug9qmVMYwxpp\n52V5eO77QHd50SeK2ufBFMNQd9NYfFA965tqMp6dGocd/4wKbh+wWJTPF3qp\nt4SoXur9MGlLuf5N+nOlf+Nyq4nYc/ugNS9lKK89aZU54JUi7D3u5B50lU1i\nthF4lRZnKCPdi76KSdePgajbU+ZGIeVhp6hCRX4pSKk8Q9UeXzxivrgSlnyQ\nkgIKnLN6q6F6JYRg++Sxhh4guj62k6A069YmuBmESZKS0UsgEoRzrwgXI89g\nSYk0qBCB0y9MVtJ9I5XKnWvjntNKWhYlnjQycsSuY/I+Kyow0lOTvJltiQxT\n+GYJ02phm3FIEHrjuJctU3+6ryzyZXqf++Xnw4wOOn2BrcxV9o/e4iX42Vq8\noXVjjyZyoa2VSM1+18aa13E0wLPYDYwQmBs4uvqXEzrsdy2bPay8ov2skAPD\nSV07eJl4aK5bT9PbtFzcdGzrgTdwqIwZneBdL11aNiZvjUm8uk7Wug1irobS\nSxRWTbyxqw7JoIJbmG4L0l2TNf5aYxHpTeaU4wLtwH9gBoC0YK1EGeJoWDFt\nQvbF\r\n=XGhI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c8583c4c.0","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/shape":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/button":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/typography":"5.0.0-canary.7c8583c4c.0","@material/icon-button":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7c8583c4c.0_1579128533424_0.697602861694854","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/snackbar","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de14e62478ab7bc80df6296585a88f1e47162d47","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5d4b82bac.0.tgz","fileCount":39,"integrity":"sha512-bnnEBWXW/a8ijJSFvdmz5CBKSrVnwlUyCdPsoNgBb0x795GP3ZDO5a0guKJ3wtYFT2xaOAjErY5DOYkO0ANf6w==","signatures":[{"sig":"MEUCIDb5iqsx3aIXFJXycdnwf3MRJ+1M16UXSndQuUERC3o6AiEAg//TA3s8iFF++aGWcHNH5CFisJIOFV0VQN8NSuMdyWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5boCRA9TVsSAnZWagAAqkUP/0aGqpqp2WFNrPnWPiHK\nb239JCH5SSiwM9sorKUFkmo+fL9xnPbYLuW1pVwqQxcCcKE1OGiHdrBgAdEE\nvkyRCgPy6EA/j5V1Gx+4Ac1ZA52gWy/tRf1Nf5j/uhcarW46FooI7fKg3phm\nrUd1xHSQbSBDfRS5Dssdb+f4RTQzkbM4QcGHIo/1zQ6TBJnjIPQaRpJv6a5T\nWLBLeoTOVQRZXhIqCCFO/7UuEmgi0OR72LBQMLkQhAWV7wiHX4xISBiEZOqp\nPXnj7+JNV93bF96Fp1EWcLwsAv6MK3cI+aiqPYc78IW+hyygUkcbsTrheMJs\niSI0oFtqzuEVDHIEPwHYQPYs5nc9bpdQELlECxTJQ+TuIn5tjcYHYzofiJ6c\n3GI50Kfxy85pvBW07xa1lbM2x2UL4HIHGF2USQfxVwIYq6zBOgmHc/pL9BVN\nPgfoL5ng30Ubw4rY8drdW3Zl8NYE+cfzmHrNB1wCoLlzoArx1dfBvrUGD2oT\nEqua2O/xmn9r/ibBc8cSLq0Oq7EQ+LyavM7lqJGsrRr02joTC7ET9p5wyrvN\niQG1ibM5Zq4GmAl+QFk041V/fKua+lmT4OLTq2+fEqH9dYEW6RWBkSzLFuZf\nXRYVWc+n6DajMy/TizJLeWPr+Y5I26EqJLrdgSOVD10Z9zIX7YWm6GuI8RsC\nLO9J\r\n=d+pE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5d4b82bac.0","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/shape":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/button":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/typography":"5.0.0-canary.5d4b82bac.0","@material/icon-button":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5d4b82bac.0_1579128551039_0.813026590780733","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/snackbar","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95abcc78b924727ab041ec0cf08caa0c08767a1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.57d0186e4.0.tgz","fileCount":39,"integrity":"sha512-zxtD80yJGH3L7mikzgQcVPc+qh2eS+9zURK/tE/jhwwN7zgVdOYHTN/2ZQScIyBgNvCoT9BRoyGf9Fp68/3PnQ==","signatures":[{"sig":"MEUCIG4EfRn7cRs2BPBA8YQGUtIS7I14T560zEUl7PBUhlNoAiEAmXbP8jV1YniZ8u9KyOUgZLoxG/GFy+c8aWONR/THKS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjkCRA9TVsSAnZWagAATXAQAJDTkXcsFAieogY5RNwS\nyDwKb4to+RULGBw5GGONUCJAwMLAELFxj4oVxBWuf9nfhpXpRZhhas+cbLjD\nTeC2DJjg86iQVjCoYn+ldj47/16tYvIIvt8tnSwN9zoKtwpMscH9b+DvMZdk\nl7Tc/WxhDB7SA2ugTUQXSGtLgbbJuSFco5UvuAhUvH5OqRcu6iTMEmQr/vI6\nzdv4+49vN4rIQf37bGBDMgeJ6dsErduD1PRs/JL6UIWlFasDh6Lr1MInp8Qd\nkCNdhu2a3yVavu4Eac5qTFa93nxjMB55+338h8xU5WCXRiyPsg9Z6KwDxzo4\nmOhuw3Yte7NguPGFsisUKSdnQlB9mgZWWqhIgh7417WfhAWz7McyVx7O5OVR\nSie5ZPwpLHy4dCDEKisCIadi8MsVFueZWQNBO8qprdhnxN0jwzilVs0Fj4+B\nb/FbHXFXeNUq50CcV24PAF/Oo8XSZFuYghx9QedF22vhN+i/OEwl8Mcbfm+h\njlZCC/ChfGQzlPKgIa0ygelORBUmT+OR9aQYEIplJGsPjgTnPCkP4SjpKHDJ\nk95MxQMZCd66NSXzSvHYi7GBSd4LCT5oWIM7qsaHKU8mk6Lom/+apzZZo/C9\n0KKcPdJQ9hAmBxtPPxpNA/jy9l0+64UT40AJpRGWXZ1TL6lQRNQUeGqI7XS6\nvYvF\r\n=Q59x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.57d0186e4.0","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/shape":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/button":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/typography":"5.0.0-canary.57d0186e4.0","@material/icon-button":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.57d0186e4.0_1579198692527_0.12150884768074866","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/snackbar","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd3d07838adf0ec913375f272176d9b2d1181410","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.071a6ab70.0.tgz","fileCount":39,"integrity":"sha512-xpMGRHKTPglPTj74lLv+WOvztRToI21RFajWNJZ1hp3FLWERK+UbKG5zy2sSb4VG02nULQRuD6VfqhVPNzv/sA==","signatures":[{"sig":"MEYCIQCrR2myYK/tJdva/Cy/PTS0493o4t0eRXHe8dRkgU94TgIhAOAi9rPMCUomTq9Ck0UVMHHaM2jME5bBSb4N/xPsbVRB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpxCRA9TVsSAnZWagAAa5UP/0a+BiJqz/l8H+YuQdl9\nnGPVSSiiebBYJTr2Kch2alGtRR14xBQws7yQSjkEyOwX0PEC++wVdrFgizEj\nm8qI9VRdmeBvkvZ6HXZuzln+0A2PAITEhlHFbn6J5VvCnY074V43PW/0cpNd\npkM9C97MNbl8g8mVOHbWJ2knaI9S5N7tHqjfnTerxA0dgYiBw0jNQX2sRQlx\nXS5kisYGkl2HUWRjzQWjLmCEKMP1bkkJp+O7DQRhZ6AjLlcZq0hUysLhYiPL\neFQ0JqwPqUEYfjR/4pGXPjlmO09yDcxOeGNVh/8SyPbcAsyGd6IHnHEUtUjQ\neOrbAhl5SGtcps5Pi8QBerYAMuMejQQcYkdbxQwEI7lkCkzrsc1iaI+R6AxQ\nvHJ7ST3EKacS2tCuR+nDSRj4I72kEPWNEdJp5GG4VJQwyTGuUjrZKh9fmclB\nKscfb7aHSen126zFIGwAGpBcxSx498z5QM3t7okvMYyE1TYXFEFAa9Y4p8vj\n1XziQnVZPie7dTJJNo3TjWfMIK+acDedE2TX423B1S8dVGg1BRNXFnl7OuqF\nWqGyz7HK7yT3MMQ1srXWx0hKgj3bMC5R9kyf5nLhKRWrhBKwgoJ0/eiHiBk7\n36kvZHCNuY061zzJdQ1MaOV8tisnTCtWlJ2x+Qtv1OmSTFDzUFfF+uhfQ2d7\nfdb4\r\n=cKDY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.071a6ab70.0","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/shape":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/button":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/typography":"5.0.0-canary.071a6ab70.0","@material/icon-button":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.071a6ab70.0_1579199088555_0.21199219574972905","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/snackbar","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6361c72ebc8724053e976b48515e388eca34bf2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.22e0cb618.0.tgz","fileCount":39,"integrity":"sha512-qf3fM66PADPsqNLk1JH6SheCP+cKDS+yarI28lOZuCQ9Bf9fEDTA64HZg9bgrQ9vjrTrPigN+OdXZW442ZVmPg==","signatures":[{"sig":"MEYCIQDkJO3GVXsam2Kdo6n0TPkDPHLh5/yygpNbhEwf9w4d1gIhAI4mrKeEpyA/aJzIYvrnc61Gkp9j9Muh+Sb1dtVmB4bD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/RCRA9TVsSAnZWagAAkYAP/i/+X+d/WFruRPrUESaJ\nnrxfhFqfPwH/A+/tTX8cqOlqG2tGON9lRjLJxoS0l6AU3ZdTRcpvVY6nO0l6\nwppyF57u4p0vEPFCONJ2jfHvysIRXvfF4Egx5DMQ7BbZKg+n5GtIQCLV0L9F\nX2+9WgEp4LvTZd0eFfE3CWSbOtVGKqxjQnsubk5xcI1WQbnwTbfLZRQn1zsC\nxCOzm3orBU3OHKyXuNWjVEgkXoLyHIrg1QXulERx5ZsWXTGgv+8DcqawhIAg\nFmCJ6o04dm5U/1LeD4YZLkcCyGXrZgrI4Bq2VHu+xgaEYX9Ak0Q/FlBip8h9\njNweoeEtUg43R6YqVuXpQybUoHkLdhQFmCdgCDiMiORvunMNLHXOSG1sby1z\nCTsqpWrKBJDS+FcxHHfFdgdYp3XQ4zTZqXkxjPg49E5QuYqWsmdI7WtZ1HS/\nuEvuzzULFb3BFRtr1trb33APRqEGzN/ai3yrKfLEakw9y3TSMKh689nZzRBZ\nLF45C3OY3rdzI8EwX8po/PRqlOAGuGfMJ5auLkm3ZAnY+Pf/Nq/rXA83WZBi\n6Wy/3tuRHMgrfPCFQaNQW75G+Y3xt+rVwLXzMLbX48yThyYb/S6RJpM9B4O5\n4agNsaxR6Vvp1ROEnqCu1hdxTK5LoRbSzG1p1otP4+rtWFYO9zZuQxAnBLTt\nfTLA\r\n=cm4O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.22e0cb618.0","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/shape":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/button":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/typography":"5.0.0-canary.22e0cb618.0","@material/icon-button":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.22e0cb618.0_1579200464950_0.9502580368257458","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/snackbar","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"793edab666814c7ad2b479cd5b2e6f7837ff8c2e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.f16f15b8f.0.tgz","fileCount":39,"integrity":"sha512-XC48peFFfONp1yZIW0PU9hk2+eA8FI76lDoaBGjgAFgpV0Gtpd91npeHjOpFlyBGwS3rBlWx47CeHVA6dl9qPA==","signatures":[{"sig":"MEYCIQCmOsQThSyZhBYD1p8AMxamV95UtOBbnJFoB7k+ljBTegIhANWYno2PEmdvaI4A+YhfwoKWwuDNiveR4u3jJ0repH7n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPraCRA9TVsSAnZWagAAVxwQAJLsQV5Ah2FjPVO01q7x\naiAAupVZR/o6WXf8RrAW8lWRcgE7Oko6f+v6IwKjr9oBDWp2Q1fKYsG8fWmx\nKx6aWZu7nIF/nuzmccC/6rrnJYdJdLtyEStgwH2iEYCxlJaUEeb7mR9BIkwC\nURP+TunOtaZtHaIIVhu5Q9C/+v4/ZN38FXK+yAdzt6D8m0CwOFvZKZAqCSvR\nWeNP6PT2rHij2Js36jmZdQ1jcpGRzIUstDcBg/inABi9oz6VRpIJiXV/Whmk\n/jFHpL2G1WU1ammG991ABxjup05zVJxOuElP5JlU8zS9RUmwIUnd35FuVch4\nEBbrCY1uCl3iJCndbPjLcr3FcGtzOme1QRLEUdt/KKzY6KojMesEZXe9MD0p\nwEcjix/E8Kr91TFX1Br6vd5AuvMULknJyo/6ifML6NBsa8R391iZUxH+g5lB\nqsv76aknYVxA29uOvXkDlHGftk7Ha8hmlV8yV0Wzb5qNCX3ILZzj25A83Y7m\ny7VBQCjeMikDr7+NeN6Z5aF5u3Bcod/gk7yNjap2bql3hpUNl79e/uCTa6s2\nR7DpY/GzxDl1t5FeBha84TfDl/jlS+ndjAylZ+SNBbUZCOYGCg1Fjjma6l7d\ntVoKQAtJQn4DjgZPH5YkMErI7DTsVvw7mHF4+amiTGxd6t96fy+KX/xcEYVf\ngvVH\r\n=Hv2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f16f15b8f.0","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/shape":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/button":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/typography":"5.0.0-canary.f16f15b8f.0","@material/icon-button":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.f16f15b8f.0_1579219674097_0.7320051135703745","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/snackbar","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99b9acc57fa2344f148aca0f491a3f0e1b52e709","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":39,"integrity":"sha512-p6Xb+xHqttRokLaWHbVJV/6VWTPK/uzTTJ3o/E6vm4R3or0uZzDU8rKqGbgGmziTo9MaYFW7buQhmM8QGSNgzQ==","signatures":[{"sig":"MEYCIQDH9jUgrn+8pEjVn4rfmCxPlFoZtsCXjA5QgbbCJPKJZAIhAKlh5RQlFViFR+fqP0OMn1am0m1APloTlZXLh5FZ8Xbo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQHICRA9TVsSAnZWagAAwooP+QEDyxCr/RGyqZ4CIixl\nF5jPg/tTwTI/gSRUYRDPntSROPMuHISplispxfl6qhkXhnS/feZMVnOh4XcY\nE/iXOGZW0n4sERDvLgr5qJwK5pf6Pc0NxFvAqBdzI5qottPLytgRFYbN3rLI\nTRvyNSxjX9jkBsp/xZq/hUQypmq+IkfHKL1jEt3eRMnZcztqWD0gF8QdoW9w\naFxmiwt9k//ze3mUbGcDxcYiY4EifWqaYochBPwYYjv+Jhe8AdyOAeBGvo1C\n4zr/xPkJKdt/A/Do0xyq85fiR/HJS5N96GSqqO0RqZa3QWXbOHi+ShhcLdWk\nByzPs4ugwm5ROajTw0F8Bty003YcaVA2zEcHNTMvbd5cSW79kwkW+0RJpYnZ\ni0lgZ9/snaUWBu42vrm2XwpZMfWY0Sq2ViNo0oZb5aiWP3Sys3/nELpvJ44D\nr+g3eygr0Zhkhjw+nEsEkzXO429K1lZKcoFNId2Y/ykAWIQZIKqSw10TPCBc\nHaBWYRbPleobY0h8g2tBeeiY2ajLU0QQNARMzic/5xf05Br6AIMqs1zgN3DW\nlU468MHOyCjGdEPKhDT7vwuky8TXMDuGbFxsMfiGmwnBF+5cJU493s8XkYjG\nER1QxOPkp78TeL43b4jXkWnNHJGKHoBWdDuT97sFiVD4SylPCVC/7TlCZnjw\nJmtU\r\n=P4kH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa8e43e9a.0","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/shape":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/button":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/typography":"5.0.0-canary.aa8e43e9a.0","@material/icon-button":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.aa8e43e9a.0_1579221446246_0.6839524337367473","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/snackbar","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2b5d86f5ce1ff717bfb65b0bbf5847c684a7b2f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":39,"integrity":"sha512-Kpo0BH+NmyJ4NwuyFnWmZYP11UwdKJeMTZXsAYl9RyS+JayxVv9m6YlG1AL9gIkgffunrgMemsfj3mdAKN7CMA==","signatures":[{"sig":"MEUCIQDPUBsFO10Psd6cRreIz9y/07Ifu8T6OC0pNX89/B5tPwIgfUhZVzxjhMWWX23B6TYFRp8nh+3y2/XsqdQW7V1rtZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdTCRA9TVsSAnZWagAASyYP/jsd0ca73teL9kJep04L\nCIBHFdC7jpWLXIoEbhoKF4IZMhi54hP5gX4lHS+u0zLi8ecjGNiHpV3qc8hx\n03971JBfrrRBjOXidbZ0SklG89VGYH2269eHy+dy4CGbCdGdcZ88Km8eei7w\nEzgOmiZPLSfpeQni+gP4kbpVJZVo/2xVteGU2zdprEjDtG4hsb1Gt8F+bUV1\nPoQ79Zadr9QnVAGV2RM+TLy+IERE2DY9/YJazdyeXwZ+xpjC6Fc/nbbhtWrR\nh+rtIN51L1nxxGf8QAIXMHykIso1bwMo38VvvncMCxJ8Y6VbvaDiQoKSJSjT\nO4Nx6/ubIINLOA6NBf2jG+76Rw7sCuZa8EEcDOR2quV0zALP7swUHKgf7Uov\nfQslrYVegzsseKn1+1aYtadFp/BphVqNDWMMlVQOWRwZ1505DcSVsnuCw7ww\noS2itjTg3BsV3ALnFATDnw8hkCLctEUbM8Ravx0stVtF5bTlTRBoZNmrpAuM\nszuJOSWUHYIjJXwylcLz6M92P0TvkzYOuWeooiPaMPXH9u1RHDeToV8KXWPC\nR67yLmLplTZ+zBnjWx1N57MajTihUj7dFHm6YQWOia8Yj/EwiQxWxWT3TPFy\nQNDZz2//DAX7VLylc9uStEbwTm++dB6ZI3l1Byn+sGMsHt6EBY/ym1tOmUZh\nYgfa\r\n=X6je\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe1f3ca07.0","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/shape":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/button":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/typography":"5.0.0-canary.fe1f3ca07.0","@material/icon-button":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.fe1f3ca07.0_1579222867177_0.9053671714174736","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/snackbar","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8298beb6c2f922f94ea9d05acd6817522afd2787","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d405af26b.0.tgz","fileCount":39,"integrity":"sha512-h4i3jFeA2YKM51iDhzcun0xcd4YHNb3cA9fdyucs0jMB6w3YZ+xC/x7AbWKl+df2DzZujevpE0nTGx4wrP4Qnw==","signatures":[{"sig":"MEQCIEEN+WENTY+zQvSe9tTy7HCwde53pbH26eNUSwDBZ8G2AiBouGEfKQxz+Tk8WguWU85pBInl18SAW5YSrwkifd0mYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpeCRA9TVsSAnZWagAAel8P/1w5nkpGhutd7F2wM0vn\nvmpg0t4ERqbMa4+gXZjjc3f8HTfgum6s/YZ3QMwuKJjhQGlSFSd/HPjtSSoJ\nlUoC9tNL6truzOW4lLJ5G8j3n+5jFkR7kMtaVp15kx1TqqoxCHLhzdXwgvED\nM6Y5zohxF/L+LAxaUsiJdUKO/WwBddyFrgmPh860XSW0mOuuJDCcDsTvxSeq\nLTWpavqQd9XmTqRasIHMKz0gU6o2v6ca0tY0uGL8HUN8+OXB4H877y+UYV2r\nrvdLOjIf32zBQM3m3pFWkzzO/FFWW8alXO6HHIB7hYOkpeNpni30z+3YJJR2\nHBGRM55T21Cb9XogP/mnpV2Y1fy4pi1l840wNWRn2t4iq9G8ixlfk8CMu2gj\nhEYlFGQH2owHhjVOp/uX8FX5/tDINu3tzlPzJjnpPK3y3eS+CEIsMJdD6Yom\nMTIMDL9oFho5a8bbCS4KkJ7liFyqQcIxBY9EdSGj9wMOyvvr13DVvHJnECEJ\n4LnqbsqCUceXvjjTDhjKgYBJN2Xfu0pYZIYk74H81813CV6Ihb0eYknOMe9k\nPTktaq2gRw0CXkmU4a78yNDD1qtFoBRi7cE/NF5Y13Nrip3lJoxmp0/g/fn/\njTgJCSorQ2OqhVht8Ar6ceUeowskwtwbDHDs3KdA9oJION9HnCKLgvV/VGZo\niuDt\r\n=Q+Gr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d405af26b.0","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/shape":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/button":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/typography":"5.0.0-canary.d405af26b.0","@material/icon-button":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d405af26b.0_1579285086115_0.8874399000645954","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/snackbar","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515cbe3f7becca17e771b506eccfc19c1b3b2906","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.6e857aae2.0.tgz","fileCount":39,"integrity":"sha512-RAa6LFG6kuC+Cj8FRU9gX/n/m8VHHVlmIbo35gS5wLBJ7DVbyRWZ6rH60A5P8dljKlQKLWEe+QYu1lmD8ACUVg==","signatures":[{"sig":"MEYCIQC4KEwuVnM0JgX5tvDyihUa4+uvaK6dg0zJaVJBs8uxrAIhAJ6m4j9gLy0smWGDg5xQi+EGi5dpiaYnAGlgjEtOScBB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfssCRA9TVsSAnZWagAAFhkP/3/V57j4xTuwskJOAOxk\nwlDxPMIENBgxfkg3ZAo3Rv0417QXpTMGjVQTROfzlfcgrk8uU1EvXJq7JWZ2\nyreQQsQoFybD66CpFsY3PkLF5LnLNgcWRDdwnA0UM+ciFo5wa+nSKqARxJdG\nEJOO7RGzhhEoLD3dDuhxgAYq6PlSudqHxhSR76acOOnBDbkx5myd4/iOro+V\n1L1NVS6XVnLyHcDRZxxd+sjnHSf+nVXaCuTHkmciLA6VoftdlUmZovPWd9Dy\nHT8Dszo5fVktcINmEoXw/nZ8r20X0Sh+Vy19dl52X5jB9yEb5TAdtemWW7aX\niRMbX4H2Jgz5A+NnSn2B2UEk0IKVMx+4URn2wBJWef8Cokl9pyOM1nQ6suae\n8aGSbYlWcdYgu43FQ2R7R5f7Ww0D07uCQDWIR6nVXaZ+MWZXbkfTi/zlQWEz\nFQFuhhPYLUKK/2IEBfnQqOHtY6tLTwGYlWC7H2FYHB0f6F8drUWpAE+sIumI\nz0ETYaMDjTFi9ox9C+OEwuVGWlfiP0KCjbLbR4JXUECEcdJO48pxvY61Ay4j\nvXFori/iPu6maDdzvW1wsu23bi/Kz03RSZ+OjVFUf2Ruz8Blrv9+vBDdHr8X\ncT2XNDlWbQkbDsR3LvIVWIq5TMSPRHUx0NG6GkPEy6koYV2oThyYal3l4McE\nWHGW\r\n=8NBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6e857aae2.0","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/shape":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/button":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/typography":"5.0.0-canary.6e857aae2.0","@material/icon-button":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.6e857aae2.0_1579285292271_0.6063172546972719","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/snackbar","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"687420c0abaafd3f148f935126b99aa508c4d2c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.e2e764f7c.0.tgz","fileCount":39,"integrity":"sha512-H4U0IWlWu3BhnoYxKB4Do1mB8GC01wNeXDZRWF+Nb5QQupNRXWw4gaPOh8CPoW2t38koxQHeXj5rZUSabEffYQ==","signatures":[{"sig":"MEUCIQCAW/XjFbQKi/NFywpbh6VSoFOow4gR0vE6Etth2+lMUAIgYcoFFdGDZqKNjGIdEL75289pkfpTAq+SJLhSxoMuxM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf7FCRA9TVsSAnZWagAAtrsP/3+5MSC92KaztvaodUfa\nSN0gS5sQIDHQeyaXm9hV6mgHPwe5vC3A+0HBdr5uvn18vbOupBeLS6fAuS79\nc1TXIymabU43wXDrhvoPpxsgwffkNIKrU2J00UtD7Gy7+zTQ6mJeoRL0u6hm\nupU35ss3+6pAPaFxLRIIMgHUR3eLPsWRG/aYUKckTHfnPd1AoNyW2OB66Nc4\nefeB95i33RMeEP+6JTx7U+rDMgkwbaVcMl4kAXp8+ho7kgNwldW1NukCv2sd\nML+OGMnyv32G9mujY2Fw+Mgam25KokwUiLqGJaJulu6w8NJo0UNkJltAW1p9\nsjUjE+/YS/pBurnWKwc4yGEagmChb8dqK/xSuc6S/TZzRgrdp/03Q+725ZXG\niFS5GU5iV4a5oMovUWd1pc0eWMqhr7XLVnL3YovnwA68lRp7mXz6SLe9Bf9F\nxeoSiDYdc7C5kcHUnMGNuxMWloQAZ5+wrYcM5gwJKkqy6ckGAVHcsQQWu7qs\nggYsEKkAI0hrkvsPli9303arybZhFZHkLyAsCP0PeGPXY2QpUfxJu7cmvx6z\n+ytCRnEwXLeruVtiY///zJ37Y4I/fH+rW9pDYhOBFm7Gmws3NYDXTZ3fkjyR\nooScW+kTyr71riOFPymFVoDnrAe3/31TwJB7OVdZgZwlugsPyNzkYfkwiLEE\ndpWi\r\n=cbZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e2e764f7c.0","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/shape":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/button":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/typography":"5.0.0-canary.e2e764f7c.0","@material/icon-button":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.e2e764f7c.0_1579286213417_0.055206177933924794","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/snackbar","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38e8d7b4bea908c7286a3d2ecc6962d6f9c1d221","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7ef986a87.0.tgz","fileCount":39,"integrity":"sha512-wCj+tX0KRK58iIy/RUmIEYSIGs30GCuIgCwA7TK5G+sVbMqAFh9dBqaLEPBpXAGfAgnRICxNyfT2h+xPtQS4rQ==","signatures":[{"sig":"MEQCIB06hU7yn2UmvFuf+EcZF6yFmsDz8MAAxy+caeVhYCWQAiAkxInR1NzEu3D59btYLatpfq73jf1qk2+pYkRtL03ciQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgubCRA9TVsSAnZWagAACcEP/3Pl8+zox6gjse8Nof2e\nQbFGfu4IyBQ5Ma8JAAX9Xm5sm0LCvOWqObASPKrB1snSQxPMl2GpXr3ZjLuI\n9QM93t59l029CPxcWGyp+GcSY9HX85wVwLb+i4Z7hUzXXFR/MQcaP1FfaUBO\nI5RE5uBNre9C7Jo6oZ/56ty0sOwVsiKUvKN5lUIZ/2dxYr+oMF4x1Q9YEv79\nrD+4pjOPNR2yBl7GkSLPpX/7upfLISPMVDQljD27VUANnFR5cuR4YUGV/DgE\n8U0sKTwNGGKc4xl8tw3fwASEYF949vicBZqIWTANHN2+6cFuni6Us+eRJ1KY\nNQ61n54YgC1Xu08yfvANZztzE419tH1uMkyqEdn82XLnK5fbJwdLzVI6RkXX\niMGUsOFKR1o03yBBwPpv+jy4+ySdmUu0ylsI94y1TKdthAr6hHx75AUAtBxv\nUF9qT+hLu5KevxWQc5qKH0dlO87An2hLqoS0y6nl/GCxOrObM3m7a0hRADpt\nfvCkJI5V3i2RvWvTRxP1GGj8Fv0QdcMwkZECSPkbuecDuyLIPlXBqwVvu7sx\nVzV+pY5BSrG57Ot8epo1xKPKD0YY7/G+cq46E0lLJW2NscjKFH1kUZK6UyWo\nwnowHluwqb8QSeq6lRE6id58KMzLx0HmjE5mjL07uNd9s8Xqw4T6fuX6XK8q\n4X57\r\n=nagM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7ef986a87.0","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/shape":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/button":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/typography":"5.0.0-canary.7ef986a87.0","@material/icon-button":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7ef986a87.0_1579289499445_0.9927631918633515","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/snackbar","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8edf4f02f4dd27083ec2bb9f6c36597c8637d612","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.29402e2d4.0.tgz","fileCount":39,"integrity":"sha512-GIrM/UBFrjAAYk0GTkdUxjJJSSEOG+yUL+tNm416SKgvKk0uBQ5vz5sjD5VWU5eJvKoSNylqgH/19MCG5Hnw8Q==","signatures":[{"sig":"MEUCIFGOPqNVU0nFZssb8uhxB1mxJ1d4gqJtSN6YkcsXOfZRAiEA3PH4imOQ2XYDv5zmX5M8fIRnrAEDvrv/aFjtg7YJ9Es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhvfCRA9TVsSAnZWagAALawP/3KddQ05dmnSZ5u5cD7i\nFlLUl7WYeNJvGqAN/OcbIBytzQV7cPb+7bN4MabW8O+U4pups7SRcN1B2mNK\n4JngaqOfzj9tgqShZrlLbAuKYuLb9t40zykje/9rgMco4h6HOQcoQMsPHqcE\n9Kct77TvCjKVVo7o1vkGcbLw4ebOSCa7Gd/SWt5J3m73PrDdQqacDkrl9I2z\nHUv0fw2kLnS/HhfURDEVP7GLlh9xSB71HP7rdXg7IgO1jGs2I8UbzQQ5SxkT\nI4MBiQMxYyaGRbwY5RGnYt1V7darRI69Da7H+kSF+JJAYBzrq+5jYPRGbvDO\n7WfY2rMqYgNMKz9jknNnl6Hp+4HChzaHjP7/ShCbkpLGJgV0HLg260cI7U+R\n95/6/0+E7MHKjMePoRG3TDL1oYFWaJch5VeUM63uDJaSgsFugI/SN0W3RW6w\nyzjPrA+f3BxyldJN8+VV7TC6/d46K574f9KWyyG0/KD84AOIgMtf1ZJXX7mS\nco7vAp+1qd6ziamOUfAkm1jlMxdMLeG7INyNCxjcPQ4sOk8Ib0mpGyeUbaPP\nX952Wfy7QSp+qetRZ+4ePTkMvW5O7A9z3XnqfRT8v0GGF8EPvbJUHRHSCMOg\nPLKIQH9slZecm4PC9gdhfeRTAgYER4HSJww82SEl52IFvH82BjefHG3Y7c8X\nHbBV\r\n=KKe0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29402e2d4.0","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/shape":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/button":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/typography":"5.0.0-canary.29402e2d4.0","@material/icon-button":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.29402e2d4.0_1579293663096_0.9825134284402288","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/snackbar","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fa65ea605bb2a680687613a9c8fd8ce34909be6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.2b3ec563c.0.tgz","fileCount":39,"integrity":"sha512-r2ZOVNJmdE2ZHLYI7ilIDLjZV4tjJ1Bod3RcgPC+iYEG8ofv5FfpoYSWOWrlYP7ZXF/AcQ2TBTDHmwM1ylfNaA==","signatures":[{"sig":"MEUCIC/70ihFktvF7o6BCb+6oaWjymthmpV7A2upVxShgshtAiEA3SV2gOYY9NcXPoytvQwrAiH2avV6bYmeUa2xoopKpBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9aCRA9TVsSAnZWagAAHu0QAJPQb8/NuGSNPWIgcwWz\nDS0AiCiKOU2GSgP+Gy0Quyb6Occ0bJU4El2GTCrw/e+5boBXo+pOzo1YtpjS\nXKFtogrYRumv/7cxnLSgINeMM5es/UJDichbJMdiauIqFCLuioJn6/PmcNJi\nw4UgDVfBwYTbE3VZHSkMUXOFDlDtqZGqwL9Tuy7RGXQs7Lc/jte/atuPu24m\nQzGjevzWh1NGyNN1gcRTLLeNo4tSILi4NJMRCslI1NiXHAMkmDlJqlkM4cDW\n+8AlaDgHmjGVRJ8Dwhvz0+mBVsD6v5k5TGrrh2jCOhFf5McK35GW9jRXu5J4\ni5HfzUpej6SSU+MIQJddNLKxx3/8WxDowayx+Q9eZeCrUqcsAo07aspCQRe5\nZT9AludvMles5GJ6Pga0mQS+HtKhKuxNiWqTKCBhdRn9l1uhLmgt3FKQICB9\nTLvHe5qryVs6NEkIGHm/dqGYp6bh+UNgoMFkLH6nvZ3kIxBrmDV31GO7lmXC\n30LNbdWqb3e8bHhpfzyX77xOLNfBPl3vWYx7ZQn4CxG8ZLAjxcZZgGHsq+ar\neiWnf5//hhgOyGyRqKHUTpJPfRQGOyEQXXl8c0D1mDV5yDMgT3Dhfq4nWDFt\nf8k3x3qrUjJKNb5V5zo2n6OiPQPhNvrqpqaaKtKQEF1SGfnFLOskqA40paY/\nFF+F\r\n=UTWo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2b3ec563c.0","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/shape":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/button":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/typography":"5.0.0-canary.2b3ec563c.0","@material/icon-button":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.2b3ec563c.0_1579302745510_0.728605567268882","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/snackbar","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e20c015e1cbdd05aeb36a8e964ed1a22c157efe","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.e8a993677.0.tgz","fileCount":39,"integrity":"sha512-z7xXYulZpRLtipZhdm5W9+tfXR+y7Fj2fqUHuc/FnH0FgtDlzXGgvHtQ8o3ak4m4wH7Ucc++R59KdsXJGj0enA==","signatures":[{"sig":"MEUCIQDDLEg06KR1SpNOO2qPVPP58N5IEzG5PIuyuFBW21oLtwIgXqNTNRr+oGxBVuz9TM8FX6Clh++UngdhVjRbheD/2FQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvhCRA9TVsSAnZWagAAyQUP/1vJwWJs+ucB/snkA/YF\nSzuuWJR7lb9VKlQctCwbdwZkF9eYP6kWr+8+t9Ku6YZta7RNXurUzS5rJ2+D\nfiluW54ph36DGuZipY8PQv0QHH5Oz+O6ykjjxTKHDNnlN/mp5Vcb1Df0hUHj\nk2yXV/bSymuNCwijFfREgwTcEA0BVWl6XDhOinxoIjelsLfPeADohRlYl6sw\nqjKc+IzDZrfzqmjqroQ33i+XAx0Zey1mNJFz+PbK45EswChERziLdjRzCcg/\nbwcZ44qzjO7T5ISwVHayvMxDzIjZinXYFrhdBR1tkG7XsQ8gg9/pb+URtS/K\n0IluvhoOFpWuWXPuFiYjOVcwNLkXltGJIjGAER0x371tIG6hJjFg9/3wxY+U\n6WFKI5p4JcUDh1M1eeEbAcSW4Vbbutb5Kx+bgEVx2HZB6EYkFpHZrhkwYY3u\no/wvWdsAUV7bInN/qJAPVrvID2j7Uqdm2iNunwncujFwX4ZrRU/yjnY24jDi\nR+83rkvaBVhqRMty2Bpake1b8Fl+q38RfbVeIvr3q9l1psvJhr6i40gTq4C2\nmMi6nKqip7px5XT4WSyQjYXtEQG1fBxksGEWkxtv04mFPvUDmVuw4CCro1bs\nPE3jM3xiCbIw31wSCfpgNubHWSfEYhYAZDHnuXD1yjwsad6tJjsunFHV2tai\nEMKW\r\n=Oan2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e8a993677.0","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/shape":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/button":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/typography":"5.0.0-canary.e8a993677.0","@material/icon-button":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.e8a993677.0_1579625440961_0.4692045800665505","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/snackbar","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b5beae2b605bf681481b71523bbb6fa5a25fd94","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.cd4903304.0.tgz","fileCount":39,"integrity":"sha512-Oy5GsTX85wqJcJ3P01QRqXkwZO5orlytZbpatCb9lflCtdUvCOmCBXpoquTp0Ujsjh85A81GQDHj70dECnU5WA==","signatures":[{"sig":"MEUCIQC6L6/OmrebNgbp0/vdsKGenbYY077oJyTExZzQLD4HdAIgLjOoBARZb/nvgyCFQcraHrF1PHqVQ76V1tN35ozL0q8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ287CRA9TVsSAnZWagAAhGUP/0bbPDXJnSQGDuHKzpJi\n4k5DeGAnCMqXlTsERmMizAiucW1wAKeBpHdTUGIPeGdsgPUxfjKu3Farlkde\n0WfS3yi6ffegFXzqI8vH1ruhyTKIDrFrzVobvJbIreLJSKWUNlFWDnQkYXbQ\n/IdQjEluYpN66YLcEpdm5u9Cll0ZWW5V+Z1QDhzVRE0xGWSKgGmDvmmaKsJ1\n14+NKNDp8U2Yq2+C0LGhsYKuf7MNs+Rx18lk5ovfPjbxUldaw2SBi3vFnj3l\ni6JM2cKA1Qj98MMoM3zj8hoOEB2UNJY9tVmUXzyfU366j58WnM9NmF9Ms0Ds\nFOMnc07szI629R1W1n07F6/EiPwyXTOAmMyyyRsx6r5HhktX0uo2GWjQaCwN\nNfRbXGc3/fHumhpNOTtv1RcCA6vZAXHjuRWneIP+9g8zLnKtKRy1CJPDk1sR\n1O/4oi3D16j03HhGVsFCOqTmqCqei/FRaFzNmVp7X4sg7Ga2MtjkcbqvqPml\nSHp7gVufq6OhzaQQMhdaS9XLrzPsSTYNhqDtN15lIUO2L6YfnZ3ufIuLcsNG\nmUN2YvF8DOzNnq+hyb1yIoC2xXokA3vXNZsSLj8zoObzGWQ4NEnDbUdvx65p\nKydtzo+Tgmij0hvzbc6pnZfLcWW9hacBrKiWfGIBczIrOivf8YnKdM0ZeL5i\nUAsu\r\n=j3NA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cd4903304.0","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/shape":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/button":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/typography":"5.0.0-canary.cd4903304.0","@material/icon-button":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.cd4903304.0_1579642683033_0.629979480819931","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/snackbar","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d32445dbff17ac221eaa0d86759b2cb0b38142ce","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7e4b04b25.0.tgz","fileCount":39,"integrity":"sha512-33MMWrWpgU6qKZbR69EIgfCxE90eclk1gQwmytDVShOBM99IHc1X96zeokXdJor7Kfw/Eg+WtdnJBluSzipq7A==","signatures":[{"sig":"MEUCIQC7mEqbmroJsojivwxazSbZN5nPuCClpBm0fAP50vIAJAIgCsR+S333xPQmznCbZm/3ZvuqeAikB53CI1+tqYN/6Rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39rCRA9TVsSAnZWagAAAgAP/21ic14YgDvciQFdfwee\nAKkUCbM0yldTQIZrQ2mLl41bKsSpSDcjh+xKO8WZkrXvmkvDk5l+r0IohM0Z\nUk/+hoMvMhw9ABVfNLlw8ksxPgTfuju+hEFpOqWTnbpNNVv7Rr/yeN36agr5\n1wxFBghx/VgOFuzIppJa6uPbwYIQkswE8wjYUKs0ZELY9jTKJal5kkVKG8yG\nN9dYd4oBFOas4oGm91AWcyFbhc6v4ZaX+zj/FfvwYeu50EMVtc9FlTaQdj5U\nr3UaWBaKOeLdQ9lbh4bqxpv3fZj2NV1vqPrnzl8wrJ3A0T9m9Cv0SxNTs9Tj\nLW2JepmSUQMegG7Cgpi6sMZN5ggGMmtTF9jD2LLNz7bnIEkjWNwzElrsLqlv\ndbvMV8AHYKBEXvE7vIEQhotGxypxRm5213N1NVJRpq/lYFLCvB8vmogv+hj2\nxjqVMB2vzKxe3kK43oLCnpgUeIc85a7fCJhU+MIJ9MRbw6kYc3bvrXq8XCvM\nfYvXJtrCPZIMGbIy6S79I1hV19JtM3WZMsyAMT7j5UL2YV1n1NokkSYfKj3Y\n9JkPLJhhmCJ9ij3+0nBYyhHvC6cJItA25HFKmBb3aNHTdr+95vsyN7mYpS3m\n3IoqfjlRII0lkngj9BI0PYFE7UaU3niiY20BhGjjOty5fPkoyV69nKfGAXcd\nc+hc\r\n=xnTG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7e4b04b25.0","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/shape":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/button":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/typography":"5.0.0-canary.7e4b04b25.0","@material/icon-button":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7e4b04b25.0_1579646826492_0.9065202740455982","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/snackbar","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff2f543659c0eada428ef33b652ad6a48025e6ef","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ebc296937.0.tgz","fileCount":39,"integrity":"sha512-s7QPOAEpLfGzaU/LEl19ancidLpFjOv8mLY0Ve/jgoATS5HMg4+bOatSigdtzcSdT7p0I22GPIqo+9EIwYuCBA==","signatures":[{"sig":"MEUCIQDxxyvHMGe/5oYwAwl/JY8UNR64JoKzBsKKhKg/TlzHdgIgCbzD/StPh0bR7ReLBzEDchXdsmg5HfYApEaR+D7Ngb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40nCRA9TVsSAnZWagAAb+MP/0Vhrxf9zeSiC2wcHxIT\nRlIrtSPQ3XnqMlba/u0NYsUsuhENiY3aITmi+oBqAGC4Q2ECcdZO44V6bgeu\n8pJ4m5HHLQ099e4ixN1mAM2nJKmORHnkQudX+SS+aa9SGBFzfYJe2Cn0/Ic3\nqpDg0zJ7YmoIttWjAZdx1NSSWxzS6fBFxYZanWcmO70K6lhYgBDA9FxgcA/d\njZf7g22o+1cselDAp1M4ZSkBuSjl/Suw8VfOjN/WsqGdB52BVwp6Ts6I/60C\nEPsxwazTgd7szyX2oqroYEVBlPbwSV40JZmzG4fVaQHgMR9bsuP2XJSOBJT/\nb7fdLOHDM44Y+qrVjt1sz6g/GYBeY3G4m0AWRWx4WxGax3cDXhZLwi8AUpRd\nmL3r8d6Qs6mTAI9z4FXO638pIKPDzTSwf96df+tBEBYjnEb39CLRmUexMR0z\nE6e/ZExrcn8ox9ThZ8OCDQ5TU9DwWx+l/WQPg69EvMgrAmLNbqWih0gUm8fJ\nED4GBJINdQtiK13d42IxKW5vQ8pCDXPllpzoa3JcWLtWmnU+sB+MCymV6Kr4\nvtUM9XnLuxa0Vpwbu6IhbnhTS6VPbgrR+DkpgqAgNBT2yeBOx12dQggA1J/n\nEinI2ZAXRAMgRW1tHcRsRrEwsrWnBwC5LfpJ5olWQA4HUJoilungrZzc6Pxg\nrnvG\r\n=2X63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ebc296937.0","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/shape":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/button":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/typography":"5.0.0-canary.ebc296937.0","@material/icon-button":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ebc296937.0_1579650343048_0.037805577114933264","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/snackbar","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05aec6e153af77b16459522eec4bfbc746d13ca3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.cf33f113d.0.tgz","fileCount":39,"integrity":"sha512-3DNht7g7QkAYOs9m0dOmqJy3ym2QLUKldHO0PZLvbZns5yB3jNn7E1Unp+i1WCEwoH6cGakwN0jhlxxTKJZurQ==","signatures":[{"sig":"MEYCIQC/PPyNoxnlwwOojSFX+xnGOpNtOCd8nL+LbB8/NI5x0QIhAMXGz+csf33jnHmHymZF9HTgBJkbj9acKLPE6QbG+QGF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6QNCRA9TVsSAnZWagAAhFoP/A0FtZkc/VLxvbcLZHp3\nmy4Rcj0W7JFsmQsXPOLcB0lWGAhr2jJubXnDNlKwaSwhMYl3C0ENPafp7rHh\nnY6qzMyhzKLhPRtROrQDal4F6UsVYdrh/wy5kwdol6JHy4MJ0RZH8HTk5XFa\nNbvGSzBvGJJwk9aObTVcxPzjpKzSXjieABzo54wnAMPIwVt0Dsx9w794vQQr\n26uQs1dwsDVj1fzavLU1+A6CmpqQCDXAQcTfgpriLkRq9B/Gagv8DvvDZX1C\nLUx24xZF85Z5hrU7n34WP4e7qKUpMQdelAGF71LYq/+i2gf7EUm+P750F3FW\nLbX9IslyJ1/OflTsdg6qLKuXWDyWt9l2Lti+VbfiLlWPryTy1ojpQ18F6spR\nlpmFPbXTtA85N7SD3VnmeM376Pi22hik8ldeIRscfBOapcO3qxRSwear68GU\n+PeUdxvIL1Bzd3RUHVBozeMAcvmkY0P+o6LktLa1Z3F0aixAC/0gnVmmKQrE\nGyjlT6gumiFwgHA4xb20AMA30ADJJCCBPRvWiPwQuvZYxj0hrlMnQQK9rUzV\nP5AWeDQD/lPVj2I1+OYfGa1iCld0ea/MjhU9WCHgM6y4t2XpsO0UE52dJCui\nz5eRJCWzzuxXI0b2OuzG2sgcWyxDH1QFqqsMCS+Ld3t4UnpJPjEleljNNXEs\npVQo\r\n=Fgbm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cf33f113d.0","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/shape":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/button":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/typography":"5.0.0-canary.cf33f113d.0","@material/icon-button":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.cf33f113d.0_1579656204326_0.5660809949215557","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/snackbar","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9bd0bc8bc06324fab66e08be047c6ddd7b17446","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":41,"integrity":"sha512-v21AOWsaVRgnDWNDu7Z5semSyCgjJqhR4OhK/mguqjdrCzh+UJ0CBS7BBvqb5IPtuYD84oVLxYZ2jc1nnjtVHA==","signatures":[{"sig":"MEUCIBOVjfF7leJ+dTptVf3pkgDj6infNc0HZdzTv1POB3zNAiEAsb4hrDx7wFaurPzTVf4FyDbrYKGY7HlLQnwM9GXHwG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH69CRA9TVsSAnZWagAAc2QP/jtWmZau772mYUIqig3K\nVKl7EUKunLQM9I3SQudqorhloHubmsabbR6qo7YZQhTtq58SUXVk936cQ52j\nXfjlpDJHlX+HV0HyeU0IbOCK08vXGb40T/kMnOqZQ35uidX4dpepyyxTSzPa\ndtCc0WcEMcUzsFkmIg74+KDEPB37v7GRI6LNMRiS59V2MiY2YQYH+hFXjdEh\ndLa/Pglx9rkh4K/TyuxZsYyeJHYglCsLeEHraTEKwe+P2CRfUufCrnlFYY/+\n+yiwKd0fokscoIqvh+7c7GY8H22vypzI7zYSulWuzzBXTb2Cq4XARTLj7ZEf\nlqLD6+zjeI4UWYzzNkxMDnZg2cIbiHViLitHFdSf7D+iF6Y6nS3NvhHAVsGt\nRkvLuCNB0DOZzz6aoiAjGUtEekI0MF2rhhsReq21zeKnvb977V2xyDbNiLeS\nzrLTGCaY3vAaVaEHV7YnjhGLyWZZ9xp3j39RhnZ9vnN2psheYPbMcjcghZ0I\nsxXjg4O6fLns4Rn6MJ1e2KA2wgSqyAXDtW+4zNb10DIsxinWfSSsKVlx/1p8\nDTtDNfaJaUzlj8E5D83ElVCGFNM7NfQKLDziddxYwwQC/F7bbKnpL06pO7b2\nZOZ4KafVLB8ugVCLwYHif488vAjJjQickZ8m2v6lt+BdhXfD8xYIM4gEUcEK\nlx5v\r\n=Krsd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e1d5f1be5.0","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/shape":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/button":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/typography":"5.0.0-canary.e1d5f1be5.0","@material/icon-button":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.e1d5f1be5.0_1579712189061_0.004487915766292483","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/snackbar","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e30d1c9c936519754b5a462ccb164daaafea8fe","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":41,"integrity":"sha512-y+hCfoykNM6kar6AefSUyH+wYyhVzaEYEas9EUr4D0/z7b018Tn1iTtY+OCqdxqddILy7iyvnQmyysULjhhwnQ==","signatures":[{"sig":"MEYCIQCHB6kPPIQPSVnTLtJOVjkqL0MfUCwFA/+8Wv4M8KsiFwIhAOJGAeLAvtzoP5cfr6OFvV8g3DTcW6OzwfGXrkR0thdF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI1OCRA9TVsSAnZWagAAJNAP/1uWQeaHvmf7EATiQeu9\nwvh+WIhaInCB1bIkYWc0hiGuMjl+odIVGdyZJ/QsWkwS6OGwVg4r8ImHQoNc\nN6S2MPuQj+kfa4WZ13j5J06BK944dcFdiH51bI/e6O/WhUWbhhKvEZdBzxPt\n4hMl0HQxMwzKq2CI7JeOtgaoRTbDBoVYHrYYgAc2fhfiS7jdp98NT+EIKCeU\nRiXHku8hH4ldTSmqBZSdFmnIFPB5U0JX7g/bQsHFqxmveTD8/M9jAQ2GVWOw\nU53P6gcRLkq9bEuxDO+hDGVZTCzQ9GGTP5xQrerw7rmzw+fRghV0QN+gXGaT\nnh5wnsS2i64HiOKnf9mYxChMNVkZK3nCPU6Pyp2bpdN2Q25Mkh9Z7is0gYcd\nIloBkIyhoBH4oEN1EoVBgvQNltvDgco89j438uHCOR/z56SMj5QUh79aozd5\nFg23IP/kqIYDj7QiLO/9nGu/g6wKAse5akjQ0EFsr/6oA4hXPmRzMPaPJ6wE\n4HiWIafEwX2RfIPIyIZ19+xlKyYpoG2NvSQdghD774JgCtcvsTvlyJ2ipFzh\ndnWU7GliKRcfnjbvbdXg6mUrwuVYLhsi5E6Yligu2skK+ZX6scYogTT+a7t3\nYdJ6wh6EJqxo9YBH+amClocvRp6iwNq8tQI6eOsIbk+FcQR9gX19rRYBpWXH\nc7/P\r\n=qiD9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6b6a4ff92.0","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/shape":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/button":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/typography":"5.0.0-canary.6b6a4ff92.0","@material/icon-button":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.6b6a4ff92.0_1579715917674_0.3928356142742906","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/snackbar","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eecc421e8143a3388825730dfd3929b06796dde","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.6092f71ee.0.tgz","fileCount":40,"integrity":"sha512-gfreDMUh0M11NamkiH5LywlxIwQ+pIEGuX0hxeD1nRYHr9V2aHMM3KW1FTrCSRmXzcjcmlyWwHaflFn/88AuMg==","signatures":[{"sig":"MEQCIAjuZMqEsgZHR+PXdN8jw0zAnHDK9hWAN7rfZJrSN+YAAiBR0Z1fy3TtY1XExbLuC/Oc/7wdGnmbDSmdr3q47pLPvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLwECRA9TVsSAnZWagAAGU0QAIAy59OkcptaaV35QWgt\nGWPrwl+7/f4XS5aBpsvhdaveYZ8p8oasg+C4hPmmFLswIlTEb9UWd587grw1\n6KmU+7f1XjLhiRwOIw5/bS+2Avz7/jzJSJ0QK96rUR2EgQxDWgWkJPTxqf44\nbj+JPvnMr05lMmqCMc9wqdo4gsmaPtC0RKuFlJSNGBWnE4dBE2GkEw0TwWub\nqboHDP6IEZwWkI068yGeiR1pi3B0b4a/84fklc7LbbTCs8TOh7RcTVFUhJTc\nERQpYdtkiT+NJa7shg3aAwaYUBvq12gRfJVDddWlJAE5kdeuayB0Va8aoAyb\nb9wrhRwhDFnzQCEmhaGm103YU6Qbkbir7xA4d6zFnFInQB/u2xUfBPK1JJel\nNJ95VDaIH7UXpXpgsFVguyh+2/f9064jpZQt1iAwpwxx3PV3ovDo/anjC0ce\nYrM0M2XPLWJWPAHpy8rkMcFBA188wXFtbR2ywgy/4ulOSYbUIOFcojOVJC/r\njLb9cBqkvXKG3zsomBTc2sLM4p0J36A4XTkeY1KlZCDq9cRc7GU+iWE9FXBu\nkYQUMFTWF9xz0jOu2lwvVhT+YwGFJbKnaKFkPbTeHSUNaC+Oqm0w+D/mdE1a\ngceo/PDVpRVBeELJGWNAkSi04XVdI0/jZ8iVVtA8s9uSnLK+qsqseYRAqPOM\nqstE\r\n=JVRJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6092f71ee.0","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/shape":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/button":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/typography":"5.0.0-canary.6092f71ee.0","@material/icon-button":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.6092f71ee.0_1579727875922_0.8340757761851942","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/snackbar","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c203c6733eaf390ab3f9889fb4369a079ed3ff21","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d8d95020f.0.tgz","fileCount":40,"integrity":"sha512-6ZHi99seFEflCK9sDdT4qVFklrffods+xR45Io0PVOVefzFOZ3Z9Cu1197J8SACt/xwS4agWgIGyl2un0AzKrA==","signatures":[{"sig":"MEUCIQDT+970fl7Qo1jiFUxEcOf8Te597KehKa/BUU2KY5GKjQIgf25Z1Xt450mpHYVpQRGCmN3VyLSSUwZtA7PXecCZ3/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZTCRA9TVsSAnZWagAAisUP/Rvm+EsHDtQPVElO1kmt\nyw2ErCenzjpUB2eNzXuexm5S0aTUFhEo3c/844aMAB4hr2dxvrj0GUQbinQF\n56c2Wf40oA39kX0DLaK+haO4aoAejJstyOAt9qvBbBxaPiZYEfhF7wxotpIj\nTpGRbsgBnmrOpewm+EJkj+NNmMlFwgeAX26pqoiJz1rKmmbnI7Q9jLGcJkMR\no3SvBmmZiS3KIK8T7yM2yTkv6p2V4jrQLjZ2Cot95HYsflfGB2aXeNT6EjQ1\niFUjeOyuYrjS7UMzdp+9ZppgA7NyQFThXgiNf8HbsqP+JC/fgDbe0V0MLDi1\nu4XCeIZBtim5LlKwJ8dVFJX/fjtEm2ebMyQLRojFuF7s9UJBY0BnAnmwzJP9\ntE+vV4JXjuClVg1KViEv28t8t9sZWLeyjHZIV9XDMdqn6/G5CPyOfzjiaxF2\nSTN3t5d7jGueXadlAEA/IU7BeEYbLY4pgY7ZtKqz/UKq9pZpjXXuBIgjtVHo\nNHuuUne8JeSm5TlNzSdxFt/sS1Hd2JDEylFIs3JiCKpWjO4XPQ0vzFXjYtrr\nGQm+IXSRuiBJ6NciK7JLz1h27Yz2lDfpd0as7AsAAfiv5K59vUij1PrdI0jn\npX3RFaMKkZL6dGDXMGGP5UnTmYlec/Z68qyKYAtP74Y6jaNpq2I4NSOTOBSV\nPQnh\r\n=B267\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d8d95020f.0","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/shape":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/button":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/typography":"5.0.0-canary.d8d95020f.0","@material/icon-button":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d8d95020f.0_1579734611347_0.15452216385029982","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/snackbar","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2626df8b7d805d0da7f65bb6fa796c644bdf0ab5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b7facc628.0.tgz","fileCount":40,"integrity":"sha512-8jmGiTX3jaeuCpdW9G3dCIzq8bE5LTXZm4ke/seh6AudS8sX4TqUqM8NSX+S6B4V91Icn4bI1rvPSc393tRToQ==","signatures":[{"sig":"MEUCIQDUzi8CXWaJWM5qATzOz5mIFISThSyaFDHdcObLCpE7wgIgOznzyhwJrnm3P32GixnoydiwP19Vxbku2W18ZBz7aas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeJGCRA9TVsSAnZWagAAqz4P/i2BimQE5GSffHIxl8Lm\nd04l/MTaII+VTfAchtJmyTCL0aYMEGEWleJWhrXM5J+X/DJftZeD0WNZ3WAA\n20e2bsRZA5SXuqfRdfdrcLmYukcn4DR1WIuXiN5EPUqpMgK0yYofSZ4eWyKN\nWxo9HMuXFvjHrpkq2cSlX+W1DwM3ZyCe336zSOex4A3EUij5JGQoboM7TXzJ\nKsw+mcNps++Jf13A6nqNKzMfgJfVFHFHTH/gt0ZLbhiVZ2F7VZ6+iGd8dVeL\nBzP6ASestip9ea+RHF3oDs8bZ8aW0OYrxTwj77VJYqcyLwCy9ssS62cjw1yl\nSPKUPdQSQVlUH6ZKmVPg2/jY4eECPnDsyTrX4u+US8w5RfY0cUSz0Jc0VSIh\nZAkS3t9v+t4eCIHEaDZdGJ3RneZTceQh6g7vj1TwLjTp/pMhzP4EI/Ec4JjW\nXV0vGaEhPAeMTKfTirTK9OlJI5A3m0rosBCuDZTBeughBa7u+kZktpZxsUFM\nu6Rs36EVDxcgTORqKT0pkD3Wm/0XIP6lYJWqGApUkAYFBrBb9zhqhyuuYMrF\nGIV++ev7VNm+3f/ivsMOWk6jWWVMaZ1S/kUtkKmIySByXgvUXC9dBSVcofMv\neewjOq+ZW4sfOUw4iH3YQmq+MB0cEZRANXzd4b74vjiJnkjpAuCW6AsPn8Uu\nSDq3\r\n=z1vC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b7facc628.0","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/shape":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/button":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/typography":"5.0.0-canary.b7facc628.0","@material/icon-button":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b7facc628.0_1579803206315_0.28203511495761746","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/snackbar","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2f2747e705695e6041f50b44e13531b608884f2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.63f357dbf.0.tgz","fileCount":40,"integrity":"sha512-qx7TIKYZ7OHjzofIyehugGMxL53M6hcK5VrU/gQ2HGmLAcN/kGRnR7Usz3ged5nXxZDYZu8OcIZPUS3CWUPIRA==","signatures":[{"sig":"MEUCIAvTVcPESKQmcZLS1noVbW0y494D4Icz9ZGCZL/XRRxqAiEAivTMdi9BBcPOp7VwrQilvbieCAtZgmJz+XoqqaZeJOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZ7CRA9TVsSAnZWagAAXnoP/jS3oZEt+7CwSaQCQUqK\nZ0Oj5wulCpKTH+FT8EU4dhpFlZlrvdDVy0CC+YLkUmh/bhlzEIhbMhwSOz6k\nwbBsyQBezzp5NICs92zQmyyHUORrjrpv3uPEeEyxpLgfZs1xn0WN37s8e5vI\nuXGuXm01tf9A3LV1huS1KkF+JNxCxb7DmncIlSBx9N3Xp9h0SIuwJwo/rfCi\nUL5UjTyiC80Ro4QkIJYJyKMnXFFpNdqimeuQL1dM+UY7QNvF5R2sbdT/vL8n\neYP1nkdQfR040hL+AthLa7sIFqBeqkGyq3GmIvtonXy68DNl2JmJl7LY93Vt\ngs0uuJndvNmHkHAqBXqXiSEDStrU6BKLNa9S/wRjqgyho5ALeY+dOM3lP/Lg\nMGqlF+1JmsaIVAHX9IN8KOpzIUy9hEFbITTsxEOvBQcSQlsAvCR6SFJBGZoL\n+HnYlxDXnhNEXuKJz1MoPrPmfSCPr2z5L5RyTic1HjAdAKC8Hehdyr5g3JIl\n+PEh1oLS31mik4B3heE5ikhThPIDzWLYCtcAUismThhoFZnQUNZ2Mr8ypX8Z\nPKefs/v/6y6LPKDQwSbdz6oSGwAfTQO5n2e+MWG+82TBag9UvyMp2+hClpnF\n5M76BfFTe1HnKOEvaurwKvnhbfoI4lafneVJBL4zfJL1oFNZXrurXxEC1YAm\nSPHg\r\n=apUV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.63f357dbf.0","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/shape":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/button":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/typography":"5.0.0-canary.63f357dbf.0","@material/icon-button":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.63f357dbf.0_1579816571350_0.21480691802874574","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/snackbar","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cd8ba2bc5fe63e145b85049d1d020c09c816f58","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.f2426d26e.0.tgz","fileCount":40,"integrity":"sha512-Mc1cWu1UQylOwLUfUp4qaUOohGD//PiHa4X6nH/cc03QWgTeVFXWgHA0NAGBiNKvzstErwvwjlP7vtGqCfYB3Q==","signatures":[{"sig":"MEQCIGBTclStmHVaKByxl/aDv+mLEhnIdUOG8mXpcq1sHmT+AiBxV6qhqgcXoRbaQI9tKra4ZRQeU1YxQV2xIIPiSZvQQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjKHCRA9TVsSAnZWagAA/rgP/3cItbI/fR6AQ04LFSTL\nIIZhZ7GOvKsOE3VqmNlzyy7gT1jcnIntTCfoMsTmgPHsxbmCqnf2aG2rMIjA\nF7EHulCN29/FWsjU3sM3pfLUhagk1IhuTXxG87tCRfqtPMPyDlBznRrbbCuF\nxXFUB5tLEm0PDhfhGUbPNqBOhtcr9haLbUYFuEzuRjxPlr2TMLZQDOMPExoC\nptPGkg0jupXlP8frJVQ0DtXZbV5WGJTkZOgBIu457A/CliCZYDeLwkuaeG3j\nvDmwLZRaUSwQM6sxsx7bYaVmc7YqcY3C08jcJVxr7ESHFlITblVAatmGAaPl\no5kK3pfSge33UI8a5a0HPLfPuyZGBhqkxW/wVUx8O/Ot9wwiGYz9mBOX+E3f\nnTiSqU4COsy6Qj6Nrk1oP/A5wqvny4/ftbKMozVRjNlmGdMR9SVXrTwta4j2\nPjdse3QMDYKgM05K4OzH6NrmaahmQLhXixNnmgvSuNdyQH7relIjoqeQ5QNp\npYuyh1nF4MUikgaPLFJU6ibNgwpUkbKaWEWXBTL0aoUBUsQbSOTk5be1oPQ8\nByGV9GsshSbaqd4Y69WTcqNeFttf7Y2CfGlyn/EJUcU4zobZGJrKZEXDKg/k\nbD42CTtGDBPRsxvvx/YYlv5Bq8kEWExzd6NRnbUIWNcVuJBeldxtTARL6TNG\nZp/Z\r\n=6CQ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f2426d26e.0","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/shape":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/button":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/typography":"5.0.0-canary.f2426d26e.0","@material/icon-button":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.f2426d26e.0_1579823750865_0.06677545729822265","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/snackbar","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a8f77f0005532ad6cf64b9cf3d4b757549e9362","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":40,"integrity":"sha512-hB4fejGQc/sw8hL1fGirnwT738hKc6pWU973Ia/mQZ8F+PCu2f7C8X30TzghFEhcJw17YXdYo4Fuo7MiXV+nvA==","signatures":[{"sig":"MEYCIQDG1h64CQ178JlGbm2orI+6m454TVezCRVU70p6N5bUrgIhAJ3zYz+GwayFzgS5lFQPi8/FNeUAH95+2S1AfgqChBjW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/UCRA9TVsSAnZWagAAPgoP/RBteh3hWnRsKzvg2nEz\nyi7m+FK3U+5+ttbxHSmfnGfOs+soKq6p/ldS2Vz77YUfQdtn2xWMEZdruOIe\n7JtdRD3Ooub61DQ/W2bMIGXCheLk9m7y5iijcl+CQYytvdTp80lBPc/7sc1u\nbVOwr+L+8bihk6WU+omly7eO6oZmcxBXxybzIgu9CqO4pyNvB7iog6ChtpLI\nhQquAJEv6n6pu3xZg6p3z/2XVjgL9Ry9Kj2qlCBjPbtZultwppgPwGMQfD4Z\nFKh59kaAeF9rwLI6AQDPXzbxUSYMhjpfWbsHx0lNT7q9+9IPrv+KUiMDgdQH\nuc8RdBewjr9zcqTQkzxKn4XLPjEBwLMaHr4ITctr7dqdmyJ3tNqyWaTZSnXL\nhp3GzzMrwgm0FDRD4vKNSORK7raCa8j44WVf/gQTHyxhO4J/6GttLoq2lLeD\nrgVEJXmlTjGI1O/ff61GCk0bh/d5VInfVHpBFpFBnH9nxjQ2UHZj5MTIEtRt\nfhNIxZFuHi28EgRhkIxBx+oWqiIcMBwnh8bpQZAv/0pfJ80w/0lphYKP0tss\no1epwThQL3GJ4E+IKWw/KcGNpUpbUp6/Gc1mzIzeA4zvtkCucs5meKLMJngm\nHbfP9wr+qRM8OnME/2cpeZ1MFvYcUNERuk0WXItX1ybltA5uEu19HjLy/clK\nmG+5\r\n=xXLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7f5e0c23f.0","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/shape":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/button":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/typography":"5.0.0-canary.7f5e0c23f.0","@material/icon-button":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.7f5e0c23f.0_1579884499860_0.07722560719534322","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/snackbar","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4693aecdeb76c0f4fa6ea852c0810578ee59c7c3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.3fc3ab520.0.tgz","fileCount":40,"integrity":"sha512-ThSE30dtvJbky+3Uexr3YDcSRWwtqWN/uddCiNRFzZeJKWx3aBXJCIuGzJQly6LgtPti9UeavxObUcnh+eqVfQ==","signatures":[{"sig":"MEQCICGacubQDABGCVQg3dBTnP5mshZXI5piIj/xQDyxVnoIAiB//K1DWzEEIwtAVrapO+vGFlt4aHDlzN6mYnFU9LgtWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyezCRA9TVsSAnZWagAAGFwP/jeXCUn65S7xc4nK0+FH\nFZFnog1ykDXca5ih1tx0uaa89fUXrxuuMNC64a6t89b8JSUo42ZAt4pJ262+\nP5L8tTfXQU4gG+innsT01AZFFJbpqNXygKbLDOzGjTGtitkzNfiJaojPCyn+\nfmD8YNISXA4HC4v5qF6KgjyBprSBwr7alrK9zUsI+Zg7JGpSg7aEfshkqMR8\neml2Fqldu3XM9DZYad73MOGQ8HtKVzMQ+Io97r/GwuOlhEJ8sfbOGlSQVjo2\nmINTTkkOBPUiq/dgaSMoTWhGoKrgdls+B+rcTbItr5/D8F2Sqpwb6GaGjl+2\niQlXxJ1BykoTWeDrSZuFJn91y55UQC3hsqEaEnCMBCng55LrV8ZDkZ2iTdRh\n8/t0nq1SFbHc6osLpYjjug6CuTHq7z3PwN+mYfe2yBDOJtq0TT472ruymFpC\nJgkvOtZ4OKCD6NwuD9wARi4B96zEYJL59M+2sDwAxifcSRrS2kjkGCKU4L5p\nDYofSwdOho3XnDQCRrHcZ8vnRAodb0jkLdEQzQULYTnBMJ/j4/A5R9NWqife\n3TNAHGYRGBnNX9YZ0D5q4ainevl7PCGbt6bZKOttdHTHMCVYHl7q2XNnvK1t\nGCNt+JutMgQaI+QEX/VH5F1wgWHN4T8Wm2XDE/tl+ohen4B4006WgsIVFFKb\ndWxJ\r\n=Bp+U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3fc3ab520.0","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/shape":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/button":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/typography":"5.0.0-canary.3fc3ab520.0","@material/icon-button":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.3fc3ab520.0_1579886515098_0.6116257571819934","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/snackbar","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8ab651f3baa042a7c6653ca1d791fed6341cdf2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.80a4d326f.0.tgz","fileCount":40,"integrity":"sha512-kcxE5Pu/QpmJdWfANUPpkIvXieYd1XFkvoZrHBjERcSsVgadp4vswHkL6ZOgAY/UOtW4d31Vx6l/OJimqC1JOQ==","signatures":[{"sig":"MEUCICbk3Ugr1DiNpEPXk1bBiJlKPOdP6nCjjRGNof42akmfAiEAghpthVzlc7SPA+QJtm1zOnlw3ZbO4sXV2fnaMahm/VM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1ezCRA9TVsSAnZWagAAZ8YP/1GayA+Pfze6XE9IAe3s\nQo6CeV5FGbUyMyEkYdYOmkQ05KKJewBX9tQtJ8TG1Qj8Wd1wYaVuwGcjAOtb\n96xAyJ6I7bQcvkdqaUDdVR2RF6mDuEUP3G9UHAY4QSfjEzh3hAHRcn5SxZBa\ndPA8NhgShrkpsmgcyv5ocdyLzikv95YWkMyYnlUlC1wTAn5NdEhtHCFpQFrl\nUFPEiQIanWki/tj2SyLmGjYKuxQ1KSTxBQFc7sxqIBDMKTDUpOteWYneu4Y8\nnTIdXLsqW2y1tV/NCpcuiJHffhu8HlgkDG3zcyW5owPCKge7ziuIZ1eTeei9\nU/Q+vrPDPaEOx1/ghXce8/u76RrLh5qZ9eNuhWT6C5s7TpDfxq629PkRHTu3\nbd/CXNLXL/eOlqAmuACpNJNYZmUe+fqbCPG6oDbsvTV7nj+p+ZofPalqtHAf\na9xV+rL10z5Ze84q/WUXPdaVTDBTvKLifWNqwfF2mtKx1Jj1YMXvfc8d3cDF\njv4YpfjbUFt2wFreHIFzktLL9wY/d6GqAzN8iJt6G2NCwify6+Z4naCgGZQc\nC5315G/IslWbQEozPzmgf67mQPZuHcC12t2GVEdv6SQSoe5j42dg/hPs7H6w\nCfXh2Cr8RL3rGwwqscD3kHBaeJ3hKwkq959KOQp5trrbqifaAy/LTNo5TuUL\n2hhy\r\n=GlT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.80a4d326f.0","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/shape":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/button":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/typography":"5.0.0-canary.80a4d326f.0","@material/icon-button":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.80a4d326f.0_1579898802828_0.7837647309348974","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/snackbar","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82cfa9b45b47819b04cc91710fe83b12f59ff51","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ef7de4def.0.tgz","fileCount":40,"integrity":"sha512-zL/jOXzjRQNro3IBsF+FlRGCN0iCw36LHlwWpL1qrPXTmu9wEdc2DErOGHRcjuLeaIY6SBWIgRbtQyljuhYFHw==","signatures":[{"sig":"MEUCIAKTPfGDoCgFGyBe9C0e0SNZh2OOOsInrV0nmkhc55xeAiEAry9qbdb3TVlv9mS2TMeTmP535kayZJzY42cj7PFgBPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KdCRA9TVsSAnZWagAAEcIP/RBV1NsojMGHX5cgN8o/\nwVf0klKy1dYVteqqjb5dC9Dzo7srNzp/Wdjp/u46+GqLDC2OzLT1H5U/Mzb4\nM4er80BlBhJ/hSz7YOi5Ppuh0nnQYFDkaVqYE8oGyL4lAYHEAXM5qg2Gv5fl\nsxKZflQ6xxWmCTRJmqrSL6um7PebJP8ZxeES8F0M/BfpIvjYbrHJBpSU/gJJ\nw32tSeeg0PRH6UKbrFbOG7SLPevDyEZeH3ZywWnwCUoM5muCH1/v5xhz1e7v\nhtb3axfuQ0esMKAvW1+tklk0szVKiq+Zk7IfrBkDyu6Xv04OfnCQbaYo4B1R\nng7WuHMPoCaIpAgq9CBKc/1j3TUkOdtoYyIt9nMiHSIfsCprMM1s7GniKn2M\n/E8lQszRCT61wLEe6vsL8CZeNIJzlRUEOhU99IfEkdCPvuhvjKy1UhDp7a2z\nSfqwCQ3vGLRPFznFeZB6ZDXyevB/U3zNUIVYLVX+LPspX+p5Dep8E44EjGuE\n7ym5Ti3mJAP5X5SnzGPh0LoSHdXr1nmmEkJQIxRJLJtP1SOPt5TlQr6l6Q4r\nw7ULsOs9+AJtuTM+9CTWZKk83Pe0uQLgigNEOKCYUkEH54nnMs0bQyQzjr7Q\naPCJ6F7bAHLa1zDxWU0mZLqYox7u79yPciiv8IWjiA4H2SrhjQo3XBF/YXgk\n0pX3\r\n=Y6eV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ef7de4def.0","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/shape":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/button":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/typography":"5.0.0-canary.ef7de4def.0","@material/icon-button":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ef7de4def.0_1579901596697_0.43820540152360055","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/snackbar","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"258f26076fcc54a6f92f0b2d25484793d1531512","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.93e2288b6.0.tgz","fileCount":40,"integrity":"sha512-MPUQyNGw68E0tI8YTlTg0lHjp0lP9w3ICrzEKa1+SdEofDSrvLe9mrJZDFkuF8FuYL5cPmPxfp8IZkYj20UhKQ==","signatures":[{"sig":"MEUCIHd3lRIAYUVQ5XKAFAPVOpNiLtxaQo76DhK5BChnTPvBAiEAl0OaGbZLutch9LgRBgkMU8d99DrtmS+SZP3H4ABJnCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGfUCRA9TVsSAnZWagAA6X4P/1BJbMAarOwocX5fFBCQ\nDmxtoF5EFNiEaMfD/DRkL/9NKD8wYdboroPN88C+7idHn6dII2y2JcUj1Hrb\nh5QfYJ8Pw0dIkOxzGec6nubFlKTl5lqzvdZb0Mnjjsvmwcb/lRi8SjdOUYah\n5K15azGTN/Ayeck81c9ZvEkuRLFuyTl2TbqcndY+bxi9Fng7IuCc+76S/h8t\nCM6JigWFVycAxv5necEVPo5FyNn6/34/Mshb6iH5JZbUVg3yswSWhOaKeyC1\ni/AbCHwmleLqR6MlSr8r32N6a/RgFdI53XOQD0WHiVJ1U+6kUjNPJ3ViKh3D\nEz0a+yUEucOQIRdCcOeGSBRYmv7drov32eqjLl7d0zlCGw2Jp2tB13eykbNm\nuNp6aM2FOoVV8cLTWDFiIKuoAMXloFUgZbgxVoTVKX4XO1GH2lJ5cuSXGZox\nxNvWt7gyNu9BSZgYkclfN/Nzd/vNpLYWsh/miwgkfOV4Rj4ImkyX3fqMce7+\nIwunQkRBTTXEmgoyVBiKGGOA0M5fBF5XFmtX8Po90n2OpSeFVnnxe3iZ/Dzs\nS/XE7a0SY40krbikWslhwLbzkFYF6D64PU0CMOayf/Cy4xLE3ikN0PFww+P4\npMmBiYZSKXh1zz32sgyva9gQZ4LXR/yt5KELLcFhb/tf+T9rxk+/9JLAAXeD\nV6t3\r\n=BYyT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.93e2288b6.0","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/shape":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/button":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/typography":"5.0.0-canary.93e2288b6.0","@material/icon-button":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.93e2288b6.0_1580230612429_0.8718988721345691","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/snackbar","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68012381b9706d9d46e32db5ccbc104153e8e455","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.34ef15f67.0.tgz","fileCount":40,"integrity":"sha512-XgYjQYRJmzOWB+XuyHJJrn0OpMN5Y42VYmImI+xPwZ6Wg+ap+Wtm+K4YYfL5oXmT5Vzz/eFf71FLit8/iAGICQ==","signatures":[{"sig":"MEYCIQCUOxu6cvDtpvtnvd6IxDgeA5U/ycyPSomtth4QRlgoYgIhAJwm5i4imWxPOjd/3Voxycr+OaYMWy4RsuppqNwNJutw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5uCRA9TVsSAnZWagAAJRAP/3bBS0zjD5ms+q2mNNbj\nI0xkE+pL6Daq3/IPJuh0hC2x4qk+LtVJw8txaYvRAwE2+IxrMiYyS9Inpovh\np9B3NpvUW88wQBwW2khDUzX5A4OyhNmA7pv8KMm/QEBMzdX0JtKxUWbJBY4w\nI3cFj1BuYaN85NQRx2bssxvNM1cwym0QBywOIpMvojlv+NXGCqd0wt5IOC3g\nFwgLEkFdwxAGfgvI4OGYD0mb6uSxwXXrd8q0/cW1MjErz4Q7ka0MsJdPM72K\nNH1VflG09wqou0grHj0W8M/A4hhCM4KqNOvEY5I0MqLXMAxmK+dbI6ZYQfKe\natDVxHAxQKwA6YqdtrYFpbCkUJXs2UhfDV2zYkdZnTkOkvUKg3R0G6Cj3Iop\nPsDyBHBWoEvyJLbF2yejHLzEPF5WZtJgj6S+zYGU82FS/7kJHFP3lKjpPbh3\nYlURh/xk2+dd/c6qfUOL6yfy60h44Gh9IF6WiCA2658Z98oQu6f8VZYIEtmd\numJJBqam1zpuwLIocPMLV9CoGQf1wSzThMUNHsIbYTyIw3SIK9fNaLIP+jS5\nMN9ux5HNzFcDr9eEJSvz0Zw+CYNnfKu19gV1vlJJvRnsOiLjOyj/XNZKqWeK\npobIFfUYX3mq0hBuNp1Nne/FkVkOcMZCWSK9ToiGkKZ0R7GHEH6WFNGaiAKT\noGvB\r\n=cyOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.34ef15f67.0","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/shape":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/button":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/typography":"5.0.0-canary.34ef15f67.0","@material/icon-button":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.34ef15f67.0_1580232301532_0.6080047194566092","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/snackbar","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5772181cd0ca422cd04a7f3be4e7ef7bf4220187","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d3d176ba5.0.tgz","fileCount":40,"integrity":"sha512-6uZBLQZyTDQdx9aASTg/sPc/2A8ALjY8BvaDs59kMJFlS+QnyUSSeoBdh9U+OhTUX5So/ZQGrvWEsGKQL/OoCg==","signatures":[{"sig":"MEUCIHolpL7sW+7rlBfxPE/JcYBztUYRJBnuUtgd3zUm9d/tAiEA/1UkdnzVJLzSdzkzgfkm7DE/AaVuTz588q1mUl8vFUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+hCRA9TVsSAnZWagAAWrEP/2gehVQonwLdSmslQ2Zw\netzX/pFSpGlSYUIV0ntkN6fS4m864EDXHDMKOGkwmDld9dsazbK70fX9MoPo\nYcib51HHxDJwqq/XMxSlRan3NQnxEmySTNUFvu+H8UBb9iBr8RnaGy7L072M\nt6g9lww5sq0e25Snj2LttNl+Ir0AIxL0VdQ5HCuJFq/Q+Ke5aS4hsRVMCY21\nS7X3pLSIiYopn5HdsmgJjnW6zasI0uV5LJ7c7urXQ1Ch1S/fc/awhNZRLUbt\nsWD9gU0nSCX7CUhgC/egGJCkS0iWV2hwmaFPXy3GYJ53z7CZARfTy5aW9//D\nVv5VGwC83qYhIgy8Er6smsYwm8mhoSWp/ZDpM13X2bSr/oUSFSQJb9lPxTWE\nDnklqvEgVudhTBDGOs61JPTUwFw0GRqAKgOEknn2qx/8yrcy3tZk4s9xoYpA\nRj5C/PtzS37lzqwrnMbXFBDIgBdrVhT13A7cIVW6s7iCUtwBEKUa1SbAJlJZ\nquasR8qE1cDBWrsP/4GO6sIh3UwZXBlVbVYP6Ac4C31TL5GpUlUKJRyMZmfi\n38WKyyDnYyYvd9Qrha4T9P0yQnjPRbUr8ZMrOIXo3XVXotVdMT+fgQ7tmSMG\nVO4vfvA6xfoqFm+VL6nDy5hwDLe1x7AnDDgrBPuKy70oeEUT0lGSdlgnK5z1\nOjfF\r\n=O70j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d3d176ba5.0","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/shape":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/button":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/typography":"5.0.0-canary.d3d176ba5.0","@material/icon-button":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d3d176ba5.0_1580232608470_0.8811155688109107","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/snackbar","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cccef9c76df145e345253941726e769027ec74f8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.32c1df133.0.tgz","fileCount":40,"integrity":"sha512-SBq/qMqIkXhPaOSBV6grebFeZ5uOjmf/IdRbSMGTwI88KJvZ/gyJ84tMJy8P+mdtJYEUgY8dQG3dM2yApUYUPA==","signatures":[{"sig":"MEYCIQDVfLVCZLzLncyd0tFZVDUxeg73FAqrjg1OfjM9aKgwRQIhANZbyn9Xp+BWoZOd7elGjSeS91joGrbH4l7UPwM3wxva","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI8ICRA9TVsSAnZWagAAdYAP/3ul8wFVbIyR00NI7s8o\nTAoiAxePG3dTllGh43hsmNxom7UkgEvIpf6MAZcJtXGycJWZxDT1HYTuzMsI\nbkVuijfcKomLg50nWM4rhuCeoa3lKf+901+wgnHMu8m1mcTLrIsX4FiH7OWl\niQSB2RMvqWfCRIZyiRgFAU1xxq9kP0b9mtaMdMjJmSRDCGFRnnkP0/AWjT7b\nlrNGLTdMF9GkGekb341k5JWqEq9cQsibuWA5Q8ws66BJiRfCCKNf6EM6LquA\nnWPsG2PoUBFCLROXUMRbkNegVinS8P3SHwq1rA38EeiDWGV9Ax8QvgaGIz42\nbt5mjMAoF89uHCR1anYl5HrTohl5Ju+41slkEBtVly3DKPUF1FfShDE+r3Qt\nkhxNI6YZ7t0I/MZU+Sd02vVDhUANqOI4GYh1MtCQLKazKaR8eckvOL2SQqGv\nd3nvVJqBMexnj2GMvOKYceNGHCuCINhVGFcZR7bi9ruI6zRI84CLQNP/5lj2\nD/ewQ0QICKEE9JGNb7Z0YNpJ7CSlBmaPIizsBHsyX9mwMwnIgTcVfatKv9cf\nCu5NTBjLAKmqwwHm9ZhaPWhXgyBE+s8C61VmoQlLtzTx5/gREqgXjZ1bBUhj\nBPwFV2QIJklDWpPjC07C/kK75tpAgGLgIzzA9EQsy8CalUAI3kd2b51TMAya\nRC7l\r\n=X62K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.32c1df133.0","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/shape":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/button":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/typography":"5.0.0-canary.32c1df133.0","@material/icon-button":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.32c1df133.0_1580240647818_0.5655391067893598","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/snackbar","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"810226a12b73c3561e8b16f4e91116abb29a952b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.f3adce86f.0.tgz","fileCount":40,"integrity":"sha512-clZarMdV3x7liV77dMquwc2Zp5O5KqlI9H4cXFTft3gmInu9VRON2PmjssLqCGUv7jUs4S5CrGbLgNM49NBQEQ==","signatures":[{"sig":"MEUCIAGEgyb6XylSHIoNRMUO6BmOE9cdzS+PuJUko7BVnTTyAiEA3Zi8LFQ2jN/Kg6sOZLgmAlkL4xq/iO2b3T3bieas44I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKx0CRA9TVsSAnZWagAAR2wP/ifJtWHMonFrxLWVSuT+\np1bN44d0dwKCvPn95KRJeyL2Y19rOxyy6JBbRxVlJ76GPfToJ5dtgWcZBDuN\nLJdK3F1RJRFt8cQJkkGckRyjReubxNHEUnHIaJYkZyOqYCG1NErIu3Bp9vfc\nRp73388VEnmpa7gUA3dbSE1225H+KMc9lgSF0jDWO0PrFaTxPzNxCghs3hv9\nIorqChgBYHtgtLe20Dk1ruojUhc7J4pOl2lyAI/PSFvpmMluSplmYcC5lzqg\nLVnJ+sjJWklRyOi8/wvazwzOSOZ7jHHlpuvSuaXNdlrvH6cb32+gY0hmWKf8\nKLAKNv+GP9VEoxGRCu0wkcrguYjUOXAjXOesAb1MHfNLnt4H7OkAtd/4/+n6\n9/KjmyQJYUUXrZDEceS7IVp2rqsl4jWTrbzYiYtXWg75iZBivQIDRNrU2/bx\nyxXYeD69y99tGn5wgLCuehKQf1ZIMMHc86G5hI7a1aeaSAF2QyvJN/Vwh1SW\n/VeCvH3cASWEeHQtNllZJBLcUGCMWiDmG00x4dIX99MWZkyE/QU/CzRtCr3x\ntJQ9RofZRMoLvNOj5H2ECYNusOAEgGhIYnY1AcEZbskzcnBKSDy4bzZ1KID5\ndQSpJe+IVPAX4aLvKcg9Q9KUeTAPe06W6A6LAmbFM4dUfsVwqxM2hguChYNP\nniJC\r\n=p96T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f3adce86f.0","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/shape":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/button":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/typography":"5.0.0-canary.f3adce86f.0","@material/icon-button":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.f3adce86f.0_1580248180046_0.3500301279668996","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/snackbar","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4571eb25c67f7dee9f400957574a9fef11b236f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a4423f890.0.tgz","fileCount":40,"integrity":"sha512-shC3DKait5RRUvw8K5dN7hggv21EPetMWra0BhmgaL0lOGzQRUoLBeOGqdevoneruzn/FPLmvZ+XJYrIKfFqrA==","signatures":[{"sig":"MEUCIFNASbTbgt7xdLVUdrXc7alpRx3hZCXf2Z8agXhMgxkiAiEAjF6S+UrEEfwEFggBT/DG2LU/T/NSAb7NLqe4yelkmqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfTKCRA9TVsSAnZWagAAXC8P/191IaSqOqDyW3VlHY8L\n7sjbJNSrbFmcp7Cel+L7h1vF6f/6SMbUIsq/51AXTXyuF475JB7qT8YH+/pR\n4BfpPQr1LYp1kqDSTXjpzFm4IeHZYYUPKpP4I/YAbpDrrdbOdELh0WmEFbFy\nnQJFRjaa0ABzCxLZweW2BawPDdVXd0X+O9j0ZtBSJMud2M8mz/KN4UpnCOVu\nRcLXsx2KW5XVJwElfYMn6UGfXAwlftM7HsdFB7hMWB3hEa5FwmaDcor1Yi0f\nUvHgFvNV035hVlALnK2+1NOy30JPJndcbUznB+vAfWjr6clpKZVM21OMViAn\nxTloiVKoB3P7FUBbbJ5/4CBrhLW455QN+KoqF0VlicTmqomacwNgooF9ZFGC\nr3HMdivymnTw3EIso8U3WY739B/hHNp6yT/Eb04EqjsL6GMwmQ2AVgD87C5B\n4mceIpG5dxgt5jzSFkIh7SLHqgHXj+piqBW6pBQEDhunOw9Ff15FXuvKKzSF\n4QlPE184W2NydZeyzERlCHbvCvNrb02Y/wQT5FRraL2fH9eRKqYSHE7rrHHL\nXJzyhRUr8P5CDhZpigNKmiiWqejdwDtl3XBbfWRU95vaWF/loQuPm2MBtrzk\nEP3j8RbIrloqXhRInYvc/YDQbfZDqmnypSDYGmDTVSi2cUDJ/9Lfb1JwKlJy\nQdZA\r\n=Bc3i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4423f890.0","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/shape":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/button":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/typography":"5.0.0-canary.a4423f890.0","@material/icon-button":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a4423f890.0_1580332233800_0.9626529456510484","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/snackbar","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38881861f8d76fc74cd3ecf641e6309305e8bc1d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.9351f167d.0.tgz","fileCount":40,"integrity":"sha512-biUPhPmTYKFIofs9g7BqyolyR3qvMV6qyvsVG9Cuwao/3kaAwM+JZZ1xZ4H5gzhHum0ZZfGQzDVSs9ddR5HovQ==","signatures":[{"sig":"MEUCIQD7QDN5hLR/ODfRuBAz8T29H4pd1Rsw89JQO5oXbMWeOwIgE8ZTa9EruUFH/P6Bnr9tL005vHH8Jkrok5KFTTDupE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf+QCRA9TVsSAnZWagAAJWwP/2YeDdl82r+tv/DLLfsw\njvVtxW/V0uf11AJvgXpxfdxZImgv75veL8EZym5yAGRRMBvYizblCpR8SXpO\n4C43OYWZiGQ9NIpROCWN48wFYumXS2ZkI/bD730f1YOKHHcqXbmbYMEGtWjY\nfwmx2AbhndVQjiVjMDogKLbOD4NoNGukKD4A4+Aa2iKf97dCCBnfiBt2tAlZ\n1RgfUMcbPDrVaU8LYxrGna6mvyGDkrsKW8bns1u18Yeyklz8wgORlPt3zTZr\nj7i2m2U9ua5p+dbgUphHkdmOKd9EyWNI+kQJQQxksTYBmBjn3Jj7jexq/4hC\nwAAPhf+Pfgadz0dIktQUcJgVD1Y5kKgBMK8gw6yuomfuILVesqEFsBW0zUO+\nakDLXfR0jCW7UW2bI/xoa/m6fIgf6lMovpaUfdEUptTq8R8yy/PhA2K+uB4a\nOMGiRZzhN1ZfHDKX4MQIEcMD+siaBnphFUa7CK+2smc96HTepvfBF/kFfrHF\ndmnBf7CwQ1dGWRdmtyswIEJGH13GQgmGDtCyArtKbucW9fDkE9XRlmCXmPne\nPhWSNpppSs48lB/wvcBFYYnwbhATV7ZcBeo4GtgBAW/rUhknvR9Hfv/zsG2k\nrYhioP+05e4oLZmu8Vur0Gs3lFnoT4lHygA7MNZEzsbw6BMUpPKzYzORMiDb\ng01p\r\n=VdsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9351f167d.0","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/shape":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/button":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/typography":"5.0.0-canary.9351f167d.0","@material/icon-button":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.9351f167d.0_1580334992227_0.6389374434878197","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/snackbar","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0b042299825b164102b1e02a09ac16fdcbcef52","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.29b89dbc1.0.tgz","fileCount":40,"integrity":"sha512-Lh4THeT4Z1q7dSXJ0szrkFlq+az1Ffgm8C9VeKFHxrX2yWaiYZB+x6YyNXmPEWfdaw1WC2SSCfxFjjZr8ngQRg==","signatures":[{"sig":"MEQCIGx/2tN19SfWb1oEmT+wUvwl8/ISrVmSlX4AFyq43WzKAiB9bPvLNiqcI3AovomI22B1zcrGChWN3BsnVaSYr06P+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRrCRA9TVsSAnZWagAA7ycP/3HLADunhLH72HRfCVf9\nVfQCp4Rp+HGObL5fisp4tEuYV9AoSLyiDopEYLSXW1iXYaqoMsoUVHJvbQw6\n2lvoWVbEGDiLnMOdHyu5fe0h1V4pw0BxnytXAzMmu9gRb+se2LjDYpKFfc+4\nwUpdUgUO+1rEbG0sCyJRkXY/30AeGVTeGw8h35aLqbjz1O/qfYWIGAL2gcxx\n9LGkzIWJF47Mbr2B+9w1/28kHhuJuHIkoU+HxAmc2UxuL8dIz1M5/wNUWFTR\nBZL6+JS02zQ8gcPHByrmWHmZD2fDOYftdL4dn26VMfBN1yNVsQll6GTQN27H\n+pEaGWgjtRkNcKE03jMY6z/wPtS6CLpQjT1roYL/d0fiNLNb/guxrgy+sCTU\ntx6rUY3amjBbz29YpTalL07hoV2WRWwJOzFCiDZPQtNk1uUw/Mi/143axpPI\nqH++lsuSFsWPRcKwaftk1bRINMEVCKZmscEQAuSE7oCYyy8OeT9mcLwHzwcE\n5EsZWqyp3j8iwzASUQ5b+a5nq5ZV0FL7Z42jEM/EzZX9I0pDj3NdjdmBgBSk\ncBx3b+b9r7aMA/m/W6pxtopkxqgq5o2HejImL9cOr9gCftfJoMqdRcnNq56D\nTnDEtiU6wmgMa//09MWkb+saE5sL7XiTpiQArMYvjrb/aHIoiDHypJXU8M14\nPAgk\r\n=8njZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/shape":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/button":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/typography":"5.0.0-canary.29b89dbc1.0","@material/icon-button":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.29b89dbc1.0_1580336235624_0.5234298783790823","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/snackbar","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"365ed094d4b7e1d6856379f12da8b03f221bdb2e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.45985457b.0.tgz","fileCount":40,"integrity":"sha512-WOqBgS9Ki2M3X0lPQheYJuXLqCpmWh9VLFkEYEla7mLfdP6mGJB4pg1+RIN2eKTeYXKmUcs8zPmNc955dAFbUg==","signatures":[{"sig":"MEUCIQC4dqkDoTIKPC8hM5yrtVchrsTllulQWHHuZ92/CU0PXQIgdW6E5VzFgHxuMHB4IrlQ5ktahZLpmUXat7ExNeteWw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZmCRA9TVsSAnZWagAAUecP/0HG0LtTMzC6ZxYw19zN\nLKDNsQQ9xe6qVoYGjwBrhyMx3Uum9FzkggE/REGNF39Kqbd72zV6bmPJ/OCT\n+zrjYwKSMOQ0qRo1CdO3dW881RsnqjlXWEpSdWddGEpyH8JCdMaqndbf7amC\n5zIAqSpj4zBikprNiitI+9EPP5kdfMkLAAt4LvCKcKJvZVo7JZWbKHsc0EUz\nL1j+Hh3RmGtQNtcL8VMjufJAX3yFUKQ22LSD6YX1zzTo8E4Aq93aNnbld8To\nf2rptkIIY/ncX2heI+zzzEgVdut5O0PHrse99JfqkHpraohpBPRsTe1LT2ul\nfm6FFKLcqAZtgoznMTlc69L9ghqwAGgtqMfranuTlSl4Xx06LNjDLg/kWY91\nw1082at+3OiLoX4UWoILirjvRzDjB0pkeHPX34ht9oLAojbsHigqQREeiJBi\nsgYMrEup9ONePw6ACPpYQhFg7bGZi7CmlBwWixPvOGR2PAFFkf7f9q1nkjvR\nXyIMeJSSNo5ckkGVn/89ydhZLrmd5FAeKOnPAV03tgJQKKBv12ajrIyuzHMH\n0bNLY55Y9pB7RfTRwr8ssabHCf8PfHQsxvD8ePYX3wDxEfEj/RWK67Jtp36E\ngq5CUdTQrwm+IOHRDnI+xYcRdnlIevVMNR97ODNfDx2bwOANrdg1If5uCNWD\nichf\r\n=oQDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.45985457b.0","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/shape":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/button":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/typography":"5.0.0-canary.45985457b.0","@material/icon-button":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.45985457b.0_1580340838549_0.44593937085623714","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/snackbar","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1805eb0d72bc4116d022099f5b8f188ce0e44d05","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":40,"integrity":"sha512-BOZRVlEol6Q3GeKu6KS9l8YmtJZgz4ej3KpwU0JaMnC5e6I8g/KTabL+aZXTAt9StMIgNPVNlcxKfKsCosTL/w==","signatures":[{"sig":"MEUCIQDow9XJVMGkXGgKUiRmUKlIPDQReFlXVN9O2HLqK9b8bQIgEwxfq747chAGUfd4htH8jz8gMrFIFpkOSAAIbn8tmiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxR+CRA9TVsSAnZWagAARC0P/1xnvqv8WOfcHow4+nYr\nQYEObtv8Eqp3n1P9JiFEabngr+HbIGLlonfwb231/rXqpnmmtnRv+3iVz7Z/\ngWKmpEh7HxYPH9CrF4etNwxCezqH8+MAty+fIfw2SXwSVWdpzhlWMne+OOHR\nOHLM28Sbww129BX1aXY8xBP1uPVPHqlKYmRN/GMl2e76rc/A60641nzgagj1\nPVyULGHHmwU1rl+ga/D5esgouwhA8Zh/U5MVSaXtEdYi7G/Rf70U0jyLzFZY\nTqU2CKUFEb4fepne8t0qusBV5HzyVXLpHCDmHQcJcTZ/6EqclasTeLzq7jRz\ngnH9dhKs3fwgYZGbWQDF+45jIzVTuF1xQB6IaKE2UtnzkjSdVf4IeXVO6hc+\nADsH423I6/z0NnEAswEv9aJka157ZL8RfKm3aV/QsRSoOwcJzIQq7FglSI/U\ntbuqCAHtw7jLruylNb81SYRz37OJlAoxkJh0oJHFXrzJHXvjMBVswmtwmh9Y\nxrl4rRVx4VXwMCByNXLHPTMLGB4QDcIN097sWK9Xie10KqqFmGyYZTNN5ZDD\nUTV/0P+fz1p13RrbfPwXrx4HRp/F1RrjtKIuas/kM3Zt/ugNqQnryk/2yMOP\nmZ5wo1EBz2ofjudSIWr9HVvSmgUYMXDobQHVl0cfVb8Lafm3cP9vcBddCq0r\nj2+1\r\n=vrgL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1a0deb3e.0","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/shape":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/button":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/typography":"5.0.0-canary.a1a0deb3e.0","@material/icon-button":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.a1a0deb3e.0_1580405885528_0.682702972059338","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/snackbar","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c511b42fd539a3066417e3839bca17677d2c544","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.181486643.0.tgz","fileCount":41,"integrity":"sha512-DvMxPrv1bV+Oxcj1D0aAONQEyCnv5N8UDaXgolRXue/2pHju4isJSyrEXqqnUcQT0OaI5se1UE0WZv+Y3SOyPA==","signatures":[{"sig":"MEQCIDG+ld6m284GOeinRRntmqL4SZ52KZDwInOQH9R/sNdZAiB8FaWcs06hSqMWJz09CjC/gqXtB8p7pUw+Zk+7Iv0jlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MXCRA9TVsSAnZWagAA0ngQAJZB/kN3KA1owtcVejuT\n9GxfKnHKHo2+lT6nO7eSs+roGY+NvjxZ1841SPZAQ75aO88jPuhbbgl3/Y8o\npaA4VvR0rMCVDDG51EELwJMtUVkGzWVI+OUP2ROkZDEfGmhn4dhpLHODej3F\noaKJdOkl1BR2ONLIuL9I/SDAgZhiK6EumJQHqbIR1kj/L1UW0xAe0I8Wvx3c\nC9iub/WmOpOkoI98l6n2dAUj9E5Fque1mxD//Kt8XWLXkL8G3jDoY4tOC7Rd\nsJhuXYUZpZ6qUomQN+AujMAh4pnzqvUH59Ro2JCRX2olKs23kfIQVsHr02xd\nqhCpQFmbW1iNVFOj0ouVgU4U45/z2+kJEXkfQacrCgh1cIixif0qdCKiQBlu\nyyNunXpFcv0TAXPKLOvu8ZdFPrwvHMssD87eUlyhJH75AThHyHfMPC6OqBK+\naTndOmAxM/yptBuo7QyhofCOCNyb+3+LgEBsAFLFAodwypu+S3LvjBE5QH31\nzvsGwEYodQpFzeBZv78i6ZV8BqJikhj8GMw2k/3b9ovmc1/XbHbtYKktik3W\nRmWQFJleG9QsDSp6qHb2dnZTmI9XJ6JkDcjlaHmXJDjezp5qkLnx9dgoW/44\njjjQPBNOzYMYqsXiwYUidEzH9KVHTC131G0PrzBoXTc8tpYGIcfowCAkpCjM\nDUHu\r\n=4bbj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.181486643.0","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/shape":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/button":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/typography":"5.0.0-canary.181486643.0","@material/icon-button":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.181486643.0_1580417814664_0.785572388372362","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/snackbar","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0258360bd552ce3c4356b39aa5c37dce39f211bd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.3a85313ac.0.tgz","fileCount":41,"integrity":"sha512-NHQvI0hSXEjCX5UDXTufrzjuhr1YnNIR2tIS2fplJHd3wl9oQPEejY2Mj7tOlNhsW8DrMcClGKmSgyxkQROWpg==","signatures":[{"sig":"MEUCID/VBqFx2SctDKa2ARJRrUw3+XWwFiDO9XyYaEP05Lb4AiEA3igaE5GRzwN2n9HczUHrVx2+4pQDF4Tc0TP4mqW4Iyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSeCRA9TVsSAnZWagAAhGUQAJ8oNYK6XBrBJXFqUYO+\nbi07jiwg0aujRxajURquFI1sUmcVhvM+AKlhIjwy99lRH9Ka0NoIJi9WluMn\n73Lp+lxb7pQV+kO/IZvByp2GfxOHsdtC7wF2yfAJyvHIzyjvLsJNPvHSEUAo\ndF4CVxysTXMs2SNyoI2147BueW5CeXzrsxjyDSYQBLMcCkqUZ7eJb/AOrh6J\nVkyPqPdKkTpnSCsIB2AtpJ0hf0fG9V+tNPFyxi4ZaXkMiMFV62SRCNYpXSIE\nk+BG4+sWtaB2vCSH4Rji3cz2iRmnT315fqrDLd281YfriGxNLtHNdMSyoLQQ\ncKJAjrWZiC6RTiIfyNibLHUJxzxSZGYIPzP5kWxPt7jBqGsOB79i1HRSPiEc\nEekQl7/kAAzqzTp0AWpUpmKpk6pRV/fZybtAjKO4q9CZiNR1LZ6OIxvNmj2l\n6YmbzdUq0pXfr/uJRXTQ+lF4D/vytWDNXDTW/KN0FllKIhJEnX4Fz4KX8esJ\nEvFQ4p/xD/vJmK8wPmpNfE8o6b+QoSkQD8jSvK4fjAn2CunzlTKm41QD9Ran\nu1HJ4X39CXF3jne8r1mGdZbXPhIE5Mw3MzqnZT0ghqpNx3DwUeMdjEMDV8jE\nJUa+OgtnPnK0ffhWmv7DPKmk8JNJuKDJjq12Vg17aPQMVMtvkS8+lJSklthX\nm32F\r\n=2Yer\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3a85313ac.0","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/shape":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/button":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/typography":"5.0.0-canary.3a85313ac.0","@material/icon-button":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.3a85313ac.0_1580487837582_0.027717074835329703","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/snackbar","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4591ee251fdf19285a72f9ddd2b7ee7c00f112a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b6c7f624b.0.tgz","fileCount":41,"integrity":"sha512-8yVehkc59Z24rBKnvVOT2eB4hveTNZHY8G2BHSW6HBgxmv+3qhX/kdtxMvERlVGOfY+ZOLIWYeNOKp2QALfMIQ==","signatures":[{"sig":"MEUCIBB0AqfYNrN03pt1bxO5/NrP+2k+FSuqrN2qY6fRHF6oAiEAgSXbLm8QygPUl2JuzyJ5OWUuc2H9FXnQSD+Sp8pM7Gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3zCRA9TVsSAnZWagAArLoP/Rz2eqPtaK8p5TnjdQ+X\n1m6GFi9tBT7b4187XUP6/CNixo9W+2V6Lcz6UlKuPnPuDJ4xE+19QJIUf7yQ\njFhDRd87DIPQkOkf9QyxlRzfyt7JahzkbW0MySlpJ5fmrgADeJQbFZ20LQES\nLo+bzvoNCoVAeN0D5dUOTVGJ2ZG1P9l/VASV12jL0VTdjq0tWOLfj2cayEeo\nt2c7Oi7v2HuzeY/9ge4oTbtufXjGHt8jjkBB84uemdUJh9W0YrN6oGBoDMDx\np+CTOzaaiIXLOY+uGkwAjbkRicBueDIHsh1m52CMD1mYEoJsWlpD4PCR1VFH\n4L1zOrnVjPD/veQI24QjT350b0IXk2AFeoy4EsJAN6k84P/CGsEyO6enVsu9\noDo/kHBSyWKtu/P6ISnlHIEc+HGzneTWX2qcF5N/voBB/pE8nSqM94FRLFhH\n3aIvVKAd5kgkwWXKcTxPM/at39D1r5UpuHeZp4twuU6PQFx+8KxehHj+jfgm\nM0WxOinCnp7WDFItJnQPy1OD3lyEwDjIMbx6oL2jRODCsxYC+rUaH7PeMNK1\nCQKXyBn2rQMAL7SXUXpW5AZO1hkFLY4abbtZQm2SvjNeWMQ3T+Uo9U00zaji\nR19MRSpxAguLDJg58ZMSRrk3h7nsAUAq+9Nw6DgB9xOfybIBu32xz0+JMa3x\nauML\r\n=1Hid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b6c7f624b.0","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/shape":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/button":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/typography":"5.0.0-canary.b6c7f624b.0","@material/icon-button":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b6c7f624b.0_1580490226644_0.5139000698577383","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/snackbar","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eea074698ebc5a6e02361dd5b7aa0303e7d8d49","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b3f70ebde.0.tgz","fileCount":41,"integrity":"sha512-z5zwuSwUVDfvZGu7nhE3Mro0JCsycplsr7SRxjpge/mbE1lgsVtsEBGz3DFR9XLnYSYgEIsp99n/HAyCBn1/1Q==","signatures":[{"sig":"MEQCIB4AZTZ2SIOYudSv/ptraku3M2kiejf0wDpiFPVn7zwtAiAsaFZcMAhENHrIh6o0+kvIqlra78jdQzVGdwQ1MCxUhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNInbCRA9TVsSAnZWagAAqL4QAJWaYSc6IKyqqNIudUzF\nOx93/gNI4itHp1Muy4SWcPHnK5w94w8WFESOhKj0CVvb7s8f5MmJw/jTxLOI\n4fY6+ZPw5cahJa6J3RrzmrAyeZ8V2fsPY3h0bs/ij3ZF9uSGVPlfePk6Y2u/\ncsg9r90hDdwsRz8nizBjjuQ8de5lrNUsno+do6GT19RRKgD/mdn3ICUJsmWq\nShKE8r9sr891+larQR3TfrCmYI0tljiSbSXSDYh/JRgkPEKjCjNFltl30qS4\nC6RCbAqfji5yj19B1QcLJAByQwWIjzfdyIsSEsJ58+HuMtMV4AaAYzmld/5W\ncLNKehdi7PJr+NSw9QapUuOpBM2L37keIe41v/pMwReKt7AreiXqF5CkY19t\nbNaVtLdzdHDYW9MSnHnK2DhhSCb9lUrBLdr+BOy1cWMRd0NzhCsYzUefgcrd\n+cu3Yc3Mo5bBYe+H8gBlX4DnFm0ap79Tb8VaRTSZVhCM6zfTorBD/+dJuO3s\ncN8SJh/nbf1CQ0ssL1uUsZ/L1gERLz8t7WxY+ojB9nnVIE+Y6R1yBYWCitfG\nXKyLkDBhOU/O9b8SRVnhQQbmNebJO/bQkFrXlzwy65Mm7mWhIogZqZvOQTGi\nr/jWkAr3wwGabFR46vrCFqLjCXuEGKuMcO104qsIoCN8uQxsmIZvoTd8RLzd\nmPQQ\r\n=vlCe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/shape":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/button":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/typography":"5.0.0-canary.b3f70ebde.0","@material/icon-button":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b3f70ebde.0_1580501466926_0.19656331933737148","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/snackbar","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f3566fea2568685b4bf9e7349c23893108e5b90","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.3e782d8f8.0.tgz","fileCount":41,"integrity":"sha512-tL5kNFMO0IABbEx74dDyyAitd8rkm2Fr8+GFvrzkp6PNBh5/C5EUNG0QfsB1BKTFY8twG7bDippvmgVCBFuBdA==","signatures":[{"sig":"MEUCIQC5Q9lmsgUJiBhL/uAWYkOc+0MYgRKHWu1w7aZebX8aAgIgYZEbTei9etkMBU5rBFvUj0jqb1kRW/Bj4ZbYB6Uj/fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIyCRA9TVsSAnZWagAAj30P/2DYiF21PcFbWPkljTgB\nF+BDdtC710nyem8ICIUYtrrspy/5AC3uYSCiyEX4DRXj+AK+nyTAIS1MS7rl\nmnEJJn1Q/3cKN0ACmkYizOeHeD2cqVG5dqmsFUqehvZEXWGpaTtWxzGYbPuS\n7njsb1TNUkIi6uC89AhIw1Pk7z4RT1+YW+5LgeEHeepN5DL42MCSBeWWROi+\nPB/GjYp3O3QRoYag05xHvxGqR6jEWZWj7gDLxmlxa2+iFY8hw6zu5pOysWSD\nzVMDpQVG7VXBzk2MAbPAFVOlyIn00E02NtqRTwbUwRKYN+211qT/4jwglyMW\nfs8EvXzvFnBfyfM/ZvT7BLVpE8use5Tt18WPH3yTV78bUPIByGXt2cRL4Ei5\nUNl7BIbDbDFFFT6Kxe+50fp5QZUSfO77XD1AKl5HkL/1NFo4/C4huk/KmR+K\niL1E/B5M8G9D9QoFZaMR/J9JdX7eeqR2xYLwrAxJ2d9jmlZZ7J6vee8Th/8Z\nHrkDYPWmwi6q9zfe7tNmPITjPLA8rFT9CNiXypESsRJuLzlJF+azBIY0Jzpo\ngC+TqRX2G9fcwv4xtYVYNYh18bhIlr/yGfhuchj6QD872x6XxfiLJuD13mPm\nghJnbJt5YNFfz90BMFDiZiDzmPW1RjrA1hppHoMXZa10YUuJI8PomJ4iRj7D\ngaX0\r\n=CMt6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/shape":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/button":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/typography":"5.0.0-canary.3e782d8f8.0","@material/icon-button":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.3e782d8f8.0_1580606001912_0.836999742945469","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/snackbar","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"399b6b36c098240c871ee9ebcca3d034a272b067","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.535398572.0.tgz","fileCount":41,"integrity":"sha512-ivCzywosJTvWm4lEwbXgwhsOUNDt8iW8w1qwxmqlNeKjpycW+qoToAZRjUEntwCiwYqAGjKD61RW2+Vp+NEpjw==","signatures":[{"sig":"MEYCIQCxkyqfAG3wBRtinyUmfVXJTDrmZECWRvQ2NzYJdjSIRgIhAKggdkJNWhR1S/74ZCM86csNQJZWNqhDj1h9bNkmlFXe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKyCRA9TVsSAnZWagAAr5gP/0We0BnH3kAv4CNM0pPe\n/H4pcxqkByDj6h56oPfhvPH4P9GmhY+EZzmPDwjCI8CZCjAXkX5jw2C3uY/K\nI4ckdI+rkmnmdOvDUaQKM5J/IiXdhGuE8e/X+TsI6odXZY12/UFCXhoOURcc\nJuqHN8iZlw2tD3M/AVYKD+wM9AnZSRwZwG69j0jzMfLMfxcRGnFdgi4cQvih\nk6LbBdenNTf45DYoZM9GfcYm4kyg/QtO9oV9jP2STF3x+EpjjjDjgH352c1y\nn4Hk8Zxlbm7ZvvhyPYzZB5NdWMZ5mwbDJtc4XygjqnPl4bSOSurkyTdMZ1pL\nMrxPNdpG1LVrfEFhJhUPlsQaVZmTd281Hrto8maLp9MRv0Q2qVggg4p7MG7a\nY0zPzP/V2VCsnbU+FCO+74i5ooJfzSHq6fCIfiSMTz9h1z/b9r2IQS8ht/7+\nmNABB1hzzD9n72xLCJEh18qjUzn4WJJqScPruho32fncvruDocflrfqTLnh2\n19hr1KNR3tpxDi1a2xkW7ofXvUAE3vpCmzqUbphRvcwKFjGPy8PI5qeDNXZr\nKrdjZQ5wGONE03AiVPAh7Jxe8aU00qaO9uXgNqlayn//Bla1GtC2z2ZL/6c9\nWGdaSBDCwBq95oyPb49JBpnKHaZMNM9ZKXJ9NHJajQ3e1e+Rqs0NVP9ndOkZ\nQ9s7\r\n=zU9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/shape":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/button":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/typography":"5.0.0-canary.535398572.0","@material/icon-button":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.535398572.0_1580753585089_0.10303667347994216","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/snackbar","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbaad89e10c185063e689e33e1f868b6803974cb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.5ff33802c.0.tgz","fileCount":41,"integrity":"sha512-v9wNiJLrfzQ6yvAtBSest6k45LX58x3nxSuZBpPe+gzcBmaPQ+TZKDz+UNwvShFvGUf0s/yJECiD+m/WmRDq7A==","signatures":[{"sig":"MEUCIAhM1KCvnhiZuEo2MDhEhYmcvgYFpLavvND5xCB3eGihAiEA4zGSF4TRbERF5/r0F1lkM/5KFYskvVe4R2/w/HTCDG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObI5CRA9TVsSAnZWagAAMv0P/1H5S1ab6y/po7LO8i6p\nQ06zqdrROnHAbqDIVGocpjwkGoII71QRj/nycpgPgPfF+nfe1f1oU7l5F62e\nzgPF363FEH5MLHcuQB5DKa5g14koJsCIRVVkhvIouGFojXUwSwgfPt+3fOrU\nd8MPWQ6y8uckz3EibacScrUSSFFFYU8xWs2PAVkhajPXDTy6v46tMvogbBUp\nxR451vsM064PlXRfQfRl+QrYX9+quL64OYN1DMNDVPNwR48Cx1XCMz/NiCMG\nHip1WoDCYJ/TzD/+cCYSZuq1yTaMbWX0mZ2ZTcEEHy35D9nPdiE23elGrhSP\n4Q7o8HsRJgIEJWmlk8eresrmV81XGESJhR3/n4wkV5Qm4dqbaE3m+4c7UFCe\nkMeQyoJjUcwclnJ/hT43exms7xI/yFBGexcaKWFLxrlCsc0SlUBJoNfOGXat\n9MIvJgvQrMC4cPWV9mAAy1qErNyqOHT9JwbN49fcDlUbMtmSIOAhhNIFScY4\nc0dupNt9lbQJrxibrF0+tUmVOXPWPHw6ozUBtiCeRzTjHa3C44pNJA1Qv3Ju\nmczjdYybXHZPKZLCg9jC+tR9UyoErGuH7enRKMF9q78kvZcUv/Nc8Rxyuq2E\neXw2KjT94Ja7q14rU9qezMb/bm/nB8uUN8JVmGYKY5RCIB2Tm53WXO8+1Lvb\nCnTF\r\n=e14+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/shape":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/button":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/typography":"5.0.0-canary.5ff33802c.0","@material/icon-button":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.5ff33802c.0_1580839481360_0.8904073872413596","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/snackbar","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c918731edb17eebe79fb21782e342ebcf0a16606","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.1eb29491c.0.tgz","fileCount":41,"integrity":"sha512-wxRobhjbE1yXG4Qe5m0hL0SggDjV+13/eiH9lQXDO5Cd0rs3RASqrEF8RS/5G1M8MwXm9RqWqpPaVWnXr6w/lg==","signatures":[{"sig":"MEQCIBRdV44ftSvOy6PX0JDcB9uH1x68FZoFQb2082lBY2LpAiBKdS8j4wWWtEwItM6yRbDEprGCTO0vZcJXJonUBTJybw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdu1CRA9TVsSAnZWagAAfQwP/3zDYNP4stufQ8oPEl01\n2eoUrK/Ia01UoL1FNEXxxyv++P9M4QO0WyYq3GZIP7bt4mAuT0B9wy7FhIct\nctci5B3M/Phtrc/0OQmS08EzH+zzYsGEkJ/60oXg4FnQvcAKFWs40f/TwUO1\nyaxR6tta3QQwpdI4UnaF15imU1PTD4ZOt37b0mSnNQoprXT4zrighHyl+Zv7\nxu0Apukm8ID6fSOjw43reOxGXjUPyB/Mip+ei5glnHS9uavFDbPXaUXWiQVq\ncShZYzZUvBbmWhl2jzdgRhsaRIlYuRwRttI76Tn897R1KWWnz3pG7Pv91XGZ\njks2xwOuefjsUuKVpo03TX5XZaSyTLedymcf2U1cJRUXdXD2qTRVOpxLeJ8P\nOqKXBX+7/t2xwAlDTxzxA/WAAaNdarCLF6NR6cQDDDLE77+lJOSMe11SNc57\n/VeHI9o34tJYCeKhp7x9joFckkSQZQHSf2gQTLp56F9fuWsjIbzWpyqbhadd\nOkjFd/qZE95f7IJsf+0buHLiIPJ4N2RU2bu39X0A4hf0rnHNnns+uX142psN\nS+sK6j2XRVNeHRxnU3MlyKBBJj97kPmguH592+7c70ASDkfyb2hZ2lVt16Zf\nN7J8j+LMCe2gsPiCf3pnN5Y5Jh+xfSJfVPcA4ITgb9KGbKxKSJIgDoNWToTC\nLpaK\r\n=Z7Tf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/shape":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/button":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/typography":"5.0.0-canary.1eb29491c.0","@material/icon-button":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.1eb29491c.0_1580850101233_0.8070927338702141","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/snackbar","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b841a06b8d7ea6bf8a170149d167d2090dc20ecf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.4c7154b26.0.tgz","fileCount":41,"integrity":"sha512-Wxy/jyUcVG2k72u6kcup/MZYNlSzGhm1mjCFObW5tIkzigWX0OJyk+MY7p/VENYvmZFBSaRpTJ7pora8At12/Q==","signatures":[{"sig":"MEUCIQC5FiNCRzmuYrdXO+xdBcM77TNmi75Xr6Xjkqn+Z+9zrQIgb5tIesnaZE54fQ3iyWrpDXJTzomSE8wvUU2WYIvbtd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOue6CRA9TVsSAnZWagAABwYP/2LLXAIzqkmQdxH99i1r\nAIRgk2Ep+l7l4sfGgKMa1Q73z2eDDkQM260XdyHK5y1ftEgUjzw8GtOs4PwX\nX+bm6zjs691AMde+BrhFcxzegudt0tpWIWI2gtOYi+xnkqR2WSksX78U7Iqc\neS3O9bXMrJcxhgV59YCkCg5RBVwtcnyLJIRqOxrEsO9D9ahJXeOaJvf1Vef1\nOOzbXylbDazf37CJDaDrwHc7HjbTU6bgMoich9HcapYOEoY1C//bFk7seZVf\nrVWIFk5w6QJsvnHkBRw5gyn1vgNs7NU3Anr86oTj2LR5hY0rHdSRUjkTNKcO\nwuKfvx/mM3cRszpDeQcf7KzCyfXQ0+eaAUdJf+iz9kZaBFmafGPIMZ4uiXCE\n1OO0CvBDPj08kc4oAPiJlPWngBRG9t3ya3+5OBAQgFSt6JITvw1XG7OfP6Si\nPw2XQCV0hdOeP/UFEc5frmMWbumA53THERebtKcT9FV0KeX20KtsH5GduS2+\nnr4WzOpckvAavyChIARscZjJUbXyGOvubultJ3QJSUcqkWBTCK6Ha3wY9nhV\nxqh5XcvcXtr2B+4pzj4m4cpLa5b2DAv2yoqJIAyhEVU7fBG9kNT2bzTwsNkb\n1D1dAjG+eRLxUFx+nzdfr0eDcciqnvYIYeg5oCU93Ao6JXlDwks+ZCPk0J8S\n5qRs\r\n=2MuZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/shape":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/button":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/typography":"5.0.0-canary.4c7154b26.0","@material/icon-button":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.4c7154b26.0_1580918713459_0.09742018773058292","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/snackbar","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"169a9e9d31824068347793934838ca33c0eb0f49","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":41,"integrity":"sha512-u1hRvzTh8e6bTWXW41mIvQwRqgzzvlGxasTi3tBSdJ7hXgs30fgjqJskg0QWgyLzBNW84t5F05NGrmGHJ2uttA==","signatures":[{"sig":"MEUCIQDwTWpqkiTqR6Py6HPdxSGkoAScZVHl3Pu9LmkWElqGJwIgdvZjf2RpFQGTHPb9yRkHy7C/yREu4gDxjB/W8XMBZ78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DtCRA9TVsSAnZWagAAirAP/162K3bYmEJDEeUC9C7X\n1HEv+rebm6a6zMAaJKzuiwzLHQkd3oelp3rhxRmj3ln6+6gbJ+VwoH5QGEKp\nxJESCiy4VWq8xm10FkL6GACap2gWPvnb7UiejYklUakrze+U4dDMlw0rVtvg\n/UuJd2L3J48aiLOdxgCZd7Vvj5SY0Q5WZ67ZZ+oFs1qhP871xgEmYAI+Z2xn\nhs58WZ0g/znwME4hyfiASpw691xnafde937NRMhjjW4a7Dh0hoIUVyKx1oEG\nXG8Xfa5bpyelMgMEDl5ITCcouQjAQjFGeryKz5weC6iQPzrwIkBv4Bw5rHsy\niDwuNARVRnzmH6D5awmYEL4lorQ+8yRM7GCufmP6CVunlxGaLzqLwGNL2zwj\nSsxkvzAJvQjrVuuFZdXJL5k3m4GK/SlNdAUK7yWsvFTFieUM8XXpufpEIYcw\nZlqESymv/Rl1bOTzuxxJFAln5ttGQrV0DcVI+OXG1ZAnNsO0hppCKHbXhe1O\n37+UKRuAvz4m+5tum3dK4RvXXgzFisEJWl0WQb9kU2X3EzinNF4uZYB7ALDg\nTRBY7MIDv7sHiTgdvJB9akYX82EtvyjXwtFAVRAqiHeqSFMQMyxa3j8AhYSQ\nJ63OkVqZYXNUd4c02MX2OQRYfxMVdaqb+Dj30S2MiWfN/zH6M7footIkvKuA\n4F4J\r\n=Ee/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/shape":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/button":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/typography":"5.0.0-canary.ab5f49a2c.0","@material/icon-button":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ab5f49a2c.0_1580945644804_0.27483452022380583","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/snackbar","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f90e6f1384bf1b8bc96bc5a3716b04eb37ad6a10","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.c541ebe15.0.tgz","fileCount":41,"integrity":"sha512-rUaOkahXai12Bh3ffmw32SHJdyLfNrsUguU7fyrlOZIBHJp297/OkoSS+df/RY8j1rho6ZJ5Ksg/JGUcYUcodA==","signatures":[{"sig":"MEUCIFYKyT2fVDqpo7raUvHc/LiRr0DP+OElVWKb/ZYJNiZJAiEA7SosIezKxoiOgwTB4wm0XCSi92gh2LCNRn9k707UjxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJOMCRA9TVsSAnZWagAAKEwP/jDU1+iixKK7rZJc977/\nqNGnmL+eThJoL5FnUDor6f/peLcubQpwFJoHJtOLpYXd0CQIZKrmwHf9t4A1\ntB7me1y/LrNMwLexG8pWYNpuo1xhvzBZvQUYQOzpqQvI+YXGFqXq3/QqivQZ\nivhh5/LJDMMBnl9tWGpu0uYPElC0L7QfhywRqpwI425WTjGqOkNywBOAgUr4\nqDQ2g2MGd35ga2QL5Szzc+NyHka0dYfYEzuPebTeqbQodEdaJ5pY4hRjZC3h\n0HHkUf7Dz4od1USw3XB+XKicMrQk8DJHfS/yvaQFd6mOihX8+dq0EOt/NUpF\n7Yy4lhUc8yvOqPFDGI7r7AH8Z/e/SoYdoK2KIUSEcyTdBWGtuga9iaLXCXHh\nMfqraFezARjy0mQTrH83Z8VKRrxSbOmwl6PhlxQO3Y0cSNxtZS4MUyKwOBFe\nFxv5lbNO80yIhP6pz+gy4K9Bm3cDY5uEm+W8ITbByQbpWO+VcufawbrUHGLg\ni9UBTt7zolcwNWIzfHNgo3iGX9mFwG6x3Hj00+wgmCN0T9ndYK+9JOevA0Z5\n0IyxvkgtY9s5kgzdbCEpTzxjZ1BYSG0gPFPvAN/V2LfGohrERKDW1wkz7slW\nRhyeT75VV4WRhRt1ZeJOm6Pj0v0IG0k0I2kPtWuvT7GrBPmp9edy53q+U3dl\n+ry0\r\n=g+wR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n .my-snackbar {\n @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/shape":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/button":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/typography":"5.0.0-canary.c541ebe15.0","@material/icon-button":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.c541ebe15.0_1581028236218_0.76121909471931","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/snackbar","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fae31165e4f0fd8901352da2fa10db18a07664cf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.98f7faa05.0.tgz","fileCount":41,"integrity":"sha512-KlbUt/PxuBBCmhg66Gua+TqXR4PUTB6uROhYaz3PDaF/pvmk3NpAQBfp/sLCMo4T0u7qtoLlA7nsysSJcjNkYg==","signatures":[{"sig":"MEUCIQCIfKNPAxttnhQlizJ1yd3DonEqa/KUCfUnoZvmwcUZGwIgSC7rBzsZ6yZrm8kZqqeVJCu5HZLfVjIEOgmoJDxrO54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjTCRA9TVsSAnZWagAA6Y4P/16QqQ0rQTU490DLx1JP\nKTA+tjUI96xADMlkEmr46mkw54kezXhOufLkkFY5pIj/63bIg6d62bkEt0AJ\ng96ddziK6ZwYvawmF+sFUxw49nrD91T+3DKWE5+cmS41w0VCA8fDCZIoZGlk\nCSmPlyWEatVr2fMWvCcI561pJpm3rbGUoIVHvd/HZ0xTQKf7S+GvHl/LC0Ar\nPbVBu+SEu2DCxHjrpOP2Inbq4wUTbeVpzcySMQYw+A6p6WVQu8g1ie8pZVNs\nhvgv6YgNTuWeIyLGQEKemLgRZdCrrbEi6luD9lPnw6aeHVDFdfCqksNWb1jL\n9EkoNPZkjGygXkW54cACW8KqRggV2d7lmDBBVAtlYwfXT30Ne+tLpZ67HytR\noZbbOLD4K7SmS20twkP6iUxRDXLn0tFlbtrCPdF1lGEZUbluSuCOh27TnjMf\neIk1SLlQSqqrllu1vxNoSJ8VZnJSnA9WI00FJPs0bPVP4vK44V4+GiRtE8AB\nHs0vepU2broP7giqGfIiBLEha/dtea6CbIF4b5nT4JA5NMiydFMHGRX7MM7j\nhYK0yBd18mfDWUzfki00urFzdX7MqOha8p/DAQ29dWdNkBkaW0lThY6s3rt8\n4R10DfZLV7fZTXbRDfUUzuUbX94nZy/TVfM/vJXKl2n4kWIvDbXJKIcvlKd7\n6MCw\r\n=Ldnn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/shape":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/button":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/typography":"5.0.0-canary.98f7faa05.0","@material/icon-button":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.98f7faa05.0_1581103315252_0.049448774008752805","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/snackbar","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40115444ca3e355698b90561db15c4b2ad6dd2fd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b4727e43a.0.tgz","fileCount":41,"integrity":"sha512-JMGf8UA4yoUuxV1HEG39A4a9ibDRduxFYVndXxcSSQfyRKOu9V/YRVOkgeZS2goV+YGctGRGDx88/rF0TTxi2w==","signatures":[{"sig":"MEUCIQCaOhYmfxZJ/sHyanmQ91rSNqD9IVyUC29keXDPX13RpwIgaFDoRMhVDzeGBYIUiinYnucboTMzMWJsBglhy8dVrw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDbCRA9TVsSAnZWagAAZ6MP/jO+wEJPw1PMYB8kci9a\n0jtkU4kdDupwvG/q0y6UdoYg3797Ny9CFm0/6vvRj5skV3jQnAvoFGzqhe8T\npN40sTs43RZQD0lVurP0HuXFhVGqCKngjXNMEmIIb7SliLbWsake7+WhvR6Y\nLqB5sKokF6mfomkSZIoY0GSEuK06Dr0AgOFqoehWS00bJwu2ORbNm+GFrzyu\n3tqRwLnwthRa+FYvujwTK3UfZY8b7R7prNadNYOKBxrjL1XahRjI7CSHHJEv\noDL//EFfuqe3FpepWQw/nuu9c2qYGKHPeDKLI+JT5SXVd1a7t5lx+3ugj20q\nc9ubMT+eSOIoabHTBzkdvPUmD4l12CV8/M74hy2xAOrG90P+gVgAPEmkGTTh\nXHxWFYQDyb3HI1DEvgDpaW7pRUg1NqT7SQzn25g7XhJttoqdnfPwoa83+gaW\nOtBiGIROsEPUeZz2mNmgBRKa6G0Y1TINgKJBqqCidoIux7HR8zn9qZ6a2EbH\nAXEAKxJ0c5MbGqUkTLTjsyaboh69QeWpQjKCU8A7kFgAVOL2kzt+8IsK+B7M\n78VWavpnLA814LJM9NHyL+FzRMD1xCreGs/2buXWxeMx9/E/QAf/8bnIn9Ut\nFx6NpNxdRYEMT9txZ4kvrfKUWZiLlE6/ZDARa2tHIdFPvLva8CDpwmng7Fgf\nO0sa\r\n=4Rds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/shape":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/button":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/typography":"5.0.0-canary.b4727e43a.0","@material/icon-button":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b4727e43a.0_1581105371201_0.29690410138812795","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/snackbar","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12fe461583fffcee116bd44a359022e682fdbece","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.91d9d5a65.0.tgz","fileCount":41,"integrity":"sha512-yesfKta/vwi9sgnkRCmAq+X7nQRH02xymUlg5hS3hDezp/j6FQ07rgWDvUHSzIavEtmvAyuNmdVa1waZ+UUipA==","signatures":[{"sig":"MEQCIBYRIq+jDfWICi4ukQqrI70i8995RECBo/VfM354jdWoAiAzMCPtUoLNQOzCz9i5Zlqfq3O7WF5Rd6q4eZP6n84Drw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePev7CRA9TVsSAnZWagAAEwUP/2B4XdoAdIa/BTdiPIUE\nieAEUNArtEP16AIcJWlka8qazvHxWhe6c3ZZvsT00Fhhd27ulAqmAZemSb9f\nOTVqUmnGqXzkb+B9sZ8Mq3zIYr9IgIq5X3vChkoaf7qY2M9zJZFK6zYDQdN9\nFErCPipT5y6K3ReraaHc2Z3PUmI/xB2dkjPdG5LGo6U/dbygBaXY9uTDznxu\n1wIOKDjXJOTHAxl8qg0DwhATWVcz2aaWj6Ig7SqDgfYbdEhQrsrUvqGnj6B9\nkac+BAMQYQxYDT5T7bKhQkamri1mM2CiFYI/tnZDleI69bDgvCAAdz/kF7YU\n0Lg0xCgbU/MaUw0N/IqKnX6IENPCePLIc3AiqVn7GMQQCsjOKbF/xii3PLPK\ng2TCoLwEZoMxMczbMV1n3JrLdO5XbRdstWjZ9D9sYya0JPSwT/rwPMOvtypR\nwhD5JArAhLXJtf+Vnw7nlOze+WD78EgH+iBJb83Sr808yy3FbVLInOpAhimS\nPQWZslfZ2YD0uoGa7GH8spLx6LmcvYMDAlV/MGbEcFV7HrVao9rH0J/91AjB\nNMKaSkdMMRryaTGkGhk/imu8YONUEN7jAScil131fi69FiDCPbrAnMhFxVDv\ngkd6ahnW3UeIM7YGvLi57OTWv5CiaYu7DQ9Qg187Fdmjy6tpslwCy9C1NLMa\noPIA\r\n=5AZv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/shape":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/button":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/typography":"5.0.0-canary.91d9d5a65.0","@material/icon-button":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.91d9d5a65.0_1581116410602_0.9610681889167496","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/snackbar","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c98d12b1ebc3409237bbcbd75dd59309af61b5e4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.d5c006ed1.0.tgz","fileCount":41,"integrity":"sha512-49eA3VOO9cLCuL1S7SEv7Yv9uU1FD7GB85lRNZ0F16lF5XzDl4eEOiTKlpJMhBGiacS6k24KLi7GtkUm64mKEA==","signatures":[{"sig":"MEUCIHHMyRiUvbX1OOS0ZfkK4XuTPt/xMVDDKmkCxYmpl5R1AiEAs5VV92i6Uz5Nu+aF7pXkKKHKXInikHBlilami4QIg2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmfCRA9TVsSAnZWagAAV2wP/0eo+P658y3ypouvl4Kd\n4KaA1nsRMc3D9VHiRq9JJ9AtEWKVGb7CHXh0qM9IlBvNlvBYFGCjDrZ+vT4z\nppSQ8iSUBNpMQW1gWm7tkjKbevtQ8pgXTjvNTF2JVxn0MMUJOCJEhyxHZaTW\nWwbDaGv1fZ9TJ6Stwc4nAKE50bx0oXMW2UHo9wSNXIcijLFfj6gO9bbA/fyq\nqo+CuSYwNH5oN3Qr4WEJKIACht1hI8uD7NcC6ASvMN1KmIMBzmEnphmKr/f3\n/sVUF9jEeg26j4bKfoJL4A+2gK9X6q/6Cp8oGTxPzrsEDrKk/V9BCjZtO0me\nyj+7H/gBOUEnNZNktsK/CXDRjMM0+Z3iECw9EVk8A86x4XFE7qDQH7yoIfBx\nLDCs2LnYgInYuPyQiHE+m1Q+3RDOlkEiFIX1mTFvgj0KmKRGUqSv9/yt+rm2\np3YKXSV6170OsUI+xt+3h4Gg0/xquLqTikC7MDtmbN/jfOvGZ3zT2SBuq06B\nXZgbvOBBywdNTTGiGWdf5ENrNaZ8odeyqaRKNadvVP/Sbn1RvHZxnjcUb+YI\n5g3pLDAtX3ISQx7NzqYHP3NCmOqBbP3G6hi2at0BVtt975HoxcausDl+GUU2\nS/TdUM96hF/95M4ZiooUu9Nuj7wAGmG/98qW5ru1NUCtfqjjHgjzmXNRY136\nPl7F\r\n=C0dI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/shape":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/button":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/typography":"5.0.0-canary.d5c006ed1.0","@material/icon-button":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.d5c006ed1.0_1581353374520_0.31420190313079255","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/snackbar","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e99e8e104bdff706ea4e21f5b451b27a612c4a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.559f1a570.0.tgz","fileCount":41,"integrity":"sha512-GWUVENQzkiTtp3jH7QTlQ03+y40kl5HE4CGKcjZcXRGkNjfQJ48CFVUZ2oamwq6MmtKU7oKZmmlfmcH9y86zKQ==","signatures":[{"sig":"MEYCIQCdu3N3xwthIrDohSZ82U0sc8czoMEV+xMwKiWbmUBTTQIhAJ1kboR+qRnsbiBgCZ3f247HAmoUzO83duGEO9gEBV5K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIsCRA9TVsSAnZWagAAWKkP/0gDKo4JBNb0va+UXOzD\nhb+fof1xJM3g9ZTDwcviwNymTpUoYo6XS6A4KryBLnVINHPQ3D61GagtB+cm\nESDIC8n65xm67uK5WdXVX2u70tLwdhGTPhiCGfs19d9VaHOBO2/O6RFMOFL4\nb1brH1G/XyCf8//sKe9+w0Ldpj6mwzU/dPkyPf/MkAmZ+PuOCrf3BTJ/Zs82\nm+hq1D/yCZJVfNanyEhpwnLGim6eZX2TT1CDRa5m3u2cRnVV3teeJCdmZB15\nh9E26jaMwXpjVXOZ+jxpRuFIHODbNLWMA7C0e/3/5+SOkMagG1+yssasiUyv\niGMK2PLtMPSw6L9B9VH4kl3j1mHa2bHSbP6KqLsiEGffaCcJuilNhFjE4lbT\nI35kLrmqgmDZELklN3DDHYIByif7YKQdUzOsHGZLP5m6/j/F7xJ+NuwxAf+n\ndxAuSTU5XkBpqORP5J8/amrXFQqrR4/SZl5SoRxglACoFZbsnwYQSnYpkCxI\nsF1BzedO9gAFhg2B8s4cyFjdE9kzQMu/JvlzEHkTLNnynpY5cguH8IjhgI2d\nA9AXWk+E4wvSpA5DxBXz0xOv28DvP3fbxJR/5BmAIbAuOCaaiIKYmJ/ZEt1N\nuQPM1W7RC9FyHDP+Po0eNpNUiQPGIZ6k3DJvcizXmZbEuteirtddkkexCClg\nw2vc\r\n=c1Zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/shape":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/button":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/typography":"5.0.0-canary.559f1a570.0","@material/icon-button":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.559f1a570.0_1581355563600_0.9214187166991508","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/snackbar","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dda9bf9323f53444b09cb178f81b16b6ce0cd49f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.ad3bbf782.0.tgz","fileCount":41,"integrity":"sha512-LpjwYBuoEIiDUT3eEB2+8Yb8kNwDagz07T4biq9pKPGcCbfwNYAKYRqY9DV2ujaevPB/eqhKpanGOn84KJc0HQ==","signatures":[{"sig":"MEUCIEwB6ITCjyWSb26/5G0LFUa+wmO2TCi5e1mn6prSjwf2AiEA6nkN+DSXS52DKgy6RQ+6U5nVVeLTzW7iY5zPGJDtMys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQasRCRA9TVsSAnZWagAAA4cP/1HPwX/XRTtnh2CH9RVv\neFyMLRMafIjgTLKm7SNMtCWjjxfznkG1TDjn7ODmtCbqeFZBrJCjNMLSN08p\naq7EiTJB79LcvJKhq96ZuTfnrC7vmNzdJbbp80oPe4LdkqnF/8lBsg+WFsO2\nMMjg+cBhijhHGPWhSztpu3OSRhNcwk4gNzNx3yPkGzeHBCyKRGr1FLtUC+0+\no+F8AwHjXO+s2sWoQFMYqdGOjAC4Y/oW1oVL5tu0f0Ebulb/i/aIKC7AuTia\ncQIeRADHrp4qq/7Se6Y/VYcmTVn8xxnU1JJPUIaaT7srYVUHih4det+BzXvr\nCp66nqON6BS8Og1RvX1pKeI0jMM7ilEcBMu2fNpUi0a9BmeKRdnqOrqUiZvx\n+DqGd0d6oYra+nq6FgPzhG2KItdsN8bBiQ3vwzT1Z7W+gCHrc1khEusD+HUM\niMbgZJz2EjDUSFPLceGKQzkgC6zBeNxNaX3nypuJW1RqUuGQa3mpQUs3YaOL\nzi/6ja3m+bCWk5fwtHMi//AL5d/CFeVtBA7tS/oO4Re2Diy10c/lOV/NWmzo\na3u76G5hwNCdel1oPcejXkNA5NNznEahUMMvlPOHj/Sj6RgkdH34IG74vWY/\nB/NPGi/36tPokBVEaa/laJCwYaSOXV2Y6kTHCQBw7vFxinj54qfjGMcKJImw\nvaMi\r\n=PXM3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/shape":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/button":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/typography":"5.0.0-canary.ad3bbf782.0","@material/icon-button":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.ad3bbf782.0_1581361937313_0.9771344998149911","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/snackbar","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a21738fa5b6fd939a520cd1442e40efa7fa5a1c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.570d8e49c.0.tgz","fileCount":41,"integrity":"sha512-vZSsmyx2qp9RuA6k6bvI2xKXD9Lb0yzNm3mhRwtMTPua7kIfMRlkxwoxfCNG0opjyNVryoXBzV9vHkfM37+6kQ==","signatures":[{"sig":"MEUCIQC+N6jLgZ7OL3ellRNsVLjNGUl2JdW/WyMV4UiFkdVn+QIgVRfWODVdXhwTlEVHhdXn9E66VWk0xCh4t+6F/dIvpcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCYCRA9TVsSAnZWagAAlHcP/i9FKIOc/uZeZ+AIBe+F\n9a0MaQPdVpBAjOku/jvlypGKFMONhdnNLtWJyWZ92E9DH6RmF2LjYohN2RG3\nADKb1FgZQ1pTlRwD7s/o6CYhmB760mvzUv+moaZLU5pKyBpgMrKqBxWJL4U3\nTWhxysG9A/qckzd+zBlHuKE1Gk6c/v3jbCyrGivVB1QPQ4ZtS1/Mm9h9bix5\nlznxsj9oCa7hSxWRrQZTjMqeECe3TTdK2cfGihqBl+ooSHJLqAIaFJw38VgB\nFgkkPXJXQniA33YMEEjbi/Y4iKB71TzCuJGrMZNmVC06Hz4fH1rGr3IVPViV\ng8UudF7UqZraodh5HyIeJh7K0Ffhu+7dRpwdglUVQf7FlhZOUjOGUVPsQ4ID\ndU12tBZ1psfqzKRYv0MrIJRWe80Sfmcx2XyAx1DyZXKheopdDKsU/XKtNGCM\n1g9BDlQ9d0R1rweMZ6G6Aa89tQmmoFf3PaTGp7fZ3w+Mb68tCO8/ArOGhFJg\nzalQuA4u95noC0831vQ5Bl7Q+7v9S8Rq+6XT/s1iTkZ8XdPLUMnW19Hvmt5T\nDubQRHdq0RPkk8xbNTExg7BQ0XNYtf+5tvYhMmiMNIBl5c2ocAwmc4RS/MGB\nduuSZ3stIxMSKGmu2MvHZnyxo3zBHS988ZYMPSYQkjq9RgrXeKXdp9KqWy7F\n6Aml\r\n=jH2k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/shape":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/button":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/typography":"5.0.0-canary.570d8e49c.0","@material/icon-button":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.570d8e49c.0_1581367448073_0.37959187797991256","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/snackbar","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed68413543051cd1dcacfe518a29f609e1b4d790","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.48b06b89a.0.tgz","fileCount":41,"integrity":"sha512-ODvCnWpmLwr5zbwbg9imUu+6Ins0HBYedhneGCq241yzZNed8Za7X6o0/lg/8UX9eiL2KghYwf+fZXcnMzsoxA==","signatures":[{"sig":"MEUCIQDq6Vc23NjbFBly7rR8JMn+KNyhHWaQECV8MVHtW1RaSAIgRGIpE1n4cN8t6Xr18ft6N54EK0PnBTjqgvbTtdlbGiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXsCRA9TVsSAnZWagAA9yIQAIQ3f5QUwcd70aozdxAm\nSzidNP4xTu2yzHORzz9ZGEf/IvfwFtZTE5sdsUUu0PhypuLeHBvK7t4JuvQD\nbBdgCx8WxjZxF9sPsIsoNBjXBz08g3GSAOfbauTrizzbRm1NDztcdv7F6OIi\nGTRcdzLPFH/oTBYs6VUen1JloVjAhw5NdPahenOnIRslo5+XirCOmnLnbZ1T\nKofEbt3dc3kxYRWY7ich8VocVS3msfemiYr61i2juwFjPHerePH3jrNtCuvh\nuH6/J5j3RCRn9+DP7ldyDV9x7sxLoG3eN7H8lRwB52T+LCL6rPTHta/tm72k\nInoL0hHQnB39Lx3P3QX/L5NFmVqJy836PfGLugAZN9ptmTw5TCpV10DwvbrV\nzpwTq5o9QDCgWmZNpwDJKIjDCVXLtPlHSXeT8OWxPO3kaYFvR82TYVWwHZ0r\nQhJJSw128tDyg0DZPPjBkR/WU8TKxahNS0zKwvVeZ0tQNyXsdIeFWchvSCZT\n1wm4VuI0qPs4s7Q5PTKDdJkJwIIuyQtTRhnyC+xnK1X3BsSWgPSzXo3Es3Cf\nZClzfuqW79KQVuZdtLgKdAak3yug65DdPaAYabcODbWnB2dzveGYJELxiJNJ\n63tFfgXz+nw9FEBaNS5+6jdNjgfueKo4yLzMhl1WlD/EpNvwbcvS1eXHoYxg\nP7sZ\r\n=2EPf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/shape":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/button":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/typography":"5.0.0-canary.48b06b89a.0","@material/icon-button":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.48b06b89a.0_1581446635888_0.7358835389667953","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/snackbar","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c16f76bed7d45f6490a20f52d5007ecdc0ece6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.612443dfb.0.tgz","fileCount":41,"integrity":"sha512-MlYnq5vN+gH3ptSYYqiXr7fRdzYPIB9mO1LWPRFeL3waN+oRZkyZ92r3PCiSKX8ykFcKgnb4pBXxK1CU4PlN1A==","signatures":[{"sig":"MEUCIQCyFIXto+h27SrQWuZIDIRmcqLq5bLdBxVc75gmMeYDhwIgcoyEy32D3hMtLc74+7e6Y4OlBokAn80Jo00xRK4GRJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwV2CRA9TVsSAnZWagAA+1wP/3V6BXDVoSNbDHX3p+Yq\nrGW0FdpYKmwez9qXXfC49mwCoKGaGigUBxESEE5hvXsbQRdnLRK6MP4i282T\nSYug8euMiG/zov5AbnHMEdH3ZAg4X1jYUw00p5TvGJfstU4MktRbj11hTXCf\n1fcnhpAxH5YI4YkU9Ys5JPjGDPCH1VUnawD3IZBOPpD/R7SpZKaWddDVuzGi\nDQIIBSeD05lJFu7YcTYQi3PtRlc7u3NqqnQbh0y6HFDExMKVDVLqvbwlub2W\nVPG+5xLEVpp4s1vOzWU62Zpbhm+i47SHfKmeTg8/OLdVXcYkq1yrjbmfDaqf\nMX42V0KKJMSWZRooe2JLHtReXL6kKua5zftuc5yMu0IoD0LutMurmLsP4Bav\nrX65x1o3S+UuIZzOWRvfmlZv/yNI8ixj8rPuVuUWIEPoGrqhgRUm8LM18eAG\nTu8DLPCBMrLzqQ6Nri2SJTIU6v6FmehrZH71LViSH6jVXp/kQNSBPCtNWP1F\n1U1qmX3KTcEnxf/LExla8RlirXnWIhSAgUagnGybHqBhb+13W+epGbCP30Fs\nO89JfKntPQllTdtCF1P12Dwyapj5FBOrYehFTdYi18MUhcLX6ix/HgDJauaz\np8JUG/BTXY62iUAYrapYJ9YE9yeWhaX79Y2ba9URpsW1SWWBLgg1HwYOr9Td\nPcPe\r\n=695Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.612443dfb.0","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/shape":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/button":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/typography":"5.0.0-canary.612443dfb.0","@material/icon-button":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.612443dfb.0_1581450613566_0.4789125834743544","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/snackbar","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c059793348779b382d3399a17cc3a00e4faee32f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":41,"integrity":"sha512-Ts8lzbGWDdfqOnCVH9dFQBGR8+msoB21IUQL59RNlo2SvZPf1jP7KC1qrWLPwR1NuOzy7xSESuPPuOttapSheA==","signatures":[{"sig":"MEUCIFcYisNUHvGoMLpgr+yt9g5ZFDo6p+j6EcvCc2/7j344AiEAzEF4XCs4rINo/+Bn/AUBGncyMMRip/D61VckOhPp3Vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7y6CRA9TVsSAnZWagAAPw0P/RkqYUY4Tuu4IPmjiH1E\nqTi5k1OuUKzAHtEd1L6drHxGWr44qDAdFxOghN9ny1A4SCK2gOSs1nMsZKWn\nluaqeUgW+EHMYaul0QHz+/NPLr3wIVW/wUWMKgf5URGiNsWaSsat/4hXLsbn\n+sM5+Nq+UmCIkLIWxEXIW1ZLJayoNxhsiOkGSPD8RCrNI0995e+7lauttwKa\nZAOR0lYJ4xM8zYgPt94TdH1KQ/S5tp+UpnW2/WvRpmnb35aWqG1xuCH6keqq\nTuIbBFvoKvV1rjmcdjMCDO6aSVkKhX3E0wqmfFZ97EnIzOjgghtXse+FlLgq\npdSu5hOMeTixZr1eN48NVvUvavmbQzoiDJtjhkLTtFZtRj/esV+f2+SdCLxA\njhTyJkLMTGp1Qv9dqIR7uWaLnyXmaTAnGhVCLFJteqWLGfqWN7QJTX9FjYTO\n4zaYvmmF/mNqSKyakzFmT8hAJAsLR5FebdTa2cL3Hykft8g3cjoolcLvTb2s\nRWcwKUpOT8nzSZdU9uDW80cMJA1O7idE6fFGqBjrYUD4IZwu5FeC5gP7W5mv\nYL+XF3ko2i5kdqI/C1RKxfXP9Su+k+vlO4up9i3DsKIUR+SBMXuDSzcGiyEB\nRnqTdDdZs8KmxleHisc5f5n4K7DAEcODb+RmQBsFCtqw8ZV/GBtwO2T5FbYz\nzPqB\r\n=mz1p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/shape":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/button":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/typography":"5.0.0-canary.8c11ea2a3.0","@material/icon-button":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.8c11ea2a3.0_1581497530131_0.4563710169492545","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/snackbar","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1335bfef6a10dca7497e75307418dec65f5c9d43","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.b2f3d311e.0.tgz","fileCount":40,"integrity":"sha512-PPhCvmY+btEkCFao6p3OWh/1e1JcSAiK/um+Z1LXO05q7OmuhCPG6vpz26Bw5TD82NEPbJrCP476CCwf/YmooQ==","signatures":[{"sig":"MEUCIQDCA6IeVdX5wDyG168uRhZa46GqPplXCFofX8LIihACMgIgNi6lq9AHfKPFnvOZ7BLJZa9b+VEb5L+pvFdgL3gRDBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcNUCRA9TVsSAnZWagAAwF8P/0K2ZAEqzJ+NhJEbAJ8+\nft0soUEwaBXb7AL/8fCcNrJM3eUP6FHLMxPpGwptBf2+GRDoWy3yvwoRfSAv\n0rTNt9cAQcaHKgA1mFUJvxg8anMEVzIEkHu/RFrnsvH5U2fYIV8cwl2wy6EW\nQkzWgTK4dCED4HtHZaeOwi/AhvLC4V/I2+OMRgYtBndeWmprn4KicRoHwPu8\nvGxVeUnwxvQQXzEaRh5ODxmb+bEKGWM5QaZ5fTUa9Ch8cVVclv+Z15BYvw6b\nb51x3WwRBf7RRRp9maGvWY8TVsrrUBvo363LTyPzUXrm6NKgBXOS1aGxgKKW\ns550/9XOm4IckcAtOhQ1KwMwSL69oQXnjztaW7pjoWJB+V3FhRFmCbxLkh0t\n7uJADwdySTDmq/TlTU6quJznHQ4Te79d1GPhnGVGvXO7/YOPxCUS6Zf+FT6e\nsZo4P6iQt/dQ3nhgtAJsSxrF7WrxFM6PLpfQ+z0Lu7nSZsLAp7VkpXOu0AP7\nyd1OKLQYH3XzQL7LwzosXJP1dAeK8E0Yrjatq9N/Xq+rjsDrh3Bql+X86nKu\nbq2xxsYf/5xQ8KPKS+S9F4cjnOrfS0F4yuaMW0r754QyaKAqKmnNek6a9sA+\nA6TftzE/nEYC9WVkacr7aD4XeomT2gzzL6uwjdM+T2gdCokPbyPcPpZgJrTa\nU4ms\r\n=cjnp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/shape":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/button":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/typography":"5.0.0-canary.b2f3d311e.0","@material/icon-button":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.b2f3d311e.0_1581630291477_0.4176259675160541","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/snackbar","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fa9b7296f95ec5e1ea7e55f7ed10a63c94f80c8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0-canary.4f488d0ee.0.tgz","fileCount":40,"integrity":"sha512-g8wwemlFYgUMb9XaetbJzWAbkJ/RjSB+zlChP+XHNHtDrG6A+1tJ47YYtOB5qqXMHi31hpdJYA33psju7CsRAQ==","signatures":[{"sig":"MEUCIQDryJaCI9gLpfVg1Nuh3egDvD4/BRDwIYsTuYL3lCOoNgIgWBV9nVICKVr4ZI2ONAbWdinxn69jv8OIiogBDfBHnFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdaPCRA9TVsSAnZWagAAmnMQAKEBOySW6nap9KkTTqXd\nWVX/C5GhhY8LrIH4th3mCQKy64nSrz28lxUN8nr3NVegPwbKJJGjR6K6LPDZ\nT5HFC/Lc8Nzz/Mn0APrHu5V/LvdlcWWXCU0m+1bG0KJHqIDppLscbQSR4PvX\nLOn32ZR3bhfATq0tvGoyNx5wqLmOA332kvx5RCShG8/94LlEhKqd1NIQYjBc\nO/WHQOpepZRdALIOzevAVrD54BLxZ5zoA2Ggf4e0DQzTZyiZ+aC+3OSLknK5\n+Wiy+uWnGnmaeZHszmR/3jbtiZEXS4GD2GNSwPeRxiVOzKtE32+9nWxislLk\nbOQyrEPyJgd85Oxu1w4j+1k4PwFnwBgMMLO5ZAUMlj032BRdkUB+NTpEYKi8\nsXQdRXS9Kruq8QCrv3/7v/rrZFGLyG/FOUZgJ14jMITAEcDdlYRzMaNuPQHT\nd9TjRiGgGtzlmB92FvkivT7QlDv1FGWOxXrfNiL52nv6VxpGKIbI4ck5XuKc\nVJN4/TCm9HFjc9iRheVhb44fIj3d48SBo8k6Xs9Shb2EWSr/SUGleKfSqDKF\nSkeyFPtbDW+eY9Z8CZJryyHAyRRH5yMhmGdzpIpBJykWGYPaa5pM1SQACr6C\nKfSlN6CHXRLoQLoNKAvBeCQ0z2Z0zoS/zUlj9gYBVXCBafhyZM+p+2HeqpjZ\nR7Er\r\n=SoFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/shape":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/button":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/typography":"5.0.0-canary.4f488d0ee.0","@material/icon-button":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0-canary.4f488d0ee.0_1581635214932_0.8549718976221885","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/snackbar","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaf89bcd2c9be6129cb06fe1944e60ae89da3a9d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.fe79de07d.0.tgz","fileCount":40,"integrity":"sha512-an/PbSbQ8PVh8hmacsDsYwbLxLWLa6CivZMhbNuQOjlow2f4ulCH2Mzpea+IuXUKNdaxWHldTvvZVhtzH2o0XA==","signatures":[{"sig":"MEUCIFyhAQNPz4d9IR5pA2+dTs/buGN0be7Mb6Up17qkymgAAiEArT61+2/iYqp8iHdnjTuvZlVe5ZIwAAzv2lLjwdBH5bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqpCRA9TVsSAnZWagAAhNoQAIHUzRHsBrltc5mr8pAz\n8bCnF6Tci2YlBtGw9h9ruTHraGnCSMcRlSsvCPjgAjU9+23eTBZNNYJAzTEg\nDrQSB1UeUZivekn85wj7ZgwGacV0gPE/BjjJ0AvCKnM9H6VdvAwr5V5N6EuS\nRfiLItq8JJMsy/CpGDi4xsGecYg4L+b5c5HXPBTOmOoB+0ewvLsWDbsDsIP2\ncAZ8YJE/2bO/uKljBFvG5QU1nyS9/2Paij9Sf4AGRIsJomGXlepRJ0FgCIYE\n7TMm3f4dwXc7iqKjSev8JQq3yJdIbSgYQGGqO0P+etcOvTolO2dzUSb/VT+a\napu5ory/bDTOE7L0k+pJJii9X/WWrMZl8dkXK10kw7ExP7+hSgwgzoDTeEqd\nSZfwFvvjsLAexLI/PqMQJjgxFRr7wU+j6SFYkvNvNzNC/OGRRdBMfu8dakx+\njgYuwtoe4/+PI/GllOFaIxVEI4w6MgjnYEJhMr/xUIjI6Q53K1k0jmTadRXJ\n8nL44KZ98sp/ee51Lhiu+cw4Zwmw+jYXuQVNKmERxShxtlEzIi4AIxDLzS8R\nGGAayFKC3qm0J31xWkj//UOzPgevKnGUkhNBnB47OApmpCfyb6/QKi161IxN\nGYtLBoooOdABtj/Ju99nEfKq8yHq8oYCaeKfbGy2x1sAwuDrnaPpvgMueCQ2\nrzdw\r\n=hhq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/shape":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/button":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/typography":"6.0.0-canary.fe79de07d.0","@material/icon-button":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.fe79de07d.0_1581636265025_0.4253018647267677","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/snackbar","version":"5.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6500f1cf5f03fd600d00c01f1cc7a54e4705f2fd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.0.0.tgz","fileCount":39,"integrity":"sha512-IU17IJXIqh3jN+WchnavhMx2f4RSRkc3xMgKAFVUsmmO0ZNNpYKSnE9QTZkaIkgsGZEPSecnVPAwxIMARAcSkg==","signatures":[{"sig":"MEQCIHymoDy6j5zBUx9ddwikcu9eOu8qHqmhT6KDWq+KbH5YAiAGQDaTWtqnIt2lGF6H9s6Y1cTsZABLGhdOcVjy5s3mPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReU/CRA9TVsSAnZWagAAty4P/iBlTviK4ra6Q2zE1OFf\n/IyjGh6qNpqMP0e89f3kEEj9p9bUuRImlCUgvFYXZm3trMCI10HwwvD5mfcs\naRqqhDlvFTr+PQwPP7pnJtDP+OpIo2eNJy9XntHGoIsbKyfW2K6CHX/JB+Ld\nbhFvgK9lhicCdPm+Yr+DGOH26v+lvmUiyhTjCL11s5rJJ5NbGqGlEk8kePGP\na6yzKpXs6gQhOIPg9zqrJKiJq25vJKWW1ILGobODDQIfDiWU6DeQ+zBg6VTk\n0jGzjVRFVs5VqcJKn0d7i1gSPvg3KlpCklRBz8rheUz7cpCVlfP4X+Gmscss\nmv+SGjnjHmWo9HCtgM4PmlNsjyRtWOaQZDdS2Hjk0v8W9tCqlUE1C+agtcVM\nHf+x6pA+U3I4Ugw42F/Zb7xFJRDnJRnwGiQPGSt4Df2+ahDjlinA595tdXLY\n2fjcG33ESmbLUFg6Gwhd5qvXRSOljbDNCLXjNCqH8T5TZwg1IEORu9e1Od9b\natmGAHjwarI6o2/ivYQQVw6hhyu0BU9BlAKLfHYHT0j2EVi107YhQ0ivv4h0\nRh5hyAl18jkbCJeeKoCIS3SsqJ2p2/AvEOGJhXpISEhjVqGHy0jMXLtWCk6S\nZQzbExsPTR/YLcpjn7nvYtZiiJAgzPoBvvuNDjTYnH/qTeW/yEFyw9p7hWfQ\nFwwr\r\n=r0DW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/shape":"^5.0.0","@material/theme":"^5.0.0","@material/button":"^5.0.0","@material/ripple":"^5.0.0","@material/animation":"^5.0.0","@material/elevation":"^5.0.0","@material/typography":"^5.0.0","@material/icon-button":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_5.0.0_1581638975146_0.46423170546185566","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/snackbar","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daf7439511285d9ad59397dcb61dd77c466858b5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.5e313b1f2.0.tgz","fileCount":40,"integrity":"sha512-S1CwgYJOVIh9f4GnSZCZQeDG6nK51xTjLNCgt7qQHww9zlAAwhWi0Q4cLvpFHjdTOiJbwpkd9v1AsIZE1Rdf+g==","signatures":[{"sig":"MEUCIQCTxhFt8y8NFR/a/HY/RhJl8B6vyBjru/Kyv1NwgaNw+AIgA4MKeK96M2I3fom/bcpFYTlRMMt1F5DogpT6+TQKt/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHoCRA9TVsSAnZWagAAAXwP/iTBPdn7wJKl1xWTLHo2\noaay32y6oJK7nDpi3D5fJ1sT8GoBjLfm69YI3vUvUrXw9QbXkpxrrXQOXl9R\nNrRdkPEeOati6Pis/e41+Cl3h19CdOvQSfk/9D0RW070NxtWyA36+cStvy1X\nYoPB0IDAiYX6x+nH5iuspKkK9QuPo7YXAxDmnqmExj14CzYkxY71o2yNsDv6\nxjNb60XBVuqTrtIFHz+tc0E/LfT+Ui+WsiWsY4XeZ0BFpr6oims79d1IHLh0\nwVfU3N4FQhoLjI8YjM0JJTQQWZ7TEHLKM0hqGSAa0F5DFxi2ZrnrZ9sLZrPj\nPFXqR551x3uoxC9hyOUW8NYp8HZkjBT3YGj7VKn2JRVOVmXJJo9/IEzFIR6V\nnTQufdPLGGa73dXdVwdLlGAaOJzc611TBKrCNb71ks0Gy6ASzPMNqsSd4go1\njlf0DZbAv9myIGEXrlFRPKR6MFQyOr6hEo43gZv6IlBHat0xkLsp5Y6xVL4F\nWs2SBfqmfFQEY7ixGVe+p5BD9rXbeqHO/cct/PL4Ax+7rpOsUikSp1X5bBGB\nv9fZQio2Yi6JN6Plv8MPiT0LOiOsy0T+OQelcca9GJAaTySM4bySf/1Q/3wh\nlxnXL4E4gp1kesJoPqOUVgafrpugz0Yv3ulWTw/1TigNQJHprk6ZZk2bO50H\n+N5Y\r\n=KDBE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/shape":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/button":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/typography":"6.0.0-canary.5e313b1f2.0","@material/icon-button":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.5e313b1f2.0_1581724135554_0.05497634857619205","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/snackbar","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee9089cc76d35e2dda46303044547d658643ab6d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.6a56f387c.0.tgz","fileCount":40,"integrity":"sha512-Y/6PqwSkU5SBye/zvVo+kDHMz6P6s3dgPpv9t0X47lfuYhQW4I2XmbRKLWc+jbaZFiiRqVsF5mPEPQQKf3fRwA==","signatures":[{"sig":"MEQCIAVa03vJ/FtQAaMX6t1H/c32wCbjGGPWbJ7qD0JbhLn6AiA39pXQGjwXUHcvWDNAp/rxg5N5lvc2msqPardFVDXUyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6bCRA9TVsSAnZWagAAqt4QAIzsD+I/MWeZntDrdTke\nQYpL1RPX2u8b5Z8cwjH1+lKdd0EcHPMSNpmz36LEvv3lcxXVKP5nKlxN1oSq\nkZfseTyyUBGdQG9BJPrgcR1NuL4Q6GIcriO8Zs42ImX3Ledas2DGuRbzMK3z\nMQfuYin4tRtboHJMeFclO1Jqxx+XqEBcPOuA9HiF6VgAvcXXVdhJfcHs7tGZ\nuHnZsDs6f3Ph+Y7IyZ/iBG3X4Mdvz07mT6zcdnvoFfU4pSw7qsRuk4+ZhlnN\nHxYgir2SGSCPzH7BHMXG469hDxXy0vzqQ2IOybjcw/e6KtuN9ieutKBL83Rc\nYvifHXWmYUFOrDTU8E3h7hgt7GJ32AmZGRSN5QiHBg2j9CTXKVN/1jZert2g\nLqOwUoj57DF+2imctQPtaeXy8oswYRfNhB8kp9V6qTueg0ns0/DyEoSwHFuL\nKJq1ok9zV6eCLP3aBoSMycSrTjQ67DhW0seRr4Ufa34mznyItKHTnpOtyPW/\noVmA4riymronQGnsBgypwQlOHSSwXV/4bREtMPrpUZbk6kHWoh0Q+5+kbKmg\nLQUcuOegxnNfxRy/xffEgzTMduqosZAinag0UfQxB0iJuLI0wheRAuy/WsLF\n9a8VltV8cMpymKf0SsDtl7yrrf0X+Xke0esm/hh9CzWGqe0/RzRobdCnXPbD\nJFaI\r\n=hnAc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/shape":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/button":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/typography":"6.0.0-canary.6a56f387c.0","@material/icon-button":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.6a56f387c.0_1582055066621_0.8369702058204498","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/snackbar","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7252cb02044f9c7400deafb32549e3b9c5bf8f4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.bdfd52632.0.tgz","fileCount":40,"integrity":"sha512-tHxXHMu0t+9lq2fB5OO8nmcEkzL0V1sNKwL9DKB5xj47U2OINk5q4qq3vX/O+jlIewRT9eI4wL/YcpBQIWPf/g==","signatures":[{"sig":"MEQCIA8eSIQWkLlJ3vSBTfoBDnYcnFgd8ml3VivKazHyVudEAiA0etEFWt4Z4Kv9lo0VC6HDf8k4v+da9nLfs8Ft5hk2hQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkxCRA9TVsSAnZWagAAIYsP/0Fe84MvueFL41b/5cGS\nQOBJycV1IOhi7+K7vDT5QTZkupm/LPKdzJoPKzGTU3JtZfY4jAxXS3SYGufV\nN3clhcb5vxIA/F1KSr9QvE6INfhK41XQXzNO6UzvC+2Nl5FbUiUR+F9iazNK\nKX7TEpggX8yPPqyO/nO60/KrR57K+P4tFmKzJPeMpseb74L1XxWxmSDaNBGt\nBcdvGl2r6Nt9yChLCIc3r7ChaM6Og/iO5HliTZJrS5A1Ot/L8/7ahr+3LqRD\neTclT+jzDVwdb5opBEJEKBFwQSUL+WvNZL1EKgUQdu9L5WPNUJMXiPBebe7N\nrrdMCGXboc62J9WwbCsz8fMai6lPHRQ46YQ1i1YwPWQpPjjiXKVssAqnfB/b\nheL2G/dZ1KZ29tIOUUseQ2MU798REn/2pzqblPU95M9V2XFQf8DQ/+o3thGC\niJy0EcZcb1iJlJHv5jvkVDpuv/myunstHy24mlyF7b9vx42VwgsEFX64QU1d\nO6bB+jYiI+cM4Fr63d7xscVT3YH1ScEQtcNCIj2uZfYJ7cRllxHx1l6ah1w9\n+wyrJIsVYSUZoVYMXhaFzrIJ8YWdzexZ+tFUjvhUzuaI7Cv/KXgO6zn/Y7Dn\nF0n/0X1upTYCff7afS5VV3TUAuLwIfS/YIXEh8wlpWFKKA7bbNdtaPG+LUpG\nZJL8\r\n=5dVs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/shape":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/button":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/typography":"6.0.0-canary.bdfd52632.0","@material/icon-button":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.bdfd52632.0_1582143793289_0.3121283139111841","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/snackbar","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89e0a829c4826288ec7c3e8a2e67fb9bb880d87d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.ad2e4376a.0.tgz","fileCount":40,"integrity":"sha512-SiwuEoGAjr9iJxvKPcQmmPr5HDnJijT9/xSnWfpVrQSc3GN2Zn0M/yTvwYIU/x1f3qoD3EKC8sF+IJ/qGO9r6A==","signatures":[{"sig":"MEYCIQCC+Z2X0h70MD4Zv0vo8YtzRqFiioJqG5IQjhr6yRSPDQIhAKdAjZcrD6w3HAmH6Hj/f12nREwhlwgoguTtNdVJ4W2r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNgCRA9TVsSAnZWagAAWVMP+wXVZuZEAqC3cfNgAQIl\n66lm9VYirvxY7WXZCr/NwdRMGCRlbXuQn+SimI4HG+QPxK1tn/oQQPnt3aEU\nMeerbNAvAny7EyB23/sjjeHpVZ/xOcpHqHrsm/JBdni7QHnozMdCzICAOUjo\nezn+VShC6LwXTPycahRTWDulawx+21k3Ov8Ksh97iTxbzBqGcHUM9s4C5NW2\nhPfqHGWWkwpt2DVkjO/Qop+5tpz09yc0sjz3fG8UYwjMemi6qq4jzSuewEZv\n5aYyZ9Ayudvxjkby3Cp+AmhzsFesVx7DwV9TK2jekTlYFHZkWxPlih/m6lv0\nlpMKrejbu/YLXt8ZEGmmm31nXq6l+m7Tro3B2JSgsFxUrTbOcQaAvNtCrm9E\nAIFRYtByS62RJcbt1GRq9YsBsmQhtRd8QDdwz63DWxn7fT6Z9yKrNQ8u0jvx\nb2IjTUIxoRNHTr5vywr6kDlrV3+BGqOIDMSeadUfN1bsu5cqDGlsHpFpeCun\nV93nG5LMn6VF5ch3ZYRtgESFZVliAlO7vTw9uGNMelhm8rOEPd7eJOx6byem\nUVyBcjoE4QtSXCuQQLQGFYlOqBjbojMZ8MMa3ltn0gDG62ifmeP+EuZ1wukg\nBam1aXRN8MYtRaB2qt4LiKRTlEJ0hzbKWxdZtZEoqxGvK/ywAW0vL56sBkZB\nr867\r\n=zveR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/shape":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/button":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/typography":"6.0.0-canary.ad2e4376a.0","@material/icon-button":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.ad2e4376a.0_1582240607843_0.7373402747922237","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/snackbar","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a1c8ff2e498ce8f1e8361e437f5727d9a4fa778","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.765caef18.0.tgz","fileCount":40,"integrity":"sha512-qdKS9OSWF2WeJEyxXVesT2+2EHev/+iHaTqkM1EhezGOIowFA4Bp8sO+mrWJSvZ1HP+Uwq+q6v9zyfgSDV3DoA==","signatures":[{"sig":"MEUCIQCOCOUrqWQIeNPg3U9YYL1KB3NTAFBpC2VQiF5xnUy2WAIgVJkvvhg7dy7id2DugOch54WwJ7ujzJBQguwAKCS8bVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBR5CRA9TVsSAnZWagAAGBoP/3R441NPiaZaQnDIsTLN\niaQd6UVk73Epm8dAy0ZLAHahfmFHCDbvgCFpn/zt4njTUTTDl0fQv/tD5zpi\ntcQ+eaaWsa6dG6yXuhPemDszWh0RcqCMNar3xLw2t1hp5s7bgQBDle49J5W/\nz51RJT7WKgl1uq+ChLmDj8ZIMNQVOC1+aPNYh9jSWbUyR7ERvDwIOPeYpA4I\nanPI4oS5BUtIWEAxyYhUf2QwrmUXiI1g9fge22PjhlChf2a0IzCu5mvo3+Nz\nCLVtlTSO/CcvBUZLaPhrg1m9j4+T3V6SiVqqGzJjKU7/+RMbIXdh1BN1Ra4y\nsvrAlMDiPbjePguGmcK/73Zdv573HgUMVgdu8fCtCvgv8MqZ3f2NdFbt+0tV\nZoNovguwh2mMZ/2kfoiRya529XQN1b0RBWkUya7iJZYXSn86yJ6/4SbGSQ0s\nDFfiUhsqwMnYk9s+AVppQWXCFfnf5gFUIujdxCQfl83Pyau4T23xbp6n41Et\nw1fodbMDtHj6qtd3Y/+BgeaiBnTLGaX5TMXUgduwASeDFDpa7NBPNTmwd4eA\nVFNzFtTI4H9mumNEqVkj40EThJFsLCRvhCjh99fmh1MlA+NUtxxdRwSrPvG9\n7k7MX16aTP4q7H1AZJte8CC7ZeJk9NnK0gIY7gM7wT1j3OuvdllCMwJj3XYA\n9JlA\r\n=C3XL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/shape":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/button":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/typography":"6.0.0-canary.765caef18.0","@material/icon-button":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.765caef18.0_1582306424628_0.8546683462945079","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/snackbar","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30d3d675ccaece48dfc9d0863211714b35e07b65","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.949562303.0.tgz","fileCount":40,"integrity":"sha512-40pt87Ib1LnftSA1LxLwaK7dgNod+k0RiwSvFyAG8yERtrMdTakXksgJyO2LESCsns2iefnbfYEoZyXeXIEsJw==","signatures":[{"sig":"MEQCICzVEvDMelh9ZecLgUsYDH18njii72r8AgLIeMThnxjKAiBsKrvtCNvCKkoFpY4jPBbiXdc3QiDJMC1ozv0Dt1mPcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD/FCRA9TVsSAnZWagAANmkP/3rFDvLaX/p82/3hhbL2\na9dBG2qiI+zCbOxbD2F566s9m/dz3DCSVfgzTQAs5tUrjweBbeDi2fnXE9yh\nF7PJdv6eBWxMiFRAVh34A26rahx+po9Bt63UwUWod5UOdDFLW7bDHM3zaKF4\nfsajAz190lh/pSxl+VSkitRyZKctbvWDXpvgJg80AAgoAr5bkkAE4jInEvsG\ntxOKhCkS+bUe/Pf/5BGV0rFO7YOjQf5n5Yo4Lh9Qt8LUcCEicF6EQFMSiQUo\nHZ47zNW7SnhY4PVERaATDOsErEdpFrZJBtiWkfu/+CRab/pVG/7sE/HslmN9\norobEq2xJihi7hQF2ui6JoAyb1h8GmmrYTlIW5pDXwsOgNMnFC1AsvCU32wQ\nk/iTw7JWUF/5JqXx/Gt30I9gr2fiw2lGNwDma9Cct0goBeTBD4OAmkeDlElg\nGY6KjXVsLhAYj/VXEjKNimoeHWeKfC0DDVaEQJ+ZrheaIu4C60HmZZ10RnyN\nXdDIsWyKHpTG/WUldQw7b/i+iXLwnsDNnXzmJpNLVmA/gEq257Yfz67mRnHG\nScSu3G33M2dHl9wq5z31iVDRRMs4ol3la4KvjBT+n0zRt0YxBpMMJgkbVCQM\nubsSGGdIpIf3iC86Vi1HohV9ky6lZwhzOdQDpnGxzWfNzEjDc6pwxMDg01aN\nXQwc\r\n=94jx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/shape":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/button":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/typography":"6.0.0-canary.949562303.0","@material/icon-button":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.949562303.0_1582317509146_0.09004725669800084","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/snackbar","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d6a71d461f93b9750feddb13899a23eab94a414","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.7ec96974e.0.tgz","fileCount":40,"integrity":"sha512-++EzWcYRUqhva8xpqM6mk4E3BDAIAVUK6T0q9am1tW08uz7YxNLjoDTDeBFPriSDlFNG3YOFtKakWNomnJuxTA==","signatures":[{"sig":"MEYCIQCgLRLde8LIHx66sh3jSrieflcZlEoAShUtGxQ+IiXyKgIhAIni7R1VJhOayDvTvBZyQowlKoTFC2H1YC+HFhJSMmGB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzjCRA9TVsSAnZWagAA2p8P/RsDg90B2zjlkdB86c6f\n4Nt2oQJFYgHPbaGRGrLXezvnFrqJL7zedtYovKJUbf4T3tj63NKngWMQ3OUZ\nCE7w8u1YEgNWF2Pi8Nrxws1hLiasju/h07mXOL6wxIIDW1x18tc1ubtCjNab\n3P9ZtMTcDCTxA7fmEAnHWFz+VPTkw/YJ32sl7tLf1V/AdWIEk/hrwj7jeW54\nUOb1OShAcHmoe/LmDN1+HnltbBj+tU8p/HYPwY2f5Rp3BCAH7pduwK1bSUP0\nUOTFv3nXR+y0Z31Uwahjh6s6eeZxFzRryo7ot3lmEl+LzxWNMjmFXkauZ/8L\nFnzXTyVix6EO4sMF0csyDdyEd+u9sItS4aegrTnMyBOhkl0yqvQkdaRvuFfv\npTHU1FQPXEZtb+hSxjmS+DXv9Rz7t6OX7flXfY1WMp/X2YgN2/pMcT6MxqTN\nIqW+HNui2Iky1QyY2xz7NbgWN2PRplA3o/ky9V3E24yR69Cqy7Vqll484fgM\naTh474MzOALLpIe3TPMD4HvMiLvD4sRj+5Ng//Wws1gf2wKESf+dW8ZI841b\nuB8bye9fYhHrKEYPHA3jkE8yKCWIwazFKYLQf+FniHOk/hx8kks7gRaJF3/s\noM4FCJ6FjhRjHwyJJjLBVRNs9AMh1PLPCta48WNh5q1hitjRUHy+dMmruDWL\n6S10\r\n=5SWC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/shape":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/button":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/typography":"6.0.0-canary.7ec96974e.0","@material/icon-button":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.7ec96974e.0_1582570722841_0.426626464326221","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/snackbar","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac428e2931d262b0db4cc2fa8cdd0523e9b51faf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.265ecbad5.0.tgz","fileCount":40,"integrity":"sha512-dFIAIpHDxCGO6NrubYbb1yy0MTXplysxtbdoe7sosyureLBIcRrwI6UfyVPy05itYeKrb3ZhaRZkpPX/eQCSPw==","signatures":[{"sig":"MEUCIH6j8Bgj9PCCRN4K4EY5RZNoyq4YFb08ouFT44pJYzPgAiEA+xiOvR1lRLfeaTWYmyMmJZWtw97bsIS+IKs/UFy6WC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYspCRA9TVsSAnZWagAAbbMQAI+ZAjwKG2zgoIJWiqij\n8SL2U5nDYYV/q+1ZYc3ccMn3Inf/7F3DTNHeBfj6uLa885kqoV6+cCmthS6G\nbdNVd3KDRDDCTa6TE66v1bNsfxRfSWEcR3aOUEpZ4MyQ5kQoRsQZ3uF7hED+\nvqnmHqMqd8mZeqptobJ/ajCARpAdZP3jZfRtZEUR30SvQELAUT6+jTK4+fu9\nYoGRJI8j0PAEACQZmPDW0lMYNcRUZumNIBCDCgV9bulDWhCneuREVQ5CV+Bu\nJtWJ2O8NXq0v4MhSCvmSEqwpUZNfuKBjt62a58MRGu0/hsUHjeTS/tvGg2b2\n/pKlgI2RCb0d4qyR5++7kkeyQKY12FQu1O9K+h+a/6idjMpHnVtUAV0BPe5E\nusswakzpHgQZQ6CEnovaEfS6Df6HufJysh7JEEgLJMralOXR7D6t1A59oC4R\nyVuJcmvXHBml2Me5kkUzyyx7yJwZ1w+QzeL7lVZC7varQr2xBry70ZB0TOC0\nbLFe+89woMhOToU6XTb/XqnEwtVPLRslGfP1s6766Jw38GpFvO4eydVJ5HzW\nIJERq4ugOD1Nh2YstCybiZSVWY87u2XSfIcsTRR8CwkvV3cr9UVe1ZXKpyN2\nq+G4h36v/pMCR5stKoyKoQBp9HMU9UbHyCIkJ2K4d9LClqb77Njxhp0SKWru\n966T\r\n=SacQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/shape":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/button":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/typography":"6.0.0-canary.265ecbad5.0","@material/icon-button":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.265ecbad5.0_1582664488684_0.7643683984586791","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/snackbar","version":"5.1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5a075cebc314f5d3fbe887c7d2231c9587e9d9d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-5.1.0.tgz","fileCount":39,"integrity":"sha512-bn6WydEGKZxq24aZ6BfnLGPbhCww2srOe+mn2W9VJFBfZEh9qnCcya2jHs295pPbzRtDM1b2oR2LiAKBfIBt3A==","signatures":[{"sig":"MEUCIQC4LxIA+59SM+Y/AtWG7TijJzmTMMdlR36E4LQ+M3f+bwIgHPSq1oGVx200Ql24y6IzizlWg39NtI/Kkb1pnCCJnZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPpCRA9TVsSAnZWagAALt8P/2NW0KIxS1Lsridu8CNi\nSphplSvqCBn4WDbbqVh0jTgMaajLH3LzFo3hTWt+dL40/Xs1QG9lY9VlrfmR\nYcT89jvbBc1f/r9kCy3qL7/Qu2FuojkeqEpqu9EDnhbrzbSoHedqGO6xuJLO\nDS1cA+jtAQ/UMjS/Dum7o6baH4CiyzmC2baPOegk6eBo4as5RjqpAAJzzrK2\nwo1gAyBhdSBhRPaqi+dU8q1RVUk0+drxffovjx6412+JmkIeKXHkUH6jER+3\n+MrCkaKLr0KnuAoPGg62SMBKo02g3QosycI140uG8bpyctMkL09zV5w+vORO\ngsjJbOGJ6PH5Xp4cvQ6VD/e5ur9CEMZSN04FTmOpPujIVr1JRau3dsVEGrA+\nAu/Jo2Rv4ff58TD5Jzlm89jj6QL/H2A1Xa/2cejlnGU3lnqxHgdnAF3fmUY8\neCTT9vY9h5zQf+J202msAisZkepvBJn413rIpcMgIhhyoJ1ACxJxOkQRUUdY\npShjg5eTrZAFfHgUYab6xguWHTNwSnNIrVpwafDiNPkpdq7MLphXWVVmtEKJ\n2CfYfvQg88fD0cjjJuL14RcBMxHfMk0xanApgn46g8uQwm+N0/xWgUO4l1v/\ngTd0bLSguX24NiaVkYO3885TVnAXsxTTJSz2HrDVqVfSrDvbkx31ZSV/Jufy\nLNmo\r\n=w78R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/shape":"^5.1.0","@material/theme":"^5.1.0","@material/button":"^5.1.0","@material/ripple":"^5.1.0","@material/animation":"^5.1.0","@material/elevation":"^5.1.0","@material/typography":"^5.1.0","@material/icon-button":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_5.1.0_1582666728919_0.39507580533426845","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/snackbar","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8abf1cf3dfcce1ec105ec06ce3717cf938f6f59c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.2cf87456f.0.tgz","fileCount":40,"integrity":"sha512-W42BbZVkj+gGsI4v0FCOk7gr3PrlXrnl793KNg8Nc+R+qx7JpbjlE5XJOKS5ELRPkJREv2q6jF5Z8AKqu+xB5Q==","signatures":[{"sig":"MEUCIAGkBWyIhA5E/N3qYGSrnPHHcK9fGIbiYvMUCV0INia6AiEAsjGU99sfUav5IQjW961FKPSDjSOQx+rvPUQOzavXEdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZQOCRA9TVsSAnZWagAAHsEP/1Ywe+AnZyyxRzXG3s0O\nhU/Z21uautAMfgipyzpG+Z9YizyF2zyFG1yI4nHp+iD6oR7DJbKEAul1aVnj\nSNy8t1GIebwT9WeoORgu8pBm9h3HTLr9ldZJup1r+/ZZZWJRbnfNazjSU1ih\nYS5s3eKqHP3fsjb1DaSgvrA/m7d0xDGSVZqotomp/FjJXpBGRfHSwyJohu3i\n1y3eTlNOpsynaQjHjF2VIxFDtaBTEPIJhJnbcwvkDv0Dzsyi4DK9fYKZBXEu\nnpeUNdLJnLv1rAGoOYLEymQpfuT4nrfvPATNjiDczsc5kfVgKe/5FFg0A6We\nrqxhdk5G/Nth+e3wh2svAw5ww1CrchDOVIbL02goBe30/6GERFuboR4X9QGk\nupHNvFB9JoD7FKxZZPCZ0OKyu+gpuWOkMSpf7NGYe+QCr3vKkPUJx7F6Spy1\nD54hB2AQWcQwP7FE5FfmKLWPBAdUNsDRlH4nPqQtV8OiQIihqUY1aVaTOXiB\ncDhh8j+4kXdJ0KWafiMJUigstllRRhKoBrp/I2NgG9JouO5nP705zT55QhzU\n1LyDdWQtoUc9DRQGksucxXHQ0MWRAts/MsfgyPZqkxvkcHl/Ju/oV4RidBO3\nVsz9WTxdspv5wzPIZMbvdigeduCnqXi8Y2OnE9M7iU2Lj+A9ON+AJKq+tnM4\n1+tJ\r\n=uzmK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/shape":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/button":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/typography":"6.0.0-canary.2cf87456f.0","@material/icon-button":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.2cf87456f.0_1582666765658_0.9737209552614288","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/snackbar","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3c32036950bee2f6f4fd5c157dbd2b1b98209c0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.781434a92.0.tgz","fileCount":40,"integrity":"sha512-vGcFRjW8QgVi6MsOpbEbLQkPFv90Y2cB8DAUYNBUG4CMVTNeSUU4qLn+QyQU3l8K+XZpW9a8UWP3oB724oSJXw==","signatures":[{"sig":"MEUCIBAAd8c88FL+MymgNN1221rmWraBjCA1ezE3DMSREQ2RAiEAiR3AoV3XPzqfrdnnGv6gfwCoXPdQ89IFjPWdYYpIdgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2qCRA9TVsSAnZWagAAi6cP/3i1CCpEYlYy2iEfhQUC\nn446XWYJZcyiehButPgFhgE5POlkCK4qz+IjiZqAJaAHqh88eQR5O3EE1Ahe\nCWP0DbMyB4rTEg6skiXtA9dr8Z5A0yvxTnTOsQXypug+r7wMmg2NW4Vmkq2/\nlmxDQ5+AQEZN3SVij1I2WhUEKnWf1yuzBcMnn+Oh9eup5FMmsQgPHAPgvlVH\nsmwqB0Wxwea09vF+MfVW0Lafkz6+9ZfP6LE9XezWSFTJhYDieEGExYo+MRap\nu2X3/qeOG2K7rpQjEHYfD+TeEWdVt8UofmMnjQ/Url/A3m9IShkKwRytIZX7\nezqVNHA0o4AGidWYFjWr3MD0h1lkVmJGtQvLB9zZE5Z3cCmUEpzhIZS5xiwP\nlBdaVZikCyTZGrSFn/Yyvu0Bdm6ZAwHT9yn6lL3/pVv90q0I0l+sAmIYU5ic\nR0/WyonA9rzk1bgSk3ULKRH+TIYWfe+61ynvs2PYsHVQjVA216ANZx0pFxEm\ng69G6A5Z2eulUGx2+OdM3AX35R7DZXArgeQbzqPxxVjkCLSsVtvOCYFk2DMz\njHKpSbbOeAJckijDBNBWkd6nkEiYPyk65RJUX1LU+Ui5tgWxNKJt5VQCAiwf\nfIEhEreePc0uhAj7AYNzXymafqjuDLcUxvVv2V3gwk438ypuBYj4sHjzHqfY\nsA8y\r\n=Sk7q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/shape":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/button":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/typography":"6.0.0-canary.781434a92.0","@material/icon-button":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.781434a92.0_1582673322132_0.021760118483368895","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/snackbar","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c45132a46458c22a387234e42576a4d22e9e119","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.d6f60c98b.0.tgz","fileCount":40,"integrity":"sha512-E2nODwqLLEdy62HLS9DmjGvJHID7cPLQB7KH6Ro9CcskD29d3+IeK37wlKt8w8768ecRyR7Xum9DFNDOjNOAXQ==","signatures":[{"sig":"MEQCICuyNQsCraRK+0ICmff5w4bgNzRlUw1o0pIFT7fFWRwEAiBUpZe8qP1ywI3xZXeq9yVGIBsgrs8V+aD1PM3XgGJ21g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY55CRA9TVsSAnZWagAAVe4QAJs7MeTG0qK5nAZ9lavu\nWNiwYZrMeyfoO/2RVz9ILNFHVQp51Dj7ebdgeFySL236gLNlEi0RH5A56AyU\nE61hLkFB0VbgSCqSnwDbzwpfwiWckEGRwzNbW/uKsY7KO5I5oTYprsSWOaGP\n6m481QP7XC1A6LFrT4Pk+HxgLjhhKxqmMS4mdAs0hiHjDzyZ7YwCHQRTkBhK\nCmITRS6ojo9bP3mximZGh6DMchmYsXq1NuKZjG96+GGgo7fyMatG45jNOA6g\nn2AbrkNUiyTtt3eJpIJzX3o7KOhmqIPh18jCBspZCo4i7rXdHEYCh1F9vws7\n9drZBnjhPcvMSrIEml1gethWNcaqXEp21jd5pFvIci8ob3hHuaH3Vq294/hd\nyQNtU4rxEZk0y7tMQ6XEKSBLf5DMX/cuz2GFoE8BlhYhYLaBOUf2C5TVoLw8\nXrY0dHXO9WzUJ49pF/UUDOzAAOR555VhP0qWSuXJ4UHJNkTAjnxVUsev1z3j\nHjM3eBbxHRDgzmN7grbTcsKBYWOoKSxCOdnZDm9pH/MYFZcbus1BGWDDbwlb\nLM2Ck3sT/94pqVTRJ5aqXStDA2oe+UMFuhYjUrMCu3lDu2cs5IjfamrwfIeE\nyx3HRrsT3nQ1usDMKTBKkz9XI0+oNML3kPYUB8bel2+G20+w6D45FZi05aJm\ng1Fp\r\n=ISyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/shape":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/button":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/typography":"6.0.0-canary.d6f60c98b.0","@material/icon-button":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.d6f60c98b.0_1582927481224_0.9686061934768675","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/snackbar","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f61f2a3c1016fb1300d550d5b7ed8ae1528c222","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.69edc6e28.0.tgz","fileCount":40,"integrity":"sha512-lYsYYV3aWOhzhuweIFi60+mCv7aIYkIrp3/oyB5boomvRoFpyYtimQu7NEOPBO0cq4eHFVq6sIvjZMqWUw7PQQ==","signatures":[{"sig":"MEQCIGNYEHm9TYEteT3c+ID5GgousbrBWYOr+tXCaH9WSGEjAiATYTOOTwcwpRPM+OY70ATQZaptM+gYXq4iO6/8eNzyvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBiCRA9TVsSAnZWagAA8JoQAIMx29/282W5Lcfs+I9l\nWg1aiPQb3yeBmxePGfzwivrgNXe/Vmoukrc5clvrvWTFuw0eHN4P5W2KwmY8\n6RdZIH4EUU2Y5VFFIdRyiFLnSYsDBF15UfpanMKCpSjncHSf5cvv7LwbmLNs\no+4rk8IilJf0GfXD9LsQcw0DvltWQ4+C0gLMKVcbPZZWPHbhTFcBMhfi0LRi\naZ8OtxjOePMnXmnDuzm6uPIBP2vL/zqrSLkXSQaxeVQC5ia6k/59rjo5zHn5\nbcXDRCFdSEzmTmzJp7LEDNLFA+GsvKSnLW0qj8EAj8k+ahRsA/5ZtuqLVM/b\nvPLzfder5g5z1b8d0xFjuWUTezeNqp9l3KXTKoSsYKAu7T0knVGXmU8IdfK0\nFf0WeN+g/WpGB5vRcBjqPASjRGgGgrFdTsItIJV8bymDNlz/PQM3GsuKdnam\nBXt1Nyr7r1htuilzfGMGA5B1KspnmP0fjH8orKU5SxGLyoiWBqmqdwm2PGKH\nUQ5T2JsvVsEZB/Xz34Rxhqk83R2bKFhSJY3jgwEqWrpmzqMDjB5q0TaoQPpn\n1hZ4Y+IELXidMfse0JJLz8/N6AQgRS39ZMsExpMGRZuKPt0h/xKTnjFQavp0\nEpdM1va3J9vvVyv8jOqz8KiQtXvXAsw1n56Qs3wGxhRtJg8FSQl+UnmONXBO\nLegs\r\n=DcAP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/shape":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/button":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/typography":"6.0.0-canary.69edc6e28.0","@material/icon-button":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.69edc6e28.0_1582927970356_0.945102034689","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/snackbar","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a0077c8dc40cb4e728318f9cad0e74c5ccda966","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.9372e4939.0.tgz","fileCount":40,"integrity":"sha512-L5JC5+Zuk1RIAMYdCzsy20lHfRaWceNVAkhP29H3Sx8UPjeki4uYza999kdVEBn0CJHPUtoo5zn+j7vDiwb31A==","signatures":[{"sig":"MEYCIQC/ygWDLImVXxsQ+qmA1z1paTjX87pQl/R/Nw2+hs7B1AIhAJEm27+fzZfLgIn+MOo9ZTnLnRjM9vH74sLPJhSIUde1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqvVCRA9TVsSAnZWagAAJx0P/3jueNtQuivQtSiVxwtl\nNRtL4/S8rtDqEkwJ6XgipDkXjILUSd7aZCCUhH+1NGvU4BxNz1r7AquXYB/K\njW44Wbl4iqqtGLXhCMpvyetypjhEuwCXpAJM2L687Py9xIG+Y46b7k0O+DGn\nsoVEndG7EWcvzwoC0vzDsnNM+50RBgA4O9iNPH7kGathmeqQJ6Ty7sn1hT/+\nL5KuspO4mu6Q2wblSlOWgc91aGIYv+C5pd3Rq+WKw3dIULcv1T+iEy/IbIxz\nSaYhARjfZ4SQSqxXj6UQCJRktPVhJUL/+vu5VS0dUwLZ3UH+rzOC2ueY2aFl\n5SNVqXW8ww9bLUTqnXrDHCVscqgRx6sJG+UQflnNIDPInegn55eOGrjLoUpK\nMRCMlrBmNi6Tclbcqc95ac3U8U7QrgM2jVrgziEU8z8QN4doaTqZlUWetA1s\nEeSo33KgVKRhstRGFhMitmtROwVO/gEU5EKnq891fCiIlGb4YiG+f6VY8mE4\n2dk0Hccxw90eOUDdyYJVL2tJMZQrDIkY7nNOiHG6HaPRAWPxgkTNoGJMTNCh\nSmYVR8iJ8t/ZIsXctfrKOF1krRvvqMEgpUpCsgNSChv5HNnkjk9yXdvbex3a\nv7D4ph6FkEl0de97aE6MDeHyycE/6vNjrRlesGfyrybTpuNBpzZ6QSS0LIUl\nqiER\r\n=JeLR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/shape":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/button":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/typography":"6.0.0-canary.9372e4939.0","@material/icon-button":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.9372e4939.0_1583262677331_0.6904721004697603","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/snackbar","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d967a541ab792f82501cdceb594084a7ba301de","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.9cf5e9842.0.tgz","fileCount":40,"integrity":"sha512-Viv80jIYCsuWv0QEwfnmWCDYrP3Engvk0FOskPUBwdLjQMWhclkCaar3H1e8PUxwVZJNd31B1Ndk5AqraQBwrQ==","signatures":[{"sig":"MEQCIHLbfS4ytfxw3NyhIj8RVVYo/0sd8vcii/jQs+BGSPgXAiBorJBMDwmQE/n9Szb4/tLazuyBB2SPOHHHhYUdmcmEhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXue/CRA9TVsSAnZWagAA2JYP/1gwylgiTvtmjKeVmN44\n1tYuF7i39zEM+V0y4uwqIvh49S4BSWqSsoR302YRglw7WwYNxweRyHktYIj3\n87sBCsZnoLk58n5LwMlXj93NtRg4u/PFj4lcMFe33kbBGPmRB0x9WI9098Vp\nfwsqd6lagN6PGXvwL3wZOcaZNM53sRCDEjkQR/yxMSuzFYcx6XebjK6YncZ6\njwpplMPO0IMQysVIHbcE/RYo8m7VV8JQaniU4PQ1qPNTomQdNaPt1yG/slVQ\ndWfy2XAspDUuB4BcXcTWKZUg4ZwXvRUUJU9YodhdEbMpFG1sXTXliB4CiuoN\nZ59I7cdLcjR5yOEDsWiQwv0V/zXnKyjol5GBPjGgJWmjzcaIaZ3EgeDjF+k7\n5I/yhi+aOuT+1+2fiiwN5B/hODMJ5vhNywKKDYOXkxwoc5FGvhjmiPMzrwLg\nD8pN9KO2Mj/TLgiayGkB8WUCWm8eMm0JgKGToJ4OIOdFgU1MxgROyCAbiKA7\neEcNYcJYEWvRl+kC2iRFJvscNViB/o2E+mrymQgAhAW2p5C7nafUYUsFrniz\nE7ExvuAgCLJMsDrPU5PGn5sARuQsaLnhnOcPplygnfdpBkft/WOW+5xzYosP\nRbqbO2lhh38OYAHMrSslpOcugRAddBPWoe2GPWusLPwx2mhiPMqrVQcMSSLc\noDY6\r\n=Mibx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/shape":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/button":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/typography":"6.0.0-canary.9cf5e9842.0","@material/icon-button":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.9cf5e9842.0_1583278015528_0.42773707819913676","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/snackbar","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dd61cc09c0bb0757953424a338a784d9004afe9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.3657f8863.0.tgz","fileCount":40,"integrity":"sha512-hLjFw2O2FKNqpZ16cJ8eGS6KebNU+g7s6dUgNBJx7RgpTqR90FYVq2s7rliwN8qv+w0a5DfNvrUsI8SX/wj9xw==","signatures":[{"sig":"MEYCIQD8i/sDwZl4CgIJFkfYNc27EiEIwa5SYo+p4PfZgkpzsAIhAOkGhbPmca6iNkt1xjoKltZzJ029w5rMrDRj4OwWdu4Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kSCRA9TVsSAnZWagAAo68QAKQkD0B1hKz8Ih2rLj62\n2ryK5uXHld1vbfvrpcCblNB68ZgJEZzl4G2zID5IUKZQmY/dOQlpGHrxi5jd\nkEwNtrWOitRRrgF2HZUefDo9Ro6dQqNVut+f1RCcO8mfowwjsyrfJCPFa9e9\ncGiBba/QVgiZzGIbuOLUnZpH+CSVk4n/41Plenj1htv5ovJEu8JyPPh2WJ3B\nXFBn1uNw9uYi5i6bYW9bJJnYwzr8YqoXaiwQBP39jJ0/A6hwlsMAdZTm6HOJ\n4iSlfjIooVWKUchhHOlPmGgpNYTCD+K1t2mtPz3Tp4+RYO7lYKWt0VDMKKTM\nHcnQlN+wyoRiyN0fvXN5gIlmpgOk5XTAkiIf3mgBGL0eB7v8W5EWUDQhh+UI\n/Kg1GMaHvHzXjjSuVCKVV1C84VkyJY+tEun1WfykTWtJzViNk/ChsHA5IIm0\nLk0iXIfQVTYrkWy1RqEgj/LhvEwAt+bIV+EN+bkbfTmP6QtxonVc32hGKpz1\nc9YaXPYCtQEVBXZ6XU2TIYEmqeEZMB43Gtw6gg4U4b5lczz3bmdvVvSJNQ8b\nXonZxQT/5mWJREQj1Dqn87tuTduErCpzkDydmtyXSrOy2yuNTCxG8ytZhwpF\nBDOdFCo9lc83X9EipE1gQflEtWzSHE6MJpJJuat4IFapPNFQ6zOK2rEvIgot\n+IRd\r\n=P9kt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/shape":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/button":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/typography":"6.0.0-canary.3657f8863.0","@material/icon-button":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.3657f8863.0_1583343889640_0.6810670133750989","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/snackbar","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25e34645f8d0efb0c594877c230350d6345e2cf6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.98b843417.0.tgz","fileCount":40,"integrity":"sha512-UuCBoSQQBWuWbLw9MSH408Hyq9ec88AW6dB2pErXMG8aGoJmeCyOE5cWzVmfDNVkSqI6zaqX4TLsYWcXWN9GLg==","signatures":[{"sig":"MEUCIAPSciA8VDdOC33tcfhUxiCqOya5UGngFfWNHT+RtdCBAiEA79liaczPG5Psv/iK1NONFaPlg8gK8uV5orbfL5Sio1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUWMCRA9TVsSAnZWagAAXj0P/jodBjT5Xh4zOTDgmxxZ\nO72AK8LzNb8swdG+ICmQxKeRDOVyKjuFqcFW5cwA8Rp9sBC4OiRAiRsK1dXJ\n5DNObkhwZ9qcksE9j7UD9B3SpwMDRins1vs2TQ7v6piwUHqDxmeIWeRzqKpz\n3cjSYzv7n+1ig2iBdQlOmeK0Z5FqUFfwYP4i4jYzUE0huSnF79pvvMP1Rjb1\npqEpp2wiRgF4kDdoTyegosrdoHfm8cmfuWyGmkLrrK8lBX2zIc1v3FRtvTuu\nVYC1WmU31WMmxX2DepgOxkdTEuqBeFCxY8InAFxTZWpaJxFN/2vp4eJtDtIy\nEnMpO28ZjfsAzQPOf74UYWzF25YlE6XRX/69c53GSmhvR4iz557rwPQfMx9U\n9tWVGDSHsmdGA85ow5gwr2xWXtYjhCDFILHYdtjZ3Oyrqk7igsWRRjeHI/J3\nI2zF+Hf4JYS2zB6cOw2W5JZ/MBqlpDTsazP8cd3G5l+r5GNuUTQpWkrz6ud0\nLKSylkSSX/tyBt+e1bPLMqS391sGWrOA/nFE8GSnJ5DN3mmqWAyvFBUm8f6E\nFBwsIOUaV/vfiU61MxR1WtfuAXnicOwlA8/tIHVFYK5OahpYn9kIMNc2usB+\ndJ74nc37gjUL6vggofSkfJIUUTiqHg8oqp4jqV88wQCXdp6cBBKK01DsH/2v\n6zst\r\n=FQrx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/shape":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/button":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/typography":"6.0.0-canary.98b843417.0","@material/icon-button":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.98b843417.0_1583433099993_0.6618704070811883","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/snackbar","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82a857d594e3abcf7df6fbcdc9916f0419ad64ff","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.17b9699c4.0.tgz","fileCount":40,"integrity":"sha512-DGSLqN3nJ9kAOtw5K5q6Hw3BI2SQrXjfXXQltU+1YaVYxvC4yDQOFyCh/MqWZNgk2Yl831xuQCTIyimCTCEgGw==","signatures":[{"sig":"MEYCIQD6nKM3KZFlzdBFczCkwrNSb4UzfR+2+Eem+D+KmTnjXQIhAKqN/fGempxi0UdOwl+wwBaduEQ+Vlbz9eLXwiuKMNd/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGZCRA9TVsSAnZWagAA/D4P/RDpQlOAP7hAbherTVuN\nJ3qW8pUOxrlZqnzh0Tr9O8tGXaB/lA95YnS3Kimh4swW/x3S1dhtjrXDZan/\ndwcu+bNy23Ub5MGiDypntX3Hd82mjKg0nuWgO/lcKW5PTMRR5CZW7J/lszf/\nChmdmBKf4I5D0G1o/aIgBa/LvDy7y75DZD+9Etf7hqftAC+jNpX0P6poZog+\nLCUn3L0f4D5n1mJmZs+rLWg2SFU2fT4nDzwsBmjIdHDezmKSzE1TEfiCoI0+\noNk+8PiVt8/PFZzueesc5ur7aVgG0D6QSiXXXEtMgG2IcvNs6tVX+/Ouuv6P\no6L7nrLPqu2ZmTI4ZoFthjz7I0Hd85btfc6iJZMzgRXWwu0hiPuCu0073PA3\n6yv4h/Vt+ERkpMcs67ecxflmX445RpqJMV5T73fXFT/KAhwYHTef9ER3bgbf\nYlXE7m6/kzr+LvmUjEmbX/M872mxZoOwPHQvZ0Rmj8gk/0e6VsmzvSq2nj/D\nxWNfntgp/wbRWMXUaS2+UmKRK0RB485vKXDID6TL8VhqdJrNpy3rCqH/jP8O\niVTDDmSrVBky9+6seAHT0mFuJw3CM0YWqHaBMdJ5f4BjdMApg2R4bIkZ03NT\n5UG+PjDb3Z8tHq7vrl8Heqa0N25BWAbdoXyz31gvryKhr8WfuN2TW0JZSJmT\nQrTe\r\n=+rth\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/shape":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/button":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/typography":"6.0.0-canary.17b9699c4.0","@material/icon-button":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.17b9699c4.0_1583436185174_0.7289913008410589","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/snackbar","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbe1d86280af4a082035e45b3f4da46a863b5a6a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.6ee035572.0.tgz","fileCount":40,"integrity":"sha512-YUocWrE1NHuj26FkxcqUH4Y4guhN1jTZ8oPUZ3m3m5xb+kHYNeln2p1e1TjBIw/e82x0nlJlb+kTnC8DMFqkbw==","signatures":[{"sig":"MEUCIDHVZKDur5GpEuez5SgbORvTlGqfjhTCjZHuerhOo6PLAiEAjVDMum/oOAYVLBZajC64HDz+k6Ff+1DYROppgium5Hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnNBCRA9TVsSAnZWagAA4VsQAJxJn7Frobeiw3fTtUwy\n4FjenaW1J+Ahn4m6TfWzmd02NEthpYxVO279+Lr7Tv6kGsP+JfARmIC2LVxb\nZ8k6uY9VTJgBiV2iSvVKzwX5lOSA6ef3768dbhCR9uQRO/1/pvXSMSV0nIRM\ntjeklVLSDU+BXS/cz/VXsSFH0HB0YrEM52/djdTnVAo7gfklVYFbIdc+vATJ\nnM+Q/qAbEeUXwitJRAoXZE5C9S0Vg9T7jD3J1ul5FKSHm6VtJjsEKGLPeRTw\nIlgma7iSSDulOjkzdpFVKLznV8UiwxXQoa/M+IiENXCUPgALHVQgymhvijae\n7JsQZLAI5k5rF14L6J3pag2REgNGZQjrxOQyvVNg0kPatosnz1lo5chhDroV\n1zZLbWXSrdR1k98TdmlR+twqszQgiLBu8iY2pRGgqVXht5anAmuOKZPQ+sTT\nBkfr5+ieVsLxvBqs40ENPJtf/VeZUJScl0TnJiyxLRTkJlBfMMmxeK1ML1hu\nnvFoXH4ho1iVwrnp3NTkjD3Y1PCDmLcjH1ODik9yVJ8praoCrUAzVOKuAnvH\nwFgvccMRMf39P4ZfmXolOPgscCbKodQkKYU0D7EzUVc2v5It8w/9i0ADARFY\ndkJ+Z4Zuitfhu1A8axG3TtjwemzJoachvoJQNv+kX9AN4TXxFbYW4achTl+q\n6xVd\r\n=Xa4L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/shape":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/button":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/typography":"6.0.0-canary.6ee035572.0","@material/icon-button":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.6ee035572.0_1583772480855_0.4854364578170116","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/snackbar","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"908d9fab0f97268a4315ecdc671c2b64fa11649b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.bd33cb56b.0.tgz","fileCount":40,"integrity":"sha512-POsvEQFNfOEzcdxTcJOIeS2UiNewRMvF2BMfEu6vsCmjXNCede9cS7JEOiUDTozwG314n8VVtKxp5tTNzsxS0w==","signatures":[{"sig":"MEQCICGYHhx1/bfkD06v1ni4L4zzr7O8nhMmHyaZde31mIXUAiAlZfPADuJC1kr7Rv61CaQ4VtWBs1MGXpTNyYsRepHmcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnt3CRA9TVsSAnZWagAAmT0QAJbd2F8fMoiA9gbP3AW3\nP/KD/SehbbWHJcGEvF6eEp6omzIPl6pFpxEQA6ERDs/g35Le0ZXMn0Mwo231\nOHGF/pLSZ0pu3uCchF2MK+EORO1KSdLhnqbWRPviTmQQNRAeF/0ciNp2AEF6\noPw9zCuF84vdSE6oUb6lKmVLzqls6Gd48xSFoRv1LYD6/t/lNIkz/qjT8AYM\nEPW6mtiuuI7GAW66NszSFd9wCX2gqdvE3cU/Ekkbqwm6QLtIuJanHEAUFB2A\nLwk7TXMC9GilJjzAJje2SOAvqHixVAEObyZ0ig8tWjaFeQUId4Lw+h9+qzlO\n4rBSlYFp8+oHqc7lihkSPWOhvF+huCr5XPlLsDDw5/2H65QLIDFzjF0lLnvB\nFy5xTCqMdHVePIAV3SjoH31R9es0rcvK9fYYCKcf28zTVucOWHzyld9PvoO4\n4KsoaviK+4S+j6nj6OO6mCcpP1WabvBeBYroGNSjOB3pWDLq5304oddXDFic\nm00ztu7jJfp9iMjrV4UFvfADC1Dr6Qb4M73Ip0O7U5m/3ZZp5dTEWZm0sTJF\nuRVnLqVpTYHzm9Q54+Nd4YvsOEUElGwJVMSvLkuhgtafG4mhxEJJDc8k4zZe\n26ZncmytVFrgvYDYR+CqaKBNFjm014g4wDajDyrOvAtscLp5T0i/YMQVJd0v\ntTd2\r\n=eKcA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/shape":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/button":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/typography":"6.0.0-canary.bd33cb56b.0","@material/icon-button":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.bd33cb56b.0_1583774582891_0.30623771021262525","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/snackbar","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dcad184e66355bb8234c85cbb9fa60b7687d858","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.26c049afa.0.tgz","fileCount":40,"integrity":"sha512-5djdwEAI8KsVC1WHbeHmB2iAJ08/dEjm9ZCZYeV32HEMYC5h+k4tjB57ucSPWyWUrKR0WuOg3B38XkQf0YhqrQ==","signatures":[{"sig":"MEYCIQCCU0Y6fsHesFi7d7625fdXS/F7UQcCXnsx1Anjp/IjHgIhANluWtYhjWmvRjHoQaP1vhlS8CIPKjv6fkY91pynNy1I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8haCRA9TVsSAnZWagAAySgP/R1u4Ut71PsbvKo4hfgV\n+8YBmzo+R+aDrjUWLCERf/WzmeCPxZ3QVy40Pp7ULSaA4sQJNIKscE0Kymio\nyiAZyhHMtzeXD56RZRSZAwBKXMX1SiMfhRzA10pUqTXi0FL07gG0gxCL9eFX\nZHWP4p2MOMdzRdINpotSUmXx3Qa1VSIBCb2jDEYu4VFFmrHoRASNTO/IJF7z\nqQXUqiLPqkXaieVGo0tqFuLEsm/6x+Uwz5o4KvkHyKkJLgHOGgfVerV0lazo\nylxrWjXUoA9akKLO0atB4QBQgY3eOpS3ewqIrRRreikTKauyTBAaqR+khwIb\n66WITpwdxuGjaeiFyML+tMDFdbmpaSWQevltIE585RsYefb3whkW2BeH8iqI\nCtxXUTJpUMu9QDGlxQVWflv5pkG4ANPvxSlowX2SeJso/QQBpM2OQWgn3OZ7\n8hFU3Gc0K445ptV9KvRbwRNQC+d3wf8Ms/C3XTLSC1kN/W+dVgaGzd782gUg\n8g3ggMEFZ912Z6c0EriwYK432pmWF11TgaTmLbDkLQAj89e+zUaomXGGOb69\ntT+mY6XlOqu7hccItLn2UeJXF3tIz1ZLkZrUefA/8PI/72v3BnXjhRlw5Rxb\nwqGV5iIRfQwYj6b6VbDi5djOdgujdOMRiP9zooPvklp2kjd0bZAjLK6pzR8z\noGkB\r\n=ERur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/shape":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/button":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/typography":"6.0.0-canary.26c049afa.0","@material/icon-button":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.26c049afa.0_1583859801564_0.7157110175537644","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/snackbar","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ef95cb69fb7bb838f576dfe3e88073f7779193","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":40,"integrity":"sha512-eXjgwD09Uqx6NL4aDNCsLBV7gEfQdDSZ/WdzOwLJTLU0OMzplYi0HYDYyR6C9RY0SElxWlTNOI7fpIfrCbvs3g==","signatures":[{"sig":"MEUCIAIbO2gpQqL6YC+ahhW3FwzuLMRu4pgnKwIVzWOPshXVAiEApTLkRS8BdsziihWsHxZN9+iyyKFKE/GINH/a3RnxMdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qeCRA9TVsSAnZWagAAQDAP/3OQPtXp0EHZ3+DGbNOa\nRhEvmpKfvaOkqUBszloLmBOSfSEnM7JudWMCI4ADp8iJpFa7QsleoE7lwFj0\njN5oBmSoQhfhejSTTISZY6VXZRUQCmByJnI/rptQmdalLLVi4QLh5ncNVTcN\nBOGI5PvO3qu8paFx6BEdPOjscpJJ2b2ls1mJe+jvKWGED9mX3qCZcuq5KBSp\neJCxEo1Coleb4kaiaf2ClwwtmtO1RrJA+Yjea5KlAAtRSoY0AQ6fYCc61VBs\nK4mORbw5roxVTTrHYhXpiMABTJ1jNS8nY6z2IusJSzUraHHhl5WHu0VzS7xE\ndsbZQuiyE3T8eqNpZRdd6CnKn3hTvA0E9DLCTWJzeAY0MXbZIKlpeiOA0Sut\n1m6kTeh6qNKVqw64j5Snz8YqUODYym3KSV5yb3Y4btGEwaYiMXD7Sdlvo54r\nntphprfeROmJ4/uczyCK2yyKcuZ4WeG5inTbIiRA1chkfI0f1qgFdIGUceAe\nrKpr9SYY4EMLy7ast3GXX5sFKWPbiMHsmNzYGS7qWZD8FJi7KxLjBkLpNy6C\n0Vb1BGnFokbeY9q6GLPcUi+D0kNM9lYYURfwYYd/SE84AH+ocNLTD4bhcizM\nzM6j6Z+JiHyGGGEPzwB8vhdzw6O0lsHAJsiY2CV+VwOrK4vY1fAzp7+kWcR9\nq2jo\r\n=UfIo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/shape":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/button":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/typography":"6.0.0-canary.1db5c9fc8.0","@material/icon-button":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.1db5c9fc8.0_1583872670253_0.6390349955728494","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/snackbar","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0cc4064903aa2fad24b6ca0762e3de297cbfc7b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.4971637f4.0.tgz","fileCount":40,"integrity":"sha512-2njjjcHFfnL2ViCc2t2KrtdPJhWcOG84x4foUAoqQArmG7caoZopSHiUod4hLRkRaqyrDqRkHEZYvRXG6df7HQ==","signatures":[{"sig":"MEUCIEsOQdEF/c1j+likGCqAhIkLi4b7lgrdTCR/pYrn+5xWAiEAgh3ZHNa6gFhhFhQhBEbNJhJ/DQAVX1Kz4p7WEC+IQYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBvICRA9TVsSAnZWagAAQ3wP+wQbhyrtbMkhWqGAP373\nM/Y8kbMVHoazduh1IAMDuLRR8ps2qIBMzmqkJYHqh2TMUAu7nvH4Mmrr4tUM\nOenIUQz3elVQK6SIGALbw2U4HnqBPtkioHNlOaKV/ujOyZjOYiSKiErUntnJ\nX9tZgTyRXoqhT1Cn9Rmnblz6estgpdx+9UkgmQESaM0T1+R5u2tAD/79wlxL\nkvQYoS0aph8umywmobplry40eNJNIlrLJGB0QdDusWJWdL0u/SRZ9uYzThLF\nXwnCG7Ws8mLtex6j0Lub1SZM+3qLDegM2wgXxGcc9TbMAyA83ND5wS0ZuxD1\njPVUNzkjibZWQ9yMV2S4OV1T/wg/Y4bOt5Pgt6nTU2D7Eu3ufS5COVn9gCxL\nujleHsNASosURldJpghqzwGw11tWZWbQixVbPWQ0pz+zy47SQ17DAHVCswNV\n5mJkIWaufHxzYN3yUyqqwzJisMgnxqhiOOlzxeWIByDFPoTVetU7TwNqbHyT\nKjPYFxddQ6hVD0IMbbw8Q759okVBwEyraCaEz0/havUHbcNNLcK7WMK/jMlB\niio0vXH9DOTy0qh57MPz8CJzaJwAIbNMdn5XGPio0pqIaQcybndvwTk9WbgT\nLNJDaI4vWsrkXSDzJTB40cVI3UWi2wTvyFoSMDsEFCFXsk1xYsoDkfhJad1m\ngWEy\r\n=1Pgx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/shape":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/button":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/typography":"6.0.0-canary.4971637f4.0","@material/icon-button":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.4971637f4.0_1583881159482_0.8597184153427424","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/snackbar","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef0e450a3ef14d75f57c4950cc9abbce89649b1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.1ae8130ce.0.tgz","fileCount":40,"integrity":"sha512-Fam767P5XbLRVep1o8XUjQ9XlYoT7+S3SCg59vkA65FdNqtkvNS+u/pcF1qNsGDkFkPSgqn2YxVLkV9g/8R8Ow==","signatures":[{"sig":"MEYCIQDcB9B3B0DwvCS98vpUXeZ24N2fNMtxBaVxnWDGkfluhwIhAM/k9JgjPCGwvF6fo2kVeFMeVKz1xRK7I4/WxoQ16x4s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1dCRA9TVsSAnZWagAAhqIP/RddmpGh2Abw8cyGN9Y3\nQ/akT2xsIeGptIVz43/Dd8jWaoosrykvqyns4vfRHgXe6Yv9U2V4OJdGkAWa\nwbUdxnnVvuHRMNlMvUOEDM0uux64DGcd3jTPxOCpsHmvGvK45P36kI4pJtmN\nIF1IY8yLyhVICK76Xk+VmFWC5RdXL2o63oAjsK9ETz6nOxToPGrDEfoVHyIM\nIEyS8EqMC2qR9xeznf6U/Miel4b/JRKFL4wKcYGoy1rtvAk2SKR8MtiRtjgS\n3iP2+qc31aFRZmM//X0LJrvstpyZ4m/6lZ81jX7wZZdafS/3SkqaALygAwmx\ntHOhYIJKBXO78R/nLY3eqkaMfy8oRM/T74RmgQ0lqCV93kpHqY2Jx1rCr7ki\n25yHdxOX0RwpYt25I+qIsaLfWYrYWMyhVe85meQ9FBBwKlRlLvKKIW36LfDv\nMFBNCtmeETaVUjWX+umup1MbPVxnVmmZ/oL07+wgIKHmFzH/gENIx3ajy4BY\nbfHDMpgVpOy9NCQTpUKaQtLUb1HzGn9woav5MCMJJXYmNsm7/TyB/SHlM7ky\nbKQ7MyJPzdNrq7lyj4G2KH1ZBZwXFCBQCdO1eziW/nOfr5Do63QhojD5dvbb\nig8W16FcDnptBysYoq6PJW47uvfWbNWBtFrEXD4PIiGGort6LnDymcvLw8dG\naZrI\r\n=uEIH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/shape":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/button":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/typography":"6.0.0-canary.1ae8130ce.0","@material/icon-button":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.1ae8130ce.0_1583881564616_0.1322643652117621","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/snackbar","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7daed8ae6326ce02c4dfd4fc01955c44b8df896","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.8639c2690.0.tgz","fileCount":40,"integrity":"sha512-9KCDPtzcU6vvjPJc7fPT31vCd5lSuPvcG1JZLu5J2beyxL6PmqiW5Tk+/p596U1b2PJL9Zl4HOs+GcyIO50CQQ==","signatures":[{"sig":"MEUCIEjguERuzvtQKwURxsUxdqJP2CvPgSvqAyZXwcsNkVf7AiEA0iZZSz4hvl86pUkVKg1lxYGqv2r3BB8rm5FRYqn/7NY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZYCRA9TVsSAnZWagAA9S4P/j9FdBiJtDlcDGcdq/yZ\nQ3n+m8uDANzUCl7rw21QFGhh+jNVXIR1+S+7h7WYn7GXifs0wcYKPm+wKeOA\nznTsDIfRHLEk46w7wbDrji8OJWkD1G2axxwDOQN+S0snJvRn2Q2SO+Gr3ju6\nFhyUjNICPz2cgvdRX2OusqJayKaixFFM9fK1fG3SMjoIGXHrLEjgwLLWpcpe\ng8SxjicrAR6lOzYucZQVcxbGqhclRbzePj6uUQQKx1rWHjwiqtYhn4DUqq4o\nuIOEYaR7XAvcBGK7Aeydgfwxuhc+WL9Jcpzt8qu3RfYjUgDqFocKFCIBWp7p\nyu9/V2FBlLOv7qshKoFFbeDx6NZDx5Fwy03zxPpboZgPJcdrFujtll6ggF00\nffNY+BaYbCF83W6tJ8Bi/CqrhAMzY5oAWNgdOeaugpvRLBKRzWFt77ZBbt05\n0/O0JikHAAjeq4+nupOUg+3aspi9oa5OmvDcMkahwGxxc5ZzmrToBhtknrPp\njRyHWtpoZMp/zUttk5IZpzSeQBWVE01FM0MbkvhWDMiRgsV6Y6Fd0lscN+QQ\niK+XGzUqBI9LKHD8zb4GI6jGXZPkAWBKfrhgL8LcEJpwC3kQHIaSc4eIHhBT\nxK01ti2rb6qeFK7PdWHT8NWoO0Qqh0TixVdJ08QW37DJER6HJXDM7Jsbt8kf\nNxAN\r\n=tck4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/shape":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/button":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/typography":"6.0.0-canary.8639c2690.0","@material/icon-button":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.8639c2690.0_1583908440193_0.8563368411632402","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/snackbar","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6a705bdd5be7d7db489cc4033e1fd033974df13","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.d5808057f.0.tgz","fileCount":40,"integrity":"sha512-zQSGAN2mrI76ueckIHtYycurkAtXIqlo6G7w5Nnmm85DYldMF7wUhoG6O5U1qSk+6EU3c+d9u5kledGtAN/aXA==","signatures":[{"sig":"MEYCIQC5ydETtiX9GC21apwAZmNRp8fYJ7GB6pG/MdS3sD7GbgIhAIX13IYsXFes46y3W6EjZUHP46meUOsMcqAP2vWkPtU6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRErCRA9TVsSAnZWagAAsSYQAIuaRst4MhJ8fvrQ7B1M\nSFnHLFcHo9qFgElWYQppRSgaTXJ3UUdyWaBhdJwuJq+hWhnIB+HXpfQK3I/O\n6vN8anNbvUyEjS4nvmFf3f/nwO99ohXjYgtS7W17NA74ud05OOF06x1ck9fo\nfYD5kGMX01d5AeauIHkWjwsKMfMglrlcGrFV4Hg8ZN4JqH4X42ws5Gg41qHp\nVIRW4UJctSeWg4HgvnRpmH4Chb7AjFQQ0zIauGi0lrF3p3MfGAw9X9PEUX1i\nRvXIcswDJCUNn9qhoMYTEiZNSSzpczlIfX5lAd7Wuseync3TzAEmvj1DaD+T\nBcVoGW5Kt2YdL5FujSEexXchcdhG1HzTEqTRj8Q0wSS5yBPu43akk2g0Fc4W\ne93rf78t5QzbDuRqQxIWW7WXdY8B9LYManj42XfoDN0CpMBP1PeBP8ucAw+q\nMvSAk41R6wCFxxlXQGPLabwFHw9bhaMirWOIrJw4BGNK7mrIMjgxv8jqKe9L\nwNT5s6MbnA4nIfp9b4Xt1q/rgd46iiaQVBtxhI+4pWZ0BbDq7NJ3LTblzEb8\nL8Q9vpLj8Qtw/TpmdFl5aAek/9nNxtM70msqkRH6glWWNlxcpguV8Yr82RbY\n/nDU4fBfA8zZRtAjRG8xtAk79bUbZEF9E9rTTu4TcMZTX8uAtMB0PkBl1sgV\nRSSg\r\n=sAGP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/shape":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/button":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/typography":"6.0.0-canary.d5808057f.0","@material/icon-button":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.d5808057f.0_1583943979461_0.8638421995032084","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/snackbar","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac4439e4d977ba05bf28019679de30c95bfd4864","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.b3f58203d.0.tgz","fileCount":40,"integrity":"sha512-wX9kySN8z85jo8VJ2G9ISmyL+9Kv/scMmDakL3bXeZx201GWNVUrwKGIZmNFOEWffoHySnOeFLScI3NgMbPXog==","signatures":[{"sig":"MEYCIQD6Y/9DqXpyzJ1fe5MVRhESP64vD2FwuHpc3L+eI/HeXgIhAM9Onsk/54lHORSjqteG3aVdq1G3zvZfiWxhMsGKE+0Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT5GCRA9TVsSAnZWagAAk74QAIuGHlVC0WXTxlRV+3Ko\nwboH8EUlKQyRV23M/QxkindkePJfNPzFf/xHm9ZnnnfoPI//s8IlPSEyyjg4\noI+fo6CzuI3qcDX7NxsfBzl8Kq32cDZQhYS55/cwDnJj1Gf+cO88dF9Lsn06\n0Hcu9Ro3a/nKaWeUBiJC4Iwu/KjswjaZK7TXEgx/S/lBCrsYuM6hgYRz0VNd\nzsF688RIy3y88ky8PdHdHny1q4x8YvGNZYxffUW4+fd3sUfSL+GphwAQU+AL\nHQOXu0EHnz7zkMqBj51bc5k0bk59DVuMG0Or++LJewWHmRNQo2XddgMNgvVB\ntEuXW0q5BObinNXZySCccBeVW5zIlrj6yYn84JmTNGUu5sAzzy/zLYw79UA6\nEOcVHczz8lFNW1vGKIGZ9z6wT4ED3i5ju8blNRnHNDCY8MR2ablneUPSzJsl\nvoGALVOjFZKMmyxnmFEgFppqt03VB4s18ij+cLP5+z8qzQmvigF46O5fkAFz\n/VMhMVuyTJ2atTY5nc9BMGSRehMpwm9fWIOVtGs5f8ztA/U3zkR/OBByk8Bk\nCoyP+jJAzU6W73XLiLfpXWtfbS3QEcId7KZY1SxqPlNMYPwVQ6thIgq5Rheh\nJGRm5ersaPaiUSL+KllxYEYiDorENUugse8EWhi72DjsojCwtrrAqkPl2rf4\niJzk\r\n=hS6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/shape":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/button":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/typography":"6.0.0-canary.b3f58203d.0","@material/icon-button":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.b3f58203d.0_1583955526264_0.7953668660174809","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/snackbar","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"603112ed7d35c3593ab19d68d335bb97b145d180","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.bec065920.0.tgz","fileCount":40,"integrity":"sha512-eqBWAk1YrmWi44V+dcBV+huXwyVUj33ruaqrfk1PYRdkKf7uMCRbJ6TdpN4oYh966xn8Qo6nDlcLP7wv896tSw==","signatures":[{"sig":"MEQCIDNMmkD7unB6TBVgsPcdqHeGXegBjMD1AUweOS0nkj0AAiAxhhab5ir1+d8khnXmJKp5R6lV+3CO7AsLpnv9Pw+ESQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapm6CRA9TVsSAnZWagAAtkAQAIQXhosB3SF67uZfra+x\n8pk5fVgXBEixkCU4VfrjYzYOud372bN3xDCjxz7bwgmzCH+zbOYbAKxCt7KJ\nsyQQVOTQGlNOMQm5oTRDyOtfRidg6lt/uPI0uYzsv+OY2emVsixByXJa+yg6\nWL0Ht2x9qnDy1PBjBbD4F6x3N4lCkcQVwDXYNFy9LGAeiLIj3aQZ7n1fzT1G\nKH9/pHmTDaPI0nYDeIPdphy64RZZ66PAt/b2sH9UitP2TDBK1S0fpB+5dGSn\nQprKwRsHILInk5H7/+ixl7TrOCRqjNThTQBl12zSUV5BbauceOasqLboGdBe\nwUDjhOHeRxqmOqb7yIV2d80BvHPMEB2ugvSHXdPXtv9Ey1hsS2UHJUahAwjz\nCJL8XuiBNi4Ni07pZpZR3R0wKSVWelXDnMbNnfsZHg6Nam6YJ6nHUG5xOaiT\nZpc/Gea3f9FwDHjNh16sreGq1R2pny6u+W0ECa6Patd2OLq4BRwfuCUwPc3c\npxl2izbcFzguF/eayrUV+JtCHUIWtELwvC0tZmZ+Y4tGP3sFVP9McotesWru\nLS4jdoQcqrQ6CwQ2irtfjqZ4c3obhcv4vSoe7rMF+3rhLDBCl6EUYgz4luAr\nZAOAHI6NMpSiiJdymfcn2vjtu4UxliG5/awg3wX3mxHzbHXovQRe4jCjKSSf\neVTS\r\n=H38s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/shape":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/button":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/typography":"6.0.0-canary.bec065920.0","@material/icon-button":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.bec065920.0_1584044474094_0.31007134253314583","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/snackbar","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cddcd75236ed6a2a5d059c58b8e14b9503388e9e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.776291ef0.0.tgz","fileCount":40,"integrity":"sha512-lFyvnxdSgXYr75164qdok3stgYAkXFgmgTpBRMZyOYaBTC6lMuhgH6T9PhtyNbhJhDUDJosxWlOUZsX5gF5GWA==","signatures":[{"sig":"MEQCICiUy/lvcVB8OL/J7Tv82H4gME8RuO1q2upyNWd4eDx+AiAyqWmu0kxtHN1kKoSrLvNnJfur03W8aX9Ybpp+Ipjw8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSNACRA9TVsSAnZWagAA8FIP/iAgrUCboiFw0+0eQZzN\nPcBl72yQRHi+JLVBt7GIir0rpo41Z8Eh2qIuagcCY3hq8w+vhKLVc+CEvyx5\nM/WnbAXLJXgRs8jTXs6v0HjXYAiaCY5e3aGfmP1YBq09K/abloukKQQSRqQi\nvyDBIjL2aCVVkSU8eNzi2pBTdE0oVgKkO91PeKIByjwGlH4PMHeAzY3WSfQS\n8SCVE5vilxpEzxAFI/BzUwBdD2nGN+hJMdqXGwPjPk5HqMGcboIx1AZddipL\nT35v73jidrzBwUP97D5UZo4YkKXZSBi6yNwMN77E2zLvtSuxuil9gOSlnhbP\n2NT8cODX+yn5Sl0q0M+iAYLWeGtLqIM56cQEfkTvVVYRVznACfD7bKajKAJa\nQOSYdCkaNi7+8EI83x0J21aphxEOGsEEGPnmpEwvqJRzxi/g+RwuGKlcNhVD\nkE/HhBluT9ZNLeWs569C21z2LrQ1vHBo6JaA0Cc3VSBQzRMsKSTZNCqMCA6c\n+FGxHPsFPgu8WcbiyZbKeNvw0Bdphud6NOcUHSSE7HfTg18fxcz0c/QduhTT\nolcSH8/tyTlD0vYa9mKMemzqkexYeGd5HWS4B2XT49oVBB9OBj1rqjA9KXKN\n7mzQDZ1JrG7Xyt/u1YUUM9bVMhJBWU4RawQmpw0XSQfmHKMCX/QT+HDV0Hb9\nWxXS\r\n=TN0q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/shape":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/button":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/typography":"6.0.0-canary.776291ef0.0","@material/icon-button":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.776291ef0.0_1584472896097_0.8353298477145563","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/snackbar","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03afae9df25b3cfc11e84e2e5c05546ffeefb37a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.ece19f3dd.0.tgz","fileCount":40,"integrity":"sha512-GIBpxRvTANGrSNU753MTQo1k0BdCG4DSNGqsd+wdhOzFaiHIYHuqS9/2eUfj43BcHZfI5YxJ9BMECtfWPifGMA==","signatures":[{"sig":"MEYCIQD5QObHf0ngU+RptGKvBx6j8GSisjmhTNAtPQoCE+KBSwIhANw9BBoqZS/T7xo9ZoUyoaYsjzoIZcnjSb0+3PenRDJ7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUjQCRA9TVsSAnZWagAA9PwP/0lagTXfOe0w1JTzwf7i\n88d2FOqjqAHYp0pZ14tzou9QBWWrBm7K6oAHJcMOM6cxrinr7aTml0qlvR1j\nxJ3rIN3eyz2FfUwYC7elgLaj0fmFtulqYiP6hR9kuTa9oKG8YMBzbWrX4qPD\nmLZabj+N9t60vppzemPXAE62EyynCJ3mfyBMX+LYtep0cHrgn3+zN1X1bfEE\nmncdrUVM/xJdFenF/Qs4DEx1ZtnPXAI3lIwKSQMn3gkmT8lVjOWaadLEIfiU\no1pVTStEbrFzS948YTseznS1QYp2jkL+qUJaBqI0/QHZc9cBxocunGXGm9bS\nIh6GxlujA85UulWpFhcwwKLu0Attkb4UJfY/WEJtkFA+TZYdGE6/mf0M1GhB\nK5iDx8RFDz4+VOgpCSi1bWaA0GbgNp9P7/weZ7a5fy4VdvQ7bljt7TY5Bgpr\nt8xIAzjrSgwAMm6rHUR0833UnC4Tl9Ge60ugJcw0LUZYahFnXH43GI05NrxM\nq4MdvCEswfXSNBQMfaTP6RflYzX4g5d7VU2MC474NnT9q3vjvk0km6WZ4QVq\npePA8fuGr+1UWzAwMbPF2OFApYWwheWlPiypMUp7E3FA9fayCs8o+VNEB3LM\nvCRtMumk141BD9vKm38gDQD5l2jSSOJYOwzXgukh+cZOsArGbQvvAX3PQqtW\nIaPW\r\n=pxMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/shape":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/button":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/typography":"6.0.0-canary.ece19f3dd.0","@material/icon-button":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.ece19f3dd.0_1584482511517_0.3725714556034132","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/snackbar","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70edf81757feb044b5ef32e6b609078b0c2a421f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.4dc45af6c.0.tgz","fileCount":40,"integrity":"sha512-7XLQaYhEUHagnWsss774NzhnDPdAfVFw6mDnsMQWZU8ttxThPXybNsz/7Ci3yzkZspOdCieQanPRPMAQPB6R6Q==","signatures":[{"sig":"MEUCID83S4LN4CMNLHD5lMViti06/PKNNUEeK+UvkA4IGvyCAiEA2pIPEPIXHO+vCJpOWJdPxYRhfhQ9yTn4F0webqgQ4JU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX32CRA9TVsSAnZWagAARCAQAJR+IlDFn1rEVFiJZ1iE\nNNAZK4Ua0jCXgUXZG6cNf8sAXBQmDNYXB41EpaEimSEIOCQGoWBRfwiaOa9A\nh/7Mkdan1ZXbpXEuBjsMRbYCMjUMN0+LN8qQechBb4ixfUpjvMWsxAGAtpXm\nNA2Q3xY/QZ1KO1JF01J3J89J4ADqfekUs8WCN+KQDh5pKPQvDIRo3TT4RQo+\nILxYPKCcygNuPKfD4cWLJ2kIF43fjry6LB9EgZE67w8i9lY6OwtgsyfsorgK\nZT+T2pyBLyAWwLormNj9UhmITYhy3QTFosBpBG3+lxwLo7F5TDrKw22WXpY+\ndMmdMg9WtwPQOV97E2gkcTYOWhXhgMz/166KXHQkjMRlt/yB/pJIeGDohXKB\nhiepHbDYYbKi40V4Kp4FjrIibUuCHCG9j8Rgj/pEMH0PfCCxfzpLSm2hWkUp\nPF70wCGRJzymkBuMlWty8mpwJnHyOp98kfVCNJRenOOtYZpUPSRHKFOiQGoi\nfiNBBFRzEdgyWEqjoqHaAkFGDY5OWH+00CZWoPhwNE/aVSPM57CRiU2De17M\nUteejoUtnwGA2engg0TqCy+bCNYomBQOdvjvrKMy3BQWATtgjI7BnhAEJt7Q\nBc1QqzkLMdPLniEtK9r50PMSf72+nz/9+Tif+DqmPiVr2axiIXkwEQaTjqVC\n9ukc\r\n=DwVD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/shape":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/button":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/typography":"6.0.0-canary.4dc45af6c.0","@material/icon-button":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.4dc45af6c.0_1584496118014_0.9991420133416684","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/snackbar","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3997fb6a1cf02424cc2fd3eb6d56ea04f4c2bdb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.6b48781bf.0.tgz","fileCount":40,"integrity":"sha512-LDTnxmFeJbVQXBA6dNKK3irbnob5mgA2ElTAhz3c5sLuKse3tFJ+O07pUWQHWFm2hFpE47xTO1cndMFJSMT0GQ==","signatures":[{"sig":"MEUCIQC1Bc91BiWiBWwwrPt9ybtMUpVAi6RaKceFzXuHO4tvFwIgCXKhPn03xLaxPKVYgf/ngwA8p/gPqnGn7OFMrsojQz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj/JCRA9TVsSAnZWagAAIGwP/2eyeqrmy0OENf/E2/l+\nHiK7MIO6512jmWLRfX8dMlWMjLrTVcedWs3WaYEpeQX/1sJWM9tDf3FG+3zO\nEQ9Mfx6aPjX9WIzDmevxWtRxEAlZ7fqkZDItTy3FYFpuAAk83sURiFBympRV\nhDzT/k9Jaw2+SO8FQdzxQFm4Bb1eq2fGDJuaDQPzl6PllXrpzczRETdx3hMd\n9GTdkN2IMnVqZVrcWTmpVJdll89oiJnTbL1NffJPAFAOPd40brOCcDZJ7qx2\nn0rY9jvt3y7NC3iJP4DZvbimFA++s7nc1OjidkkFURekQYZKzuADbXH0i8PD\n2jXaApJ2yUnrGMCoNDaJQRrEx+02weD0EsC7+xvOuqREsAAmY23ZeDBqRId8\nE/mdZnVzDdVjRDNzgqsM1z47mqnHjX63zuiCAvFwUy7LF3zn34/UlfCVTrCU\n1Vhm8SqacbIIYYLbzWuBnk0N5oDsIoLSv8H8qCLAg6N4ofmRuUJHLznl9gHG\naMp04JqwVddr3bawokAMnhF8KHW1BDFw71JS2WQU/mkfJfRym7nm5seKMg9h\nzP+PM1yd0QT0uU1kedYia1QTMMPCDkDquwP6CAB2DMBz9JEpYM31ZML6rBo6\n4eRPe06G6UI7wRXiZNyfQTP43XdkliZ5+x9tQx6YDHJ+3fwmyvT1jbbngVd3\noep/\r\n=YzC/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/shape":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/button":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/typography":"6.0.0-canary.6b48781bf.0","@material/icon-button":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.6b48781bf.0_1584545736917_0.7505883523625274","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/snackbar","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79609266ec155d81103e9f08f475adaa87786aef","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":40,"integrity":"sha512-S22BQKYi/+1c0EEckH+rdL3xiiL1poH6W6o2RsyDocg8z4Wm+MQ7ZCPdvezeq/9iH0Ie+u4v5fenCl9PwEz9Lg==","signatures":[{"sig":"MEUCIELOa2tgrdhyvgmwn9EwF6Cj/vyq+ecyZxamEQMxNC6CAiEAooYKhgNC0/ECMpadXe6z3aIFZpklY4W5gCdQtcHSsGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62fCRA9TVsSAnZWagAAUWMQAKD8ptZ1kJRP4OKBtmeZ\nlP0BL5FF41mbQnkMmKqpuONypkRuklkfBVId6iT/W1YOwFbn0P9oD+Xh4Kt2\n95wG2qAvHvmNqJayo+Fy3vJhEEYfAC8u3w8FU73VadgtBQf36+Z7WHrv7fAs\nxHVCqSw6YOolH+sxUnOtpxK934rLGHcoZjoVUk5kh2ZI9Y4xqa0CGvlOvwo+\nP5H0jVe7YUeyOWJlDJYusDP/yn4qPVqNuCBtDXso0I47APW/tbj/sQU0fnWu\neT0ZstEoSECq3y5F+uAMVP0Ld3UAXSJzQGHRrNYjYAP5yiS7QR3a75w2w5YU\n827wgsJG9EBU8q0figlGhGyMXQjt2QZZp9nBmKkl2JCprNt0MOKC6joGpO2w\nBXl8Xdch1c/ZTfWJQRFzADUtq+V5aNN97PlCm/GiI7AXeUcMuytbeqSLp7yE\nEkh8H3z1er6EGMEVN1XGeyFzQlcdrayHAG5bw33ZXd9hwMqHeizFv4YVHCQK\nH/kx2bm8zlWgzS/XTzKr0+x8xTpyZ0balt0CUwk+M7XSHqE5/gq6NFG2bfpv\nl4VMeoWEUPXaf17Ifl5dvDy6mO0U3SaLiA1vCbvRpLncFvSoSGvHKFB67laB\nom5/R7J0nsETf5C9V8XyKlqXzP28drtxj/nirHlUf17xLetJtiPuTAmitaYE\noKqn\r\n=uXY7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/shape":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/button":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/typography":"6.0.0-canary.a88c8e4dc.0","@material/icon-button":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.a88c8e4dc.0_1584639391118_0.812509122790201","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/snackbar","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0fe030b6b049a051dd5d98a2220f26993569288","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.cafe18860.0.tgz","fileCount":40,"integrity":"sha512-YDIZdWIAA85GY4aXGlzO59i5yzIZPea1mcLerlSXUl53FwexCTykzWEUc/RIXI8SSwBM/lE60T/xDyUKCmUVVw==","signatures":[{"sig":"MEUCIEHZ3b6guBNeuNVyAsrUpR9ETB+71XgOkTG45S3KryrcAiEAs7WtBZX2AByNFLN+scd8FE4NhY0ARVNrXke+gv8Gn3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkRCRA9TVsSAnZWagAARHIQAKD7THJa7VuSpeTtrBf8\nQHKjUoIR9lyVXTxBY8cKQYWgTfSDZi13fx4gjCVqK/Yqq7r9oZgPjV1y0c5G\nPei4Ll7j4AplBO87POJI026HgLVOv8NxpbXAto6M57KpuU+74C7xrqpaEnni\nUoXQnOta1d52PBoQVWHimsZ0N6mbinRTuRIbu/n6T5Agbbqn73zttRcCsP5o\nf5yZ6G3YzBW7qDmaIKOH4dWJ8eXvaqpsfun3gJED1QL43rxYUgbKNIG0c7Rp\nikV9gad4N7g36wFOPAMSP85bFMNdmeZkVyYLyfTbvQlQ/74PIlVTjNerSXNE\nIB3OenvqfckHiDqPrYVDw4Rni2tlQ/bGBAcbhGaypwzNQLXrBsR/IsKY+USq\n894Bcq3KL1Y41GcAgKpt3MYE1ugMnZuZMb/q8duJb4npiOcIfdSvAujguFTK\nKdq8QHLX2GlhxzTReZtTMQ9qAssXJ48HluCXropk6+IWZyNSNUUT2Jvo5ezd\nOvkwtrn4s8N9sDuCCaYoOd1DCUbOzLpsfiBgDReYayis7AOsgBVAs8jfnH5z\nkmKQN6lIyNwbog1xs+xuMxlNAPhYEZgk2SMzD0Tv1KlezI+rA6nxqbaTuFbu\nNQCYRpDH9gkhViT4HVnkGmTYzecMOq4wcsTnY85CyWsf4IzXgcIKIY6/WDE/\nEa8X\r\n=mYyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/shape":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/button":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/typography":"6.0.0-canary.cafe18860.0","@material/icon-button":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.cafe18860.0_1584716049093_0.5560666277765327","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/snackbar","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a58494159df29b9f480da6aa792fe0246e980800","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.35a32aaea.0.tgz","fileCount":40,"integrity":"sha512-V7+2S2fNg49u7+Kus69KncGpKk1vYXOFs45gl0zcECBQ9shuWbjuJH8o9OtthlYZAQq3BfaV34zkR/dVZljl8A==","signatures":[{"sig":"MEUCIQDpHnjACfO5I45PiOY4KqSwWGZjiimkuucq34DK3G3pygIgBF4gnUATbeEMmWtyx9aLjOr2WGipdKYGyzjORsY2z04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSC3CRA9TVsSAnZWagAAAvQP/A2cV5XIXolEM4DGIDIo\nROQvx9x1h8RSavDJ8MSeMrct/GP3G2ZhO0V6nCMPi5mXkMB6ij8KwhAOci9c\nUxGHuGXIjvk3ULAWGXvT/Jtxa0mvZ2+T+XvHwq6IV0EQ6p25FJrOZli2CNwB\nC/zYioYDY38eULHVYTgVhC5TJall9JOtwt+IBKc8MDzr/jRVdvBFTqsL4wNe\nmORc+8+wX7Khi2g+PMyT+XnR5l2JfSLMWxicQqJAwMjlGnbQj8GCuPZ5XGaM\nk9lzCzRe1K+/TdRiKTrZJN/oPDXKCHD6/tUNseHimMrTrTdyXYFMe6A0oNBr\nKaszdLEgmoa/8bHSwUpjizcQrwgE/S5ls7KIgkTFWva3N6hmCYkv8PqJ3Jj6\nFzFZaxkYb9ChWZXPaT4tIBCOz0LLdqLvTpIZfe5cvAbFLY6G9ufsn4cL3mlb\nr6XrtNMW6MqfWYeuOsPvBHBHF+1bDBO+/t8o/zz2WvVdahetGPXxoDxVMD6E\nRQxWAGIU4RcCxLA448B4GkUZ6OAXMvUOqXWjSbRDruB21GGba3PJyWDt7vQJ\nI93CC5zTjEbSBsBYQLw9snSc9ShG/uPFi6ZZ3bFIdyHHBstsNQzi0ia36WHd\n3pLldDMWqn6aPOr1rFtFEtQm0nO4yZ/ola/4Yvxj96rBYIjPYBhzgCg+f6To\ntxAs\r\n=4zLd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/shape":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/button":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/typography":"6.0.0-canary.35a32aaea.0","@material/icon-button":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.35a32aaea.0_1584734391461_0.30021969223740474","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/snackbar","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c3c843a431e22ca74900cbf7d7caa8290de753","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.e75deb854.0.tgz","fileCount":40,"integrity":"sha512-0MnyolfapXC1JVMVQd693mJXI9dQF1pxGHpC237k2A9hpF7BiFKKGHABeQMu+MaZrajusq4lUdkde1aHlh4NSQ==","signatures":[{"sig":"MEUCIFslzKhtsDKn/zZd1GdO6VAGVq62vvJGgF9A5m/PwllRAiEA8MEzLFbpdjTxNx+XSECssthwRR4Ky2iYQGJe4WZHWuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCbCRA9TVsSAnZWagAAuaYP/3qoOMNP0Sep9SRpkQRd\n+mRHmSj0WfkxP5xdVbT+i3KpY6XUN2XQqiOcRbQQCql2OzFh2qbe7sfHv1bR\nXh0nmZQ1qfHeNngdzf0o+AfhH9ud+WIcjTKrb7elBCIzyXFTfNyK+HNIOIea\nS9Iavi97BHoplzr8EOF2rLtG+3NblaZNEaCAhgZxgJ8yup+MnfsozK/unb5V\nwxhRBfoAf/dzslwNcxN+IluY9BRRHZUN1oA8dzVgGkEluHMHjUjZ5a7F4+3J\ntjWW014lACc12URKbTc+aD3xGPyIvXWyxFTAk35Wy6SmryejDjWWjPF9Gydg\nus+kgQEBqB6FpkUQ6rXd88CYaZ+vvH8XyNhZWW+CPsJzEICV0afJ48fyZFIQ\nOkV6QQh7uEhGc6UEl0kDI7ebcEcMgGCEC9r9KdVx+9efoQYjFHyEPNwfVGY3\ndhIEJcHltGont+rN2Ueb/StY37PTfkeL0iyhRTHWAZbRjq9Mfv2bWLnOhvwD\nWmXel8xfPKFWaYHkD+r36mmztAtXvyF5L4JTyAkxd2bR8x8yiKZkGUQudoVE\nF73LT/mrR0C3B97jEzkjmK+GdPHOhra5A3fGVXK83Xhmkp86HYYegoF20tg4\nYrGoe+BxxYsDOcXg9lhiwHDtrYEKLI3Eb5aWaf671+8qVg2xFyntjQ9tRAVk\n2Mv4\r\n=8muW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/shape":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/button":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/typography":"6.0.0-canary.e75deb854.0","@material/icon-button":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.e75deb854.0_1584742555206_0.35304718363141707","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/snackbar","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e745fe69538c0e3deb25ea22227982c7de8525d5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.2cc6966f6.0.tgz","fileCount":40,"integrity":"sha512-8ZhXJXJzZAUThHsdrCL/HRBMpXkW8LP98MiuIcFPQ+Ub/0prYZjoo0/zbfosa2nBTup2clwNRXMyhUCRnb+9Mw==","signatures":[{"sig":"MEUCIQDQ9a9Uy9Kt00mrbXEfNOUBwCL27qiLiBhGzyqjgTu3GAIgO/4/gLjqiD4rB79/m/dDngCJV4K3XxKBfK6J+eBReAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelUICRA9TVsSAnZWagAAH90P/0dVcFhZUzFr5wP7Bek2\nlNkaa9T2XfJd6JODnejn8jH3kmumvIpyJEDOHG3b0b0b9dwtCpO4ydT4m052\nlBgkTp1Aj7q6jjyLhKH0bDthI1CK+fePyTXOwgurm8DxE58z/aYcFvrU7ZHt\nNbDLG7uHx7hiJsDKhuCpmz+vtrsmhO/AJ63XxSqCR8/9kmYt9EbIrVbMlxlN\nhgeF1yUiTUH4j0mPy4gXlLNajfv1hKJfBkUddIdILdBUxMNpI0R8qLZI4daY\nFfHo5yjIFXLeGFGN46RULxbpzg4AXeZ/9AfaGp4g8Z4uUNdWU/Gi8xSyRA26\nT8CU5qzaNZExGVFbgZtAzhVGzJRMxeHhqyQ5pIbcq8UigI+P52VYaVhHFwLv\nVU6X0Q0756sOI7YI7zZ6uJnFHkDuhr9hkLFwBXaZ49etp8S9cLAvCUjTnXx8\nQmdvYu/okci02wY3BL9pafznDUCAGxq8Pu9nwMT7JPTHUVNCNCtu+xNSQWIU\n6L7bHO7DiXGTSa2jJsX7++EqqUtpsa3ji72vA7+cNrIeWFcWzw93BDjq2pI5\nYwKqccyggjboluUCxttsgHe68MaWpfIchBb/42NPSeDyw7v6JvHAW/vCI/Ux\npLfWg/jTQym3VLFFSSRlLzi8z2Ch4Bg6xkmS15JkdjgYmKxu+fvQcNuYrfzO\ntreh\r\n=ZzVY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/shape":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/button":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/typography":"6.0.0-canary.2cc6966f6.0","@material/icon-button":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.2cc6966f6.0_1585075463619_0.08396127018997834","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/snackbar","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b184c4119c09fae5c6d2894edeb2925d6fece6eb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.8707953b6.0.tgz","fileCount":40,"integrity":"sha512-8MgnJL71Se0Nx91nlnAdldEo1c6aZLe6DCuTmYQlyIkI6+ORPTM3Lrko+2J0vCjsrSgGO3MIfQr8orbEwqSdFg==","signatures":[{"sig":"MEUCIBatuSb8MQXlgfQxWT/9nhOOJkEiuvjmqyuI6e4m+xwdAiEA6qALP85fYIuTwBVh6K0ZJX3VlCOSdHb2GywCe/A1ktM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXfCRA9TVsSAnZWagAAbtsP/2AYiwPb+v/cSdVYlZkp\n8PI+XDQI3a6xnonDgnqBffJZk1DBl4KNMnZTNaia9Rvcrxzbf9NZTbYLemTF\nSWmRl5FBz8P1J+mglPjNPQGN7TiChKMebfhxSm5eTK3xvJ2GiR/DBCkmQZpa\npfJuZ7KG2ICDISk9mYiQhUn9GE2MMhy36U5A8L+ck5Jy4xOJHHM+rSbcEOwX\nVXcr1S+63822rKxFE+guuhZ4mbmyCsLw67URfjYgyxB9IQLsfTjW5Yeejd8Z\nOVaoFwaKxhKwKFZ589T654jCf1RD75Z/Hoceh5qKW6rpgK20SZf5UR9cc7E/\nGDwbVce84Xw2+lglwIPA7ZYjcXAgUMa9i38WDYVp3E2NHSKUukX1h+CgiPU7\nloa0wYfPH4vshPfKy/gS7TQUjFSBf/mQaoX10XSf9POVh4rCbArKaEybu6OG\n/JSCWxSc5fxpAUUI4U29+FAc2warxTfiOQcllWoJT7tHhN+Ay+5UNkCAoaPD\nBu6jtURtzuvcFNHrdLQ4v7n8CMZtAIOCLt+3UyO/e6Zi50FyMZ5oqSRvnHPi\n6ScCj/JkcG+mEidhe7twodeOfaBWNJ08T6xy061h+/OqLN/gUxbQ9hbXiZwP\n5wELcqcKASrjR7Xe91izlDI8CURqKoweT7QoZU+8YppXlQ2edccvIfQyWMlb\n45/2\r\n=k66w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/shape":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/button":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/typography":"6.0.0-canary.8707953b6.0","@material/icon-button":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.8707953b6.0_1585075678645_0.33096975315260857","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/snackbar","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2944dd368e87d728ab407f9a1b0b8647bd409c9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.10af6cf39.0.tgz","fileCount":40,"integrity":"sha512-/Ldt7EySKL38y8+KqaBiZWB7PhdEmMJ4iV/NiMWscPi9EhYFwM4YQwhuKewjqeXnsmkew3LJi2UFx+e8KtxCUw==","signatures":[{"sig":"MEUCIQCbk5g3njh5550IOEm91ZJ+5lIvYwlxKXaA0ZIh0YIWKAIgMVRjacT03Kw6F6bfseU7Hrh2MHZgtvN1tLqfS5I/q5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CZCRA9TVsSAnZWagAAeBMP/Rf57wMgBNffB8UkpYFa\nGPVlV5NjIMGpoVPXoyePUT1ob25Wp3zu8ZYz6tWLGUTfSlzIcrWD/gWghoaz\nO5oUPlSioFBIqLRtmhGQyIirXI3IWmXkDuOM6PpT7e41hHhP4mJX7AreQUc1\nhNpOGhruvT8UeMFdG0tu/4AOEVIWsyMuX6W2/DI+3h/GD2CJCmbcjauAPAma\n6GWOwSUwk3ajyVjvv7C+2NwY6mMDXdrInpvBMvKmyuQqmM8dipS37qr3GmFP\n8QmvZcxmCZtXir4nzaiBoPPgqLVhWxaGb9+V7U5QZaujn/JxMo16L5gSQiYn\n9BTvxY92FyClq/MBVOZDpfkIdptD8aL7C8lL76ZJq5OtTvBTok2IE5HvVj97\nF/MuRIFMEbP3eV8GwglToSWVmU1Lm5z6t0Nko9mXxek/53kDMY2nksIxOeYO\nTBIChLzLBwandZ72+HVog88DtocYYaXPRCeE0rcMnRm2T4kZw0Th9GgQwDEj\nvTQZUi215Cppx3vsMbr5dWm7aelcbTSk5B6/QHJ3a+VS+7g0ZzQcMFc8aFT7\nME8qYw6UKe0TNWo9jAokOTayhgZ/jdhcCQ/ZvbaEiGKqbJ7gIF5a4yUMofBp\nLfEmDRfb6pIPBmuZ6YqajD83z8ipqkbD/Wwcf2gIJvVCm7YDPE5rCTBE6lQR\nZ1ac\r\n=BNNh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/shape":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/button":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/typography":"6.0.0-canary.10af6cf39.0","@material/icon-button":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.10af6cf39.0_1585160345249_0.7345741386195925","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/snackbar","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cef9dc8a22c21a6c16d774cbd8949ed5e411bab","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":40,"integrity":"sha512-nID94nY3aT+VCQb+N7prmpA73HkYF2g912RnxzgfdTu8UHRhX9zKPOdoxd5oOsPflxhbcaHvCkZhU1UUK7Qoew==","signatures":[{"sig":"MEQCIEAp8rfF60n4fePQYceJNjrInwGK3+SGwhb6w/bAQo/PAiBU8pJHk6WXjsJlmivNb7v2+O5sGSJYgwzKyUassImMQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkByCRA9TVsSAnZWagAAQhYP/3wJ+STSuJDDEJQx7QWT\nN8Jwdpi8Ce1X0LtJhJnolhU8GD1/j4ERA5iyT+gl1i9Ww3ycdr+IuyVfBXwb\nge5h3gdgeEipNWd4LSlghHgAK0slap1ZAJjJPiMXg1K9Jktgm0SMiQ5f8utw\nYONMb4/jCnzBOZ73KGufSaaCGhQVidhjqAx3VczKLwdeexhsrLGly0BaMeg+\nqTs0mBXIGkfA12gmxY6aD14av5cI3xD53gXh0wII4UY2EZ5rxh/D+azBcvtw\n5zGnH2ocP8Zwcr4pFzUAfGY3pF+EMdyUidx6GwmQWarsgXOCjGOJ7FPfZ2zo\nIkXc5wKSIK+mUdMICOzAZ5yu7SYp4GLZKnzmnU0b2nCvUjEk6U5+2e4x3cyR\nsRxeW06bEvB4rc9tx0OLMRG8aHf9uL+jem685kq/mmGzSY5Ue+u89VTmREta\nwim2ruvNYv4gNzoUAnLNUDXg1rW5DVUdugbsQajEpdkrl3EDUmDRyx91WTCg\nan57GRA3Y4Bk90+w3LVFMU/nWDPFdPJSFC3cRDWt+QEK54K9KUHIRtmXxbSl\nZxeuLEyQt0H4nFuRm7OpZOeyNSaEl++mpdrb/JAgh1ocmjMKQbCGNH8sjGEo\nfxUg9rAqH+fwySQCOLiZZZgji9acDvt+9Km3xoo3qL1D0Kwxbt/EEVDKEeNm\nQfbv\r\n=jBf+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/shape":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/button":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/typography":"6.0.0-canary.7d8f9c8d7.0","@material/icon-button":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.7d8f9c8d7.0_1585332338373_0.18389722861596258","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/snackbar","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"413612ccc9a5aa70abe1bc2f64d10657a4923376","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.d6315efe2.0.tgz","fileCount":40,"integrity":"sha512-zoTbOij3ejNGq69lhw0UdyojJjgcuz4VmT4Sgyj6GOpveBFTVwxASQrWQwGjlNCi29lyycNBtG0tvkWvAPXevw==","signatures":[{"sig":"MEYCIQCNG/QQCqJ+/yN0rSnKu2D3nSrmVpaezx8CZIRUN0gBxgIhAKl1u/x9MUbDT4mrrJ+A7w94dCVKfJu2jAw37AF0jE7B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqVCRA9TVsSAnZWagAAuMsQAJHA9fBWZTee14c6lTYy\niFBzmWkX1R1gD+RPLwvea5M/xv491a+japAkRoncCgENZBV0q6jaWRC9lWcS\n+qPH05C9OVtyghjearTwsfMsBOX9IR9YdcwHk+wsOIuxXab3U5QYarfdlKD7\nVqtsep19ZhBXCEadOFoykvCnXRHFGjE32yitPngzYxYfBGiw0/A+xhaF8+/Y\npt7Z0x7ESoDQMFB1lmMInFBKvrw3YS2OPEa7OX/ORxP7pccRsxaOe6KNf/18\nIxu6GtSwWStKQwChI43o7dgeQvd5Xat04EcQ7NMQYeioaJr2uzIrkuohywsQ\nQ6WzOpnq+GO4GCHGN3JFxFw64g/9jdRPTJnk2+o3i26AyXxf3eARs4WxXm4z\nsrNXcrCIqbBalmHSwuf0JfaQMg2SwFzKcmHKmWYYFNP4r4J87QyyXe/jrReJ\n5WMQIgRQhdMhQA858NdynPFtegUvJVvW979XADTBIqBEgI1xRIVK2et7o9HJ\nfRqLgIhEjCUxAKVKrq2sPzwxW+B0OaSa5AP0lz7qb7GG7DJ7Ox++5+tjLx1f\nRpF3gAry4VLV1BsUxA4Mcl6bx11rW5V61TNYiR0niTI+2XtRvp3Q5R8W7yeG\nQjzcT4UQTuT3aZsnyvnexYaa+OPzMWXEa1wNQeM+0u9OSx2iYye+JZe++z0w\nS6iq\r\n=qpHT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/shape":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/button":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/typography":"6.0.0-canary.d6315efe2.0","@material/icon-button":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.d6315efe2.0_1585339028642_0.9657019759270074","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/snackbar","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c02cfaadbb5c6407343bcc1f12d90e19a269536e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.a3016368d.0.tgz","fileCount":40,"integrity":"sha512-NIxVUanW6T6jV2uRbGcBToCTds1kLedOGzkBeEtJEoKqp1cBN9P0M5u8br+wmWSeN/LxaIFv2bqKX/IWdk/8Xw==","signatures":[{"sig":"MEUCIA+2E7tRcm0qXYSA+QauO4l5/EKQ4AE26RPfqokrxyonAiEArjkXRcIhYS1skuwL9nr6/HbgPcsUAnSzoI/C/jPZlKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm4OCRA9TVsSAnZWagAAMDkP+wZD8B15a6FBwnuayZBL\npg+N5v66oGA5UMJ15buh+3pvJolWvJh95w7QQwlZv/qQlMH1tSMss//T9Z2E\nyyOO1PadCXYgFFLOXvkSb7LY9cOahgJznfvF4Ao+YRov1Y1nDmXsuM0DMqLQ\nHRkDiClfKQWyXrFZrqb8nYnBokU3IlWQIewDk8zB2P69SYNQ6IqTWesCuF2D\n2A/TMlc3xlB3e5YvgfXyIKF8wz/7iPU4220Tqm3oDypFrPYZjCDguKtnDEdj\n7YbLXidf/O3LRTY2yKar4HKX88dbZcDRx7aQqiL1EDi1TuchOVEKLHOZDzPl\n/X5uHFu2PrXGl+PPhh9+vD8+NHkwz3FB16JTY7+ZOaezLkzgMgyPuxzteeEU\nZAKGyOSFef5XTRNBrAycHxU+Iwldz67pV4kM/y2/OjIaC1qaYPVowasM3HZL\nU39HVryeNtEBpwl3xJ3V/yaDRnIFkIF4dtpND5SXQO1K+f3i5xqEqpbO74aj\n4YZQG+e6TQ5XQnAzHCp5zmkJrwKOaAnjmFqjtWkaQRWhTRm92taToYrIVGl9\nPVPHRUx/ULHPimime8kvaYtr0fPRtVNhWsNCo53izuf2YQCb0emDquVOUdi8\nWzCU0mQ3to+kMdXdqDZiw9Ef2RvWraXbU9hQC+/T0Ri6YMWgkpdFqEi4iWy+\nxi5W\r\n=pirM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/shape":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/button":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/typography":"6.0.0-canary.a3016368d.0","@material/icon-button":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.a3016368d.0_1585344013181_0.6966762568916467","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/snackbar","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec6851a08dadf792f040a04bda674813c23b50ac","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.4b45b6620.0.tgz","fileCount":40,"integrity":"sha512-DuUjpv4D79zFf1Efjm7JsK+XqPjtaMqaSWBFAvF5iyEq2CFptTQZYuoRhulIUYDY6gADvEz00xiW7c/+sW6r7w==","signatures":[{"sig":"MEQCIA6hr1n0NVwhZ72+lXjRChQaBrFpciHcPRrwLQj74L82AiBiitvCqB5Wtk2t+g8JXxJK3uzyYvU/fL23JbIkO2RmuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2hOCRA9TVsSAnZWagAAPr0QAJHF6msfZCaQ+Ad5Yc6A\n7BM5/MT1GnSzld900cBN6WKHWXS4Ip/VKmXnxQrkvhbXBJ/pjVsUV2H06GMx\nkxX/q0z2zBeAOpyc7bXmvreFbQ5x7gozZiE4eA9xkbqCyRVDmPH0XBIw8i50\nipGqlpRGPQZDUfzFYNNaERwjAAIaoo4K0Q41nsQOWAySBkCou8Jki7e1xB8y\n39GhY8R8ju3eX378I5bkoF8uBN0CdfLp+bVdAvIlC9BJqsFgLjWuQbBrRTAF\nlLCo1tFiq34tZfVvEleuId/EXdsxu7HHgrEMmYRuacISPS/8C7CQL0Zcr32B\nTKzebKV8CO/q91etSBrhe7eNRPlDO+wZHOxqcabP2LINon5x1M6xe202T9WY\ngm1SINPpu2CySq6/Q/6BK8JGOXhF6/iP28d9RuRwKQzsCEdlj7Dw4BorlVL+\nlIenE0in0/6G6iXiuCGq8BNvdop9J47AYB0CVK0/eT6+zVcw7y2eXF16C+Dn\nRWTkEDdJ8B9FJqsNCxliW/F1wnJ5WpEeC4ZRYPOW4lHiN83UmHuT61n/PuXu\n3ji7MJEB2BCqnc37kahsrLVkgGz3B2h+nKGkJgk5/5EGTj+AMb2MTiZlUjDb\nwQ82gc01OJ3jRo0epEuI8/+qcI5lT2PMTgg6xa4BwNWahFY/VeR8F2/9X4xv\ntaSi\r\n=nZQA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/shape":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/button":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/typography":"6.0.0-canary.4b45b6620.0","@material/icon-button":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.4b45b6620.0_1585670221535_0.3199862177182107","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/snackbar","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e918dfff505e5b868e8b2e6c0692c285fa949d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.e84b9c8.0.tgz","fileCount":40,"integrity":"sha512-F+ayElys4viOKIToJf5YyR1Ln19VbM0aJ1s+uVJTlKtuYK1qFyaHQtht9mq9FRQw/lsg+pG9cCa8Zor1y8GwgQ==","signatures":[{"sig":"MEUCIG4+48szEzhHNyca/XrX5lJi/bZF0eeB7iib5uuqiQNlAiEAmuQ+LkPltl1l4nO75u90L9exacOgRDGGVzCaw2/tDbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMfNCRA9TVsSAnZWagAALJQP/1aQJiSTl5RY9CiuItx5\nSuMVnaJSyaCo0Xj0KTaj2Y1S6xuFnzabiTY875qdBZQBz097+SU4ApgtToXv\nuQDwD5ARbBwVFYGa4zbU6hSjhyx7WiIkbaKgn/7T9YYVIYNZgPuR/I5nXxOa\nL5FooOQH5jo5+LY4mIanBEvJK3EIqptWIs/0+GFyGAFHNMdgk/3aHJ7I2FWU\nZTLl0tW84pvM56n0xJRxXimj2jP0g2E1IoMLmZvZXvOkmqU7JKVTvGrV8vVe\nJXb5EiOEcQsF+cwCPZkGoREaucdX6RzabiqOBJzCHBWCX2VfthtqseTpnBdx\nWy026SK3mY68LWtSZ+yucndn78MAAUsXB0qIHkVXD3aPn9n6Ct/lA3T1xP4Z\nqvCwRBd/h3xwdJ3ViaxJj1Qi2BBNqIol32ka/hNwNyxtog3i56uFny9B2gTA\nspVkk+mU4JXktqgAFeg+2hk9rWMLkRKmmeJSlFfCB6vYfzZ0FiYoOWepaksD\nJafoBSMl5eMiotWhuiyKu+EzmSy59LmvQ3Wpgq/U/qkBJakV59H+NbQtPUXU\nXGR4TwxLhsZMIoG0Sh9juSIhSQ2DR3U4iRSVE9FyMI4x52D4vF9eWqi60Ve/\n7vrQx15PTj3G7SBw91RcwQfvku9iro6UsXc/iLT5GLPdnjTxeVE1h3K41t4e\nwy9b\r\n=6KjH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/shape":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/button":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/typography":"6.0.0-canary.e84b9c8.0","@material/icon-button":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.e84b9c8.0_1585760205430_0.5888483681360233","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/snackbar","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ba0e29cca8005de5db0b1a9383b556e368af970","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.e33c49e.0.tgz","fileCount":40,"integrity":"sha512-kUHSvmv52i2Cah3qoskZgIWT/r28X1hH4K0KseiJct+BYtxNgfG6twt82URnJFjhjrekBwuD5SVExWkWMD+xMQ==","signatures":[{"sig":"MEQCIGTUxle7jcawA/lru1GeV4fD89MkAtKZ3KtFFVFQkKo+AiALSET6aA1+MTFhWgiN8aZfCB1dOwJDWy5f31FonZxIPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1nCRA9TVsSAnZWagAA334QAKSin4P0RpRZFg6GAATZ\ny3tMiR1X62ym1gQ044OStgxuVdyZox6iytDhmhsq/ijEPs6c6FhDjXhcZpO8\nAw7eXU2AD7A7lHW/z54zF/GwOlDHAwTKA1MgIQsPM0zsjI2Ojg2IW3OGR3XO\nIFYSJPNgBsBmd0Q9XV1w2nyg39mCD1qviGCcaXOI6AQz64Ti3Q6zzXlXveFy\nkKBvlqA1CXsc0bdVhKReGpGrUcG8HdOmkHxMRo8AF9vdq1QSFCIXuGiKchXP\nx4MpBaqAi55FzW0bstqdpcSqmRGn4MntWE7XMkc1ka/XiucMtHondwgkERsW\nELKSMWQunZlyZWP27BpvXaqFSBFO5gM4KkEPSPfiNiEhofD2s8xP+qllouVT\nWenRWkz0mwVtQxCDdo6R17LzpFqzeEax//Cd2cItMXxq2A7w4JTAezYkISol\nQXUPbzXxuNx2z8IOhfGaRR7wcsRAWHxXBM/0ZjahoGsOvAYvQcdHf+tI3vjy\nR9yW/u+7x8DE0GR6EXfvWjerLp2seoDlfBiPcOK/lXnwEvI5joMp/CTP0cih\nG20lNaH+jOAg6bOymRUFq6D9CIlWpx+bixmGj3hS7qUmGMDxD+bf6w99FBH3\nHlstNU9EqMeexJ1+yjuFRanxQRo5N9ALT23zi87+ZUvh4Ui8SAHcAX+h/TyF\nZAr4\r\n=nvu/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/shape":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/button":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/typography":"6.0.0-canary.e33c49e.0","@material/icon-button":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.e33c49e.0_1585786214491_0.09713527668017674","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/snackbar","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1146bbfb02ed57f9834eaa0da2bc6cd41f1ebe7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.f1f8e60.0.tgz","fileCount":40,"integrity":"sha512-9L/k0dLan6kLZQCtDcnOpCfP0LpfIQoPNePSm20zSojMNiKnr78KBq+9VRe4IIDXMDvviyeJrhwteuvdFXZlhw==","signatures":[{"sig":"MEQCIGi8i5oIOL2zE3E3tSRfcGf9RpwWIV3ZzC/cKzMyworoAiAWAlzI+aj5vwJ2dYkYOlycZNxVo+ojOsfPzouSq1mzPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmpCRA9TVsSAnZWagAAGnoP/A+lhLJdbE7AIYXj9yc+\n+sksK2EmsR521lOTecpO2kYavq6JTR2CDyZQSL0BmuSMuQDDCSCZn1GTswNy\nOit/U3Q06zUFGtrH4vFPMiGuVeiLYb9Jbz8bXKg/gn0MujHxa3VnKQnTsapM\nCyS4huwALegW8bPQTXMN7kMDGFDvGlLzQytHXg/KhH02vlIYJDSAOChrZcgO\n6fSep4D7aeO9EEW6LarCJj+NIxD9/JsAjhP9KtwOf5qsOYJCMRI9vghROGJF\n/bb7CWMmTlz7ay34HbA3Fsgbvg3bCruuWqoqDjiD6cxh0T8R2GpxB3QkPPb/\nrM9U0GHhKQXbgznM6k023Wh95XEDjNxOgbSPuf0+QBUr0On4cAGjAJcqVxyI\nR/x23tSTFYXzZwJ1eL68c2BRSf1/d17msF4pDk0twzSF8vHldt9DhmmATnVU\n5i568Ton7AcCs7zsWo+abUheiTY5IpyHNAaOvCVwRXa3A1mkTpgEbBItdf08\nXylSbB/3xlV4wePFmERoZUrlP5Gslkq3gSSrfC2NOF8/HIseNg/YOCd7Jxbb\nnmz7Z1V/QQpQA/0/drwdYGpweFg4ZrE31mowN72ieM77O5wvKQZjq+QwpUYW\np6mlUVc2sXISto+c6v7BnrhkkWsg2RmBSyBeEai9+pq/eQOhHTo1rwAb8fmu\n4NlN\r\n=4+/E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/shape":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/button":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/typography":"6.0.0-canary.f1f8e60.0","@material/icon-button":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.f1f8e60.0_1585854888471_0.5760971615061423","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/snackbar","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"117739a211ed5792b79a8aa0d72e198b8189b90d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.1e17c49b3.0.tgz","fileCount":40,"integrity":"sha512-Qy9N2JyAoNKAGUnqUWtBDwZ9V06NJC1q28Fc1Msh0bB35yRAF+FcFh1Z59CSdLKwRZk/xn9q2PldAw5rz9dRFg==","signatures":[{"sig":"MEQCIDVBtvLzPw0fU5UGWJsShQ9FnUyBJaVo5Xjd/ZhTYKSyAiAYeE9RSCCLuUN5hYhaO/OLdGGq0yH7AKdMMOdO7I+dVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3rACRA9TVsSAnZWagAA9jgP+wUr//YsOHYUKWc05F2u\nzgfGcuLF7gCz2HfTd8Ykr79YLshAEa4uZep/VfIJRAErTNGA2Ozz3tqKzgdI\nhZ7PY+8mRGSuKKOE5fe/9BEew5864nBVscPtU5gbGxzpuqHvf8RkHEBy4cOd\nEF0QxYjrnVN0hMPSj2YVci+ff8zYU6XjvEKM4mj8G8Od0OZ3wnbyy/8QRoI5\ndEagLtngRvUMbcLZ6FYYpawgNdA2/FIfG/shxooR3WkoBM9ZQmnqYp3mD4IW\nVVcRV+o0tPn+oAOmgqWge0/lyJ9Or3WSLLq2ALeeXrlj1NMSCfZgayf27P6L\nwk9NtBvsT9jALRDT9E86iwbp5TIph5hlWLmpUZXTBISDIAFz+Li5TbntBijr\nKo/a4YDwX5Q3lbP425WDW21ImMeHUOGCB78bv6A8mbsycTgkPvLCeX6wBZiY\n+CvtQoNqkF3KMCisQ9s2mpBBjPzow2hRraQLyRbzfZx0kSzIbP+5rNi2J5DE\nk2OdqttFswepHKfuwi3rhB7cISBzJaW+pwBEfuVQpSqWdSFt8PpXB61YseId\noMYCwwmFhbolrMGJN3HMzakPm58rc2yqT+TM0uV/Su5ECsv4Qw1bdCDTnUf7\nk59bJ27XGxo7IoARticAxTuUZ7Bcw72MyfipkcUfPF0zIj5vYkugP6vzKtSL\nF23v\r\n=oiQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/shape":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/button":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/typography":"6.0.0-canary.1e17c49b3.0","@material/icon-button":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.1e17c49b3.0_1585937088199_0.640278114825964","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/snackbar","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93e65438049bc0084f6d4da2e032a15818c677d4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.6a40ef217.0.tgz","fileCount":40,"integrity":"sha512-V+83XrREXgdMb1NW9o5MNZ73VxTi7Xnbx4zvX2lWskoOsNtDEpcwrLgLRwh1x8g8eeJ+dyPKXEnql5AvTHgJxQ==","signatures":[{"sig":"MEUCIBl0hMgzIlO4BCv0bg1Y3n/oJ1Kgs9NafoVk6aZBHxRxAiEA3/1m1Bv5GqGepuTVgp0dJ1/QONyufZvAWpm4fuUrm2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42nCRA9TVsSAnZWagAAf3AP/i2l8rfbPoh4KeB0H3P1\nXka2TRlT2IDl4cxVjZeHz2Zqv2q/+MWMzjSOPA1IFfQjay9uq5zVbP7WjWiB\nSpT0SmX5j6iUwxrhcp3PH4YCoFdXUQYAfmRMHqxTJxX+oZUCyYaMZIHjAo74\nqMs8xKGmuXjQSZP5LS5cnL6L2c1A1FuBA0tDQL8Kh8hfKfLewbr46MifaMmw\ntSBfCPXoUwv1hlqhUr/mkMh8ATf2t0Y5BnrLxbqzDa4zlwXf4xFZFzdhDXh3\nlmh1qyHwuu1aA1g0BiHxC60AnsiWeUew0dOE/tZjpg9/NOEEcsSe/D8EKztY\nMDQJl5lXGrlZxMUsLxoQlWVhy++YJXwv5H6cJkrnXNs2TLYf8P7iGTbKTxWI\nziQe0U06zk3leHNBdzYbNPZt9lhy/+E7BK/b0TwEvapSqx7hkax0K1jvsbRo\n77tfGNSeqquKU0kJYL+c0eRKnK/gBD0DjYwFO6sGFaNwhuv9TBeDiqwJ6/At\nhUvzsoeHcvJIaQ7OiLDAoFClUYaX/Lz1xPK+z8pqe9VGRV8cF8Ws/absOygD\njqcJ/AqVlo21rsmpYshKsJd/nhpAD1N51doc69gfBmuT1mFvwWp7QY85hhYC\nFUTHHFO0DUGH9q5EgNpkLEoU9jDA1pISEoTmRxPtXitkJyzeZoYEYcuhAfTC\nRj8V\r\n=dItK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/shape":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/button":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/typography":"6.0.0-canary.6a40ef217.0","@material/icon-button":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.6a40ef217.0_1585941927051_0.8652316635260424","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/snackbar","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfd0215209d30aacc6d4830fc9624c2b07238668","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.5f24faacb.0.tgz","fileCount":40,"integrity":"sha512-R+613m6WI2KWrKCU5g1Y3xTzU66ouXID+/N986GNJzalKtVBUcJcE+OCGSijL9Kq8IUdymnjJFdpxPUlEAeKUg==","signatures":[{"sig":"MEQCIBoSlP+JAJJENVZGnNYbikqr2eHsKqExZjh8O2gqr85FAiArXPX8o7FPVlspfhwsbJAfjSe6fPaXF0QP80s1YhTFUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje+9CRA9TVsSAnZWagAAWy8P/1YpYNohHUxg5Hp2VbV/\n8BJW4PXXvBxV82D0UmAeY/eBMHLXn1RUd4QKa20g8moJkn67aMI28eW2Ph/7\nkFh1xlpq4t57a5haVyi0e+XqEO/wBiPkMh/T5RYJkDw5DpaSakNmpssoxVz8\nPFAGajQKqlbINVZ6rEJaMcEXkGaoOic/fWNIX3OktbkS5qphca59hsPg28ha\n0s5+OVx1h3gYHT4dSroelggOYxcJVeu1q/vXZe8+VmHhbHY0SJH72TyMznoH\nALKQ2XvUOXjTbo3A0f15I6dH2BXZT+6kyTGG/U8DlJztZy/PXSvv9HOcZKzn\n+anCaktfijkOjdYrqz8U9e4veQ337M2mpT/BKZCuHFYqPQNSXGm8Qqxj61p5\niIZIJoNK5I19vyaHq/LbpUXdxi7ppJe/X/Vsh8jntyhiOFFZ8O28zj0/KL0X\nlXKJZCTGR2+lS+zTweQvL/Osp6LjGNTnF+Q3/9+WxHDBZKl5oiDWWsGZlC8P\n0RL5S9zB0taOCmodI0t1s1cSct44o0gcMDtFk0htufk/LJPELsoUKMo3FMyX\nYenckX2d68YrufSk9U8wlU9rohgkdGka3ZXPq9DIUJJJ6KSw6e+ymdel0y7W\nLULKvSzNbCOzfjLV1ZygXU9dAWScVC6qfYVpNRTMf2ZYMxUA8aHMICiV40ZE\nBWb3\r\n=u7uq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/shape":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/button":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/typography":"6.0.0-canary.5f24faacb.0","@material/icon-button":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.5f24faacb.0_1586360253240_0.7302131469595106","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/snackbar","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38fe288d2ed6190cac2e2cac8e234638821a3701","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.82fa986b9.0.tgz","fileCount":40,"integrity":"sha512-tIP6xzXqYwxB0ceO07pCBQ+Gocp++9LT8WJ0HJAHPlcFTD2W9G7NbsKhhR6Sjwj28I/UXsulL4h89eThgHmxMg==","signatures":[{"sig":"MEQCIFQbUJ3MRPtNPMaVts1on6lUHaaLY2V3B/74UN/FSwFYAiAy7K0rIKcK5ssfV2ThOG6TeecnXfgqATIb6kh3XkPuxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDrCRA9TVsSAnZWagAAgEYP/AuvfrR8XjZEEtCtrda8\nauNrI2aSMm9ZOgXlH4WBqagBA1srlGYtWMhe1yLNSUSjvtOBTrzNgJ/XEsS7\n6a+QUcW7EbMndnumRGLsEBYbEDdueuO3Ku/t7k7ByPPvXukTWRM34pX9Y2bV\n5szNGWWQquHWVk9kzyt2zf9Qcx7WuLpKuW4Akie6BKrn1neAJtnnI/C8G9Hb\niS1eN8Rq1pfUPkt/2z21yvFsayLkHRo1Ww9dADITjJPEsVS2HTjEgbnFGnhp\nv2NaXlIdtUL3MoOYYEnoXZzskm0bgLcJXYi0WrsC+7AYS8poPmbVe/aPulYH\n/A4JZSKgeVeSd61wPNtYYt8U9pmWH+EY6z4JnTYYFHKu39+6BvtvWkIy13z3\n1O5iFZBEX6jBXqF2baLJ77G8t3iOPvbAasOfLBrD04nPOlOKaNPHHzXFyAPs\nLxJopLJCOxDnoagnYcBBouszJefgzUDosA1TMqjg2WbCcnbZi/+V1wX+0acq\niuCKsB9aU+MwNmDn0SikPengu2ksVHcfWR1g8TltrhZ6GDR75pu1paFBWy0N\nEt76hHnDsLnjOjAWQhn1XVDTqZLpY8Ns4oMRoow9WqNihQCVboxJ+pGOuvfw\nwda52Xp3ueLGSaKPCDnm69JVEx/7skSQSzRNfO5XHARtF0omnAYecLM6a429\nNqbX\r\n=rn06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/shape":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/button":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/typography":"6.0.0-canary.82fa986b9.0","@material/icon-button":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.82fa986b9.0_1586360554282_0.769416969792027","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/snackbar","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92868058a0f64f439cbbe247c65a0a2ce8f561cc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.9930d9cc5.0.tgz","fileCount":40,"integrity":"sha512-587kIpLT6akLfg5JrqhBd7EkxTxrWEA3L7QMY98CaWKxRBf+nTht47QtyMpG5k7z6x2RQf43G8izABKS3XXw+Q==","signatures":[{"sig":"MEYCIQD8kckoz06M34GvbtS4chIh6NwLANEjGrYtoTaenubfKgIhAMfEMwscleX0xh0ODHRG9ySIyMse5HUWu3c48et4EdCc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejib3CRA9TVsSAnZWagAAEscP/3ILgt4shWxIKmX+Foo5\nWs3C1lKLiSoQGeBgG5/79kk/uQCS644vTovU390VG7QK9U0R2DgRJdo2G6kw\nVZwdHMcjFJN76SRv//yM9OkXYGZWTotE8LVy+5Dr3sjcXq5W+iC3oSek6n0+\nT/t5Bfvm1sECvTxZ28Jiy6O9vet0rFmPGjd0HcNQzGxVIuAhRw++ThonilIL\neba7Ztjay45hBPmAZFrLr3WtptMrXzglGCM/FLycZ663Br5qp70nwObd5XkH\nS1pi0YMK0QaI2XAmpXSLwXh+1l+s6QDjuX6EMtKd8NMwni0h2AQQNJk8tdUT\nfqRlE/iZb5Wd1fdPemEvx4s2A5FK+h0oLusP668646Z5SrGWWYFewnEddVEL\nZrFtvb3YdDxGuvuWjVArSNMC/9A5RLCa0ACgH5M5wOoqlLuRu6+KJIPDCYBc\nw20k1+Hzn//SlX3J6JyNKmjXv38YARCaCTia82jefNNtAuuJKxINRMqRhNj4\n6MRyw7Hcu5EHU6CUlAhxvbHmU1pYdsMe+yqTZqJr0mb7+mBqJkxVyvQmTCAA\nFzR/G6Ds4iGnQuSnUZmRxC6x1UxHgZenRqGN9NU3OKp+QKx7OK6ApK38cJR9\nkjGJlcSe8h/MZtPG6htUyi1TxLY1Lt84088LxuMayew//6speZytqr4l/kHN\nVF03\r\n=m1QR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/shape":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/button":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/typography":"6.0.0-canary.9930d9cc5.0","@material/icon-button":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.9930d9cc5.0_1586374390791_0.012609684633790419","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/snackbar","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f14833e4c331bc7e84d0dbaba598962c84825e7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.6601d24af.0.tgz","fileCount":40,"integrity":"sha512-CuVaUMRNib0zeFxL8NzKr5i19LNtj35L3/eq4x7ucDvplZ2jit46sBbe9bfosDCq2Q0B4MPeKx84ctCAuD3Dzw==","signatures":[{"sig":"MEUCIQCfBJqCLvjPf5GaT83tK+ugJZtyfp0ao+0PoOjRzY+lpwIgEVp43YVn2qVNR52UnuymtaErkFNgcwTc+kny+soHUEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmytCRA9TVsSAnZWagAAZ7AP/ibrySupIcbNkif1KrgZ\nbWda42dHvsINrU9jA/Jcqe4Eu2H2f2+ITnY2/H7qv0I9xUv7p0J+InI2PWLJ\n7QWpd2KCWrKidh19lEvLBv9zewrMjAVPha/sUhMNV+zZUjHj140DJ6MBL0Wu\nLvaxj0IKRXdXiLVraM5cL/9QJOD4Ufdh0LaonCCsGm5Vq8VBb/XVGf84gz0E\nrXzvheu+3rtQwKzx+T/7KqpFnAHOgfItfOLeE7u/+5qbINtnVxQGGZ0b3jir\nchUQ6dJuQjDvwntJdoTF24MyIgHDQDLcRcJUR+Tamp/eUPnKoVZOR+gm0gDr\nT3J6qLGXISRzeIzGJE8GPQxXnxehromGxAPSSSMKNtg3+20T+YyKYsmZ7bjL\ndDYYw7LoA+R2S5BoBTrEPxtTi+tVjiRlwzI71N2dm6pDtAJGpp2M5KUh/1bb\nggS9vYrxcpaaw6Qu0enkZ+1CF+W6Ru+ByJ+czM8sbIxCZIHUFS6GRD5hsBJV\ndsZUXliBWPOxxgutAuWscxYbNJ036dSVCdMT1+MXct7eNjGLTxThRVoCy7Jt\nKkzr3Vodp1mXDdXr3Mpw9pc9aaovpmTLW/Lq5EoR6Wts2hsWUkZQdpnLVqCG\nwLxEYzSIWmuZXMpHSlpkBVjsDrqXlGk5I5N6kfJjbVUwgSIh4Y2AChCBSxgp\npm4E\r\n=F8Hr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/shape":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/button":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/typography":"6.0.0-canary.6601d24af.0","@material/icon-button":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.6601d24af.0_1586392237119_0.947326113268494","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/snackbar","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e201014fd4fa98ce5b760487ca4193e3c106c565","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.05f5e1583.0.tgz","fileCount":40,"integrity":"sha512-SzqLaiEk2JV3oRtN+/Pu/d3kpXW+7aYkn0pPcFySIHmpIDXw3gj3XraeGKMcwKs1imnQUxfkdjYy+UNT/gDzrA==","signatures":[{"sig":"MEUCIGk5rVniFb2Dkbq5RYQI+O5PCA26we6ogaEit2TSNooAAiEAt4IzSJ1kY71PuzIf0smTOD5uVvp9Jjx17wpWrT3DNxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnDBCRA9TVsSAnZWagAAW7EP/jhoid0jjTkROwDwrf+O\nTzK8UFJ9hV7wHkC4QA7Ix6Z2cgCMpxENj7TJ3lBZ/ZIMLLPsd8tjxAHfRao5\nTvV14yOg4UxxBh1kDBpYbV1QaC92sP1dgJmkkLLtTg+hiS8JeIQUHa/IbygJ\numb8AAbMtQ8E3P8zEgj2/wcOt66WAnbzMmE8bWsYei4aRM1lymoxn0R2z/9n\nt6mD99WZGZqfxOP+UE8jcYgbtXhrc/nCkMZrS004EEyMr4bUv8q9ClCMtcJ4\njnI85evMTa+UvHr+phVbJxBQ7Wrd+N/paXdCZUt/g4M5P56PJzGVG0LVdymj\nlULGMkPeY2Y/CqmGvcu6vfOlaJaETx7Y+yTFw3qmnefbcXMZvcieWJHSZu1+\nvNcntFR1nhah7RZoDQ21UJgsQPi/zZUW/BScorjA0ciCvg80hav+pmm21SGh\nl6KzPnO63M+uI8rLFydZQbtDUsMrWzJAG6KwzTXMGLv8KMIrcY6hiv6Iqej2\nJqtSPhI/oeizXEK/KhkBuTcpGD1AF+f+glVqY3o8RaO1+unaSUjSdSGvy2R5\nDDh62XVKCgWGtcN5hFzzsM9ccLoYNWLM+aBeAAFGhYxydjdRQRxUE516C27f\nzWHETyJNwyWDoSEW0v1nx8Eb0W6FE1KitcLie3gGTLD8+W4pxOMI0rUZHFc5\n5GIs\r\n=o96v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/shape":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/button":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/typography":"6.0.0-canary.05f5e1583.0","@material/icon-button":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.05f5e1583.0_1586393281094_0.1063299889377538","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/snackbar","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9902c093ac7662ba0b1931f0c93c2249604fa9dd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.bce00e186.0.tgz","fileCount":40,"integrity":"sha512-e4cEenZBbKcFWlepkerfF7wvI6CmnOkr2MDCqCGy3rquwg8d04Or89Ex2DVDl2xRnWAI1uyDEGCY1FpX9X078g==","signatures":[{"sig":"MEYCIQCl2JmDa9oUHvAn4/31EAkLfRGe1ao64xRynDsPjpjL3wIhAObglZPrQ1BdBnnbRmanjXpk7+n9YB6c2EFo+JXBBTk4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz4NCRA9TVsSAnZWagAAF3oP/jZhVQDMsVvkkh+kSZLX\nJJFEkqqk2nCmE/KPly+QK8pIJu1+aL3px5hi28Pyo7lUbr7mkk/dCpTb0H2s\neitMStqNbolJ5afGbKw+XHdoa9pwXaoIBQ8wKaSZWW9IjanvXfHBgoGYLiu1\nI8sb10ljq14d7BSdAHlg58yFAjm25W9jBh8skHE54jlrcqBTr2nc7ZlhFpVs\n5z3sbz8UCpzOR5483jXtEX6ooRL/HYkO4b0PnpNqF5X4uYxy7vtmTr0Ihm8D\n31QWpQEbxlfpKzVQj9Mx3WBT4/GtdetdokLJtGY8ZOr4NUeB2DQMnbpf2/XT\nYQq+YV9lptEV1khajPBYHtyzdxEN1N7OZ05Ui04X9d3MB/mJ8wdFArZDS9Ru\nGtDiZHBkJioKNhb/Ax/apmcXQJ+DZykxi7wlaZUKDnZBeCfDZvPd9wEZFlEP\nIL7xga2fwlQrw8KJ+39YpgfQc7C4/w8qfUurArB/09W0LZl8jUukQy9HZm6D\nZurxek9ngwtURNTxiXM15t4kSwtvb5m9J4UB2F97y7B3jqFEQtlCHlqfpHuV\nQNiupIHioIyx9EX/VYjT0v4sDdgqmGr4LLpdLUvcQuqBVtVrhRO1TC1v0uV1\nykqppcDwIyrS4/zz9TECQBLL5bh8Z6w8WHP7qL0SBEEGtUrxblhT7HDEgeRb\n2qJ3\r\n=jNcu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/shape":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/button":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/typography":"6.0.0-canary.bce00e186.0","@material/icon-button":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.bce00e186.0_1586445836509_0.11258249069823156","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/snackbar","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"775c30db38155d3a7d4c4708dd7bf6794961f8b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.927fa902c.0.tgz","fileCount":40,"integrity":"sha512-L8zyYSUG3KCrOovJcgXq2nSnwf6PA9TYXbgID6qCYVsYlBpuCf4EmtGKKawLdvp5Wo1E8+Eg7NRJ3BV777jflg==","signatures":[{"sig":"MEQCIGY16NLkTn5hXixZmBuBJBuR7zE+T2AD/hGUTlWSqJRwAiANhT4k4oS2/ssYP6JcsyuHgMA/o6x2awWhtqHLF+gW+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej224CRA9TVsSAnZWagAApPIP/it4JBxRDEwzxMZm9zzI\niMl5E5UXQX7NADIQ/26tYlZPEs74aFkZANaq5qrwo7+/3tXgg2IZCRHEqK7/\nOJat6FOt1NsPPdWZRzBLssOrtgj/FUHZuRQOy15ChEEfZSa1K3b0S6GbD5hB\nbXIXUiT7UUnMw0/sAX/G4aYmCgBMSXdN6ju4IL7xnwll/DsU/GrK3/xEsC5t\nzdzSTmqsdAY85WHY6XoraeeOaAlNDERfYQGaP2i8eBfqOHv6RmsEPLMDE1RC\nqqbn9PpelUhF/KcMqYnt+7bNnTxcZkCLueZ7HjCB/RcdU6WoGsVXA6hTdBWG\nU7DFz78oDyse/CnU8ndUEgSuuZWZ55GCUCjRHI+RFehzoX3Xh87CJTmDpY8k\nSYYz0riwXkihjSpqaCKD3D2od9jFOwlvWI/vx4B5X2sT4SlzLD0VaLSbz0uQ\ns872kSQfUCbh/ggFiby0Z/PRv4ufa7V36bTRELzdssisZ/oBQDLrIGYSuw+G\nrg6dzyQKZux8jdFPcy7f6K5uPL1fyb5Hy+L5BO+SXVr9jzzA/UIoKPJ4xPan\nf8+BhpUdJy70sq8v4IfzjhcP8JfVvBgTqWreitIaZpyFyDoq8D6KqO7aWkoN\nR8T2lW7HW13DJjXWlG6ukJW1z5gDUAjDhH0MwSoHMNvChMkBftAnGd6Bb4bv\ntOBx\r\n=QVq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/shape":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/button":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/typography":"6.0.0-canary.927fa902c.0","@material/icon-button":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.927fa902c.0_1586458039655_0.4917321663117282","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/snackbar","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a204d88d42bd888538516d16539a52d415d55ad3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":40,"integrity":"sha512-LgIbp0by4fWSuH/9S8N4XN27HoObHsHTST2wlUj6WoAuQix+csKt0WHS1HRjoSVj9S6I2/E8A5fnyT+aycPYRw==","signatures":[{"sig":"MEUCIDBzWr9xOFIWf19kSEJ61Ac5SqyBs+vLJg0PRGE8F3hrAiEAywqLs+LQ1cLYoA83Dxf1QpO3EDOnmKKUXhCVFDtis4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMmpCRA9TVsSAnZWagAA0j8P/inA8dEbaZm2NvVds46J\nEGETrskb9rxK6dw1sQweyh42+PjiBlKvzN/23Z+ebtH5dlUSPNRkNFRMdON0\nEgeqjfqWCTeuDzVaNl6rhh2UlVm1m+nq1mrwaYmMzwzf3rXY1sxu2YNj4VmZ\n5bg/Ln5eZDi7+76KJKqTVI1f3yHfGsaAjjv75l6EUxCe5RpGWSUAMFMnvCfZ\nu7DcvUVtrQyYOs4uii6iUTJRYq+LXbnAv7dlYNQwbs5dMrbaqHIASHoCX1uh\nzrSRuObjBElJaWh0iG0P/q8ZIGczx5S4P4yXEpnQYAiNevAPgu8oYUJCg//c\nTCUZ48kPVOE3Eac2V15hp5M+nlNzAedTDUHrBSCfn5ZwxeTE4+HaeTExkrNe\nXwWbspu2I74Krimef8qzDEQOsCSX4Fpz2q3kmv0b78Q96PXsIaPyZ8Mtjr4Y\n1+NS1wiJVSFAtiG1gF+mGbVyPUPRhzYp7rqtqsTFRpMbHCBWmysi0gPpzwaK\n1E2u7Ta2exAy3IXtl+HPKCD740biwvTaKh3bBHQQiZNAM5rNHlexf57+d5KY\nNpZsn4M4LTrYDApGQ/zxCl73dDuUEzZMZmXRCQWIYsQ7GJ4VR1UUF2BTx8oX\n8xqrQlezsmg1RZWGJmjvETlHc1ablm+U0PM6aepQudEyq3v3dF0wGW6X6AEs\nhLmQ\r\n=GN29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/shape":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/button":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/typography":"6.0.0-canary.eb28b6ecc.0","@material/icon-button":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.eb28b6ecc.0_1586547112856_0.5773952932691935","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/snackbar","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"738f0c4904e1e52fb8e1af42bdf1a8c2dffa5202","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.816a43b42.0.tgz","fileCount":40,"integrity":"sha512-hdExIRh4ahuSBt9u7kLKH8M3X/5Q3OU984sZzRE6beUGf5nsSTWiIHbNIQEDqNa63LG8FPvuTF89FUqx0h35Ew==","signatures":[{"sig":"MEYCIQCqeZ3rZUOgIzLzUiZzhoGvL9lgQQrrcESgEtqR3skP0AIhAPWTmxJBGNBzfcVE/Syv1WTLhESSLbK0AvGe7S7/WtIu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNzHCRA9TVsSAnZWagAA/joQAIi5nQ3l0GYtnX0xvHCa\n3Pu9XuyZ+zV8mHmoi6B/6EKXSuiqzjzbDX9MNvWaJaSmxFUySrVAuIE6iCO+\nPV5xYHblLUTnjt6+PCMGOenrb25jV7g7kQw62euTL8wZk4nudyqexzH/Wj6x\njVa3t2neCwyN9vFHmPXDqAk1n+jsD/Z3KXUZACb6Qmaupxcs88nebKbsXu98\nxkvApFm26JTdbB1eAIC4jl9uhPrIQWu2rF9BiiwMWe7Iko+R2mVlHmxt1qnx\nGu6zeD7He45kI64f0HAliidXaW07skrl0nOn5egS6NJDCjxp+rUJvRnRBOSb\nIg7ZufNRI54yg0SOFO9JkurisZdmja09NR9ckVMgM5nghgAi29Fan3HaOCAR\nRb9dPv/hp3/WszSaqGH3lgvGmxRPsiDW4m3fCkJzDJPZVQ533D4dyCqLvp+M\n9MqdyCtj50b250JJj5FDHeEzPjdXWTb9bha5Jmfb9iEsbj0YH3lmzyzZVRBM\n+f26gJCqRwoj5t8Yzlt5liP0NMkm+4IH9ch5DnnVTwdugGGXuQSeWiNBeHAy\nNfkWysfPUj2vMd6pipvNHAW0Ocqy9X3lE7qkLVOyk7q84jetoHlKnqN4T2PT\nDCf4V3iqYrIqgMJub8vJi9uDJWmabd4wKtTuI6ovQU1+5lzklC4WWpmN+r2a\nyclJ\r\n=lICx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/shape":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/button":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/typography":"6.0.0-canary.816a43b42.0","@material/icon-button":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.816a43b42.0_1586552007196_0.883417935218231","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/snackbar","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a07bd6a2044a74efcf1f9565efa85ca1b65640a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.008c4d319.0.tgz","fileCount":40,"integrity":"sha512-db6WVlh7omX//FyO3zTZop/HDVOyqDmmRZgngOkc7vv9pf59k8zuWBpGZhYyJehJsGOZeLx2sX4mS6ZftpqqFA==","signatures":[{"sig":"MEQCIBdIjZJjLUPNWe2J2cPXZx9XI1ncGxbfXSHAiEQGck1EAiAbdKa5nsBCmpk8robUaAWtwAPxHPUF9GgCwL10oeFEnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJSrCRA9TVsSAnZWagAAUcwP+wVmaS8Hxmb6MGm0/vMf\nhffHb2TmAp/sp2jWY93Gv/Fq6whiNak8RX4BQtmw8AcKQeL32ujCpPYAIg2m\nHNDrnxKzmuULs1h+E9kgUSCVQ4mC7NBlYwiehk3hwiuB2OWm2acM89cLwyRQ\nYFCrvpEO9bRNQEM2uJ2/mMyp9ogFW4khvZ+tVGJfjnq9EjgS6L8D1qoyF83T\nlzT0cPPuP3CGgjL8y1Z59uSJjlUvycie3VJhqwToJbe/HXsYk5CbQK4/4KlK\nDNGNpYLUmP4/GUeBCrRErKA58pXoowu1eBlWSwoxzFkfzVhjxZwLpmXEvDmQ\nZxBxbliZZKXYny9EtZ/UieAqGpx3GEwRne4zPr2yC21cB1BnsOEllCPHwEBH\n7sLYDJMllUYxx2ibGLR//5Bz81e0ipzReIFRx2QP2F1L/egJQcAUc1QAFUvX\nIDF3QmJntGxyZwucFXns/1e9jzpYmxmBXoveYjw+fqjyw+du3QEy/Drl+JOJ\nnrWJYO9q/U8IAA2pdnsJDndoO3K7TCN/yuknpdnCkQfRpOC4B3SBDO2Cufmz\ngU32MFj9VvTmmyQAQfY2DxqK7wgPx+KvXcI+Xf7OYRklSBa85Hr5abSEoCsK\n5/UVXQL3Y1c0K3Wte7RWNElt61l7LcG011/hMZnh44/MWYgyWJwFUN1ldeNP\nuQiF\r\n=ekxt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/shape":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/button":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/typography":"6.0.0-canary.008c4d319.0","@material/icon-button":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.008c4d319.0_1586795690247_0.6434105526735872","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/snackbar","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65447276122c7423f9c4e77f7586b73b9ee3e0af","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":40,"integrity":"sha512-wfQHE53tzlk1s+Te6zEJVNWihjEtYeywJzl4lGF3zBrx5bSaBdS9DFSrAHVTHdKHpSed8/L43Z/+ETnGuBQdrQ==","signatures":[{"sig":"MEUCIQDL85L8Yqh8MRCPG2VpiXGq7i6bEqlvJNQh35ZCKt1piAIgXEwzJuFSYvy951UzqFlZsbyWEgqz1gDBB8lWXIt92Rk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTkCRA9TVsSAnZWagAA1H8QAIQ1WfCPbXhdxJ4aIeSq\nI+eNbGHod4l3mcJdUaYG++DuQpGKW1Nepp4OA4l2d/0OLCrCbY5NAY5UlpN7\ncWypru8p5U2fe+qs5BswnZM1NHCgvOOst3xSzrOAtzKJddt5WTuiFGWFNqAl\nF0GtNxOQk3nnLTmENBPxAuB3DfYs4wyxkPAP+OJT3PzDmoNW6dAcHSnjwmU9\nSkxHFl0OC8+b2NAFjIHgA6fRow/Q/Jc3vy8WWEmgAmcYpuLY0U6FB6J7lHW5\nlNOLp6anmasnghR/URbFNSc1nt6Cu9CVHPVZzKBD0grl/UCJeA1oDaTFygsc\nBM9axhaX6uKC7Gply71tpvBKhVUuit7nr/pd3p5WJHi6bOO7ajMKBpLmjv7x\nWTevNBlcRMpZPedvGo+xdItppP1C9yDxtavPsh0d2lP1O0yuMog9LKQVzI+t\n8lWq000ofZ+E8wgpOlsZVlCfIdEu5J82atcyy3mMwCAKKQ40bwrLw7dIdXXG\n5lRbHhZ1a0bTxqrAwOvhpCbnOMFDsmjstv8siJZlanaKs7x21zuJ9AxWMb7y\nCKafIVLItLSrKz2rhxaH7Tpyubv7PY75/7q30gygxibIMw5hP3GyVbPvtQVJ\nd4evcAPS+lmqbdxNHg7OoojNgbPHG5K577cO2ur1eRWIBimLjbul8JxSHkzV\nxDKO\r\n=RdJU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/shape":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/button":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/typography":"6.0.0-canary.cbb3f28ca.0","@material/icon-button":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.cbb3f28ca.0_1586840804232_0.8624535558982083","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/snackbar","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a1f162f5357ea74b36a0c168bfa8663341bfb1f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.f172b0f90.0.tgz","fileCount":40,"integrity":"sha512-EL462MPrWmNQTkpO1MmE8uTqeGProLd2FZsk0LsLSd+eM1ussjPAAuG1bVXujTT/tyKm6nHkiY/goG3EpjC46A==","signatures":[{"sig":"MEYCIQCMq+0Gleo8t683Fqdbgybi9I/cFMPPodeEpMg0w7I1sgIhAKGrV9YkUHGeW5TGc/KYO3SihXAbPw49F1Qq0YoO/RuP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkMLCRA9TVsSAnZWagAAkBMP/3wT1odWiIIvMW+jpDQD\n3o7tfmlpUAlsyiOGJhtaOMFN/qQqRaf81/b47DuWF8SlT+uDbY3MRUWnA0JY\nDK5C8j1+x50tpwFJIDeu6BDZvkhOvV+sxPXD0furXBa3pU++MhCI+sYzUPC/\nO5HQl4244bg3qhebsGLGsekyo/FLlzCZxrOkKuzZ0oekO5Lu79mzxqqVHx/I\nPp/mNw7ngAbAtNkFg2dmVDqq9dl4kw1uRYRnxxBIDCzpHm0kwg4Jxw8Ofgkp\n6ie4qkzm1VDkoSRjzeP/fMeEIqH5JO8IzN+VUdtYc2bp5yaPoGrYMflgStrN\n2FzP/jBziXBqaezmJH3iyoUHHJFJnuWe7JUevcV35Ixzme1pux8//79PPYA4\nvAp8JjaCN2O9oY+/IK8x3/SyRVq8qHczC3StWcscNkWDAQRo8zENjKEv9BHQ\n+MFhpvODJBVO0BcNbQLjcTqnzTbfXpufOlMGQqPTgwo3n0Q7tOZpJQtReUKc\n+k7sPtpfhO5yf7Za5dDcwAfyywoUpvmorDk7mn8cLFRv/pVjqJhfRR6H/zHM\nX210+MF/QpjsJEUb4uUt2GwgyXkWjeKWnSiSg0jXi8qcpetAoU6oYhM6gAQh\njQOwapB16cGitaEZemMw98Aez+gEQU7ZaMNJUKGAo6JQK2KwuDW4IJxa1RxU\nkzfp\r\n=csiD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/shape":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/button":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/typography":"6.0.0-canary.f172b0f90.0","@material/icon-button":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.f172b0f90.0_1586905866791_0.1960855481042323","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/snackbar","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"622c8ee80d6a8543f3192560caeb2dd37bd3aefd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.c02642273.0.tgz","fileCount":40,"integrity":"sha512-j7ZYCAf8Q2Ae2kwDV0AGVLT6Ks33sia4oJ2X29xgsA+V3r7vMNqPNU12LKKxsEoByML25QglchTiNIbcrLap+Q==","signatures":[{"sig":"MEUCIAmYeO62frRjurbewkAGiVWtOJ9pCmiUJ+RjPofNOd15AiEAgcttW16syTy6f3Lc7x9Jwkc9Ep4JB/kme41dbGVpMbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzPLCRA9TVsSAnZWagAAAsoP/jhqVmMm+caquehb6XsX\n8A+ldem0YHLj7d5P3dzdaj+/2AjfHUori7EPGoAedLWmHDb/1z9AoHPfPy0P\ndGjAmMEdIu6Xs7KkZP8i5VZpo33BUsvx27HiJ+mbMBZF1+S0vlBvqvplG9aC\n/SRtJ6+koLxM7/eg0o8Q92jF9ex8H2f8B1Tqb3n6WuyBjGwM/Qol0ddyb5ze\n39PZMHJ4pUzzjOzeBbEUNFJDLcS/IBCmmwql/GcZdif6CHraNExd62ApZkzC\nYimGXwfBQrRNTdOdENIj51UJrmdSpnI3ZLc+mGc0Jsp6hIkl2GLijxrfKgN/\nD1iKo8ThRaAtK13Yu15TFsAmBFZCg9uFu/jTRFtkMa9Ll+DTJVeh+0KflwgF\n64bmOvh4t/W6U1ndv5o0D9opLOTqaZ5fO5LqkTCgCeOaHo0B85/YSZefxUjW\nLs8UFFSHe4oJUMbjEZIkfXKJuLB9B+9Rgf5epUk4sK1X4CVQzzKiNFUSKfVe\noESbUJSXKhNNJFOJklDyGzpW2TR5vEezob2O+GZ0pNDLwl4M/IGSvg+JXcOn\nGKr+cqWnvTXRf3V6ebIe8nL864S3mQ413TpGLg+6M03Jp4vU3ia2/xlB6MHM\nltWfh8JKFdjysAaONeMC1GWw1XUIgSmU5FSEsP1mdsm0cl6UYo86ccOt7Zf7\nEhzi\r\n=m8ci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/shape":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/button":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/typography":"6.0.0-canary.c02642273.0","@material/icon-button":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.c02642273.0_1586967499175_0.28907480733497004","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/snackbar","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87664b10ec1c59f9624772e3b992a7ed287f9668","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.8a299b568.0.tgz","fileCount":40,"integrity":"sha512-67wzkVaSbCBGRZTsKWpMxJgZGHVyFRZHaPGT2+Kefn4vcg71sIhOn1UvSk0zRoGKYv2+qOckGyfB970mvGBlOw==","signatures":[{"sig":"MEUCIQCq+Rx43ecgRTHXzBF6kXWivFozNVhVBrbLmGqhZkZDPQIgY5oGx3U3uacYw2kISUlMTHAIYCDvFstbH9pff1Qiwp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44zCRA9TVsSAnZWagAAJxAP/2sUXky3wrtGn9LshP4C\nkKiJ1bRFVcHZeaNKpPWxKtp5jNTW+0tAPnFVZDr3CjdjaSaqqohWZs3xXoa4\nTImvuFpQNOH8tOZ3DcL735xzN3eVJ9sTmDU/cDm6t+2N+GRnm2tJu3YoFrqw\nO368moB9+p2LzmQl0l4dzRgeLEkXXk8nrIBZajlSmbSEECETFyi1yyWR2cjF\nn//6El/3Qa6IroWdyTOsIMYBD/OQ6RRKzbqBHWbg/AGLOBdYUsjvDBIsQDoS\n6KZl6CfVRwT+VlkPhPACSX6Bw5Zz2lkxkQNtYI6EgZKl6D5kOdgTRcDHZGIs\nfLOnl3h5u9HOC0wSvWtHhCWDQ7KS3G8A4vqLsITfLiCmEhCQPJX3gNriUaPn\nwSHa9VzVpDlkSIU6M0uGTbyyyP02ZI6bwMJrXkkmypvu2JrgHNDB1S/Oy2lT\nI4ZDERile5TCZz85SjRZfol6fhC9YaYygam3fa9xdbXIbQFa/Eh+zjcoZGbO\nAUokPXLlq70Fwf1IsA/DpRbrHFmx04whdzYaFRE/U2PODxJ3FgM0+UKyGFuy\nQI6qPHOIvOypSEmUP2b8ZdnFTXNFa21ERuA5Juga0gxhFjtHS9SwxjF8vYl7\nAgb2Wy3sH9nlmSnFcsFVnzT09CLnTALTVif+BCE+OX6+rV6PxWRI5qKXFihZ\ny8XN\r\n=wl6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/shape":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/button":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/typography":"6.0.0-canary.8a299b568.0","@material/icon-button":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.8a299b568.0_1586990643187_0.29015447019490415","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/snackbar","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e20ee7141e74a4d16497e7f560329ae42840f15d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.490fbdc09.0.tgz","fileCount":40,"integrity":"sha512-ZBJHTORqDqwly7M1Hpyr6/afElRKjLpcHDPd5ELUqZUnKtl78nT7U+gfYP//y0hEwtKw+TfTR9j57mgpvZqN3w==","signatures":[{"sig":"MEUCIAXIK+Av6+a9W0/gmbfeV52VeoXbReROWmbh1CortZ0kAiEA7iLvrxtbIRvQgqfYfxdCLcIrLNSs8BJO2mqYlvfahCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/R8CRA9TVsSAnZWagAAKNkP/3eu3VjX53nLSvm9LHGS\nv1cWiLvG754W++OXTEkTp24P8s+wbhZ/HQ8R/a/KjAfxmCBxamduFEzht5W7\nXCJOLav8SGUl1CflfdEHq2LM+Jkptn/1GSUU79c08eklKDp4BmYSDw+TXi1M\nCLARhDl5fBw+qpaJXfGnFIuEmhfmnWr6u03ajx49VKS/k8SLo+emtV5fREH7\nAvaOevotaOA6xt2wft+QEF0Ef+sA22Ieo9D06A2GYSH5jajw4EOvGRYdtsag\nNwxcXamArKPXIGXeLOVExv9b8ir/vbAbGqHUZygzPHpq2yZATJ8Qd7WLX/gj\ngzNxUW669AGJWqsCUBocOyYMHqsPkX1R2WgdDFZiyXpV/eqYTfbOnvJQkQYz\nHiNQ7ikvwZ6Xs9qpf7n1SYnDq9m9hrOr6mTZV+q354BzC6mtZ+HoHm7xY44G\nY1Sfk/HAuFGJ9EYFW7cb+g+JAZjwFahVg9xfvqXSZ7dY97UY/uPLa2mLS82R\naA6vGCmY2OvKzWvgIwkkl51TgM7pzf87/vgXV5PRQgj/BiBC61r1akegHMy3\n+Wyuq8xxJ1zNA0GT1gcJiWvGs3WqU953a8jtYvviLeWgckCRs3z4MfasRmSf\nhkAA/69LgQsluiw638OHSzq743iK/EHOk4zLAuSFeHW05Jd8faliUCKBfRGG\nDXBZ\r\n=qoUJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.490fbdc09.0","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/shape":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/button":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/typography":"6.0.0-canary.490fbdc09.0","@material/icon-button":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.490fbdc09.0_1587016828149_0.023941451169505745","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/snackbar","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c09340b0a59ea53cf2073d54adc31394743f4118","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.f838c6e55.0.tgz","fileCount":40,"integrity":"sha512-PZjpiY5PX93xuXAnv0u92a0DPcvd99FQZe87l6ZwkCKMPVCyXDhPiZ64d6A0ppauq2FtoYk2YlkBKtEw2oDMIw==","signatures":[{"sig":"MEQCIFAa3p4zgV+B3cmMMJg0P8PYBW7fCk53L9TUmaSz/GHtAiAWewPgpqHivD0SBDk3fZGMkwN2xzuDq43MDI8mzKnhuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGtaCRA9TVsSAnZWagAAzwoP/j0NBXtUqGg05JyiSGZH\nKM+7fecVOo+mn+UJsZH9iiPusF0WixSqOC4zNv9GQWJ0u0qZ0xeb4itBo/nU\nkPRWynNeb6zT9M60KjL3sdjNMCdj3GlJfc8VQ+WpqW3br2rwhdtJvnw9967Z\naPwj793JE324p2YFQiH6nLBBWX5MBsGhCt3EnnvrhhdnrAYu3i62RfqwDWZU\n/eFb/z97GUizuLzJlR4kKBKLbfaWYVSyI2Xg/dWWSuiyFj46A5GJGOaEB1jn\ng9FVcnLnjB/inP3Uxi64jJAsYVH4eVn8OfOZQhl2vdG2CWYDtCqFpCX9jXYL\nOEgEq5EVSTLpXRWXieU/URngzq7WKE4QaJHg/AgXCit/uGNcgqXUhASoXz+V\nfWjSPcu1RgdnIOY+EJS/hRO3eFAiZt0IUKVoxCv+YJMs/AQQqhmIWsKMu3cN\n5RdaTA8J6shvWVqNNIyXvaAqu3ieIZyTx1jwfyWjqSm9v/KJpUnTmN0tLYHi\nb5BI1kxzxLJRN+cIiI3+U6kqV6WwXjJo2v1bZQQ799WATEYz+w18Il2e7Wxw\nFiROlYxJ4QKdKOn2+s1T7dc+VjDyMd7pcctSQi5ITfQcw0WMihq5g+1MOHlk\nMtYOxOCNhfiqJeajK6Oy2Y6dhnFEF/dQe7EQb9Do8TDnpySXFfVuJv+jLhqc\nuouf\r\n=aiUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f838c6e55.0","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/shape":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/button":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/typography":"6.0.0-canary.f838c6e55.0","@material/icon-button":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.f838c6e55.0_1587047258040_0.1943133807127726","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/snackbar","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a38049b37a4f9fd445a3499e2acf199cc015e4de","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.ce6cb7024.0.tgz","fileCount":40,"integrity":"sha512-a8IL/UmGRwBTCqRMxCvEUEaEFehPdz1oEhFiJa1zjw+yrh5zJdDPzvW74UrzxwrS36N43zZZRdGpgJ8utSk8oA==","signatures":[{"sig":"MEUCIFvwCIhUBsnW7TAH1e3JhljJxqXvb+9GoEW73MVEjDvnAiEA45rD/4rdkuRhj7rrnxcjyKL1/IKJInguVawMWzySZXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJPBCRA9TVsSAnZWagAAlCQP+gINV3e4L/fOmca0vWDu\ny7WEYn3C8UvjfnAYQHJOrWl8cECP+2gQQJs2ceniRmOLxtpFde/pLRC5WI2v\n/RNorTVp+Akg7z+KYJzh67cValB3JiiwcaKaecL8igbyfFnnpzjKef/2L3Bm\n/+jEpGRh6dyh390RFGyN/5y9Bnu4hXqgPKaruo1Bn6UFaR5wzuAN6o6wMttr\nB8NKK6bOFLFzK4CWvAy2u4ZFaTyC1itXcDz4EKjzV+BR24Ok6FBBOgU1Kl8y\nqm+Ov1yDjEA5LPiuQdFKVKOsXEO18ZppPXjIQDWoNeWHYr10h0r+cIGPqLCG\nifldMKXXu0Qa9d28oUgHD60LLLsC0vmNm2iE6FebYZOGLOJ2k+R7230BkSGi\nuWtBWeklshIgHATm/ndycvgz6gipO1LRVWtF3MDJUsJkEhVDi2AsCIEgpbCK\n6fblFKW92ra0dmkEnE5O+RuQaiq0n44JNsrtVfeOFu/0y3GX+eEM5NDDp9id\nAQ3yq1XW/hLwqXMjzBXLmEvc1A79LS7I4KpbBnp7tOjlwvjOcSNON9jzZW67\nueF/qO5PXuoDQcnTJy5ldGbzTWzzy5dfSEs6/KtNwgH6pDXExbvUkD6t5d9F\nAusV6OT7LrRL0ZJ+1Q7XbzERc+qbr4PLjIA4/M/qeibhRI+uj7kbjXJbkK4V\nuuuQ\r\n=XJ5A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ce6cb7024.0","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/shape":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/button":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/typography":"6.0.0-canary.ce6cb7024.0","@material/icon-button":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.ce6cb7024.0_1587057600966_0.38709319893187666","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/snackbar","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bd4d80114d7c91e4fcd8a805c9efd8c853f86ef","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.0ab62a65b.0.tgz","fileCount":40,"integrity":"sha512-HtmKFY0N498gee1tNYpKKih05UGc3V/ux3L+lcYqvW70/XI1/EjkXJtiM+WPdjWmlOhm+19zwb2JIE4FhAli7A==","signatures":[{"sig":"MEQCICpKOzuC4UypM7MDTfSRg1e0WH5ukjyYdyn5P7TmJyYzAiA69/yA6w65MTZlO6Q+L0Cw8oYY7u3hVmY6AmXKUJbPtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKoUCRA9TVsSAnZWagAAz44P/j5nWZpLNct9Z2hcyghf\nu43EztY7QJv/yASEhAlSICZVKK2zELRrsPIkXj4hbOID1m2D4UMOGlEAiN+c\nNsYPLVxYm9BRDeRu1G2XJ6bFmXe+HWlPOQUcPkmellcnBXOubCP4GoQ0NCyc\naYQo+Wg0aYMHEM6cK+Wo4tvtaIBylilPFQ/esiv0emJMpNiXYDmtjLFqZiyy\nxTQOWa3PW9XDOVTHbpxu9TzjHnbFl4Q+seXBSbTxftAIUis562O2qliDx+Xh\n0JhULecM4SIjx5DM+o6WT1qs7j5Tkzh2O7JKTwMsKNJZ5BUh2RNP6e1WBFG2\niwdrVeKO/eCm6o4XVapKDiak2FW/XBtjWENe/ieibUpnWpvDniLzVJ1XCzxj\nq7jcK51oUEmnGL754T5mtFB83CIHLKNqP2++NKlgMvz+XXW32xzQxBJPHxrK\niBp18wdWv3X87aR4ez061hsxv4mH24c1z0qhtkrU2rmFWXt8O9H+sfqBDUHD\ngu6mV2d1hzBI9Z4nbBec+sMzp7qrI56Zy/ENxtrBDfgIQRMql1Blmsh2Vguf\nRujuL8GMeSNXOwGRrkUSoqrIOjWHxY+evhSEK411kihVOOMu2zVH/XGXvHac\nIruQ3czEXF8WCbve0mpLXwln7xzqxOLqkRg3XncLDwr/+/wm587Sejt2Eczn\nqZoW\r\n=h2yu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.0ab62a65b.0","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/shape":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/button":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/typography":"6.0.0-canary.0ab62a65b.0","@material/icon-button":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.0ab62a65b.0_1587063316168_0.24444980278580908","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/snackbar","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7ac7954d498c1a5ae0a63fece1ade519406ce0c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.ca61b656f.0.tgz","fileCount":40,"integrity":"sha512-FoEXNcYf+knvqM4dtJwXAhhc+943XN2Sv/L2ou7Gdvv5GBFoCy7C/i39CeMtOy9/0rlkB5nooGoQUiptHHlxiw==","signatures":[{"sig":"MEYCIQDj6vQbCATV00Mtt4DYI4JxPyy7AS2RQIRXEkgl1dWiiwIhAIXkMFiJxuYSrdw1A0f53ChPoNsOKcBeH/AAMVjNYoah","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlzCRA9TVsSAnZWagAAdeUP+QHh++7d8YZys7qxO+jy\nDAipgbXsYXbmQ6n0hyJGP3tc+OKGdoDCYv3idUOi8XUcVWU/a6Vhq8qHipA7\nNwN4/Po4GaZLAeBuqV6q2F0Ev4pZcezt1+93RpCRxMuKRx7RGCwBJiP1VPR1\nKgtgPPLJSJ1TQIO7egM7aepSNxNu8g3Aavd7LsgQTXn4LdU2BHjAcI6LCAGI\n7KO7GCwDh4ScfxSmoP4sUoZWzEPqnPpiTllcGYhQmvQodAJJPAqqrRsvgWgM\nIWlVPnQunUqvnKS54oJLSO4Iia5HWy/oM/Y4RgV9UrVRmzJQoC0vexum9Abp\nCkRg0OQ90gft2I/iGTwGRQnYyaJxqK4D4zUQ7KNnohf7cvPdoMRPIamtGbZH\nEUogTZrC4nDbh3BuQMoNxuzpM/LOe27kQHdF66Ik0Gh+h179Qtyh74DA+4ZS\n0paDlnspGN/jLRGoONbG1NbDrVQDKazsAjCHHotN7d731ZY0r9hNThRwiEiy\nN8Ys7T1vQjfU/GNaVdb8qf4bEDb6HRabwJqaFLH3je60AxKF3ttffXY1Yy2a\nDQeGVY4xqIcHaN/LRw94NGfpQNr6bNGYfykKRr/2YW+Xn/Bl2Vf3mpSfP8V1\nNqj4Y1YrrWHnXgK8Nlxf8bmeSX0EDBraMhq+itLA8OHadc0J7NMnL8fNl5Vs\nC12E\r\n=Qvle\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ca61b656f.0","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/shape":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/button":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/typography":"6.0.0-canary.ca61b656f.0","@material/icon-button":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.ca61b656f.0_1587067251139_0.22200884187846093","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/snackbar","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"295b870733b7bca6c32a187870ebad4a93f43682","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.45a6615e3.0.tgz","fileCount":40,"integrity":"sha512-YrrpCQyr8YB7aQtCEGHtwg17fPvH6z/FVv5Jvn/e/2eG63EsxHv2k5aM17gww1sq7GremZVeVdh9RWPJ4F02BA==","signatures":[{"sig":"MEUCIDyQgoNoSFRr7LsAyKM1G/QIkNdUyYRttjREXd59iLDgAiEAhh9ynnkvEz85L9R0EP+WBi3XPQy1E7E6lURCl7idBlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEkCRA9TVsSAnZWagAAxFwQAJciTr9+0LWUo2e4y/eN\n9ddEdE4DtrYcXTP9A7gy6Mn7i+oLkygKHukPE1wKQnEvXTZrvs3U2+X9j/ax\nKeEgtiNa9Kzy4yCbLqbA4ALZyZxhOWjk+HS/cZ/5VLDNPpIluza7UfUuYuJr\nf8BCp8LGVUC455gDQtjeDxR8q2LWo5ujdREqo61JISob/KomZ55kCWoMMIvi\nMATPISr8e+Dc5r9T7Sq8ONoI+UXseZpZXew+3NWF5ZTs0p6lHftpVYWAqYEb\nLLabpOBC6Uo7AgCJAVcZTwFvYYuaQuqTFJiRVXPbX3TyFsmL4zOImgfraCDc\nN5/rYSIlP6iKI56J2XUzGHXwuTx1XewJbrmw38mQ4tXzLUD5d33NIpzj6nob\nc0cum35EOvhTVJ1FVLaxwtSIQynqmwzF7awzQNRas4puA2VpUCJcPz9vaCXl\nyNPCDPG8R7CY3XP5C5nVT0d1NsGfeUf1CYm8dodActMDQe+AFRqu07t29JSH\nrnFuNS5lCpUNc/IFc1T0mC9l03suLsfkcvFZYPiAt9+FqE/x22IxwPUdeoy6\nf33ULNxe1JHeRB4jaWJiy51lO7ArPTPyEowacDQXsEz2shb+q7nrB2/cAulQ\nhXhmMGgr5cSS849xHL0abTMEX3b9hWa3fRB/tdZIXAPW+kn4LJ79quoSetJk\nhBGd\r\n=NT2V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.45a6615e3.0","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/shape":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/button":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/typography":"6.0.0-canary.45a6615e3.0","@material/icon-button":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.45a6615e3.0_1587069219770_0.18860252969754754","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/snackbar","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a58cc391eec2cf0ab2d46a36450b0fb9824ccfe","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":40,"integrity":"sha512-UNmri9nntcC9DVZPdK6CgPX3ZQwPJqn9qFR1IjZ2qjLx3tKn7Snup/g/pKS4vCxjB/TZcOV8lQLRzIRZtL/XsQ==","signatures":[{"sig":"MEQCIBYuAWwnkZczCC0tizrMn21jIAeMJ+uNC/PGIISiOge1AiB6hnvbyGi0mdI6izlMInchHOlnoqhFwIGKHUXEWoBF3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemepwCRA9TVsSAnZWagAA8XAP/ReZpwjKngKqLTff1G3M\n6pwQG5vblSFuYG+XZwy697WNPw64yVka6a+qpcEKejJAXTiyWD+dUDSfShyy\nBM3lltfzlscX+O7u5/uClV/ahyy8xDq56CZ5I3c8oYhsiXWDM+JKDXoH4Y3o\nSGnnA0WPoN1RbqXfg4sQCeAyyUc3RS1cXRdVzsMf42on59jVZ7v1ws7/kFbw\nnOS/bwO+V5xad+Q7Uz8/p78LUO+/kK7Z9Qnx6OyAR3H5CGHnJRRNlA/l7pxg\nzpD+le/xMSy3yhcMEaUOxKldF7N01o/HfkpyfWGeusdoBKWEf3LrS6ZPlWxC\n6IJucil2EBAys5e15wRslPd13eRmfEgC6EBV+y+SnrgjETu13/AJoktc14T7\nN4WnyswiyHMqaqA1OyQZ5sjN9qfh+nFXD/00VQ3EyzMl7DGYY2sfC1p5VbG5\nQ7frqC8F7m+nrZYkwVVVIx1tUn4+aoYZZqrRen1fLih9DU7mrCpdgsMXDjj3\nzZZU9sUStIy6qx9V7Exbrmp8Vj2WdcPKUIt8PT7gowZyCTKbSEoqQ2AFq7rm\n9aZXmpo0cfIaXuev4wU7oMBFvRAQcBgfro7RyzqlOLLFDSQSkONOZMWGqh+I\nUlzoXyewxlgu9YCxJs/MhIj06TefgbSXdxlNncEx8OmhruQweTgb63T18w98\nyjkw\r\n=NBYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b04cdb0f.0","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/shape":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/button":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/typography":"6.0.0-canary.4b04cdb0f.0","@material/icon-button":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.4b04cdb0f.0_1587145328062_0.6025955401226986","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/snackbar","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25a1e9e2de0f51729ebb09642e0980cac2791da5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.b273afa93.0.tgz","fileCount":40,"integrity":"sha512-/tqEhsSN80PiE03Jeex4BC1zhOeRBVH9oGvvWsUDLegV3/qartGXeiSe8rDTYFI4qYzN5BoZ2jgiAqp/otugzA==","signatures":[{"sig":"MEUCIF948ad25M0HempPPGyzb7Ng64IMv54wJD4iEM116F8JAiEAoEmRV5ODjF9WxyaLtCKXirLN81XPjq1YHxSm7umNZlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjXMCRA9TVsSAnZWagAALccQAJiRq2OWkj0eUn9+Nvcj\n2lopGmuVjcEczG7MrAGSJ+JGMYTnJDwHNLOuqBSxkY9iXBTuN7wyFFL+F4l8\nCkoXME0ryJ7QQeTylQq3dWmOblkhmtLd+5tVx2SVq2+p4YQpgnUc9W3644Ut\nu29UPDZ/sRiM4ETXpvcWj3HyqTMv74G4/c0Gbk8mK56+nNQqKL/zElzpYho3\nwaN5gKR1WR+KZvshIAxOyo3y5b/NGDI44gjXdiSRhPYdXXluV5fFgnr+MzHk\n6bwLtqitjMDtvxPQCia1PaE9RU1nniFouqYE8sUgvCcEQgC53ah5cH+1if34\nY66BvsJpyrzc9q4kO1lOsZeEjkTKV40iN7ZoKyTK68Wt4mtZOvt6ZvOIjeoU\nKBcAFevtyomVmVVbrI01VfkTpMO2CKi2Bi+XtUoMPgq2If+E1Cv7RkKOZz3g\nSl+O1QvJwac/BWiUc/k1z3vWr8FaNcc9J6r/f0upjah/wbjwv79kepu+x3dC\nFlafO91oXkB1k83V1qUNI5LgIDuHUmdlQ20wqwIqSku0jIy/rwrFGA+mWsqB\nisgaiqU0mnDpp3JL4MWwxo++SsJ4wiZAlplV/ha58CiitMg7cuDbavFpkwpL\nvzc1OIsh69uru/fOfN/2rFKbaxVYuhsVium9PGsIz7GRCpnJtNAKZBfMXsvv\n4gBA\r\n=/gDw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b273afa93.0","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/shape":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/button":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/typography":"6.0.0-canary.b273afa93.0","@material/icon-button":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.b273afa93.0_1587164620234_0.6317842279478234","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/snackbar","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68f06b76038c0140d9a347559954c0c0b71d4219","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.b70bc601e.0.tgz","fileCount":40,"integrity":"sha512-yLngRNKTU3OqsU326zBHJT47R/pQyjx8Z6SBaJ3LO1EHMBG3DJwdS/RIDwOpYaIY/Y9DjNI5UBDFT4QTyaKpVw==","signatures":[{"sig":"MEQCIALSkrGPAewHuflzrsVS7Ls0UvDI01s0LairWrjugvK4AiBtbKzu562yulrWpNgN71PjKPhcKSbjOg9aoVNNBjU2ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjorCRA9TVsSAnZWagAAjQ4P/3x2eDwwdahQQ7Pa08W7\nPhFB5QXq+ix2+6S1GKUspb+pa7c8Q0r06abxIE7/jJyXsFy1tEO1AMvHXcfH\nHc/W9YPt+a/VJ/F0PbjpBPZmKI3Bm0kJxeCpW4zbVi6FnUHdTD6GvkNX6F+G\nRzG8l16p0+zVft7BWAvZ406TYG/fRfUJLu8nPxOV7qQw5KnBXdjSq/Fo2wLn\nWxznm9L5dWtZeTo/Kct8pynNU5d1dsLhYHIdtoqHt1qYytkfn2xKeBPIToi6\nTwAJmtWIm+V1CQD6VSNMnhFsEe2wMQK1y4cNo1XFzLdhgBISuzLwNOBtOG1Q\nu1e55VA+51SZ+uFDhzmyRtmYi/CxjdgVLLtGs/0xE/C4SBW/5VJGR0RKM5vn\ncYHHhyjqXyj8gk0QvFt9HLUGUjEqikBcL2hTeZ9cQZVpTYddNolp2+mCrYbc\nPuRh4jBHUGj76SlL6+ukPgi4NCVJRRk+Ba00MV+kxakKAEHbR7M2geL/LLJo\nwWgI7nhzavw7P1CRvcfpxszku2Nr2mOgkERtLlx1+NtaqQVoF9dpw+MjrMuO\nbt/JdBKREnjgkirYc9vUYlMraJCeP5eGW0rGRIaIEp6kYgruuHOPVKKZ01iY\nLipB/CV6Z4kgG8U5Qz5rp/hjqQUtSveP7f8pwx7NIcvIxOPzSKLKDmMrt9i2\n7IHP\r\n=xpqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b70bc601e.0","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/shape":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/button":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/typography":"6.0.0-canary.b70bc601e.0","@material/icon-button":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.b70bc601e.0_1587165739261_0.670281754017882","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/snackbar","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6784885516d4d9c29766fa2a527f2d4d2c5765bb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.c4b4bba96.0.tgz","fileCount":40,"integrity":"sha512-YGuT1w2uAz0MP50LbcAMXZbqaWIsdNZIlsN8gILdFESYiFxViCJYyzRgpvfpzcKxuscn24ez06mo3wTmcbybBQ==","signatures":[{"sig":"MEUCIQCcpD/wS+N2P3sZqZhMNnOr0+wn20RYOkuKSz/pjqjzqQIgZLOhSTUIInzfqY9tbguoWOC27+NpVcuhSx+CySyztAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdjCRA9TVsSAnZWagAAanMP/ijZUUcrnxQ5S0ApxBbZ\nOZ+qudnf3Aq5VNQHKhVt0BeKQ7pxuUuLT/PesgOMwpRpX2TEs0HtEl+zxKb+\nH5o7DWRpdVCz0i3/e6fHF9XhOMsAfrqQ5E3cGckM3ik02q6/++GignnrwPE6\nPJYFo036MDlUpq4wz6UA/8zQwBfis7GFs86aU5eVq0r8BZnIhVkwIUc1SzOt\nA2/Nm3yOT5/ByV6+3J98rZ2EXq8agNRaqQvR8UFVAA8SeBwSh8LKKIvJXvGs\nRr9B/CT/crTAzXoTwvIyiak+KpuzgNs5qPuqsEHhNp9q4k/XCgbrqKkuq8j5\nViahNb0iM5WUDZRiz6jWOUfjr9LFfCcWh55t4rhpmwnRg9shxf5KYa0cl6M4\nKVBS7g6+H3Z9ZDnGizklovNvYTaam/tJMFJOylXExoyCIKKHnAKUH5lmzLmQ\nek0S+CFkFXCX6fUYRHh8wobixBzH7mfhJoB3sQAZb4JS8AWWm9hcRb3YMtol\nKAJC0hlXDBctz8HzTdbwzW1E52Nxkq9nmlv8f1ER2j/3j2L3DELAGZ1RNhoA\nuNCoNDgkpYrxlw4qvFcOJvnbeA8MMPWmIqN86eNvsozEB20wJ7vNw6hkFg0B\nIDSlYhZIp7eK8pXKGGmU9y0dtxQy5SHfU+f9ThDa1TEctfoKx8P3feJoiL6N\naVTK\r\n=QWC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c4b4bba96.0","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/shape":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/button":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/typography":"6.0.0-canary.c4b4bba96.0","@material/icon-button":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.c4b4bba96.0_1587169123414_0.9116403384584721","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/snackbar","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f93cbcbbfd124e8fb3073835c843382f457c9fd6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.6c1ebc721.0.tgz","fileCount":40,"integrity":"sha512-ENmVGWUzrTolNuk9Wa9CBR/9tQruUXgoJMcBqb4LZTIAJF/VEM+9WhWtjsQMlL4478uiPRPOElrAIlfhO+aDzQ==","signatures":[{"sig":"MEQCIDi6YQHcrE3Djli2u4TNNlLPC3FKtNGx8Z085pHsX1YeAiA05+DTCnclg8Z4XMtAU3InuS1h/7L99FPrgpjqK/gdcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf8PCRA9TVsSAnZWagAAxMsQAIkkkUIDHRnWmGT5nI25\nOQfu1Q2d5d/ahQuIGNe7qZeTRw6zB0WHdEhxKYVdEnC2VkD/cP5n15fqWDKu\nX6kiEaFaxRtYF7i3zwIFxv1C5UjZIIP2Ml1sESc4HuSqzgHkQw0AyYhIJNGH\nZgN0NWEw5h95yWOYGzcxdWyY4ECPWqof4vk4PPvq+JVN1Risxy2Io2hpssXa\noGckpS5j/QyMbAUMmjkTKhehFwrRhkRXjrNnRLNUecTlya4wvm2YZpUFSdKc\nn1WsHgsk779H82G0lIhEzK31xbh4NJKpc2/QHyAC3DMsqRdWCna4LMsEmvqV\nBSafvR0kplpxhrsACHerwXulekXpC9mTt4fKyx6rG/jKgqMgJQnxC0mt7avM\nLm8g6CuBqYAVPTrMUtBAOJhPZvejfAWmn9kRXfHXO+N1Nu2Q4L+RB9JimI1i\nQt9rXXJ4h9hFL4KtOMlfFLeQLu2wfyfX29ML6ZObjpUrTjxMhGisChfkiU7N\n1sCN40Xu2YXCMRzKbIG/2ndNYDij3YX0RMPj+w7XEJ+a9BX5lrJjEswgALkV\nzoec2H8w2Ch855eydoK4Ut2W2Q5Ix+TLa4ns1hP78gMJB4D3iUt6wy5aCO92\nGBeIUJ8JQ4dxczp1nV4Rk21uZ+eqPM2Rm1SngtzRd/XxiYkhdAv9oVS6hfJx\nt5Ig\r\n=8hgs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6c1ebc721.0","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/shape":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/button":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/typography":"6.0.0-canary.6c1ebc721.0","@material/icon-button":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.6c1ebc721.0_1587412751038_0.5131438980157277","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/snackbar","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f35d4d5948e5f83fbacfbf910cf27521ff20c68a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.9cff4318f.0.tgz","fileCount":40,"integrity":"sha512-5ufRKhCGgitJSBwgY9mcS4kBQ3SywnrVrYSqot3OTaj8krkGNVPOXtOaotGHYCjJgv1IY94N9B9nMmk0ktsrJg==","signatures":[{"sig":"MEYCIQCFnwfNw2IyFRyGkYIfkwbi8VFKbXw7J1tHLgfaolq5yQIhAIeZX7+mj2smP/CrufPVy6/CzBTLulO8PtSa5fj2FQy/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengySCRA9TVsSAnZWagAAlYkP/AndXejVdUxVr4awPU9A\nfEbhnMTPr+caTIBXUYsfo3BAeygs1fVQF5x0Gt/9OQ090vLyJ1hra7IFw87T\nz2rkD8n25zkaqRgJ1U/X2rc0C6zFIZ4K++4vvhMSAvSOSx739I3x+/coftT+\nxUOo8zK/Vg2YMIVy7y+bbennl8ylN3gqqsnopyprOWuaJao3LrnLObxBamrT\ns9bdJZTrN2bQTs/4ajJVVbx8v8eY3UXmD3ae769hbCr+dO9ByVD6kPiDcfTT\nBp9U+Rg89QkFdrVl0GquO+IuSKVaeueOGUBBVgFjzR3r/y4zPvnu4hYQJuik\nECivMdUfNscWP4LjMbKHqBdzSko2DuOquEXijnpyv8Nw7omFreSDnwtAMqFh\nQKYTXRc9Qzc9h6USGEGacOfss0gZpyG4b4+EbkODbFlEbPppKh33kHtMACjl\n4beuE7UJwfAiMCMghA7+jt/n7WNCZSJZPHZl7zr3arY4Wpm4Xjh59nrkqs8c\nq8cwauNX8206c7B6t6VDbeOQzzHdo96znisgWUoi4TpNy6zh14ucRBAZThHk\nwO1UsXgnO9GRglXSST1JZoPflcGnbkoUp9SqlfwDEDRb0i8iPt9e/0eqokLa\nZbvlSDkjbHCRcV441OQFB5/5s717fNZCM2evUPqw9quH5THmiVZnot70l5JE\nI1OY\r\n=/ZOE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cff4318f.0","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/shape":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/button":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/typography":"6.0.0-canary.9cff4318f.0","@material/icon-button":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.9cff4318f.0_1587416209901_0.7988218369504585","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/snackbar","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f37fde635dfe3626788cf7ddccbf1b086f3418d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.7b4482402.0.tgz","fileCount":40,"integrity":"sha512-U+YvPIf4oFJEAXxhv3CdKR394PciTubmS6e0dXSeShfkaVMrq+4U6gFgFIzZ/tYyOhgkSc5kiXUVhb06OARKxQ==","signatures":[{"sig":"MEUCIEQ23Y3ltI1RoeQKlFETrgfBlIlaW5S58gfJI5DpcJKQAiEA5EErMwiI9Pqs8i5d3vng/imRh5MeRMs7X/ymL9DoBes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniBSCRA9TVsSAnZWagAAK20P/23wAJyAR9kTXiKuiuxh\nkqljZW0K8g8W3AvO5HTEAVWBM+Oj6hwU6vaYc6EUwX0ugVqg6ThsBzOJfmvV\nOgVonEVAFEsZfjDFNtTFK3g/m/9ld+e+4LOd27xrCHJ+AmkA2BvyQ1THmY+p\nVAs/BS2U5m6ThD8At6L7iHr1g33K8YzbCpff779EH5d06qApmwlIqJAy06rm\nq2sxccsIjb8Oxa/oSXXPdKUB+tiWPERj33hEo1TNBnxIwhGE+/yN8b+qxgmF\n0bFO9vxsfbsPZ+jYHnhPmGdID3vN8ousy3AzhCrRPz+o7TDwce8YBO0tdwBX\nkqzI5X6Rx/ISCXMNKS5auEltwg/5ffe7sSPuuxsZ1hD5yULCkDmITFPFMH6o\nFPuvVG3iGeFvh37C/YokbIp3x4Ll/6/yPAhMSlsnxs/lj5+OyHRkusswe4Im\npoUTj1SZBtvau9TtWpC8r2ntIHC7QmpF7FFLvrI4qUaPrsAhtk6uwUOh947F\ngDhbIZ0yjsYzz4Lyj4OV+6Y/92MXfTdK9Pbv1/LDNtj5PFIwiNItpuWXtFzW\nxxlYt327tPzU5F95aYRs6veeHM/XB8punZDP8ExE7FY+84PXz974wUj/g64H\nTGpfxMaWa8cCyt87IaTThAdEVzT9wdVPid7lG7MasWMcSjfibp7SZ0+3EgYp\n6isJ\r\n=IlP2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7b4482402.0","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/shape":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/button":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/typography":"6.0.0-canary.7b4482402.0","@material/icon-button":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.7b4482402.0_1587421265226_0.5232862637723201","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/snackbar","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf1a89f785ece12af14cb46ef24b5555e5ec50f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.deda86d8c.0.tgz","fileCount":40,"integrity":"sha512-DjSlbB/RY4FKLS35OJJQj6QClRWOz5Ex1F9VrrgGDpeIUk28gEdld4CzOOgBos3rfPM3zugbfsV1VUasEkZ/aQ==","signatures":[{"sig":"MEUCIED8jbaBFgZzk31K8IIbPh/Slpn6MFe0u6OXh3t3gNZmAiEAj6v//Olbcz3jI/gQ2QSvIE5IwfPFxvUOekWK8yLkN0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenklCCRA9TVsSAnZWagAAuPAP/2w2Pxkp5+QqTTQUnqQM\nTrT3nkP4BaztMLPln4WZuvWl9XRYfh/i1sv9czu7EnvFPqhsCpX5nTaO7tw0\nTls6Bb76JGI4SYpBoWXf4XvgBC98879TGq2ULr7l5YN6wsVK7U2nyU8FVKqA\nqvOnSO4w/jnhM1X/aq9lJJmkhYpi+/LUSTBlN4U0javmEZTc7T5Kshc1eYgj\nYS7VlOhbv1r1W31a0r6AOledFSaP8bpIm6+Ysu+oQnyXhZNquVB2nR7og3Pz\ncFY/m0dtr4mqQX9Nqqip5z7eeGLTr5MSYzxYx+PZJJKrk4NbWbR+PyOT6Hmg\nUVkz0BwerEiA63rCCyMIXL/07PROfpX1hnGKDBlTTg70P+wA1rOXnifbadnv\n/FjYQ9uVEXt89dztvZxFhvLgWNiMsvykjzWNs4CclnPS6c1ZElh1PiJzkND+\nTONSI/CW4OIooo3pVeHFOnC2UQn/H058VeP/p9CYtTrDs0jWBz117mU5GzTz\n1NgQw07jV7Xjjt6ZPDbsNcr7naufda/wQMP1rJ1av+lP+UEpudi5+Q0YVEIE\nJlaGTq69GkPFgCGFa6XeTx8lNNPUVs1ILPqfHohW//FDVBrg6VxuUdW/OUWt\nNXScHqhLA9VCxbvc1FOyVzuCLfJALhpI6prTfFu2tX8LSYeAuNcdSxSIO+bZ\nnGoI\r\n=4h18\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.deda86d8c.0","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/shape":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/button":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/typography":"6.0.0-canary.deda86d8c.0","@material/icon-button":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.deda86d8c.0_1587431746221_0.552538748737023","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/snackbar","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3dc5a87af61aac75f303a778c476dc19180d8a6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.d10412cb2.0.tgz","fileCount":40,"integrity":"sha512-EuBxOtHG18x02nPhuX7DVbNhUZZ8nI58wI55RK8IK+1EL9eDr/90LAho5f0fngxTcfvCS//v1f/8cpVZNhT6Jg==","signatures":[{"sig":"MEUCIQC5RwAHiewL9nwCS11TR1EZaB9wTT4jRqQWtdwY2XkoEwIgdl30q2fGfXqaZDemuKniyyj8xQjcRigxSNzdtSUHZns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzksCRA9TVsSAnZWagAAarwP/RxFKWlmq8I+ZAiR47WX\nr25mtdHdYP8y/iRwdLL7Lt/wTc9dJdkbCxOMALj0C6s9QKUZvUToqvKqjFRz\n+oL4SWFZWdFDaRtRp5gRac7yqddR6ygl+iBKf/1SH62enJclh/NDGAGhHTfj\nJdHIQLLzwfqLky5iu4k1ZAaNophv+Hn06AUR96SbXfKwCVOjZTos0m+MfFvl\ng0QPZ097tvVCYJarwJchFcTR0d9KiN9z/6XEcabbPrVJva0b0nFfpZ38bUj4\nlO86RWJNUxEMmpBZbka2iiF8mOSRWPC8YwyMM0j2LAu1A3d3+OxI8HIn8oIS\n2NAjN6gBc6cFWn0G995RJt5pxl66vXYGhdLoKQ3IOf4OYnk9ubVXwCrg5QI8\ny1lieD5mvZaD+L1UV9qDKfagdQ4iPeEz6AYhXMZX3pgyjQcExB76v0HA83z9\nak+8FkQ/gaF/tuL5mhlwTVHG+rU9dyL0PZpZHHABoWxMoxeY8BjbEm5cJ6y2\naqHWgYb1RqlsbP36ihBFtEC9fJaWurMEL69PUl62cg0r++bLN8r4aAm05mZC\nD22P1jfwD0sWJkraI5T7JJh6HHZcrl7iNTOzflKwUZ7h6vjN5UUOyUo7Vhud\nu0kzVBSmYnjTyF+5wQPyAWDY1h4gv7ZXMDN2UJ/TSMEcfGc82lahfPf4bHpO\np8rH\r\n=rrVV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d10412cb2.0","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/shape":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/button":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/typography":"6.0.0-canary.d10412cb2.0","@material/icon-button":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.d10412cb2.0_1587493163811_0.6741787197864162","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/snackbar","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a937a9760a2e853e37119f4c6931068c68cc64e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.c141801d5.0.tgz","fileCount":40,"integrity":"sha512-yuF/nUHRh9RLV804iiBb340+zii+oMqSuJVtCG3Av5WtFBX9e9sDbfALfbM9Wdsniz5p7el+kqIavZp0LDxaGw==","signatures":[{"sig":"MEUCIQCKs8Ws48bel1U3J3Oaw8+W+jzDeshx5uEFph6ka6WONQIgOjce59CxsSz/S6PWfInDqkSPJ9QNBC2CPjvnWLNsVqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0zGCRA9TVsSAnZWagAA4MsP/0AQbNIKd5tilA6HY0hL\nVhsBWnMAHK90RE5MdgZO1y81kMV5SR6TuYIyOO6VaU6NPlPAcaAX0tmReKDs\nwd9RG7GnjRwbjnzPubSwWJGzxNRCyCLdTWpianghqJDPOsv5tG+IyDQaNVgJ\nTjmvBpc3Khwp5nGYpX7modKzPgaLCRs0R3wRU5M20w4sfAKkf2prAugSsnEn\ntBgbCtdKudEN3tm/5pr+lT3cs2+sGXnLlXnfXbUXAEaghgdTC4/+g/ix1lhX\nq1E6vYRkUMB6e7M7JSKEqoJSGFSkwQxxaNjG182HE0WcJh4J9IpWIYh9jSFA\neY+Z6uJoH+SYKrGXgrMml5r6dF7mVUcArI3egf8N48UQSpR/3wbJGU0Y0bGH\nLIfv1q5ISMT5lFMEE0GRc4M4c879KUHn83wirJmlOuOREEbaMSkkTuMAOZ6G\nj3ZqZsjG88mQjK99tPsefTT1c8bbs7oQ4BuQC+82gz4JOkXNXefSlU8EQnXc\nl1eUoT7TXn9PAqloSej9vah1cJ/4i3w/09CDElok7OR3v1LtXUhIzNMPj+bQ\nv7ddhYd7vseMsWsy1wA6d3qqHzmcFmLtlfPb285t5ze3z1vyPPNMHMh9iLUs\ngWXamqfT+kFBQvDWP1SXY/q7yDhE/WpS97C3weMigmIAmpLqAhaiOYs9bSgS\nIP5E\r\n=usdu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c141801d5.0","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/shape":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/button":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/typography":"6.0.0-canary.c141801d5.0","@material/icon-button":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.c141801d5.0_1587498179133_0.4101417283247526","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/snackbar","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b864e7298821cfab60eef8533ebd6f129f833869","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0-canary.28d10a96e.0.tgz","fileCount":40,"integrity":"sha512-dAZi/Y89qWrKCjEmPFSm0GQGxmaArFRDzsmq4L1fW/UKenlgiODNkLn/84rcroGB3tQ7P+D3VQUNNReSyB8u4Q==","signatures":[{"sig":"MEYCIQC2P2FlY5mItWRiNheCQouiTn8iHoDBhQumnoPjLpNkLAIhAI5TW2bfDwboN/98FLWfwyNHjk2cpf5ekx5QMSwdTegp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMBICRA9TVsSAnZWagAAvykP/1uU7gap7ytrNtDHwoC8\ngZXUsAhU/vy8L81SBOFLODTpOHzYbZl9id5YD4VcjL0eLxudBHEt8rpseP/1\nXEYKhIkhWAyUXqGMLfKdV5WSBbsonidH8i7e15AikeKyM8DaLMX13mfDI6bC\nodrHQ+KPCXV95OqN5lgzN9aetmP8XvDCwM8XfHA1EHzR2y5kEa79FcwWmxYa\nSyEtGbTBvaQC8vuSdCQuL9fNkCAenfGAuUTi7E9lvGQ9micMJNpoZvnFHzfb\ny+GbwW6kWu+xN7FK6U/TTzU4EuMgVdDMrAAvhtCU8MtnrKabx6x6CssMiOal\nShn5LGQ/BVkTyn/EHGdgj3Km5fr7s8zMLFqaNpmezlbHX4W0c06Cr652z5gH\n+Pn7h2nGa8ql3a+viPfg5dkoH/+Qt612cwtQViRMjVbS4ZbN3cJ4SoUn2rZa\nS7LaLXFMP3kshQ2DMfvXW5bs0Vi3rlgBCzraR024cKA+f9Fe9EwyoijUbWWW\nG1p4FSyjhQ2zBjAfcXJ+TA4pWqmm2EvAQnPRpvPc8m3I5AG/QSucvHAcWcZd\nvZUDcj8MiWO1GCm3VzsA1i2BZ/4DSBteO8UDmCA6m4tbuPqDto2/BxkXbLES\nuyJXYBAQyYnwPGGwFz3F5gng1p0me23e2zeOcWRR7E6c1go0nyeZPIQiauRN\nsHMf\r\n=UqGx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.28d10a96e.0","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/shape":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/button":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/typography":"6.0.0-canary.28d10a96e.0","@material/icon-button":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0-canary.28d10a96e.0_1587593287495_0.1530091180750952","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/snackbar","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e1659bcbf68e6510ffab6142b8bb6cc573b0718","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8540808be.0.tgz","fileCount":40,"integrity":"sha512-+BPcKQLh2g/N2Uh6sptaAzGOOpq3meztxHlhY1rEwUOkbsPjlRt+bWC2pAuMiiIcdBSEX/0zI58z9vBtuyWRag==","signatures":[{"sig":"MEQCIEEBSluO9MDKA9AIuF02OK0cbE7OBQtO/zc6UqCOU8XfAiBBA2XNOjTvihOu90W5A1O5Yl210jtDicBOxtHXk+Fv0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/iCRA9TVsSAnZWagAAvEcP/0RiTcwc6IolnCwnabQW\n9ngNLEyZjPUablS/1yhUDRhtK9qdPNcnxA3Q3qNaCeJFE5E959pGQOzX1QQV\nSNyN4vNtQ2SuhJP/ZIbDbmg6j4s5ZGXH/BZ1rInqDX+rsBcS1kpCO4+J60gq\n7Mx5Vh+pTo/DCTaAjt4y8N4XpU8braursGPtz8AHhclfCWqsCl0uShTXLBgf\nKfXILGEdBd6lNyLvqO5EJ/H7KO8fRT8JP4XFETP8bNanBJ0ufZEg76Oj7JVR\nIODobr+Cg/3SRZ9N+dB2v2kNvxE99w2C1Roq3eohUp0QTO2zoCD3cpdMkPsQ\nLChjd1Rm1xCnhAQCvKpvCJG8G7XsPHxsg0JMuWRcuXLRDGYRm/Fz9xF0C655\nygJG2PC5zccEGknpL2GCnQBc++Orc4czuyqdkL9xo5sD2wiaASSbHjaChIy1\n1N0zAnVx87dzR/UwVtym+VGRv9aGZKWN4nPmW6gY7E3PMg61bdeX5HZUTNBP\n6MCgB/1xuoxrJTzlY/x7KTvGKlqo1uyvh0wGIZpF0ECZmTN3qc9GisUjAOvs\nERmPcsoBFqv8XGVHopIEizbppqYX3mpYU8bYhg9X8IlYjXtxiM6pTNJ3wwxM\njmsgReKW0mNMtr2L8/+0XSaeGVZtMwhXvvMtPoH8gvVELB1Z3oHDTZS4ZkDK\nHDXY\r\n=QQXb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8540808be.0","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/shape":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/button":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/typography":"7.0.0-canary.8540808be.0","@material/icon-button":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8540808be.0_1587662818457_0.2661727106897782","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/snackbar","version":"6.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"607ac35fd44ec46aed3aa47ec76de8411351cdf8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-6.0.0.tgz","fileCount":39,"integrity":"sha512-Cu2DXatt50qllxfJu4VwWTF74eg61bP7jmVE29O6y4LsHIjj1LYYEGBKJNYOPgsAXGgjqB+D4ssrWEr0Hl4Sew==","signatures":[{"sig":"MEUCIDtIgMVlq3C1m99nPO2s5toeJs+9g2Ssu0ZfbzxH6TXVAiEA88b/w+NKBYxHRO2bIatKoBgilNagGg8I2z1TvV4bmW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodAJCRA9TVsSAnZWagAAWPAP/2YbJKTyatliToHrRAJK\nmCUSVn3pfFApZoEpmmGnZExFd/aH1dWiArPaEPbq0DivBDvDJLTiXEZzHA5e\nVs3FNT7aJaqndIaaTqxSo9amrXqLenmeX5bCl8ncBL7Tqjk8CbpIBomthco6\n1soxWL6N8DuZd4s5VDPcGiF8fIr5motpAvDc62iJ16i2d6Ockn1W8b0ex9wl\nK+KInX5NP9L5JM/bUf/tkiJGkXQUvFB+9/WVjWvzsrYOhjtVUNu2meV/9T41\nZAj/gbeXvJUEiFyluSvmqJ1yGJuaTrd98ImR0QU8FVsa41cKIRCfh8pv8XLS\n7bt3nY2om+mLk+qhp/7UwpEYNaZzo3PZdUlhFmZwz9AaNNNh2cQwfHcUYYPm\ngoLTZkNe98Ondy60jFGhB7D3rXhVj6Jtz7u/qwYwuOTpEb+xV2M4Ef5PXtH2\nhqUHSRE1TSCMeKoFm/ARAgb0+zXNJZ8UDrKbffVjpE61dAocVICmZPW7j5JN\nOqJ/v+mO6VP4iLfjYzdgBqmS7QUx8EGF2UqJNRyD4MdauLIsE7wAXVs0523h\n+VKhnOqSNg5gcNf2e4XQIKKwqF4jYf3RHwEJarnYTvD09XjLs8PesC/DVhTz\n22l2VOp64VOmQ0T/71dmCHe05R/Tu6XEF2ZLsZtSbcLstdP+eKwqdSaoo9HK\nKwP1\r\n=AHAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/button":"^6.0.0","@material/ripple":"^6.0.0","@material/animation":"^6.0.0","@material/elevation":"^6.0.0","@material/typography":"^6.0.0","@material/icon-button":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_6.0.0_1587662856683_0.780395043054497","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/snackbar","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c86a2378d4cb19ad5e5503939bcf48d87c8a4ad1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.2673adb74.0.tgz","fileCount":40,"integrity":"sha512-ObguE+nFW/lMwK6e002nqrlogJjfFGypelagkYHxtT10veNAHqWRjHkDLilq5L+IJxhs6sL5Z7oy/o1FEFfpBw==","signatures":[{"sig":"MEYCIQD/c0i6EZpCpbzTRSPKwbg73lwwMILnYrAozfS0elSjmgIhAI4QkT1y+lL0FLCxIzt1o266DHQI0WrX/M3hrbmDDLXq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohrHCRA9TVsSAnZWagAAu10P/2SV+dOQfnmUjUEm7rJn\nUN+A/O3eDHOOchMPy+/nbtfhCB12JcytlGc4vwLdDB3TNYyhxBq2Y7MDCQ4t\nGRYyUHDkHhRo5x/6IqdgPE5eQGm0lq8k1Psekh4XMVqrOBUVV4RyGDZJ17fV\n+lZBVA9G+QznLu5v2kqFHN8LqCXoloFYYggE03U8Kj3P9uE8HJD93KeWO1p1\nqJf5ZWuUzFnykHuj7S2GpjENKrWFR8XlY2ykRIl6uxqQGctyYsZ25xr6yr1K\nzOAt1P7ZJlTcilW3t75ei6PkTHssE9Jciwoz3Tor37laDLakKC9y3FoWeFXp\nM9iDjXRFz+No+8iAEpDv+Nn5JfImdKQL2X4OI7fJqPR2VAVmgXIAYvXetbkM\nx2FTqwT2ElAxO/ZG/w5IUt/CMutrzf9R6FaJgg7Y65Y7fiXXi6ao/1DghbGU\nMa6oW+rhA73n/+bFGx2TufSHYArLHHbJcKJ3JK+FvZWRTtW4QIFuZFXg619C\nCegIeanH2WFHfBEaKZvk4XwwhqDcP+Fd3Ge981jRGkSiU1Rzn3hSAMBhb/Pr\n//w2QaFA0brmIVvydN6btFcav5j5yIu7Ge6z0afq2DXNrOIIcUgDYQ0O+jBu\nXckZnGVH0rxGGBhPAe0ZdLocg1+WBo/kSu2w8P+9fmqGpezVL4FnaDHpWkTi\nmzWb\r\n=NjcY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2673adb74.0","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/shape":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/button":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/typography":"7.0.0-canary.2673adb74.0","@material/icon-button":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.2673adb74.0_1587681991144_0.42657945076241566","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/snackbar","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6025ca3f3319623818d1aaf8bc8f284061692748","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":40,"integrity":"sha512-ZTafSsB04/GqZnkdKOgIjI36afy2nkvuVpKiP3+btrGmawSNvWSHNsVWRXx+LY/eutA5MlIk21bO7CdDdu4sVg==","signatures":[{"sig":"MEUCIDQdKkOWsr8CnUYlU8iDWnhH2QRpjz+InlJV5arspO7tAiEA7/wZATmH+BRskKks0EN+7IZCWXcOUE5ReIH2UNkKWpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEmCRA9TVsSAnZWagAA8qAQAIGIZJvpOQg+yE74QiXo\nYP/7E11iU5m27tQndNUpdNJSfLl9DTOfqcqTGS5vU7Ou0vnDB6rhQG15TilM\njD9INm3+baQfU6epLSxFDw4lGGDzKzyKf6sqHP64os5G9DGrApSbBl0ODq6Y\nsSjOFQ9YaGf4KcEKeCmC2OyKzYdTQhLmwJaG00vhUb6MK6kRAWCffT4sK9Gb\nSnovYwCj/gdLTUSW/S8g7eiZr79mh6mtfnSnc6yOF+SXJcAK2xtjqfcLUQE1\n0jGsl0um5CS6wJA6zZO9KAxd45v8dIEbZtkP5NQL/SrAcfPwSvj9Xw/NYGwf\nJagy64ie3Q55/8pc8Q5NWgCfUYMYv7LPScBvErST6t68caCxATypoOymSpTa\npsiqzasYX/O4XhWA3IKUCX0XMg7nL2ScI+1hCo9sDJ2h1q7qXnf/7klMxOnB\nvaJgG3fAONUR3sLAiKok42eEKlmU/RTEEwXQPovVs/vWwbEkiyBDD4MhKMuG\nooBdV8nQ6tmbFx9i94KWHAZk8EAwBuS3ccxmd1wzYLXKt1gojrplzsFVzbWK\nsYwFEqVuKirWSaZDUKjQdc7+32IqSg/2uxqxyUdqs9e0jWH7v1/E5+p2SzK8\nNgou5WetnUkNOXWAtE5x/v7jqNopPCK6uEXAuP21RCKjGJKxH/B2hlxET/Jz\nok1I\r\n=M6Qk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/shape":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/button":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/typography":"7.0.0-canary.b10d0d7f1.0","@material/icon-button":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b10d0d7f1.0_1587687718062_0.03846493633322279","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/snackbar","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22aa83bdac533de3283846585d28a333a328b7f3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":40,"integrity":"sha512-wr6JThCzUkBlxX+BUI5QWC0usQBqXs+9P1bH4BdkXWQe65xdFQg9WGlIA5zuoCPfgn06MrP/MCis7K9YQm+Rfw==","signatures":[{"sig":"MEQCIHJto7SaJ5BzdKX+uhcmAJie2p0vFcpF7s9wNITgU+dLAiAjDaAf2v9aLH8C1nq9EBW9nnPOktGMjz0ayXIx79MZ1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TpCRA9TVsSAnZWagAAYqgP+wUwV7Zzhh+V+Ye00lDk\nnA6QKVA0Ri9N2YugykRYrL5B9/6IlpCDaZGzeIBvG/GD579yLeZZtJuvijnU\nzTLIU/S22wO2a8xYUpXxe+GL0/uX17B2fARNDp7bWSuAVGDFtcLcthPZZtro\nq1RVwLPtbgO81HaD8AeWayqPgtXeDNAoYd3k/dpd8DnLZuoWdiMiKo12t3jp\nofyU7ROhUJm9sBNeau0Hu16ziowacECdT0/MwCF63vsl9wPCHC2mwEkutIC8\n5/7N8i5wczYYNpEM3k2ySMjhEv1BN5maejfdwIMyHENYIkUeo7lLsSjIcHoE\nPJh/xDT0skZBC7tjLjUBLoM3LlFAIGSEMHU9TrWAe0SXhSb28vy9sJWdwLmn\nSTbrtqkqadce6BSFJufpEYfh+pvW3pta1Q+fF6O6jhPiTQzxGCicm88OxiC7\nsyW0LYn7jWIlixz+tzGMqm4fp8DbjN7aKcEsjqpVQJGLUBGsSFbwqwVih+7t\nOIFX8974AvaLqsxPuc1op3z6RdRc6xsg0BCAsg7+zxfBv2FVFmOzZm1hy96e\nUgcuYbCCydHUDX3/U1UjgxuMbe19jOFfqiICp/J5ZQZDeHjIIFOkvmfxhFjp\ntZH8DWmXG2/9merPmRk5wdLWVEJFioc1wVrFSG+Ef7XaA6dbc3op8vOqh0De\ns6ty\r\n=pg+l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/shape":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/button":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/typography":"7.0.0-canary.3bd8c1bac.0","@material/icon-button":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.3bd8c1bac.0_1587762409384_0.7040543174068408","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/snackbar","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"957267ebfd8f78d366b8e1ad1ea43d37f8d3a1a5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b83c8dc22.0.tgz","fileCount":40,"integrity":"sha512-lr3Flf5TPbMDj5SL87CB86y/tpSmnawLeqYdxUuDhZUgbapDa8EgHQ0vjhybvJplfmAgy0e6HdWTHCQMajH+bg==","signatures":[{"sig":"MEYCIQC4IPxpooSpKpo9tRI34J97O220Wx6YTXYolnCe2VaR3wIhAMhTUfMwTVl0Zp5krDnhwOOpNY3jXVomaRRW+15NNu1p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1foCRA9TVsSAnZWagAA8BEP+wd4ueKqliHwU1IQq0UJ\nTZCOBvOc952eo/UYN+2gwxwK9ErbUmuIPJbC5e0otvqQ67NOqMmPQI586zC5\n4g2IipbqXoZHMDGgrDFo89Ux2MMB7KXnpcaxGdzNps7nT+/W+z6omroS4Pjx\nJ9+njGnpJiqzeZrtVwRHlLMl/0s8gnN8WuGAUPEgMwH/BUE54oRZx+v8fkJ3\nZq6zDctBeJ2t9kIi0ZyW6CoeIV1Yz0QmUT6kjd0GAVE4bFf3VAlhfC2wx6uL\nVl4xtdhWC1lo4p2GJS/0uKCYCy6Aj3hCfbAGCzoIHak9zVsDC9Km6p8Cipfo\nUiV0/o0BAs5I5l0212FLq3OnRYkSektiV3j0rY4FomltT0pMePRpAdzBGe2T\nGtr2Lh/3yRDeMive8ZzY2CHGk0q7PrNogFAtwMujRCEF/UMcPybmVdUGFVX4\nI6GKjPyM7MDUmmlAHD8yq4S4MeapFe6ZIsE3SPR98dkIZqsZGjUye9Bac6le\nCPjSArdkoIf+SBUVQHZcIB7+RejUFxHQQZP3Jllhym8T/SFgm0XCt0+nNNAj\nMYLwCPBPxxEwTHVuGvSu8SSCrIUlvQMYlypnk5O1aFhtqK8jA9jJCJni4Yq9\n1d5gjqIYqRDWi0Eh0KW7RJ7x6I4WcETmI11gkEznHZf63y/50mGpHYVn+cys\n+avF\r\n=4Rb8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83c8dc22.0","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/shape":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/button":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/typography":"7.0.0-canary.b83c8dc22.0","@material/icon-button":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b83c8dc22.0_1587763175827_0.09192733425753574","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/snackbar","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"420d531d63aba2c157521bf59e9a7776793bc550","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.1b3dd846d.0.tgz","fileCount":40,"integrity":"sha512-kSl4GyEVanZbtzLEydj3Ay2taRpRQx6ffESxaI2AMncNhgaTUixdycNM/pduRyJdc/nevYBXwDdwjFpgno17Ow==","signatures":[{"sig":"MEUCIGb1d6BqVOJa2juHs5DCHX/zAeRH9S+L8xX5VlUiH1RCAiEAk0HZ/j5T0TdAOLVOIBWH/bL6EZxqH9wbjL56GORzXl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4f3CRA9TVsSAnZWagAAoMQP/229bYE2FGodjN9crHEE\nIok9znnQGuf609RuMPydjxK3AFoWeSK2yeM4N3YY/HY9QO539pe13hDkmf+m\nUa/+iSHSbt76mgvS0ZI8ywlnFlJBsu1jHjb0FlIgBel2qI64mvwWRWA640e7\nKflueAT5xsBxGS981KjAjVqF5xhOP649lcaLESwHd8J6LYoU39+1QMkSSNlY\ng2yvBzzaastkwe9Z91Uv97Q1eO0fWU8/XwFtY99ZQ2JQIiI7oKU3zmECUXj7\nOm5gSsq8qPZipmW9kVC5zWCnlsdUxY3gxcfP8kd8jyUU7pQGk0UBYhH59Tsg\nf5HlssmfYjczEJ/2FJT3O9qvRk63qI8IRl5iIMrbS81uvnFe6763ccGjdTGu\nsC0sf/nAJF/zhf/qdMxXwaZGt88tZdXHbuzprt6357qt7adqdSzIIXusuKLo\nHhu0AHH3ztIxzPLht5HluxhoKmoFAKHRQzlD2kcrspPL4tOWZRaAkGGYkwOk\nu6mH0yMikuxktv1CnL57YPjikTcG+WiMTNEUhWjidQbwiUx+m3MBlP+aCypq\n5wxa2hK51xrwRZTHAJnDP7tSLNbj2F7OdC41Auf0ZIS0QpwMcTU3wrMNFTix\nRSIE0E1YrEv6TFsO+g+j19RZKGoCIDF5CmUH5AGpuoYKbehRGvm98B5S9o0R\nsH7f\r\n=XcJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1b3dd846d.0","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/shape":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/button":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/typography":"7.0.0-canary.1b3dd846d.0","@material/icon-button":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.1b3dd846d.0_1587775479189_0.9997928889494787","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/snackbar","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68de26f8b999e296b283e72cb6aa23c70efc0488","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.29debfea7.0.tgz","fileCount":40,"integrity":"sha512-3m5Fe3/dgE1gYNofc2RUKWvEQf1GG6yEIGlh2g4GD5qgHB0CzKVwaAiQe6fuPiJ59emEaOzvYrqM4yzEic7QfA==","signatures":[{"sig":"MEUCIQDK1gG1h7cTIFp23s2MzBQxzfpE6DDvk3Nfaqh3cMpR4QIgHAA12rPI8vcNGm81UTAG3zqQ0hM7mOgCFFNXRJe08xM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptEECRA9TVsSAnZWagAA5PoP/jLu0Z5Egb+7KTUGV4Rr\nT4jzpPxFZIXVpNtFZiFyzkapqQuiE8pqyXuRo1Mpaz8ZplWpQGiOw+YceUXv\n+NkS+JZJoA17A7p/EPEWG8TtwKA070M7ujL60lya/7alIkswUCcZfmfiyKvx\nZe9cCtcGMl3rlVnARCWx83tIh9chFP3sPzIVcb11OhwJRLKl4Oi2geYN4TQr\nBCCLnBiwOBO43RmeGP58WvtHhA6Z+TFODeSQpQOXXNgBGkomHpITOntyyPmk\nJE+Zz3TVORhAjgWl53102gzyfvNA2YHCljpa37uGPEOGSOXgsLKrBHc8G7mA\nV0kEDzFSEvkoPJaSNzIZ/EIwf7kC7y/DM/zxRz9f3WuEIHAwjm6pww30jb1l\n7JQ/s6c+u3M3gdyw7gelBNJvEzNXFi4BAsK8Bd7evowlkPOaEFekroh/LQr2\nVjpQFugd9uXv4IqF1SfrmcXiCFFZTnXSMp5HXOfc2fDl44cpeGQU6A3E9KME\njYwo1KkkVryzsEOOEc1MVyPLA8tAbVrcbawhB5etbkMmYSxb41+hMbnR/pmT\nlZ8frwSkIsN9WhO7AgeP9yra0vMysIf0jro+0/sodMJQQr6P+G/YBeYhio0u\nPrzn6h7+gJCatzuOBrIDHU2of+PnK9oEWAnxVGacwc8zJ2mbcsOeW8Q0DAks\ndH/9\r\n=Rc51\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.29debfea7.0","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/shape":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/button":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/typography":"7.0.0-canary.29debfea7.0","@material/icon-button":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.29debfea7.0_1587990787635_0.6068397491436537","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/snackbar","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7116d86930016625e95d5c4cfcaae786c1ca59a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.28d32f8e0.0.tgz","fileCount":40,"integrity":"sha512-hPFfwmBpYTEfowPQ03RSsIyHT8c8y+iwoxbxNIsipvQ8JcLplO7Q/LKj8KYMbYPJvfHiVi1D+gCnF0sIVOQJ9g==","signatures":[{"sig":"MEYCIQDG1IO2h9wRmmq7q7YbFXKYfEMcVP7tkJlUKbY4UMI3NgIhAOpC0sSl+tydE3yuOMYRMMQjhgnOwgYr9AJy3KENeM3T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepudMCRA9TVsSAnZWagAAbDUQAJPCoF+umBhPYyC4HEyq\n2l7NpQLxxjaqrd8F0FfJ7fvYo1f6dgm+voiRDMr42L5N3XuOYAx+ucYa++Et\nVn/7Almhz9Ya0XVzMo7fc/iXmOOOn2OREOYekNAeArFyli+cCOagfqkXNadW\nkpO1NGHOgaEPCrpkhnolrAPQtmaslToXKko3JliKBAN3BORuvtRcS1cKRpze\n0cU1I+aV2iot9FfZbb7AUADcesqNDZm76fwwq49Od+iKxMQwI97hyP/JXLV4\nmb/8dvK0xiKx8TzByxRwwMPa9n2Sq0habQ5LOKqGPg7T0slGKtUbhTIxMTMB\nDOMO/I/EA82jk5HzclEiJy39Hi/SxgWQDPGwvUsntjODM8y4CVdeq/9iVjv5\nqoO936Nagby5FRWSH9EMs6jSmTO1ulFxepJI6eqH8yDWrT7c9ibIaGhWLSwu\nT/YKZX0uKUZI8Kr86G+aul87cJzpd7/RQJ6JJR/4tC3ayDqPtR+TlLQSKEau\neN+zyLCakMrEFNQnFZeexRsEoQS0hMeSG4r5SZaAqXsvSmvJiMEX/va8IHWo\n5Hhb1npLX8Tbz/VS3QqLKqS8tz3jlaNKzCWVmzcksXScLg8KF7xpTrn31BxS\nXX7komZeVXhiuiYgE2Nmwh2E61QtPMvtRMt3GGWaniZmNZ0eFNAZ6OWDrJps\n4eJq\r\n=aqMQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.28d32f8e0.0","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/shape":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/button":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/typography":"7.0.0-canary.28d32f8e0.0","@material/icon-button":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.28d32f8e0.0_1587996491607_0.09465273421631415","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/snackbar","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a01a4f23b001228c91d305598a88ccda8a442d5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.af71cfdd6.0.tgz","fileCount":40,"integrity":"sha512-Nr7WWebz1y7ZWRkbxP4NGdWVUz5di5HC6seZGpKuHkn8lM6I2sUaQ1hzLXaPSllH3LT/7FL9TCvfwy0n//3MhQ==","signatures":[{"sig":"MEUCIQCbHZzyPJIWtT5zwSuyY7tbixNUAq013ccTqQgbfS5VKAIgC7XrhcBGQcL69mh05CoxFA3qJ+iJ35/WTdzgCATp8rA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLm2CRA9TVsSAnZWagAAxMkP/2h7on0rXuzttX34zp6F\n6xgN/vhqp7NEfZqUjpvTfS+cgQSEkV+Kid4/2z/QOZkHm2ivtm1SEO8JBCH/\nrU6lOS6j5zerQEbFGe2Yb0ZOxWG/DntRA5OQ8O2NbFPk+x3Aw/SJctgxgv13\nQ4STtq/60heqeL/mKGwT43N3jrPpwEwmn6+h04n5XaXkyS+PiV5XWi+FuA6P\np+lB5KAWB8aYRX80ruh3jb1YNp6fZRP+PshbWYlToH9GE90ewsZcAs6ibltQ\n5C8gAMGa91qP60Kd5X3A4FnD5NxggIVjwUBWN1tbdNiO7INUogLJibG9LOoG\niLDKS0V3SaYKx994TeNf/JP/FU4Bpo5MMZfXz8IiD1xYllDh1bosvwf+b0kt\nSafQAde+ATfiP+qF0XY1Y2dHl1OOgKZYGOSS4EosQCWJPHHkxFnrro2zr71Q\nFuTL6BCgs0du44p7Rl7se0uDHJVnuE5e7Gs3/ME69Psy+QY9SkQ4dD77RRfZ\nNTz4X/rdPhztAYpjHHSoNYt0r+KXFDyNJBu0MRevAAqKVFV9hjntSjeCy765\n8VmH6q78fniQGqFENq5QN3NEaOFSiI8kxd1INqcut94SvMvic1dHp3sC4Y0G\nieL9F1aK26xLilbSRccsrAigrcoLKAioiIWsm6QtJhFtZg6WS5657mUI1Xbb\nmgMz\r\n=A6X3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.af71cfdd6.0","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/shape":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/button":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/typography":"7.0.0-canary.af71cfdd6.0","@material/icon-button":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.af71cfdd6.0_1588115893634_0.379783944911684","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/snackbar","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd47ed340c699182ed233e97411299fc88e673dc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.99d2fc961.0.tgz","fileCount":40,"integrity":"sha512-vOgB206muz52Ijz1+ky6CBBtLC+PXDi2KH0vSKBgp+VP5JhKi85PNYP7pzJwsRNZ7thQOUQdRaW7Tv5tOyyWpQ==","signatures":[{"sig":"MEYCIQDlvTHpGy36EfXpBu/naSV+HHKC+wKC3dmoDCTQwICfdQIhAPbQTEapx4xpOOEFjKOZ3RzUp4ZrgIAwwXhyqQZFwamM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqmCRA9TVsSAnZWagAAVNgP+gIdWvBW2ofJs3FQ3XCX\nLDcSIKCzuW5wbc1BeNZGWk3ue/ufLspvMV6B1gAM6AmZNns3uUIIv4K4TDPj\nErjEztzhkq9AahYfVccOplUtYEhBqDou1LItZJ3kOjYLUON+Fw+4ThJJkoex\nBw7mjRn1npU1fqd2+nc5NvaZl/6GXu+xHqRQ9xhpoZkzZIHldR97VXJvQ6il\n16HGQlkb1bzbWeJtmdN/5pvjWWnMIxk17StgZ2/Mz8c3UkAM5Gzo9a23qiIN\nQBB/vltCPCRKFFWm4B93ZyRv8XF1ktV6+ttpbnihLDDZbSwf/fp2XvI+rAzY\n8oIwVQNSu5ktbMraZasiAx22pgUq9C+64ZCheJRKx+m7ZczvChoiIHSfBEuw\nJ2ERx4Bo9Vi7bIZh8SvjwurC3dj6oqssVGisC0OQ+PCD/8pQMnIDBeHh3pqm\ngTNPg4oKpMyiCn30E5x9dzwNd9wtkbyQHfowX83qm4Sw6ZImvP4o4Maau+s/\nl0J5ZTs8KsAUXlMc3B803epEC6eFotCVi/0crY9a+qkXWhyTm580AkBG2LgK\nW45lNs1mXFrI2sSU1Sdv5kudxd/ADQAtWOdkSp0Z/ndJl7jgFRShql3brQe3\nJCmZvh7hFK7uEtXTMi+8W2BB7hmLAjstKDHCsiBvb6VQYAmvy9/C0eBUJiFC\ni+Q3\r\n=phbC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.99d2fc961.0","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/shape":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/button":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/typography":"7.0.0-canary.99d2fc961.0","@material/icon-button":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.99d2fc961.0_1588157093648_0.9220135859459402","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/snackbar","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e90628b321174e1511095cf7f6a45cb6c2e7b6e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.0e052b24f.0.tgz","fileCount":40,"integrity":"sha512-0rVnsFWPLEFuM1bVqwc9X//Prf9VMuR32ytrkG8sxFTsmpsrxF38Evx6b4CXdobYKu9h1NRJfH0HsM8lM6+MPw==","signatures":[{"sig":"MEUCIQC0Z43dNTel7ZMZ1qP0tX8kPSeC+i2M7wl+7ezjUbJcGwIgBZLzatNP1RK0kCbb4V3pMSBXL4bTTIKO0jaXyJ1i+wM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqio2CRA9TVsSAnZWagAAm/0QAJ1UHqu0RmQFzTJkOOR4\nlGxo5t3bMxhSwNshHDajuFsml/LcTFP0A36WEhSQGuk75hzGewulvzbIiJGA\n1MiyLw4cOQoLi9IwTzDzdibARp+gMUsmz1TCmCrVpy7twUihZYksy22sdRiI\nTstxmy5VN7Q0Xr28tFI4/d4cAJ+uiaJTp3CpmKDbigKxTg4cVJ//DIbOxaVn\nDQSQBveKadmNBZTiO9SUAdHrMtg4j8Buha5HhohQOhTMnqLI2P0CzxrYq2+F\namLN+0mjOPVCjtVhW5pzFKKPmF0eybou0c/rG8g01YWuKpd5IwVcN+4M6DM+\nvyFFEucQHiSRzx+U4cuR5kMMTNkP8AaiqoINVWeBNqq2K6EIKvh+BVH5J6lt\n1vrxGe6oVeNkQUuWnBejHolJ6F+9QstRVGigJHKHukCRr+x3LPxvSO0IhT/8\naCSUvmOvEuq26bzYoXz3Pa6kxtc8wGEHg26iivb599srp0/X+W7FtsCMsZFP\n/sV4sb1qigfeo/kVlm9vV8Mqrk6ICJ/xumFSdFkBczZ4xwaDiMR0aNqXECRf\n+rpP8ke3u6upBdoMCymr1yQ6LtmBmJxmzCfPNyflJDgvthnZ4wGMRJelO1P1\nerOP4mFaLUYeP3zdgT7p9xN/89w45bR4Ax8Vh8JvvPDsUzngkR5bYydVJcHC\nSenE\r\n=tELY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0e052b24f.0","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/shape":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/button":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/typography":"7.0.0-canary.0e052b24f.0","@material/icon-button":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.0e052b24f.0_1588210230361_0.0438140986831006","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/snackbar","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22e3bbe78660df31c8e159ba598562d525681c18","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.ff4bc632a.0.tgz","fileCount":40,"integrity":"sha512-7uVciGrfcvTyKCPBSybUKXKOOOh1kmHIupQPRRrPBRA7PACpqyUYXBeBeKP15u1R2B35ji5WWcOha9FrCKel5w==","signatures":[{"sig":"MEYCIQD7arxKM12+Es1JCWOKHPfq8qjR1KxAEREsmjUD9/V5owIhAMCf5uGnTlnppNlYmTq+S416KOnzcCU1K6amEWIzeDXd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqow6CRA9TVsSAnZWagAANf0P/jrnu2jZKLEzcaUOF17Z\niEaDJf7sI8Ctp7knBHPwwRBr5d93UMcdF/kABe80KPyHPwRSfYts7v9TtYDV\n8QTTcnZ/XRdLrj8Dxf8tBH0m2jjezjyg0hLWJzW3BPiDATsIDVTyPS4JKmsB\n3Ry516z6/f6xg2L7o6gI6wnZrbX+5ZyfUGrNHLs0RndhqzGgI4qJZSs5R5QL\naChVydft0HrOkNsD75VFEcKpMziuBRzDhJyU0Jb9FsuOswbrx41P6yenzIoi\nHwCjl+lKneggm3zhw/g4ORZly6FbmRHOyw6cTht7aq4sc+GNu7GaEuqgrfAf\ntY6tDRrHXDqvSrn712g4fj7VDCVm6nqj2G3RjUzxnv9zI2VEYGsKyLZPzxXD\n2cugIr9iOYaPazxL0KwcxrW/ivS/MsRVt55NaLgAVlmrmrEpe9/BHd+MNDQS\nugVzyAOYoGh2qCPQbSLJ2kWplyhHrJQUpt3qlg6UuuO+SJ6dEX/UZWmR29BL\nJNDJWE4dMIZui2Lx9gN5XVgVU5jF9x3OgzhI1kncMcwSeHg71OoT7KIRfoA2\nCxMMx6T+RLX2N7hnC3Tpz10L/3L9mulCqf12I7FUzNSoURlAw9mpNlfoPvE9\n/37Ciu/coxNn+2OTRNKypXtEPZzSLCJZac7XG+DN5PwGsdz51V0pM9lN90NK\n8ly6\r\n=UlU5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff4bc632a.0","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/shape":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/button":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/typography":"7.0.0-canary.ff4bc632a.0","@material/icon-button":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.ff4bc632a.0_1588235321976_0.48164910762914204","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/snackbar","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dc57380a5dc75fa82a4e38443cec823ef3edeb6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":40,"integrity":"sha512-alXIN7bxSPYwSIFLlfW9FJab54Zb5pisMWzfycYe0XJKw83ile0Jtw0A1Scfk0nK7AFq/vrYrpQzjdHyZBhwCA==","signatures":[{"sig":"MEYCIQCkYz395vEAOLodluxjDevbHU28a/LmK4bkANgNyPY3jQIhAJwFIGadJSbDfPkgOS3k+rRThWidGfKfCKylw381+yk/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequHNCRA9TVsSAnZWagAAeQUP/1fOoGWOdTHdRwzPSIEF\nTbcchPZwhjiKTKrqByHlnyApc1cDRRwwKx5DdU+rR6es85NEdH9Go25CoPWX\nZteHu5x3tVjLUAPKYEU5dM2ce59gghKYwxmnOs8/i6+NWhimLYT+nT9Mbk1A\no2SFB/ItNxP5BT/6Mq+UHIzX/0J8cQnwf6LeGj+T54CnhPSSpKy+ri+TYv1b\nTZGxTVEAWSg09DyoejNbiV5MJEOp2GyRj/w9H4heH7mKpDBgyt7bIXCgq3BL\nnAqJgCG5xYOg7BgHZv4w2wkrqbn95yp0xOWGBPp45yqWV9Ck+wQeB0zmtEeY\nyxZVvnH5xEpCAxZhk5jByy7hZmnZR/ODUSIPIuAmN62psra6ygf16bTpCq+c\nP2HV21mlTJJhLfLPMJSSC6k3r+ngCI7gs3tOUP9eigyKa+jnNE9HdryZVym+\nw8vc8FO/g+jhoFy52ycssDnVaI6pke1UfaeVf9vcC/jAPgKh0DERixY0x/5U\nyqfzzfLGmTlXB51dvP70/76s/zTeHNWVzt2FGEuOx6sWrtOQwAOSP19lfp43\nx5AYojb8xlRWgmcWolVoWAlL5FNIGy5lTu4+QYsPbF0ABJ5EPKetV9A3+gGI\nfbM+HTMw0jqYJ6mt1RyCGZl8U1qDNBr+ACh0BJwLwxKYgRS3xyG0RtnaDV0l\n27uW\r\n=Ahfn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/shape":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/button":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/typography":"7.0.0-canary.b0f83d2fd.0","@material/icon-button":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b0f83d2fd.0_1588257228789_0.017956807879914383","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/snackbar","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2259f411b2ff8adb47fba4d2cae0c5044fc864c1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.e59906a57.0.tgz","fileCount":40,"integrity":"sha512-PY4JasFq6Pm/0SnvfLiG9I0qFGLIUy9hFHnWUySIPyWLPMlFhO5NkGHT4b8VIG4JA7P+jt69VVUZMqQibqpWig==","signatures":[{"sig":"MEUCICmrZ7XL87Yb4Ej1wZ1ct/tk63fOJeW+6687bP9k/mbDAiEA7ceNeV0azZVAFmFeZEdIp14CXpulP5WEKAfeLusWBzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEOUCRA9TVsSAnZWagAAnf4P/0/UM4inYU9cf8x/tWRx\nrnOllOr4mrn3kETrTTnR8CoeG8SCZdaASTVi2Dilx5LG7P3m8D6IJiDbLiOs\nwRWhWP8DzueUBT4MJqnUNdZk1PWQbOfFprXn9psBJEAxjnikRJfKAX83nEwI\njxbBBEu9oM+cg9pQDh2ZFKztl4Ceh8Iv/KdhIkIRhCp5/AG4HF+GW21nTOL4\nQU9Ams6EM1dpW2rW5IMGyliXl/jzdm03nVfOJqOJOZIeF3sB0C3TTbZsWrEH\nGvWxSVKy+8pNT6euBRzvOvfDrYVQk7jSLL3o85+hMCu64iLwLtafJ/xvUxhQ\nQfGsA3AQAbG0GmXKiGJiiX0ErRiSWJTnZkQsuZCwUTvBgFILM0cR7dNdOG/W\niJT78kkI71234ND6lLOUXjaHR4WMMmiOQXojL9mz/jK2f86ttu4vKpCby4LY\nnFF12bm7nQyC5hNK/zTFVkvR96lS2LURPevOKxMWaES8cP0+iUpMnxaEgp8Q\npF9/Vn2bQ5lNKwjwRNFSOZtI2vzFmliKq2BdmtuwiWj+5fw2kMBR/AyF77pB\no5lOHhlBz1jjcTxg2mfP+JJTRFIgp9bz2Aee8+sKKSJfDNyYTsFR/SwRcu7b\n+9/xDgtR2joQUsZbtxbfRH3VyPSc/uIZ+gE8ThqDIu0eqtTfennuAOYx8CrM\nVVsE\r\n=XZsA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e59906a57.0","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/shape":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/button":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/typography":"7.0.0-canary.e59906a57.0","@material/icon-button":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.e59906a57.0_1588347796233_0.22766453887566906","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/snackbar","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9101578381aa6edc2f69740a5d45193b14b490d2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.c02712b59.0.tgz","fileCount":40,"integrity":"sha512-rr4/7j1yK2VJnjCE5g8/zOHTWVPKcuUypxjClZVnS+v0ztE+m2ssOg5p409eok/1UdAhcKYAE5aeAWIhs5N3kA==","signatures":[{"sig":"MEUCIBi0nFIHtsf5dw20QOxXNOmJj5e/SD3q59tWUneVEc8rAiEAqV3AxQoQYAVey10cwHfr5MWNoWrD0dZuxauQtLxMVEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGneCRA9TVsSAnZWagAAPmQP/0ZC2cEZDbD5lRueDzdx\n438ncuRIcMyIrc548YxQzVfLrdWOr1DlV29odEW5IOxy6CvXbdAnEX7z6Hhi\nt4ospoUTd3zN0Ldz5aJcTR0ac67mEuJ8ycfUkSF6/xQ4saR7eZpZxo7lXDHW\noP25xN89c08hLXof3un22PQO9juRWiNlg5ISN0w+JuUHo/0i9mr/I2/B9ikJ\nH09OEEcCqQR8E6CSINlkav0XuX6rJtuWmoSO144yYB+9vA40JsdqZS9FZm/B\n06nzimPKMTpjomnZg4zY5FR6EclUkE3pST+Vyr1l/xD2Y0I9l0kaOAlF8NVD\n2NzrpUPFrXFXvCkPiAkAZC5ELfbgKFaIUMtHclY7skRjyNa62/tWvVABAkWR\nz+63aw+mF2VjIKphS/Ew/4UedpDUPbeCfKOi0sNXcnQ6wwjOzla/EyW1XCWQ\nFZg3lXFJn8PKEFaYjyP6gpF+ovtHpdlsgOzkLqzevtjJGC+V/rMu5SwMWpXr\nihYZvTV1peFw7CAjah08Pvw5VtOivI94qqvk8+WLHGhOeAZc2lvmT6tVQJfj\n09fhgP8xOB69ypwPZvbvLQ5lbsBVvWFUIVA+2ahzhWDkkD1267IpXhFBsrsf\n+43v9Oq6/hDKNSeY91u8RfKAocZAM4IWetxEMOKOuDWb51dCIkyy29Ur+JGi\nItbn\r\n=FhpR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c02712b59.0","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/shape":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/button":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/typography":"7.0.0-canary.c02712b59.0","@material/icon-button":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.c02712b59.0_1588357597606_0.916901868887567","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/snackbar","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68d6d6665cdb63014d94dd783f492648c9884624","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.15d65448e.0.tgz","fileCount":40,"integrity":"sha512-FQiWbvQ0NCd2DSSvvSwRxMCYzmqDoQEUXIY5X9zpmwoZ1zRNjb9D8G+qEFB7y/jQ5AuNtjl6hEm+4orkUUiCkg==","signatures":[{"sig":"MEQCIGgk4lbkqXqBQ8Vbtt8Eer7i5TPxEpUNvLPUyMRx6q0yAiAh+RqB7znEgBHhoB3vZ2JXglXdjL6MB4oRmtKqUdto+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHc0CRA9TVsSAnZWagAAaN4QAJg4yqiw4M7Ek+Y3auwk\nD7KENHdPANeQwZX+Yzkf5tVodQmvENhqxP7QmP7tSuRR87azSpZw/wvj79ey\nCVHuVyFTAkEgqK1ogaRwv5m99PbHFcd2O2gRB+f6olocQu+Hz8cFWlpiYDYR\nIXM0cm/0hgVrsqyI3qdfYl5z20PZdqZyFWGJgLEvCvkDYT0oTHiMLeEUwz+L\n7wbHtdp48L7u5YOLR4EICZtiIqCyZHxQOa6ZTmgQcRU1kVaZ5529TkEbEnCM\n0n703+4poUZ6fYpX6yJ4UvePE1V+jRok0TaCw8fox1Ch2iMLeRI8N1uIbga9\nyIcQ3IN5nOK3rhFWjWJNlnERJxzBQsmqHxN0uwGBtdsyU2Btr0Zh35dqT1UM\nkoklhqyRwuOHN+wG49IpV82P45gxFoknz5wsFhG6vpB/36vhOxITnVKMaRBQ\nfMTo58qxfE3/yyeTE4MQhrfxLgUrSPfsPj3LlHqSlRUr1XfroXq+hlOZ1dMl\nVjCsKXiokRZ2HgeMA63WlIYKTiP+sQTsa4USDBuEaEgmyjNyohSzx37/YzXu\njqTinnmytD26SIxmfxSS2/dlE7jH2GpGqndesfFTLI2jHUbsQanLAe4ykZwa\nmzmsrpu8s9ntfn7ywFq9TeNQdJq+yTriXLWnJmHI5e8UjGgfPpKnlb6lqv8S\nJ7hZ\r\n=qoZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.15d65448e.0","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/shape":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/button":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/typography":"7.0.0-canary.15d65448e.0","@material/icon-button":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.15d65448e.0_1588361011488_0.8639359457484173","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/snackbar","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e366aaceeeaa04d93e7b9583dd280003557d89b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.142b1549e.0.tgz","fileCount":40,"integrity":"sha512-mxlFWPqQcnwQ2Ye4ODDPinUlJJRo6/RjxciK3yDqlZG7WrSl6BDa2yixGW5Z+1sBfzV4lMWpvGyiqjI4I5m7kg==","signatures":[{"sig":"MEQCICbffn0xriLLyER1nkSmPW0x3kkr/ab93BJu7Pd3aoBVAiBLEfpLvUhhYZ+R2RiuyFT6G0bTEC9/s+CxfN/2w7pneA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKR0CRA9TVsSAnZWagAA6YYQAIvRIpWaH6Ui4WgbaCf7\nnYZL9QzH8lw8coYtL3fOY3mceZ5w66QQsCc19Ni5UGUMokcwAoV+AnDsaJmX\nHBnOdFWXXHbXX/tirnDMRG5Gqre11FUtXLymVxA41Y0AL3tUcYycmioUsp9w\n3cnOl6R5Y0LlwfYu6LhqtKYa6vWHJMwSYgcaZEi5iGN5IXwaWW7ER50I3rx+\nIKjVSW8FBo4UYAH9cw/RWr+f8pZBo7Vsn52oJ4YpyeB6FU/NDBKsDhogvwG8\nkjbVJPfRQCwbMi7ey803uDV1msoh0PB7yXgwsX67Xo93b8xARLr497rr080P\nzL8liRrWzJRygYBTvTMYJdVd+/0fm3AeUKIRP/PhQU3kOSOjFg/U1i9+iVZv\nF4TruCaIH/cw+HMO/bdEB+oi12bF264ZyrakD8TdT7Agq8NvsjifAsz0lfGD\n6zCnQh/0MqMQOSZx/AVNNPb5evtGrJRDhXc4VLqQgO52yt33mDbJCwUbIgBj\n0kBRvzJQggvPG2oWlVuBe1QemR+tR8/h5szrUsLbPWs9P8QSTuF3RQw+gphG\nf65ebhQ9nzlj1M5raR2Y8V4VoqvzqPCrz7lkAwcik4lzW4LKt9K0L27ySn8y\nIqfVwmJv3RNcnUQl0SPFe3bnQae1aINUZkCf/yioggS+xyICr+ee7SZRyIoZ\nFikG\r\n=UP99\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.142b1549e.0","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/shape":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/button":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/typography":"7.0.0-canary.142b1549e.0","@material/icon-button":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.142b1549e.0_1588372595988_0.8285297194968864","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/snackbar","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45d8eddfdc1163f46d76837756b641e590117ce2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.524b7b812.0.tgz","fileCount":40,"integrity":"sha512-bUNX5cL8tmXo2fKhg5/ZA5i7suXMQNnt/S5d/JkxOawQSR0wvnC8EfqC6wWNX+2BssZ+FtZI3Zi0mYQfIsP3mQ==","signatures":[{"sig":"MEUCIQDFIecGmH65U0Vh96PPvSliiLfP+g6jREoohWUdefH36QIgelyTqC2AhNMMcSdZwuZVfuxIVQS0EmohRkELZ/TBHiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery4SCRA9TVsSAnZWagAAsKsP/i1wRcXtqBar2TdUn6ub\na4PWxnJerd5FLNcwQMfjrtPwDfVBALvbP4Y42prMkounoQbdo2f9PECApzzB\n5ZSTo1cyW5T7ZWgeq7pnci/ToLlPClJ1MW1vE0WhDTuhpAODVDalNaiP8tnn\nt5yYTE5mwVXILIQpr5lYQ56w1PK4cdfbblYI1A0a50XyCzVwuDqoMt3bTkc4\nq8W99w6T2YXUSpQ/jsJJ9MtkKDzADuy0Qx+aoFZLjO9L6rebTFHWLjs5+rh/\nNNgIetFQZN9nCArp62lLFkmI2GGLBmYqI4V29DVHytUqNghnz9LkFLokDN+H\nzBMzf5wOsJCe1DOrwLzYXCxNrqOuqTFTEPmj1cQL72pbtIjXTocmzwkPK0HN\nuSMcPKVlDZJ3N3GM+4ZilnMYYAXeM2cgMsIujNiZ1oCeCIhdbTqJtT2s55pi\nw9M5jFueRbjoLcqxwSyPVzz0bQ4ZhoCTP5lVo1EvP6/x+GcQa0nWeBhnQRan\nbOiLsKEL5HDRUpCDyxzVMoidUHLfzqO6gFL7WsNfrlECtXCvqhtPnJOinfJc\nJkjCO4BPye9rI4nZ1YDKwyMqhFRcWp6ubVpJJzHwyXAMw9uGjogdJiWRoCg1\ny9CRlg5/1Jl641k300cN8wRoypqC2yPVTVZxzEx/NIHWHdYuFIOdLyZioe0F\n3QQA\r\n=zSS5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.524b7b812.0","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/shape":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/button":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/typography":"7.0.0-canary.524b7b812.0","@material/icon-button":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.524b7b812.0_1588538897968_0.15837837709545832","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/snackbar","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f79288f2082e3b1258ff9fe6752e25121f444ca","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.bd8ca9678.0.tgz","fileCount":40,"integrity":"sha512-miSkXq4GlUSgCk2LbO7y+g+k/n9afuDNIfevaI4bB9R5+T81iJwvdtEVzcir8pkmTCRxTAPME3CuruN40SIpMQ==","signatures":[{"sig":"MEQCIBoT9mgVOClhQQTA9ahXGKoFkNXM1sfRQDoRElxGQja5AiB3DVpbtzDWm89pgIniLT/rgN1F+i8mxZ2UWwqPNvLXWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE67CRA9TVsSAnZWagAAq9wP/RcxdSn1gKIevnek8ldi\nKgW+n5VKiOAhJRFiCzIfpg/VqHtc+o1KXJU8AgU+ztLJZafOreQeyJkehsSV\nMmNSKc+586XR+MmR8Q9TmOqf5tvR49j4ywA4BuvVaSQL/P/kHIFrvRdsoA7c\nSmd+pFGr0Dd+vdS8VMYw/rYT9Y3XlZSNIrqLmzWPRnZ8VJOkCaTK26tdVkZf\nQFsy+1eZJhO7JnzkJAEZf8HcZkJP0OPHdNFAXoV7hUR7jp5o5qG7hmDsjv/4\n34kYigmI7fj0sLA6Ghhvr5fbiqnaoXI9mqHGMZEmy1ikXRHOxBUyBBWhfXGa\ny6L5t0gSlHPdoVlIXle3tI7ZDzx6/mzJ2hUybbnWORD9F/F6ijQgLwmLK0lO\nxR3oLqr4s6lCgMtIAcugZTLu7Ly/5Yn2aJOCnK6GTh/zI3xRwJFywC8+b8sk\nA4u3hd8x16uAmvEC8Rcjt0eF8JSkVZTKRsAGzDpQq9GZka5DyVsHtoGqfIG4\noNkw94i7dfQydhmVje8dyEvQPY1v7BtN4xJgugCXQPJpioEYEBboBxH9yuWi\nOAa1j5CqDCBfd9cOs/mtwurtnn3L+xRf47iAnCFxok4TEdZILHhPt5m48/XX\n3EEiWbe6ROVhVwa9SFQNZFGxUZFmlH6IXNc4HvzrI5GsxZg0GCmbN3gkbE1+\nHI2r\r\n=0FYN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8ca9678.0","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/shape":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/button":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/typography":"7.0.0-canary.bd8ca9678.0","@material/icon-button":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.bd8ca9678.0_1588612794999_0.07839771186986","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/snackbar","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b55e03aead40d49ea5b76ef90f9093d24e76a4eb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.2553e86fe.0.tgz","fileCount":40,"integrity":"sha512-Jli86rVSZoB7Rd/GTV0rPfDHyjNGMJ6xIZEQnsbm25qAiENmatPebnU7UeJcXGeaye0r2hhvQdZVoRRfNUW9ww==","signatures":[{"sig":"MEUCIAscTcS5XgTA+fRj6XtKJTUV6W8EcjQnAmoCysQhBZklAiEA9WAJ2rqb187He+DOLVBRGkXDk8awPROCJKZUufPcI0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":413918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGWCRA9TVsSAnZWagAAMEcP/131l5HN/tsV/ifVTppm\ncpRSFzrF+hBEhWecjrz3pcntXPzP3Y64rLRde/hCl3T+/w8vBSh9YgrjF/Jv\nNeN4GIxd1xbjYXGulTmbH4vf5XJbELsRlIw6Z0crb7c0dB10DxvUzlNaHPjQ\naLymN6zSNGAJ5UvqFCpFCC6MgQVmUX17vPNcD0RBBH1h63pNHZqQycsXPAm4\nCc793Groc4acD9gZdFBEWYcTwVRa4bQ2YfCfKNhsmTuypmWQn8wBKp4VNAOJ\nNho0BYUq1RLU9Fgs7DfHogDScf4rKZPfLi+0x+mQczhNN+oJ4oKicxBbRwM4\nMjQKo+vKzFSaJLnJyrV+1Hhci9mbh48D4FmlerDd1icG6VckvisBRcYNiMCS\nJaghZDjtQLbJ7uyiI7zEi4Ph/M9G2AOqJGihlNx+hxcPfOnQQRCq3HwbcaBE\ng7PLyAAdE0M8KhQ+CW7pKyiUpdPWXlHxhuqDYn1Ne5SrUe8Ef593VrpFs4bm\nj8gZZuA5E21Ow1vJ+YRv+OKlrC2OOKoANwg9GfnddPvRMzR1/EZN0DigCZn+\nYm1x25z1iW0KVHq8nLrusmpSmRtVfg/wc1JFULQNecguJ8d75f1QP4eSXJxw\nUXI7RYs1NSehTzc35sBqq4/h9CLQR0+ZKVNWDpUl4zFkXImjNVZ+YdGN1Hjr\nBinR\r\n=cApM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2553e86fe.0","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/shape":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/button":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/typography":"7.0.0-canary.2553e86fe.0","@material/icon-button":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.2553e86fe.0_1588613526175_0.11946821622654635","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/snackbar","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cffad0618e41521e1f1ede5d5e1f61d65a51ec4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.03dec929e.0.tgz","fileCount":40,"integrity":"sha512-i/gIG6JF+GAYprJAJcjKqbB/6EnIHPd8YSTNEd8rvllhrL0oQghK5QGDPRqN4wgUTwQX/gWBasOEShkneFprvg==","signatures":[{"sig":"MEUCIAvOdGWNjOwRVk+JoTriiQZ3THEC0BWaEmXjS/78ommhAiEAxmzw458JEtDh1KYznASUILKVpu89hkE/SM4ewbgn+fQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKahCRA9TVsSAnZWagAA4lUQAIuYV94aZOfZ7QS3Wk3v\nBIsvcv4gc44p+HUI2WbM5K2VPw4+rFwMXc5TxIkXJjNwf9mkCn+moTzNvaP5\nJW6ClkA6oeK2wW8vEZKUazN6lDLWMqdiiMuJrrIBpKPJQM+32E50A7DRwFTx\n0AtM+DEs2Iz7Hk889umvm7L9GUr/hZi5Y+X77G7kbJYKzKpcrJyWsSivefmX\nZUEMR4bwSsDk+4chfiDvwdKArxprCFsi8oTxN6V9zIm+2ICgJa+i8hsOm4+d\nA6iiLKXdFgVILVylbL8G34/9h3LyIeB4UEjrOLXxezPmdPO/UY5yjjVhqTU+\nnK106DPCGFtxd53fiCnGI0IKVzT0it1xLhE+0gIlxZrP7B0aBUc1i40/2JUU\n/vtu5YLdyFGIC/eK078Gtp0CwPvk+vCTJcBTePJ+M/kq3uY0SYys7brnihVh\ncem15p8t3eNi011Zjm9coml3bXjjSBLcpTeyJlbWr498cHfsHJLUZLP0FIwC\nuI30v7W2DcQjUvRxPH03sAH6Y+3xp7soDDAlXB8NdOlGqpgeoY9Y3+I/VEfG\nfj8bjRDuZFlaxX3ysKgiQMjmz4hx9hB/K0shnMpaGi5vCAi2P8mzUXcGlQrP\nstIuPvYjPhatudS7UAgwOsvKOM1Sn0DRnltqVFiDvqyTa6hqeXY+rKAo3IXk\na4qP\r\n=EhH/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.03dec929e.0","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/shape":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/button":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/typography":"7.0.0-canary.03dec929e.0","@material/icon-button":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.03dec929e.0_1588635296654_0.19824754938109423","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/snackbar","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9945e8dc7f3f26e83252e61a806ee931390faa15","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d92d8c93e.0.tgz","fileCount":40,"integrity":"sha512-LRDWPhKSDdSL0K1gGZ1q+0F+Yt91XEj/SdLUodhRt3/uYOASXrEPLsOjxocNi5r4eciCJWFpSu5LpYno/3B1MA==","signatures":[{"sig":"MEUCIDUXIaNZQZ33w5UdNz6Bbwazkdysbz/vkszbzacZG48lAiEAkEsp+zJS/vIcymSCM50c2KAyZb4Wn0Wl+Y2eMRdHO3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZuXCRA9TVsSAnZWagAAOXsQAIuqJ2zLlLpt5SdEgcA5\n0hnKVkoeKV45rpqsotefYcGvF4r/7kModuVVOvdEKrpHSoIzBFrP84EnXiGg\n9zx9xm0UqSj6WZhHGs5cCJIzmzfOTXeGMINVFq2BgEP6YTZ4sjYMI7oT3Fx/\nZy8rYsQaxdlhOZEivLv/UrmX1c5QPEWP/LJjbPxmY6gvdQ+eHLgvuJnmHCQP\n/GfLrw3QCSN+Pg3lvWjhOaBjTHNZjwsu4k4zWNGFIy9cfH8sBiWRyMMtTtIy\ncv/FDObb4x0WjdubqDKF6ISGMW9yqTmUs+xr0RYeqSUSSaUCTEO9o8TSQbfR\nU+nN96T/r5LzKYFYn7kqo5JGFlSqo54WEJZU7DcuWEJ6EG82LRfClI5ah4cQ\nnkst6t8JgdOKzX0BlZtR2SuFgrU589Fp9Wg5EPGxoWBv+uf+zG2fklN7xcwu\nZY+eVJWV3qdWgU4menzim5hAX3gU/gmTrht7rNnffBO/mzYWDtC5BO/6PtpR\nrDhgCN0Zk58rnQfS+V0oZn7pHHbOcT7QASVllznyfA71L1lWaUtqt5lLD7c0\nv5dXwUg2rQY1pBoLQbrAdRPkHntQ4iNCMMMfcesUa/rvAlXWp0Vfz92d96AU\nwDIbX8MxUV5XQcjSXBQCjNazofD05Qnosp1KR0LSedIEcQc4whltYA0rygtW\nXF7J\r\n=iauG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d92d8c93e.0","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/shape":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/button":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/typography":"7.0.0-canary.d92d8c93e.0","@material/icon-button":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d92d8c93e.0_1588698006774_0.3611980083902355","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/snackbar","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48b6df605bba222287f8917f45a9a50d9a0c6927","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.09f591967.0.tgz","fileCount":40,"integrity":"sha512-JJSLYMKH3SoaMf34Iq1SawXq1vFOwDelBHxx+N8GS8JW595/c810wJgCQrznW/F5EcCUmugH/uXrYC4YGP9KRw==","signatures":[{"sig":"MEUCIQDx01BsC+jQ0dO9jStnEOfzcvIUMr0vebe8gJSGzde+bgIgSj4SUv25vwN8zCc23BlHvlWilUoiXXTMMGPAUsRBevU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdURCRA9TVsSAnZWagAAg1YQAIJSP7YTcr2r3Ei5OQky\nZxI1F0PlfRZW8M2D9NMCXN1E9dH6ehRHj3fEgxV2RVCzjO2wGHrutoAl6jqH\n8TgFJidAgWmyH4+NLFaa9hCzwIedk0rMjyPwkonrguqEVBf7Ta622v5wje+D\nGV/R8oo94h8q9ioAKfktTg+WUeg1Cz4voglwRQDypaxQuToyuCmDmnt7lpOp\n39IEBFDOR1GZy5JI/QQBKp7hjdBIS3JKXNqASxQSC+hGz3oYH73Nx0MXAYSV\nojFVEPiFYTszkyuIc0BSjwLMW3bycEd37NkXDOcpG0/5FqArO1FxQzBc9YJ1\nN8BG51r6iQYmRHcs3OQxRrwLXTCN3kgd1ak2fsUj4iOeQTtnI/LtP+crWu+/\nX0U48e3ouwyBJzLWr7qkrHdAd0HpGjusmu3L1N6gzFNuuBr4KNM1yNq8wG/G\nkNn6eN+TZOYjzu7tJRTRWo+u6gIGavUOQ155fndmhGRxYpt0v4vnfsbVxPdE\nb3mKrAMIgrg0CELyGlD9th9uL/cYWTbGeXGAU9OGKNW0EvDckDOct2ecEZWI\nx+xopC3yBJB4ovWDeqw6N59pAzoGLt4NNUTOKeSZ+EtIZfCNFbiSlFxLhNJV\nCHlDzmKrLi87t9xWLbAGTSdZwu4rKrrjuD2ny/SC3M9zv/Z4I3GKuuh/ys2s\nckQ7\r\n=jGy2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.09f591967.0","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/shape":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/button":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/typography":"7.0.0-canary.09f591967.0","@material/icon-button":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.09f591967.0_1588712721520_0.68232805670291","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/snackbar","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93b381fc2af3ac69b031ef4da708c30c1ff8455c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.3846ce311.0.tgz","fileCount":40,"integrity":"sha512-yynwYnAmqM4yp9MpfZSglUZazdgIUBuBRdV8FnGahSMDs+Nb/+rnrfn/hZuFC7rEXN9gny8qDxu0/hroNqn0vQ==","signatures":[{"sig":"MEYCIQC0oLbgRCaUN0MJJpPj2oNlblETcUO4S0QM0X3ITZlZtAIhAKtR3wCQH+L6ImkzYh2Chw0Zr7Q26hqFFfZYl83O9ydY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessVQCRA9TVsSAnZWagAAxWoQAI+1PiNsW0RKTA7bTjcW\nQUVCmI3TDDVxK8ajqI5FFSMrOtH2iifPGiwb2Dw+WtaZFAx/16csgM8uMhPk\ngq1b0WOQUufZSq1jxw6Hdjfnn7NkA99uFjY5f1+twV+9WShXKEbjrA/DnPbr\nSg0h4PKpJY8ln9UImbEMRzhu7NLWueYj0k+ZybgHqsYleRm5xtTHxu7oIK0Y\nhboJmAlAD0iM3khq5ZCLZa/wYZj+ZBqzxLGus4grjx9GJUPEd3sZ1Ge/uBWq\n3+GZkzc9HwQ0VogtdRj7R9SYwISnsGKu610fMBcg3X3exfIwOZ8L3xXoYUHB\nb6e6jhFfXIn3XFGm2wsAkwoD0BlGMLA72p3gG98xMQcdZYUpFI76fbAasFF4\n6LwK6+rAVxGIeX098KDekaTzwaxKb2bzhBNGGuIcTUUWO8yeLsg15pK/Fm+4\nxe4u1pWOgIuy0bOm9EyifTZm8xkEVKu+Hl8wKc9qklTXmE3s3XWWJJEge5QR\n1LWblKbCbQAV+UHJhqkv44Ro7Yxpp/uRD3pV4Og1lvy9DAFPBBLuiamWyfqZ\n9Hzf4bnXgTxVk3L0Eg0wzLjkyVSJDR1/lThPKH61D4n8gbuRY1uRwBpPc61G\nwWW9R1r6OcbRR1JnMO0AcolkOidYhrPvBkXCu7bUHqrPS59BMyxg3bjr28Ps\n2s3N\r\n=s7af\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3846ce311.0","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/shape":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/button":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/typography":"7.0.0-canary.3846ce311.0","@material/icon-button":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.3846ce311.0_1588774224232_0.46219326130054794","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/snackbar","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec2911b4f9664864cb9da63dbf58219ff333301f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.ed7f32463.0.tgz","fileCount":40,"integrity":"sha512-XBEYO4/3rFy1DbRk5RgirdKaZ8We/L2gDetpqxAbZheO7R/Na/CspIXVTp/QOm+Yku+yKOIlA4zjHDaLyue/pw==","signatures":[{"sig":"MEQCID16HE56aP3hfV+zFqS9psHdSZKo39iyN2RrtFsTWAJCAiB/P9uqYjmeHmCWjVMn4IFLO+Ug62c/pW8rl94UEgnSTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuEKCRA9TVsSAnZWagAAy4oP/jlmFyYCi6k6gPJIIHDZ\nWuB2pv1dCYhBQy1iTOYSXZnSlqocRxPhQi7KwY3aN6L+Zo2498ovalnB6Kqx\nI8iCHKOiy+fOYQF2O76goqkMFhRgRLzluk9bYgPhFxcCNcAY1WA2fDVrT4h8\nGC5rqg9lIE8xwa0fBDTZw/GrOG4Ok8T8tyF5AI2Oef4KSx8zBCGatJ6qFSSU\nQ74JO93movL8a7ajfeZ2wVe6usXc38Zf9mtRBNKMO9vyv5i0qJvMhqUtdacZ\nVgU6aJhFWl0wznojF8fqON/c74oo2HA66tCAJpSNruu5hQjtgGNH6nuiiiQZ\nNLjwBAcoESJzuMZcBj7HD77jixQoAV6S16VzLLJzfHFdcl6vUpBS/ajZ2dS9\n888pL274RyzPJR3f4OjxItvloDZcCnWoWMYXWtoT/TwxV7nkDzgRUxBiybBC\nYBNyJ3OgOis/mjCEK8KbZDZ5W3a5HSEbktzdAkq1iYbwNMhNLZrbCNl132dj\nbBkCF1xSLv1k7NxuHqRlphgFG1lIViyH2VEYcDKJZVjF41a8uMl8BKgkYvE8\nBypFq+XAT9jxnSW4CL3tdVOKKc0HFV0xQ07r/ITRV7bGwGRH3A8q3PxoHwYR\n+qXQMPw6ewUe2Am727C06uGju+tYe7n3qQncDJmRmkBJ1tcc8YHsmEoh1hPW\n1yjW\r\n=c3Px\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed7f32463.0","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/shape":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/button":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/typography":"7.0.0-canary.ed7f32463.0","@material/icon-button":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.ed7f32463.0_1588781321480_0.476766942650942","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/snackbar","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a29b34ba11a80f8f65f80d81451d9c85337ad316","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8135cc085.0.tgz","fileCount":40,"integrity":"sha512-Kkmhx+NP5u/o1dqgybYeuPv/Fl06w4yjxZpzKpOZ8oWOrDUsg4+UvjEAx0FtGpn6krTmX8MLuLbU8tkRU/XCmA==","signatures":[{"sig":"MEQCIEHpEnb8SsTLbhN1NyXaVC9i1pJvp8XfuaWEqdC1beqfAiBCZHxVWja33B1TCzDtWfLlfkkWm462CQ3v19t3efTEcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxZKCRA9TVsSAnZWagAAAgkP/A/ty27lbUj/YlK5X0+3\nOW4GUNdHuDEMG8eBGpU1iI+pDmlSgcaVP5nPih36YFqBccdA4ZSOa/k5Y31G\nlveaLHurZXxkf2VoS4nm0k51BNV2V62Q/zIMTvxvbTWg1slFeZjI8wq45Kgz\njeffxVj4aZmTeVNV3/M2AsCZOgXTunLesEEQs8TXa/707DPHQ4TGa95kokrN\n8tZhw/fnThqvlOqYK/4JJyrdnyBAnn/zxfe39EtsKVliVPpm0ZwCOlLuaHzN\nAHyUO4AlQbqcxsKJL5JDTqxEXSgY25/FrW47Zrx5G47BdRjgVm4xv2PJ5F4l\noC5tO/OuMVIii1DD3Z5p6WIHP1z+wbU4RjO/HyHWGCwpN+OnGu8PMyH2yzd2\nfoJ/9239fgW2SwOq+Gr/O5piwVzwKcuYuLG0MvAnLngxmiW6DkhKRU4Fk3XY\nfk7D87RU/i/7cEzlv2F9YUriVeftxVuVrsgZv2iMFJL3ATgI3RJm+HMv3i7t\nMHGZwVE5h7DgPglPLVytcOvuSpOzyT54m5uoLiALRGBQHzCv1kxdEZAHMM+0\n0YCGCB/RcQE4mjgQthcWT047JXiQoqgBUSZNe30xMInHBAYALDX5VBw+ZtPx\nzMZHEWZK5ceLkGlGgEwwgKsvJed4M7vfAw2fIId1x3/qaytPWIlkcbzvgLhv\nyVjF\r\n=pHlx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8135cc085.0","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/shape":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/button":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/typography":"7.0.0-canary.8135cc085.0","@material/icon-button":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8135cc085.0_1588794954390_0.8777203203764401","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/snackbar","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5a854693652041fff3a4dd17a17f4a2b032fd1f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.deb212de4.0.tgz","fileCount":40,"integrity":"sha512-gR9g1I7Knop4RnQ/B4TdyirPWBTWoHCTHU7f5duiXFQnzUjln9rbq0/SHLBnjLVaMno9btX22ZUr7WVwSn6ZJw==","signatures":[{"sig":"MEUCIBL8fhPmEZ2GweiJCuPz5DCnEHmwFF5HDAn/G12ucEbgAiEAxicVthA5yva4EDqwlWSHTfAL0vvzH5lsM7DhUso5pEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfzCRA9TVsSAnZWagAAzIsQAIEKX1PTqmp1Cw0vVtC7\nhjcVmC/qzPuWofvPwBBuqzfrE0reI7gRVGcK2jpve1FLOZDih0FKyR00WzjS\n+3g5X1yNF8IqDE0MsqRY/RjLoRDYmDo29bNmAflLpUgPD9XJ4zVgDpQLm4Os\nRRE0/QJF8ymXjDaQf/8nWdY+EyN6RK0dM42mH7dM3/0P0trQRInWkGko8Kis\nePkGt6uXKd0mBhydR/wgHI6M5k5DXA5LE5gGnwgF4+5mdZAzCKjwL0h0EHFe\nVh2ojUoZ/A1iiGou76Msd4sHlm76MQaHFJs32ckeQRUvwG+Em2DBDcqJFwgp\ndqXZApUWntzGDhJWHj87QWwLuYduz5j7LoS1QG81Wm101NixD982i+4RaI3/\nkk/85hddx3L7p8635qrmxxWmyCyYRrbS0PRSfvymjPnp+a/ui6wll+swmPSz\nnE7pRL732EEUTUZiWbdKeqToimRY0gGdM7o1ZnKbLvnpd1fYEzap5Z4zOyeT\ntPiNUnb1My1J+R8q4qT9ePVSg6NAq2QSGt2vk8rUdI722WCCn6NvjgTecOo8\nJVn2GNFMFwgUw9QDjCStPz1xOPkc4z69fIFBw5YDYvvqn88ANw8eNmfnxopm\nIx4rat/+aq40pdfmvSVnHTTMFyoByscazYxzScVsMgXkrhOaCpO7+mir77jJ\nLR/u\r\n=xbdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.deb212de4.0","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/shape":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/button":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/typography":"7.0.0-canary.deb212de4.0","@material/icon-button":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.deb212de4.0_1588803570705_0.013626994489599475","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/snackbar","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"388e3eb5897373369584880a18440d0f7fcc2770","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.f83e00898.0.tgz","fileCount":40,"integrity":"sha512-uCiie+MDg26OD6Q41BQuyUd6pN2kevOtjciQVYIEQ9Wy1V/L7E/AGpFdAbToUHEWJf0v4M/tb+/ffyhuS9S52Q==","signatures":[{"sig":"MEUCIQCqTus0Qs9R4LXoyzF6+yIBXlVT4g0ll6Bg739dOzuPNgIgKQbNiAq4FIquubAcx5oFVQXfYiHnGkNB62W9V3+Puac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDxHCRA9TVsSAnZWagAADckP/1fouQVncKuKWxIZ5QMA\nkaRDjji2e5eO13lmHfbijoHEwdoFmq9RjfV6VjGdbNMROwaDWK4avzb4zyvL\nBtOCMcEaGsBIutGRXNBTsue98sx3cAt8gdH5bt4tNTeQ94TKJttCUPNEiZy4\nuHzduRF2goySxnb/qDL1fadqr/VQWnF3H6KbdpKUiRBvppp202f6AJloVVnx\nOYSQjjIFUQAjmxpZrkFTWpT2C58eT0x/yS/Dfb5H1E3fFjdBnWix2H++JGJb\nOntQDumncdjo0LRifmrmvL7L5JbZfXN1ebjzDo/5UKplIT4PleNEyek6Xxsv\ng5Vz+uq1UvoTIsHO7SWyNnm2OUDlgyEieKDp6G3bQ4j4wWL5bHMwsSXDX+eQ\nGAZylEqO6qXcXZYHadhrfR0PHTCFFdUdOMEgHFwUeiY0vwwSRwIuZBiFl1Mj\njB96YN72QtHVbCtL7vGvbY0gfB0jN9liwfPpaolGtNvCmrNII54tKsFrk6eh\nBa/G9Y+kcAzK0/qKjjQfWC4oTF8RDFS+5Niuo8VndHpszZZcztmXsZav/jDQ\nYDlAX/eqJesKOKOFwhoX0XhQ2eFS8oXi3rwAILZDBcw+aFe70453xjArnmWw\nGo6Rrdr6OHJ26zNEltInmeOYkA1/PK85xx51w3svkdJtozshYZI3Dy9ntwHF\nBw+B\r\n=ujTO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f83e00898.0","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/shape":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/button":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/typography":"7.0.0-canary.f83e00898.0","@material/icon-button":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.f83e00898.0_1588870215395_0.7172513994306808","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/snackbar","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ab0e4f7935f42f7b2cb98c0888d2eba8be35bca","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.047e6b337.0.tgz","fileCount":40,"integrity":"sha512-98IrzD9rb0ssKCeJeYsYtZB/HHCtxfWbH1tB60M1xs/IPi6owldsE6XvAn+qbgaj33fRFkR0+/rueuVFqKOY9g==","signatures":[{"sig":"MEYCIQCslCXEZoSOv/Vux6yww1Bv4+iMHUTk/cZrFZmfdUHj8gIhAMjHg5iISv85qOtU4pra9x+6L+157UZIIOxON+c8e8Na","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetadRCRA9TVsSAnZWagAA8osP/ixh2QKOCeM9oeEZ/vs3\nnhGwuoAF6WS4QuqgXnK0Ixi+yC0dNCn8nUvD/SQgnyPvJ7weN7c8yiY/V3Hu\n8QpQXiHAZmj+agLp2vTik0HEJGuJ+G4YP/wdh+42ysREo/di5r4dJSVWmPEp\nVtI3XezzCDpAJ1yzBy1hcbZcjWeUNFifw41i4oPtzPP1r0PYoV9ezVMrlzwv\n3nBa5XzG7ksbfEZgwqhAuDps7VA53mqyyXHOEi9DtDYw5CLP3thPWGecLGps\nBKFQr+nVpA0AyiSHNrUPKv4+qLBnyjrzos8G8JX5Z8HHkpvsu1Ew3u1Yu6pW\n/uxTSy2wnzdzvamonNfOsemBMGI7Hp2CrHjUNtUWmG5LhemSHc2kmFaQGcM6\nYQLIPcy1micyFTRKo+XC9ukvS/APyXcilguYy0X6HLaz+uVcSbIsXTUZ5Z2v\nQ5Euhoh3VSMluLK0v/gC8hkBlJ3C9vDbayFpBx8ORsgbl30aNqzXW7S1Mc5b\niylhSyWrF12gtzXN3IRj+bdv1hKybIAT+9n0l3X81+evJR2WMc7jsCBPO9gI\nBN44BOmZr0zCwuWoJ70lAC7rhfIwwCTYg6dtR3ovc3wK8RC/Si8uOMxSYJKy\nPx6zY9V6FxC+Y0mhPW4t1AvvsrLgMUWxoAhJK94RLQHVh/y3Kp98WrBoLDhB\nlwkJ\r\n=JwxQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.047e6b337.0","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/shape":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/button":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/typography":"7.0.0-canary.047e6b337.0","@material/icon-button":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.047e6b337.0_1588963153109_0.44797860609864193","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/snackbar","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef4a5864d82e82359c6d1e8aa0775c001ac87e3c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.119e21426.0.tgz","fileCount":40,"integrity":"sha512-4M7ONCHzF+0AnxLIcm+uAS4oOqqsU4fwMZqC0WF/oN2rsx1hY14k+YWsmkNaBllUgV7nrC7Aps4sJ/Sc1zWnGg==","signatures":[{"sig":"MEQCIFaU7fzfzGrl7b/c1pf9j1cGE7CZKP6XL4hNcLjR5S/tAiAcO0xt47DnHkRhylk9/qPmmuVll8WIgvr8uK+kK10XTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+8CRA9TVsSAnZWagAA79oQAKLI6CbX7yCZqZ6rWCwa\n+WeYdetAHP1pQubsRth/OcO9YyXYdNhXd8ZLkZtERehnVKVxeLDKekk9Pwj3\nh5FBu4ed/lsYFbKaLjOCGq0KlP+OMvLDsQKEjjZWQpx+axRHMGc+1/z1/v94\nJSdXC19uET91/ecvb0rAsU1ZXHRRAc3O0ajV50rDuiExBzR1A1Ru4u3/ytPW\nmSen8j9At3pnUKgnIijhStxeEhJJ0DZ8SO2x1D6qoAMBNsJ7W0a2Itwv2pt6\nJZGAdN7lRphJm/enUxtT8LeoZ0xeg34PAXVnQ+UTt/mb7FbR5pYHcuU3/KVs\nlw8MSygVnJUso+EQ/0QN4fizRm9zjqG7z7uXmEPxQhG81tLBZf0F/tIi9yTf\nkJX5c7URFTBZcepY6lti0UcwdK4d8dcmilZPTKcK0rKfpuhvBSjvcxQOIU3o\nkNpOWfifg5wGKK9Ywf0V76EgaPaMMAgGgjz1m+ETmu21ISUegDXoAHb/sgN1\nMa5Fah/eYRRNhgKoW6I0wwtioTioXDy9kz/vLeytxRHOdX29uE6kilViUKzB\n9Eqsns3bDI5/mBdEkZ0cJb65EmFwEDY2kAc1IqkiUEcyBZk2fr/enBtRX0Ea\nNyOwPms3wPARzeEZqiT7P42NVpJhNA78QKULC3kciKFAxCY5oWOE2607dfi8\n1vW1\r\n=OZgd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.119e21426.0","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/shape":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/button":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/typography":"7.0.0-canary.119e21426.0","@material/icon-button":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.119e21426.0_1588969404180_0.2071493382945906","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/snackbar","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45af5d0c15816d2fc2d39ce2e632d3ee8604fcc4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.2f052d824.0.tgz","fileCount":40,"integrity":"sha512-5YfirBqUyE7zEk1x4mI86V352nvFu4c7CJUOuEhnU73g/SR83bXEFIo8BTJAq0IWEDl7dAZNiDiN9/q0aHczbw==","signatures":[{"sig":"MEUCIB4guk7jrDzHCXrmF+1QT7sYxbT18m5RyVQxu9hqEYPzAiEAtx2+YJ0w3VKC2IX6NaZFHhUPz9L4xHJ7oI5D+p4r9ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcpBCRA9TVsSAnZWagAADI4P/1n9P6LzPp/jkZVHYGWI\nCQis3KD72Lgg00CkACNXrdq/FwelUBuV2Vf4wnmHkv74oEB7ZWbbbRS/BP0o\nIXBg7EWReqTLlCS/wp9sCai3weCtK8phtYN7yQIHkCLR72jX/fzd9GB2BDi7\naYfL/ZnvGD58S87yW/uLo17JYOjKCkl9BhZ+6nrO7500ZCaZYrJU6iBm8x3X\njW3Rl8OalxVfJN8txRmep9Oq8bUEJmRRlq36kYwsX2k7Dd7GTqNbes3hP9vE\njPTkWNA60aGiRraPt5pyIO9RfPLMY9ERfnUPaqRNTvFefYmQdrK7/OrfGvfC\nzUUI7oWYvvCze3pZlOi9lmOfZxBXYC7XssR0zbW6Exhq/cjHPLVhQWOx74aE\nFev97qSkRdQTBIZ03dfJ3wgw9Bp98XtccQjMqkHM5aYlPTW0Q1yOtKXUYU6K\nphrViNRzQXI64PsP9Dk5kiFJYG0bS9pxn2AujaS/nPJcD9BKI4Fw0wbL0Uiy\nSpSHHi6LrRSQDP3E91Pwu1PwqqwIZQ3tKnvuIIxFpIDzPvMhpIHbYfnw4d+W\ns1EIbrs1KVKD9+SStjiPJoalIiA3XgKU1wSjewt/VTab5wlGc0MoqgF8IZ5P\n5/9TRQUuHQdaPBrTx57qu8nw96V6tHwNt5irVVKSFqlksnj2aLZQyTXSFFLd\n2VGJ\r\n=0gEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/shape":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/button":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/typography":"7.0.0-canary.2f052d824.0","@material/icon-button":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.2f052d824.0_1588972096973_0.19571616001532854","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/snackbar","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"484dfe4b8ddd491d7e68e3c3e4f327c7a671139a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.e84444387.0.tgz","fileCount":40,"integrity":"sha512-6GY6QFcSJ1XPcaJKB4lF5WguUqcWSebLy/qLiN76cyNyevAbJprCY4x+399isqjr32gTyqscz7o0WXv3m1b7Vg==","signatures":[{"sig":"MEUCIDKKZndpiWkskA3aU1bPaUjJANWNurPvD8pfNLuWwZrNAiEAj77SE/Z4nH+fPbUAAncrwJmMlBd23XKc5cBJnzYRv4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/nCRA9TVsSAnZWagAA8yUQAIzEnyvW6c4ofCh/50tV\ntnb6AiakQb36+mVSfHHW9adeZ7J+FE2g+I+cnlw25LWeEa/qta9ImmQDUekS\nMr0gQr3YBWXfH8cDAfexJdSM3a5GZVzUL3ishglroXo4QtjmPvmo1sepIseQ\njWkb8PzE6JCcnWGs6wjcpqr9X4XUeZ59MfBIhe0McQo5uu8nt8G9JEK9sSQ0\nmWkgh+EWFHZYQ/q1MXKP+pY5ZYeJNwLDziSWLKFv3sySNUbzCYa1wmLvKSMR\nB9iCIE9LM/XeDqnCckz/IqciJVVA9p8N8MphJpB2DGYVjbpFek3THCNUTtCn\ntEsEW+eQJ6UrnXzzD9yhi3kz0MoJHCHh7nmaiaxPiK6mF5FTLLSVKlMuhF2j\n8Z3iHQeUDRMaPPLJim+AiMyJf7R3FawoF4abQ93aVKakPEe+xK9v6NcEIfOs\nzIiEIVVPN+/pVPuszSAuwlKmnFKwB6gzGewqyX18RVTUdaa58QwG1/jCHKRP\nAWeGMolRyYoRDg0y+7kEjm+LJpmdmAVpjnzl5m1f4a5pkwm2oJjtaAcs7kND\n3wsBtHrw+exTyaEYljqnTSAhyony1FP8Mo88RGHaRGi/SLPfLUyGlyOuGu5N\ndBGLgMZ6mnQghGdOaSgRSkulWkWk4Mu7HysIiGpubRyqyeg1FGC6vTU71Y+B\nHfos\r\n=Sp6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e84444387.0","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/shape":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/button":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/typography":"7.0.0-canary.e84444387.0","@material/icon-button":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.e84444387.0_1588973542480_0.7272568161348034","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/snackbar","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caf21fd08638a1c9c70ad28f834195e0f420585b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.893eb1876.0.tgz","fileCount":40,"integrity":"sha512-/U2YYT7YC5NT3D0EbgRDF1vY8k2TiDtTvqRi/0MnCdSS9viY2Qqyfjoaj+Kx8rTAGOIo1aLoUj+Vq8NjbpHXow==","signatures":[{"sig":"MEQCIHlogdM0diyisBov9sISKgcAEWHQeJrWYnG0YxA3yqmQAiBUTRX2yUiDt478nERJ+hCMBpYivvZli/OigKjjrw6GQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV2rCRA9TVsSAnZWagAAuUgP+QC8fk/RsxjZY0q/86gg\noejHCPuo7DjPE8wAhJEpOrE8eqGH6P+ERrAldNiS5Mt6+nCAPoSDzgf6lzQR\nWQReBIHu+vrnQfEXpoBjydUEP7qx8eHrCH/M7QemA4mo8rMR1TkiyKneLR+C\n6muvaLsTSyDRKCSWhpPe+QRYR/u1SYFdDmxGs0Je3eY0L9NKZ41nQlk7X2/W\nntvHgtDKwGy2MmvbCnEzIZ34xwNs6/nvTZ+Cx1Ib/RcFDYUSBAWB5PppoQqu\na2FcROcsuabuGzFKS+xHZaC7LRk8bqeloq9ctm8Z/BYLJ/nO2jMTXQtuwjdL\nAGc+DQK9AGOOe718W1mmW+zDfPgvXUmeYzGI7TF2G0Pw98RgkHXSFrb1r0Ob\nDRCUV3nq0Eya9y23IdJ+wr6FFNrrn5N3Vxu5NSRM7c39O8n16YyoZpT25rlG\nESD8Dhph5PuYlN+5OJdlPePF/HFOJEC5ewECJzo5Qe76f+x1hJ9AAWYO2gCJ\nytQCSHiwwMsjzmQjX+XmWIKrx6AZSNc+eC29/6RkJ5nBD8Ip4rKwfd9MDiBt\nLxwPKEK0FudLGNg+X1hgnVK+RteSmwYS50Ds9oRK8i9TQhqdj+b5P/9cxWSe\n5bd2lvIqIX/ENNN0WEXWBQp+TPtCrAfzBCHogs6Q/dZElzeimb06c3AAghOE\nKuSW\r\n=xCha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.893eb1876.0","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/shape":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/button":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/typography":"7.0.0-canary.893eb1876.0","@material/icon-button":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.893eb1876.0_1589206443483_0.8928548340994393","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/snackbar","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7f8b34236a099064610ae0ad57ea660b3489339","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.a5aeb3001.0.tgz","fileCount":40,"integrity":"sha512-sb5ry4lhUCnT0Rd/PgxGp3o2ygkq98r7aQRJMVJ4I3Vq/xwaVZl9u/0jTXxCqxFu2JtBE/Nf5xLuTHhE0gDWFw==","signatures":[{"sig":"MEUCIHHZHts/lgktUJL+tgjwB4u+9QNkaS11tya05vMH3pwqAiEA4oZoig4bK00ZD4TJmu5lfv8vLfGPN5kSB5Ka/MbNuK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWF1CRA9TVsSAnZWagAAeSEP/29GKHSW6OqDypgMjzd7\nz9KBpdjsnlLxBPpLEC7VOHB2sNeHzar9BFtVjoiePUbz/FCNehl1V4XnY2A0\nPp8q5LZybzSxmPajkutVgjF3htnyv6O2KRjLbaGT8E11sSmNUXE34UaB67mR\ny9v+qRNm1KOcNu4eiDXpDV9oIcT8cavMRQfeLU5M5qOt/Ah5O5On3Ufort0C\nI+AGzjKon3Mo+cnLcQykkNqfUQOQMvPk1pDRgrnWI5exmiMp3AD6+MJTPr2O\n9J2GdONGSrHQnBElPBzJX1wnnVykGDSrQpVDmrzeXCGBGCOl369we7+wTkEo\nz/S/Dk83NR9xuMVQkRG9JdXQW0WTm324cki38pHCdFhG/cBnuCzSfOPwUbCu\nwljNzshIn5F4K5XVUtkTmFfsQjBlCmVRsf9+7URg1PbI4bIw8hEWuNlmABsl\nWYu9UODDht3cxoo97Hdom2Y26z1b/Paur2JHNes69VIBaxuU6jiJmf+Ds1cR\nBWEokHlSxhfQ2dy5FX39ORMNIR3N97hVXhk5OTAsOcOk0zUE6wDFoN3nxPZJ\nLjQh1+ZDzvS8I9+NX+g/4zVrHBBhto1UXTQzjBDbP+bsC/QRaXDsH/1ZP8IJ\ne3m7+VPLtF3FsroFpuWd+Ea4NxC9HzBCJ0DG3i9wLAnTGo8I28x9lcUHm3JK\n1crF\r\n=pYDd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a5aeb3001.0","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/shape":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/button":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/typography":"7.0.0-canary.a5aeb3001.0","@material/icon-button":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.a5aeb3001.0_1589207412827_0.7185385231911237","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/snackbar","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7bda0c43fdc99419e849bd6cc7500cb3b4410a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.610c68d97.0.tgz","fileCount":40,"integrity":"sha512-1x8S5BeIVJXiMQgV0CbjapTRy75KNMZ5flIolCmZw0IS20gzvZtyjDe9Vaj6Dr6qNEs2dXrLko/ZA6lmlCxKQA==","signatures":[{"sig":"MEUCIQD/latNB6PaiiGfCRhCrqnI+NeYzu/8lJ+3c6iINj/yhAIgTk7wLhtpD74I/2DmAmBRC5Q9R2E4Gsp6ZJ593/O0iOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaiPCRA9TVsSAnZWagAAao0P/jPTKPVos8qt/Ibys/7E\n/sfqarZFrZHmRut+DzSTD3evvGLxoiB4nz2rrgZuA+F9MAXAe9FX+0ceK6Js\nl5+F5gY7rT5xBSmFIOFMnJ6tUEGCzljtYAWPNv+Og6CahTgbG5Uzz/ajN33z\ngGP4qJ48vow3/O4PISgM9Tq+LfJS+cm28EBRt2aycoJ1DFRO9dWVbi/WzpSb\nvs67VdlH57lD4SZRQIVISBX3SbuhshgzgAy5b1aFdf6O7i0eT51Ad25Fi46Y\nwNcYBxtdGh9xk161kHne6lz3f6uLiNf9fzq2C7dx2OoyQBrvFTxmF7da0Bai\nXlEYbBJFarGoQVLtHrSY0sBVV5pm/n+QTOVHpbJbw0Q6RkbwVEo/SyIDn5jZ\nQWh+Uh9ltt46+cFU647ZQCNtBGmU1tGk2BI/qcXmzXwr9DIpbMfM3iG0WKDM\noeIHIj/gNW1JRi960zBLfUUkVNuhkgTQHbhDELvVljTAfOCHvWM60wU/Q3xe\n5LlrL3E4gpRZ8tpBahuB1YWzxUyegKB8kChCkeXD6NceOKq3c5iWxeKPs+Ll\nHVYCHWiIHS5fTVRUgBvPtYkufQkf00kWzPlJeFFv4ImnbFnoi7Hrr5Qdcq9z\nK15ASK5TO1cr0qhwseNoW49yLTiai2ENje7+nnGTmY6oV+SoNUu4bdnDSu1U\ncvp3\r\n=AAdO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.610c68d97.0","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/shape":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/button":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/typography":"7.0.0-canary.610c68d97.0","@material/icon-button":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.610c68d97.0_1589225615332_0.643072259209966","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/snackbar","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ae48b80bdb5ed685dbca37d7e62281839cdbea0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.ed52af767.0.tgz","fileCount":40,"integrity":"sha512-IOk2Xjp+h4Z44L79WhVTArUjIX7cNxRKaRGK0n0mTDwpXzcJsTpTnErtaB0U6ecjK8SxNYBVnBfYEjElLzMRvQ==","signatures":[{"sig":"MEUCIQCsHX5ewaoJhiTUoXu1Q8Bzn2ovAqFr2dyIwH/edcyZigIgc46cXNRF7W1u7Ha1alHI91EbzI+08Hr7Lw8GLYOxMyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubVUCRA9TVsSAnZWagAAoD8P/R3OCTgwBAawLzTfm57B\nUmBCo7FU5f3JyWftM8mmr69lM03jQUlzInhL3WuigKUSKi8HcghjPs5utSQg\n5hNuKghvKdfs47/GwqMYDYmIAL4n2QmtbOqbhhHtqhtVnNA8Y48Ii8XSXTsu\nKA4M54bfoBTFaZuJ0wIYuhfg3H7pN1ye7DG7f56OQI2eFLsevQCPuSH4nJbL\nNljXUMx0p5sjoodHZPln7oZbA5ag3OCqgsjZHke+lvD+MFRpBprSDIX29nzk\nTsVyIFBpsqsJ6PiiHzgIXg5Qe2cnIMESdQZ5yK1ipv1iX4FvOP6CT9w4OeQy\nJyZGvXqUtk741xoNLjsB1YKX1K6DgjkTNYQGZFyxSpU5xcsA2+BtSTvGYtMB\n+L6RFYlmudPxzFt5+XJgvz4CXkPkN+T5g2XYX/U60kMwm5i5BV99ESz80dgl\nlWCahWXDCe6dJaEWZ1doH5+cd0fj3QcQE9pfMqc6UY1aDVAlAQ/f1easFfJl\nwihGgeIoxaz0dvt0t/fnkHM4N96SJP5hbJWUXQORgYdf5ks1srCtgHCjNDrU\nAaOeGRYtC4VYbR1WO1vpGIcvi5Gl9ohy0oedAko9Gb/BvhzXPSz3n5QzGkRf\nZW0+2vsnT7ODrSRBzbTrm3P/oWtiQHWPY26vAdRpHgwdR+oqT0POXfQsLiDS\ni1AE\r\n=PK2g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed52af767.0","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/shape":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/button":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/typography":"7.0.0-canary.ed52af767.0","@material/icon-button":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.ed52af767.0_1589228884245_0.9124415503099608","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/snackbar","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf8447d3390e8b343fb577e1fabbff27277ab255","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.058cfd23c.0.tgz","fileCount":40,"integrity":"sha512-J9LGJDvQBN0XKoqpXyoInnA8jiqwisbOLeTiXMSC717wTD8IsfFpkDNK47DZlBWGqzmFS2/dutJbyQLvlbcLtw==","signatures":[{"sig":"MEUCIQDwLsHw2UJ3C90CDRy/4W58YNnm/ynTN0SjP11YYXRtZgIgcsZCc6YDrcveEtzBbQdtVGfNMgG51b1bcpJkkM+OsjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucLkCRA9TVsSAnZWagAAPRAP/2HLzfSfSGCo16XIoSnP\n4szCx28TWO8nRoEOqfOKE2pDSBAif7sx62Rdnp297TuwT1gXoBycuwnlP6lg\nsRtdxfy6ZZFX+Xwj24fDFb6WRfHE9m1LuFGeBIvMOXPcjv2kVMNAHw96DPyL\nC0XWmUTX4jGkrY7+wTmv4yDEzkgQ5uRb+btxkKyu7uogS8SICdcqGKgyPX8A\n1P/m9RGNs9kX78gnj+45SlyiWVed707GA+nkpkVUv5QUQxeBuQpkNWr+3kHr\nERGLyNWlfWlcEBvWiMN1Lf4Uhn0RyqzE/Ou7ZbTYYgpdXinsE8zGi8jaVE4N\nd7xrpzAaLK5Z9iXX8Sn1eBwfxXtyR4JpaSckmXHPC4VUgUV69BxHCom38x54\nlN4U353zaokHDHWw2oAfh9/w60HwHFKeBZR+VJBVUtal3haLDslIk13xv8QO\nsxnN7MC3OH/XTLclh1KfGvbeXrmBSph/YlvEs5qvHc8XueU3pzwu7B0jNCRU\nbkpoXyk3Joltweev+IVmCAWGlNJ5ieHh9vLL9g9q4lghHiv6L61Z8jWOkVJV\nObckF3F8a4UjegdmoB1wCVdxfP3ZO6KgL+JS69D6nRzm7k28b9ei7ITiHF6h\nSaejPDn9Ap/ZexE/k45gSSBA33G0RyWWZZRkQ2eYQqgG52vt/zxFmaJNlUwr\nr4Y3\r\n=qGfZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.058cfd23c.0","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/shape":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/button":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/typography":"7.0.0-canary.058cfd23c.0","@material/icon-button":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.058cfd23c.0_1589232356081_0.7641485548649629","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/snackbar","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3932aa6d8b61e5ed1632f0379b707b92b70b168e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.0a371b4fe.0.tgz","fileCount":40,"integrity":"sha512-Enq28PQeee900t2oOcswPoFepfUfaoVGaGLVPeCvL5FV/8YuXTzq3ytEg3jl7yT7SnR67/9zz8cGQgRFjUDnLw==","signatures":[{"sig":"MEQCIGaXT3rdkHhJEzFZVtRYkGqB5FWAC3SDFvPffaNG2CJHAiB9mom3GO71O2ecHPTBbZPgbbUr7+dkdPwyTw+Vkepr8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy7pCRA9TVsSAnZWagAAPKMP/18vUH/xWmkYKSycnVNa\nNJFd9XDSUrhXeYBrfucKJiC1GZfcoaMFxxPlSD6hn/Uewe61mTo54Sn/B831\nKgtNOddvGNKLNI5NRG+nvHgq7jS8eDWVsXMylBxPBOUmtjkedxJFdh124K2l\nJ+XDdbh3sWketlFn/SU1VrqTkh/Ug/3FNe2Cr2oOlMspMpipfG2UpMVFcHEB\nMKmg0ewBreSGtBRNG5N0LRwaZ2NKRPDdO+5qJKgodbGwmtal69R5dGX9ZhnR\nCtPvwmvOCo0f6fsskm2ZAVhnAOQSJKE/Rw6Gib0ugPifJYICn+qWFLjSyU3Z\nsulHPLqNDNnSUQdpbAYyHvm7oI8WhpIBori69ZQfpJyESvJ/wjnwN7R56mnq\nNDo3BCVcLrbfrcogL4/mMfAvadC62iYwNAuy+rCnsPHx+SrFPqNhivY7KDJt\nRscXKXxjpbvzdnQoOtFA/wfeKgPOMJ3HZjgejwjOXpaKjW1aQa+GP3cCL24X\nEc+5gXnJnniuUeTja1EsYCzj3v1Hoqo9/e4TlkJh5vF/EVR5t3zlI7V2NPM0\nY/YUCqHI3d0UVP8GLsWejX1zfD8HY3Y6JmjP4GU2GDgK0LU0ra0FU2uPlO5W\nNy3ubyUWwB7gCTHwJD1IRwJb2lGpcdmS8WwwihnEcp2Trqw2EvwmJqmB/QSx\nfLXk\r\n=Nnra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a371b4fe.0","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/shape":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/button":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/typography":"7.0.0-canary.0a371b4fe.0","@material/icon-button":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.0a371b4fe.0_1589325544744_0.9092790292098969","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/snackbar","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7e01af2820e8755ed7ad9c94d9a4d5c677cd48f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.2139200b3.0.tgz","fileCount":40,"integrity":"sha512-Jq0K7jWyyX6bENSKDJ+23lMnC0EgcM8Jpl2EipcZLCLmoaFVU4mK0dBlLvAHOFTUxLZVUbAz1xpXazo/Z/OXhA==","signatures":[{"sig":"MEUCIQDEOX1zydJdMuH4xZhWCNNrPsOpjW80DHH5txpDwjr+MwIgNaTXzkldOKdnPmWPCOzNvjlMsKWbHx/lr4711Gtyi5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAitCRA9TVsSAnZWagAAGWcP/itnK2dzB+JfDVc3D7/a\nwNr12Rtyv3EY7Svl+7hUgWxTvDqVn2VLeLaa29eHOPXtBqJklbWXKNTm52oT\nEaeZYl2o0OmM+WixVlu3DEK+ravDz5B4lWaiyure0orMeqguPeJYRjhXYHwY\nTXs4ByL8IAbu2faPAtpC0bnr8tGoMq+WMOEE8rmXx5z/PnhJLqLy64bSVkIK\nVNwJGWX9RXGL5CTFFWmTNvZ+yTVvbGMsEDq7ONKogIYawaE3CkJOfsRvPd1M\n+q08PTY35ARNqGDefQEIiF2MX5baXAg235Y3QPl+giBl0n5L+jarYXca/PSc\nTp49uUB1E0XKKW8c1KUFrjs6Duyo2AcJXTOQ/tdAnAqib1cueafUghurTw9g\nSaOvHOTr5JQuolmQE6MOdM7wgf8tHtmsuOvinRwgcx4boKZa0NUhDY92xXje\nKimsoWndUOeem00YWeKlDZJr5ju6GD3Sx9N6lQyx8Fkg+YEg2o1xqJZQNy3G\n6C9vbGFGWG7qZLlA/4U821lwqEBHkFjpKiUNRo+rCXxtFvyW8uWn6UtG053C\nqoWI+LhECy5b6PDeJ7fmwu71jq84C1HrHejOs/y92AOjSc2z/6XlYZGbZkFc\nkdcXI4TrpSiYvu9BoH6kPyth0KvBrphA/2awRQaYoVAYHGFEA4iiTsVqK62t\nSees\r\n=mKLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2139200b3.0","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/shape":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/button":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/typography":"7.0.0-canary.2139200b3.0","@material/icon-button":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.2139200b3.0_1589381292588_0.20057411258011304","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/snackbar","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41b28bd5d47082e366eaef119d3ea670e2251f3c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.744d751a0.0.tgz","fileCount":40,"integrity":"sha512-+zYL1l2VbOj42T8gNmLcJNApCnW+mZAHT17CILJ0aOy8l1m0P5bCvUKstjjCNgd1qlbW//+H4UPQF306taALQA==","signatures":[{"sig":"MEUCIQCLDGgekaWaht0Hji32UQnBbsLrJ9QJcnIbr0Gu2+EXDAIgFHaPBNQtV/iB4bMZe1CfcHjvQh1tlwylYh0PJd42Lp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMx5CRA9TVsSAnZWagAAvj4P/2EIyQO6dZNC93FU4TPi\n7OlZL3lsspL3PU32KtW1aWaTq3dyf9bNg8xHgApq2gysUlxOSvHSCp7xHUIw\nj5reVZSsKwZyO5yFGc+dscNLIx24VyKugNtvaJ+43Lw9ZhSEUvf9CznVP9Hh\nDXz5bHAH5hix1tkoKZfA+mX26owZnqXnyHsaL6F6T278ML+3TNaMt9NM+0U8\ne37weSIxFVXVMBWtTiqXQxkgIzDH4siO9DeYv6BjV3brux3GO3BKiyFDoVH1\nk8RivMbrPJHGkFQRb2RBWQHBIswSeEal85p6XH/pjrhFWI/iBCgF+XyJQyto\nOciqTIuplYAUj4QE3VWUmWKTYZ6YYdgl0h77+sJPVCA1JClphYJEiWB6lQFs\ngQlVz78YPpzmx262cDjd91aFP2LlZdgeGe5G9Jjde21imtptgsL9qq/5J7nP\n/NYfArf/9JW6TvWJC87jnSD6j0b+Olti+9A4t3cjbIn8ZxzEiAMQcJ5adugE\nFrIddvtx9zHUniRSwYRKbbXaar0JgZ2etJ+O9Etj+D5WxvY0BwWTcoSYipKJ\nIrn0B6zobqQ5R2dN9AXWCH0/y5OvWGLi0B/LZ9yEg48VDcDz5oslwkguWzTh\nABEA/8CjxdLMBr62Ihj9KrOEGGm6GarR7hamk8bE81pENx70pPocDnol5z8O\n2DVE\r\n=OuBB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.744d751a0.0","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/shape":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/button":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/typography":"7.0.0-canary.744d751a0.0","@material/icon-button":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.744d751a0.0_1589431416796_0.9698576493716187","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/snackbar","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f625a63177201f7f3865cc35b7d5b5f67f7cdffc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.ad0c0c103.0.tgz","fileCount":40,"integrity":"sha512-esgUl6mVet/hELyBcNfSCmAUXMfW7yWhKlFdWjzZcX2NfTcSKgaA3jA0Wf0M8RxE1iujb6H8yN6cGnIgL/ARAA==","signatures":[{"sig":"MEYCIQCFd46hmI8Ev4tTXdtLKkh2CsQseJnh4fLFChcgK2JkiQIhALjSpWyUxT6FOPaliQA5S3+ZGaNuJzk5byfO+Ah2NlBI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVsjCRA9TVsSAnZWagAA6gcQAIAuYEzR9blvNfYNzKDG\nCcOdSCGUWOPW/gnxcNiTFs8mtWKY+DQy4NPk6J3p3OHhzig9ljSTR1ydVMkO\njOVb3doT7kJvQon2brV32m5fI4rIdCNrPxpd4gmkrpfTRRjFOqd6EFepvz0q\n9M6ABizkdVWZo/Z5hkT28MnJwzWDoj8fPgdLFRrb42DyE1hm0tZSpLEQklnc\nCSLtB+nhzxUXWi2T/yxFtOQRBAVXy2apkxgiTscjzUdTknT6tkSsJ5o3q2Vc\nZN235WM6r0ffbJFoc755cNW6lunKBfVBL4ZB9TTQEOez0nEOY5HYsTmSn0GS\nPYES/hoy9rMCGnAoWpYlzKJx5vvwzipW3rgD6Igy7IPtrfgxp/zeF4k3icbW\njbzaaw6csGVCVpGqUljDosTNHj16t0CwE2kGUYBL4QWPq4vptJxbI0vdx907\n2qkoo3zU/3bmr8rnaS7HVABxOUjYe9L1lUzIChNATmkV5C56meNfwP9eUJ7L\nYAwf7zKbZ2vi+t0uq2Uon3SyTV5kQ71CkU8UVwU/zbFQxNW4KE2Cvm3oB8Co\nMY4F+TlqHtGAFzYD9FK3xck8NvrLTKEYnrrcY9z2kGgIXo8ytx6kHS9TJo+G\nsZV21yA5/JcHFw/zg7UvX/AJ2oCACeQs8O1fwZUvfz6cLzmc+9OJXC9cmXkO\nm9gq\r\n=DxjQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ad0c0c103.0","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/shape":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/button":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/typography":"7.0.0-canary.ad0c0c103.0","@material/icon-button":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.ad0c0c103.0_1589467939042_0.7095170287848926","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/snackbar","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdd66871c8e488bbe91bfeac2afbab55f89857ab","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":40,"integrity":"sha512-F2YQpusuraINxWkltR1a63IJuQqqSA2NITqmPTXL6tiR/vmaS4ZWcvrT1ZtXmKGNamkNfqLNATmqgf22TbGjYA==","signatures":[{"sig":"MEUCIA18gNJiMwmUs0fcJt0sr5QiIByp3XWSdfmB/GWtmmcEAiEA+L9Qi1/byHHN84OT/wsU+wpTvbChBTehcrJDPpwD+co=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsvUCRA9TVsSAnZWagAAwR8P/285FlAK0KaPhCR7KVeZ\nbw5vyXRdzQIhLtKO58U5DGemhPKQ+4GXQQY5VttGuOgrSmBLJ2Q2w67GAfqW\nb0FQJ70pxhy9oHaQcK4twk96o65uNL2wEcWgg0ckrWBXzrUQsjiK632KL8VB\nVm3+YQ7Gk60Oi0fd8prgEJdEfH1ThekhDLQmQseuX7AQqpT8cdW7Gd/c8HDm\nV7kmj/BleU2lf3ERP4II5wub/JnwzlLw7+s+1zcnMBxST6v/mApT22bhoheY\nb4ICpQQUvoLJaedRYXlChlAmpMJNtmV8UTnG8nLONBaBhKoNrLXwf21CODC+\nAXE6Snl7ZNGv4oRUrOxZ0CRRZ5YjsBSTjrFQMyEK3oNsNtipS+2cfXG5og60\n53GWrmy1OLqlOZqoJ9zqbHVDVnbET5fvJ/rDFPMOaueJCBOcpWFEypEqQSpK\nll8h1qWUtQNGRDGfey6khJKvYusLEuDs9BtcDnqSRs9Fij/5RsM0ou6vhXnL\n9vnzE59/EaIuhHMRVbsauCckJy3xJB13zNPaLLo+dunXU4GJdZ/9HCxNl0aC\nJqglHgXpQv5pyR4PSozM0VjA2xJ77XhNvchuBjXfbhJHPNIKUIFaP1Vc/OCB\nsZdLi+ohQm26N7dch6Z3u2CgFgRnBoEU3IlINRD/zvD3SaXW5hElqMbvDzCs\nWTkY\r\n=pGud\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/shape":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/button":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/typography":"7.0.0-canary.fd8f8f2b7.0","@material/icon-button":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.fd8f8f2b7.0_1589824467811_0.6746744301490124","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/snackbar","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be45db124d5c22813c23784ab6e1b3b66436aa38","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.730920fbb.0.tgz","fileCount":40,"integrity":"sha512-T6BPNVNA/b3x/IyuMf+NAINMeteuWdmEWvPLG3AkqjqqVJ/LSePrTd+WrFE2VRGPQFe4QIXwI00465WTsZLe7A==","signatures":[{"sig":"MEUCIF+ZR4zlNZZpKYaosIu2iQ1nsLSyTEqBYsedYXLCI0NDAiEAwcA0BnSN8zo+KCTw9AJRgcYH+MH3QGmSpCMw+77inIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuW+CRA9TVsSAnZWagAADzUQAIBwxwNKgBz2C4369OvC\nEEGW34WBOHT1eB0IWbqAOp7rdtQDLgBNpyI64j2olnlTHx6GS6U7IQZSYToz\nK3U8FE91mqt6j9v6IswumFpu1BZz5yHfYy2JvOE6nJmNt92J8LfVYn/7K2tD\nJD0KgoVajawJ+cGo4dCmTc8rWynX+RlZklu5KaKx/tuLGrq3mjgnr3mi1PEG\nSY/F2z73j6oTtJEHuds7M4uNlUQ5PyUivlEX0ZGL1My6QEzciAWi/jAepg9H\nvXuJNrbPPPht48Lc0upy/njvvQ6ujsCmsz/HYTsyN3jYy+cA7NAN5Jc3C2Ty\nmwqu/0WrnwELG23wwB6qeLpkupFt8EG3i2dcZMUvQb2XZGItGMqsq0blSf96\nPbY+Tf9JMSh4zCSDxGOxLzC4qDVfw6n9BmFzbVzKXWcrRlJNeepLVCCBBn81\nTPjlQaW4tCsUJkDHXzknow5ecY10QucG30VdP3t1QrFGxbEktFZGXBhXxp4b\nqppw49iqTJaDRpM/o6yQT/BiIxYH4Fwt1SKap68EWlujP/lpoLTDn3KW780o\nfdzIGWFckPyAPltj6fJ7eAFEZPDdtxKtmLtYMTdzB0xaUS7ev7/D9S3cnyf2\nnSQfvrf0Atlohr6BgXuyVi+5LFyVhYy3u56AtuumbNCRQfPm7P3fHhJCeDFI\nyWB9\r\n=tvx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.730920fbb.0","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/shape":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/button":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/typography":"7.0.0-canary.730920fbb.0","@material/icon-button":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.730920fbb.0_1589831102153_0.9088357736316779","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/snackbar","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28bd9903de47fdaa40a53451b29b94dcb0bb9466","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.bcdad99bb.0.tgz","fileCount":40,"integrity":"sha512-KJUGWAgOasAZctlrE9xFe98jP4ogf+77ptaGoLVU1HxNY14mHbKTjYBNzwHtA/+HpTJZ/Balk6IfTuel7R9z+g==","signatures":[{"sig":"MEQCICWr8PpqYVpynG8ob+y203/o1+694aXnV+VhNBX37gubAiARlvM/hJUFE46Yl1PfLuQgTaiTClVTA6/9WLa9oN4OYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1AdCRA9TVsSAnZWagAAOU4P/0RHJuGLVgEK9f/hm8Wt\ntAHEce/lKuF2CRKV92k4QFo0r5UuJcS/W3a3BRNgQePuI2xqEp2uwGCx9Ayz\nibjmG11RBvYzc/xEkAEjkl55cWH8W6Qx1BmzIA1dXpSJYmh9ot4MvAzgyp4V\ntIT6RzlQ/DMCVPJTkKk4uXhKWCJZqPGcPOb/tN5R9bU2ivkjyhs4zfMczUcc\nO9fgsic3MusazbffdwIwgGUxYbF4PXdU1imqLZA8IkPrU1BGyHQVfM/mGima\ncDxN3w+rvHouu03eJFL1XnZySRUcG58izJ5MochrTgOQkF6rLGp/ym+6fCbF\nwbh2tl11NX696sRXAoZwnsTSnTrrv1KHlt+DCQikDYB3+Tkf01nSdbiuyP4P\ngQKO6eUPtdRhrNwe2rf6VhDMbCtJhXiWprBhHcB1uIFoynrxWS/PqSle+4U2\nLz1hPXhkFs94rSvbVvs6VP7zbSygeQh/St4TjKPI51syEmjVT/fiiRPRYJhJ\nuO4I01lnTe/WWGMlMwtklmDtlK/qEMDXVYNDaVVvamHl/a6py+glfV0wXM+Y\nWxSDYHwG1HckBAIgZ7RHQ706L+UKCWmh9HMgfPHwmEq7vpIAYsnm9QGjecQs\n9V0p0ZrE0ZcvsFMJRV/u0ZKJ+Y/bkKG9VFH9YuXt+odjQlnfFNEiCtjF3vAa\nBFO7\r\n=dE8W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bcdad99bb.0","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/shape":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/button":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/typography":"7.0.0-canary.bcdad99bb.0","@material/icon-button":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.bcdad99bb.0_1589858333065_0.9592016850846108","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/snackbar","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eebcf9852708cb33be022240e051f1bc3287b1f2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.4497b86ed.0.tgz","fileCount":40,"integrity":"sha512-QdqsKlHViV8b3N7d3KsdoeIvaCpBBfVbVw25336kMYPgdt4gcQ8banxi6vbaYrHlz2EcSfyWzJ/e92b94x6hHw==","signatures":[{"sig":"MEUCIQCU3xB/G0+gMzwhWQMLd81ssMJwgMXqYGPYV1QAFt0dXwIgCWDwH55cpZRo6dJDRvq4TFrHfe8Wnfbll4m2RYo3PB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1fJCRA9TVsSAnZWagAACwIP/R1Nt1jd4T0yMM1fXgIc\npgaI8p44xHpCeiE4WIWejK5Xo8EiEV7Oq+2ZO5e7UbG14g41F49dB6PgT7OW\nGX15ok3w9WGtWkP7gfVoMz6aZNnU+raE8xiFKKV2UVvhOKZFFU2NK4WviDh1\nUjAgw35H0MphvTCRZTCaxgnpzzaaJPOJV+9ki2z49ELLVy4xO1Ry52O4rq6b\n7panxFb9VfsWdfbM5FzstV1SGz4pLKg/7vUVYnDV5CzxNxOy3JYc+RgnBhRl\nia18jLw1ZPgf9FB7B/MD7VKlrt23O+zHZwweOw62Q0z4+lqd8/nKPOZ7p4de\n6H6P1OjnYpinW5Lo5bNemyjdDnUu16Q88s1Y/UIZws9+Z7TMVNeanysJZJZP\n8+PWX1h5/gbs2m+3+r/MxYgzDCeJ5J319BaqQiGRzCrTPHhMpWoPHkg60PgR\nFCpyxBAV+imHJmxhXUCVE6rSWWRAr7nt7P9ZlDoDgLGio6adCmoLYLHvK3fV\nUtB1sLPQOVFporeaeuPTvtKl7q4Px3GUi5SAiji08L6enTBGFwkghg6f0DK4\n3ucfgf97k7V/15M7/AyfcHSKO3nk7q46okqC5/V8MSP+irIQjVXtlkctzBdQ\nQ9/YAOU+D8mBMKQ618XfYLjLIk9wi+QJlm/+GqAuyzhdDkOGVYho42wlFkCk\nUq/U\r\n=lds5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4497b86ed.0","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/shape":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/button":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/typography":"7.0.0-canary.4497b86ed.0","@material/icon-button":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.4497b86ed.0_1589860296730_0.31459713834712044","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/snackbar","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fe56a75ee91cec914d07114f34623ac5085da80","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.2e60575da.0.tgz","fileCount":40,"integrity":"sha512-PIWocBaVzIyURpfPJ1t6kqEQgqlYizW0J76IJsEk+aXrkEazGMoEg4PleQqYasSLqp5aT9iUNWf/iMB0B0ZsFw==","signatures":[{"sig":"MEQCIGJdSwOqbPyEoTUrTj8bXOhqDS1ZverhRAGRJjWzxaScAiBXKc8bTlWjl/TL+AVw1Rbv0M+TY+yuD+D4CFhhaiC93Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexATlCRA9TVsSAnZWagAATm0QAKCh4vhZYYZmcSDVNPYC\nna6Rrgl8xYbBYVCiem9PbNpTXxMHEeTz0MMdQigjmvDCSiUXVhPXdAUnBc4s\nZZopr7DNa2ytqqKDZ6cFYzLqqBtQduTXysAZyd/GqWpNhZlSBHJ1aNj2hPHs\n+A6c/7oUTbOIQ+hrHtf9X4JdFe8Rsi/yA5lUldu4xkeXHtOTy24l4DFQqZOm\nycQPNb7b9N1QVoaQQIUCxvanzD8pxlJK7/DznfQgmAsczk38Y6T/d3ZukouZ\nYyExCyY98Vyz+tTvsf46AFCoG2xPYwlsrYMa8kyKY/JASdu/1XmQorlBuuJu\nY9FAJXAdqhwO/eeop0mzrAS7K2Gt9Uv5QF5EL9BPlLRCdVOXB/XYwtlIIzB2\nUn7Lj5PmYbIoKbYgV0f5iFHaFA8RIomgqkn9vMJ2i+nG49E82gYqtRLjNnbg\nilwYeS592tia/duyeYQ79Qm7TDsWIbdwhJMn/Sr0u5/Zqrl9O7J7a0v/fUMy\nsv6PQHMk8Gb02aZK4hSCNpz4eiRoU1OcwaRI9m1gUi5c6Q3+jS3MNya4+QIs\nRaGjff/EMbPBlh6ZLOMy2AlsbKvABF22JyM3XXAn1qdF1Sy+vB8be2EVocs2\nJorHmZEmINQV9vcInhIvr0BBm1sBkzqBHskR+YGI6DsZI6Ak+PI0RRbrbb7z\n+mX8\r\n=3o8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e60575da.0","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/shape":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/button":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/typography":"7.0.0-canary.2e60575da.0","@material/icon-button":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.2e60575da.0_1589904613494_0.5315260574303424","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/snackbar","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda48a0ad483ae00987f799b5eec21b08d662b77","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.e3eacefcc.0.tgz","fileCount":40,"integrity":"sha512-CIJsjIMR9TLWiLiEgMGb5UlIzJQXYPEOTEU5S4ELc6bXbEI8Y4Ya2/UmjqW0ea5LzYDxyPSknUavaFD4SMfy7w==","signatures":[{"sig":"MEUCIBNuXkubEP8tDj4i0XPJkXdr3CGF9s6xnujow/33iTXGAiEAie6mNsL4T9pDKDu3MO+FuRGCgmwpKVoID14SU7bV6vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBm5CRA9TVsSAnZWagAAKbQQAIa6yD5ln7Uco3DPq9vV\neBMjcuIhM/RxybX3ARsKgwy1aX16Z+xJ1pZdQ0afj8mabSdT0fArNVmAJi3C\nf0FDdwq8zumXlkZbLtEuai++AiLpZwavJej8pA7MyDmoQkOKxvLbGP5vT4vd\n7Zri0kUw4C43uRVCml+97cHd1mA4nGkjcJ8NL86ry44G9yRRiGsUMFwMMdAd\nWfrXvLmr+FRVPQrIuxmJlVAsqYlaqhF/ham2ztg6xcLoUwtQKI8px5BB5vYg\nMPZljpV0RuXg0L7pqHT/b5G0AGec3DBhfM9qvWNoH7jjsRYILoZPvr/p0UcQ\n2fxReG41NdJGSUbhY0loJwHrPQh1HYtaN+m/Q1BJ9OWR7pWuSfs2CdQEiGCY\n+JmkDBkhmsq9lw0529T+zYEwskLBhHXHHdYyjQWSqLWFU1YKw2C0S2zBHOK2\nmNQAmukrbFcoVQE88H8UnECuGilFO07quPafhEahISUofqLZnCw9p0Lf4wpi\n3+lMIri2DvkhHrvHd1dqrpAAGqQKiajzSTQxVSni2sXg0cMpkJEAt4djn/Dt\nSdoPlRL317niEwy8SohlpDQOe6TjtgsYytBG6c1izoSoe8gJZd1qKRBXsonj\nq5QteSryLOBFHDBdA7yFdaq6t4HPiCFkZvc83T//60us1+fn1SkR/03u6HbF\nQAp5\r\n=lypM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e3eacefcc.0","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/shape":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/button":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/typography":"7.0.0-canary.e3eacefcc.0","@material/icon-button":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.e3eacefcc.0_1589909944974_0.3583481194057898","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/snackbar","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b91eebb2b8e55daafefc60ff8c45a0ccb55ef82c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b065a4d2b.0.tgz","fileCount":40,"integrity":"sha512-puZwPvlugEN8rTD3ZhTsNwAxyQSvKUFRsMvo0xoqJg8BNPshRNgrN899AG985Kfacl6T/xNebr4gW3I9U7vMlQ==","signatures":[{"sig":"MEYCIQDxn/wPHp7cIl3hQYRs2KeTpmCLVQBoEq8jWmR6WHQ5nQIhAODTtw0TarYow2g2C2NrxElEZCNQg1CU3lck4F4eWRHk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUC7CRA9TVsSAnZWagAADwwP/AkIQyMDRRmAtFpQ+kfI\ndnQwwqcSPOSv/sorRJsUJXTCsbsxYG7jgPJ0+TRWxJHW9939F3kuJ8oiBBYR\nLaPxhgXyl9JkR+e2Zv+mvnjOuwKsRt3MTfleLtQiFbkQqLDaRZIu9BphS97s\n1Uk5ITmkQpqonCK1NpasEWN+Romc3zZ7d9ghaoEfSoWpF0cvcJshySqNMwch\nae+O+Q44/k1WlH0vKiBEb9tMke23Z+d1ePbQXWv8hVD0rk7pz4K8m6izasie\nhBlDP1q59i9yXKxwMGAa9emY4WVmSBrrdc3tIHexFaVASXRt+pxMlN2cFb5W\nHeOhAPe1Iy6tnpdQRfV6VVg/G3w5n99j7VmoMXFK63oQcOPbhTwaCx6SxLYH\nxJj7QhFEAJxVEJu9R/ifFaFzU34GrRLhtvGwAi1lLxtiAHXRHpp3EhwDGuAq\nQxzBfxr/xwRqaw+Q9GOlHu+mUrkJ9TEdxv/BoTf20aw2fnNI1LEHk/MLU+Gu\n74OStX5H8uq2E4r+02hIc4UT7dbp9tPTxU2KHUZHKTXVWGsmivjkrKbopC0M\nF8uDcA+i34tygKnglXK8zWee+SCcW2PVkVExoBMSzVFHNbypGclPM13p2Hrq\n73BLuFIbY8rpmIrhY/JC3JxSD6O2UMNbCaodhkyh+NCZIYdomRE0yj52Yq9K\nUiB3\r\n=97Bo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b065a4d2b.0","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/shape":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/button":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/typography":"7.0.0-canary.b065a4d2b.0","@material/icon-button":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b065a4d2b.0_1589985467257_0.4941122294096929","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/snackbar","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"846fd102a86f9b4622ea080bbe5f2d532a696d11","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.4ebce8d78.0.tgz","fileCount":40,"integrity":"sha512-9f/XiJjs6mVxRUBoc1P9Dp5ej1w6++5K1X9ZLuKsvf3IBX9RiCIyY/ZGgL4L6QBI7wXsl3dVTwiDYMoke04kbw==","signatures":[{"sig":"MEYCIQDEkE8cI7v6eKXmBj/uGXdM4tvse/5R2XuQ62R/imHXngIhAO8VA/FWqyaX+avE9c8DvLz7B1x0GVrkfE+Edh28E4OM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZhLCRA9TVsSAnZWagAAxEgP/0ubYVNK7wrHyFtBKBGm\n76M4SaIX7YcQf2ZvKdW1H2R0TsWkGSzw6apBd1r1DcIUBaPEA7d5XHjGu+wU\nTbZwcQE7BI4HS30GYDYoIEJ81r3LXMcdGwg5QSe8Q1czHM6xrAoPu9XColpi\nwqrWKB5bQwJi0yfK2yPxV4IvW7hkSGkflcXroMqvI4lt2gTGR7uFi6ojUxM2\nifgky4OFvHoXv1Gu0I91L00ycCRj9mOfA+RqhL/IqrJvFJklG0MztbNkAIr1\n1vKDd9DUbQEm+xX5gJqRXCyr7qw+bNvC1D/6i1RtshqveYV8UpPz4xzPRVvJ\nhLbm/6RW3tA+CwuIPPuxqiW6SIWiEuna2vYjEDkTOiBHIss4P8FpLB4PNkli\nvWtv3NkzrlUO9YM272Rp7D0dPc8WAOHHEK94jlhGpGAaRqQy27nEiFgAiDLS\nrRxi7mgGSsgpzPHQ+g9X7Anr1IozSXLm7sM88TqmQ/D75omBkC4c5bDeo6y9\n11oPBYAiT8/OLV5eLB9ehgo2wM/G5awc22cGDp7YwE40IMBMc9oJGQjfE3mz\nka+XUYksuvhcbiMUdD5wCdUVzanElCmK+HLpRH+28Sijsc/bhjBlmlOEftn3\n5QvOIgvs3tPldRhcqei+IxaJ+CGcpMoCho8+0LGYyXla7OUQpEXJDQdOTYVL\nW0V0\r\n=D9uS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ebce8d78.0","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/shape":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/button":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/typography":"7.0.0-canary.4ebce8d78.0","@material/icon-button":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.4ebce8d78.0_1590007883252_0.8012667733518741","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/snackbar","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47cedd7f735d4ae1fc9393f74d983e0f00b56c89","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b0fdca492.0.tgz","fileCount":40,"integrity":"sha512-8hAGbbufNCLZJ5df2T53gVt5wyIFzIgm1vVZI6mT3tsB77rmQuVff/AoYs4swF3/vt+DotbTf4IdG8gVJHC8DA==","signatures":[{"sig":"MEUCIHwa1tYhESBQzJ10f1fAyXhAGfmaJ8+WguLP03+la+tHAiEAyS3v4x8B4RlcmVTArebSI8xpquoKaZEjCqwwoWB/Ok8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbdGCRA9TVsSAnZWagAABvcQAKFSisx49XLkgOSkgmFQ\nh41tJpc/94pf5tGakZQwnsP1V3lqfmRVW1LmlU7ZxT8dolro2QCMU3KVLYjj\n82zyP9GL97gs3HOyh/h+yoJxuU+xs24MMSU8OuekhyDmoOZYA0zXMWSu+KkY\nywIzXZtIQdWokFE49ck6RXRndGZRkkDYWZBF6ywtW2MVVoQRtqnvvSduikWA\nigEqw00TdrdKekadbKIgb51XClk7NE0X4/rKpFgF1nQ3EeV+qrKXEQqQfIOk\nuvwiQvteXhLB1ECVvrfYqS2vE/sRxzi0BVGRlY5GPzOgCePOlkpRshKPXXFm\nyFx7ZvZ8NO4JlnHhnffYlHaBKNDwjmJGg42nwi4bZIBWeg3x/B+1/knypCAX\nt/AO/jgSpKVueK1F4N+xJCxxqEAjBxSJHXhxMiRReWfm8VPrKixrPL7NxvGI\nt2otiMO/jIRl1WH4ufvw8M/hAcuC3oIw0FKqIptkYafVjw0BdXLn1IrPpkkt\nMHktBAcj0igmNTVABPawO+krDXdlm4molF/fgvNM0do6aG6h7nyKkcUKdzeW\nUEvNskbe4nvlr7VeMIb1ENrBuyIPc9BJkgw1YZyaTJyWdRs6aIq/mPCyZHjo\nP+SQ1W8B2eKgywbDD1JTAmpP1s/RfgBru34BLIpuj8lrZTXRUy0qrKxBPiep\n5Xsh\r\n=q6qy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0fdca492.0","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/shape":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/button":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/typography":"7.0.0-canary.b0fdca492.0","@material/icon-button":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b0fdca492.0_1590015814173_0.9244082633966957","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/snackbar","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1db90a55b5ac84c3cc1caab3b1fe14c475f02cbb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.c67667e8e.0.tgz","fileCount":40,"integrity":"sha512-/nKBN4OqzSaTtaSqzdwPvvaJoyYvN3mlNsO3K1GqQwvusFx/XxCnIE1V2ytgM03VKb0T2JuGyd8qEqiGpGkHYg==","signatures":[{"sig":"MEUCIHcc81OemToi4nGFenIK5Zjq2DdD7hQ7L9301p1CpfFdAiEAuPvoBOFo6iYZaynwigB/5UuKTXmwBe6Btwr46k6sDM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoyOCRA9TVsSAnZWagAAt80P/02XZa7Dd5JDWl90X8tM\njp6ynLhJLLpqi0KHcAfBk0fIhAhYeWOyMCb+EZvcjnkBvHA7v5b9+slJP9J/\nYIVdVXqub25xD9QryUx2+Kg8eEZyXZ/+YusCbxAVTtluUPuVWgapvLSkkLM3\ndy+knMJX91RDSDVL57TYlll5Hcl4Z5XU7RJNwu7ZsYBRzJvHKgNDnx1+kFVb\nvCrEBMgDgHJGJq26HjCRHQdRfcQXEKH2akOXUFvO4aL8r2aXoLTvnDvrLSH4\nZBUQAxU44426EmJs8t8BZUZD+e6K3y6kV3cJvqm5fqdg7Ew6lKBiISzdszKR\nhxv19MrZ41S+f1vyc29Esr1FUcuN6KcOhmYm5boOJmBNHplJ3qLzYvO8kDfV\nBSPBjwG1LqjCSEFf1l2faTlyBeNOIV41LvuQzH+NvB+/FZeoiyZeZ/bKpL/z\nuFI9refi4dCYXnW0o5Re1H9fE1tu9jkeaXoSGSTs+9HJ7NgLDATldlmwoP1L\nGr+/D94QQdx0yr/pmtZLh48pmSUieIS1EaDJbdtfoFeiQyohJrlLu1vfnhsy\n0lUJOv9eQymZGFXn8q5hdrlhltMt7Qcd7goGpyabIIqB/PMNpsnLniiMn2kG\nRYNqfb3hVic8nP78rGnOOU4c/TvYDyeLt6oh3ZpTo6SgAw3wMY/x8szauais\nxk0u\r\n=CwRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c67667e8e.0","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/shape":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/button":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/typography":"7.0.0-canary.c67667e8e.0","@material/icon-button":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.c67667e8e.0_1590070414438_0.8133110444266023","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/snackbar","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ff899405b43c55debca00a331a490aca49f4d3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.62b5f37db.0.tgz","fileCount":40,"integrity":"sha512-mCEiTFRAQVurj96RnE6CdIVI4nsJyj06g4Z9wnKeqLRM/Z9v67IRjUYgK6NIQwMwrlHFgO0e72jjN6HqYTz8kw==","signatures":[{"sig":"MEUCIFMD9Q+I27EUoHTd7J6wlvfp6ZRq//CPg35XKA/wc8F3AiEAmE0St3ijQKjZNBnsBn4UhoUDDbotY03vASFjg4uKos8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq9bCRA9TVsSAnZWagAA5aEP/Rrw7v04mu+toHrRz5oQ\nS9WD2CRLv5V3DzEZ30O8NRaXHE1b1gXnGLG2S/MiaGmfcYED+aNOsWzV/8oO\nFSLd7bOnb2en3Sm+RJmPC0CcjFxdzoLdFmFowQyL74V7J3cqg+odmBVUjCoL\nGjL1yVlXyBzGH401bEVOA8Hbk3lY1QtsKdyDoQbJgdvDENfPE5opgP2fH6W0\nmc1+QrR/BDJxbtLS3mAnvxKznyQW60HOSPSQND+xuOrE5KQYFr/tbDsKJwsK\nbSsi1TSmfBNUzS6VH/V6tEtPjeFjl1N0MCZiLzPcCZsp6c88XnxIk5h16gWX\nj3/OUdziSk+/jeS8dxGtp55AtHMeuaEFA+VmITxkUwvjfNZgeAjYdZUhvRHA\nhrwJz6qbDNEIbb8Z17+Z8M79iz/s9IfbbLeQHmg0ZU2B5FzrOK16B52fd7kk\nriKeyKjRJrCXV1LFLnByu3AKrEUhWKlb1KZ0V3TQPOm3QJuqD0KNdAOPEt/1\nkySSIEkjDfeWf4fkxMl477BDkmbrgyF7BKYQM3G7UdYgL73WRvSiwERtQb8S\nLVY/2u4OpxyKg+APCKCuZVNI4zVcMVFgZJ3KuxWnYv/71fOSJK5zKOhjxjRX\nWYByA/6L2IRCFzFpIO/2b4Wa2JkNV7nuMVXQtsMpw+yAQWWT8SckEvpXL14b\n4pWi\r\n=jF56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62b5f37db.0","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/shape":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/button":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/typography":"7.0.0-canary.62b5f37db.0","@material/icon-button":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.62b5f37db.0_1590079323054_0.9002850333559929","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/snackbar","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"521db93235434b85e33c42d5ebadea4ed02426bf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.2e218dbf8.0.tgz","fileCount":40,"integrity":"sha512-Y9FqM2VgIbPpo8ykPWD7XMbWCmXTugLSzKBi5Mb6BscTJOZ7p00UnUQDeG3jWcVVs3W09fkBDBgWGdGWM0U9Yw==","signatures":[{"sig":"MEUCIQDKW6/RrR+4Ka8VcQ3ndUXnbwGq8qo75dTh1TBwL3a/pQIgfIixaEBRwoYyKb46+s1rFfKOfgxQQ5b2aGUDplyLjSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQ+CRA9TVsSAnZWagAAFQ8QAJVRQgks8Mx9Gk5Tq3VC\nIk51eQTzcw3td2jmICvY9Mf4EBWDFbPE+AONnoROUtr/iUGv0VouLlQPhhZK\n+vEf8UNL60hVIp7G3t7WwGNyQmN057dNabaldN3l/nkOtc2E3to1zVzc8P0/\nmYVqeH8mG8hVOGnGcOTCGnQ0KsujANkp8y7rrC1ruhOiEFVqJR0NXC880Nvl\nneFcRYw67Brtd/WqJH9Z2QYH9dyQrzR8dXBpPJ4JdPJUh7kYdgAsR7zdZ/dm\nY0UKYvz37zEz1trmMXkJyW5GIFmX0gklHmCCuwelszDDk7XwLuQgdWII7Qeb\nTBBJqf7OOavIZnR8TpkXhTyAxB++9Ml0j5RLytrdR48hDvRVMaQ72HXr0Vda\nfemzNHnZbGr+9rb2V6UgvYH9uJYkb6YLuCszbNFnmwVa98f6GPVpqbvmpPqH\n5fs6nYC+8MZXd2NTJUl7VgWksywhuFdoec0ww53j5nCQ5RuGQq8Y6QFerXhB\nYYHHEnzX2aCseeWN4ow/7TBLOPqtQ7gy8I/tsjR3eLL/KUW5DtrIjgUsT6LL\nls2oareVliahnZ2QgHzI0xbu22kQMHZuY3JkFbk1crIHetIFn4q0y8P0n5kX\nUERhHhv0/U4gz7Ok+xHKofyj2MawASC3WOWdVuqd7bwKI3xesSxAkBXk54F6\n1AEB\r\n=ks9u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e218dbf8.0","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/shape":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/button":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/typography":"7.0.0-canary.2e218dbf8.0","@material/icon-button":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.2e218dbf8.0_1590080574126_0.697108652053031","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/snackbar","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f56ba43578b612a8343e07dc5d5a8079ccdfe59","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.7fd792bb9.0.tgz","fileCount":40,"integrity":"sha512-kkNlQKWTOoLKVOw5arIHpEqR+qsfGsEAdfMiYJcJ7GA4pV9VAqWkOpslog9KtPndSt6Yq2JzSzZ8vfdaUDKuOQ==","signatures":[{"sig":"MEUCIQDoNAan2xWsYVXxMKCj30r+fE4kLzWNYrO6e2Nfq5WvdgIgaf0NzfP+VQGLiKz5cS9V/8k+HNN2YprHzrUEABVRJkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrdACRA9TVsSAnZWagAAn/sP/jSvo7oTeU3Dj8BA9SCD\nVnVfkMd6I+nqAxKQHUdY0vD41c2Xw17A7rdf8nOlwnYsipssqDk4qqXW04H/\nluW/9wTpaZWZIeVKHlbd5B9+CVpa6RKX05vxMnEL9jJMbqC5QihO8qqf6mH+\nBI3or2Lcpw18xhkf/WpPuSz3Pk37PfZVbpqgI5iVvOnAssi0KEslbF/4pMmk\nJ+sdFcPYmn5SkJtMqhgt4aeNbBr3bPvk7mpfEyyek60bU+KojBG9rqo8O++v\n//a8a6Hh9Quk4mGdqCsRCTJKO+W28+kxSM7xb91G8QrkbQOyadRxnvmkJgiE\nWYqxBuwQjdp6IkyLyHEX9CCYSj9ram4PjVOvHIzFc7mBIKPWl7MQWGbo0oJ5\nke74RRuhdGNDjpbgpfYz0Kc699/BhYUYeB4E8UkKpmnooc7NV3qag9RZ7BtM\nhivZ2A9kLxoXnelVlgn9lFztEkrQwV60gku9XhffwG0uKvIYO6TWSzVGe+9k\nMuMiMv2EdCc00aQBpmhunz4Bq/q4puTfRRXuVX224cTTP5XN+oSjyy8mvG/z\nFNi8F3tSI+JM89Tk5pp3Imqi8IGbQZzUmDr8maD2Vd9da8OlH0VNLEgE7l0c\nZUmpI7bYVBWdredMMqvPVSVsu1WFs0XNlrkgAMEOdTTTzrNfyNFWtELZHTvX\nQSls\r\n=F48D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7fd792bb9.0","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/shape":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/button":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/typography":"7.0.0-canary.7fd792bb9.0","@material/icon-button":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.7fd792bb9.0_1590081344090_0.7794235610361033","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/snackbar","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3938b69717eccb76ba380f46e3aeae5d79ea9628","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.a66493cd8.0.tgz","fileCount":40,"integrity":"sha512-B3jkKETSUYuLl5YNnK0ovNFaIYH+I5Es6Y5uxRGmspa/jKNNubzhNb6GUaG7eDS6mmL44L9ZD8fNCGbZ1m2M/A==","signatures":[{"sig":"MEUCIF77SDBH6N7WiQzazCVCPVckP3xUO9bpyxKtFWCqMfNSAiEAj535jX3qBd2+qcfpMcBQDs/y9AKPgp50zIu4gzumlxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgBCRA9TVsSAnZWagAAZoAQAJAW+AnmNrzAsra5y4an\nkzbviRwxsP0d/y7XnqgZdITFCurCfNMYHQU1nqrYwkefLUoDQX8SNKrileN6\nlh1WB15fVl6CsFiYogvIbiOFlv+/GlZ8ZSsJk7PznyIUdJsR+5+yXOczEsqD\nfoEJcVCn4BfVmyC5Ztk1a1Q2e6mxUfdb8CT6xLCJgz+XuQikHjfQljp8L3Lp\nquCIlYrvuLeLd4WB/veZU8G9E7S4ywMKjvUqTPYz1dsIrEiqQ0jKMM21bTGk\nrMpGQ9334890JR5/qk8bHrch6iIqTOTh5Dh/OOPIjFw6U/h7ihJgz1ioOTHS\njNiPf08tqbnFGFkXetLU4eclNnA77mAGNeTncZjEBHOMt1Of8hRIf1geqNBl\n+MfbVbX7AFh1PLP6542IBAcFEqfpDtEHNnFVfqqXO+B2PhX6iBX84dqNY7Ir\nR4DOkDvtDVRztCWrl/WllK03cX6XaXuwR7RAbnCekeM6Bh9btxfl3YBnUOel\nKp/P5GGXTDJfJt8euuRDX2zvfdUsBOCaCYN0oqRzoqQwNTXwS+Ik4MDcfoqZ\necq7NkUjaMA0rOQbx7JuZskQHQpU2yEpQl5rBOUiKysX98J9aES0D2g2LkVh\n425niBh9em0wsbrW1eMXe9AxKfddMrCHF/e3wBLFiMltXg/HbkXnssboxUjJ\ncowN\r\n=H+Oy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a66493cd8.0","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/shape":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/button":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/typography":"7.0.0-canary.a66493cd8.0","@material/icon-button":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.a66493cd8.0_1590081537286_0.457087564696812","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/snackbar","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d4b223bd581dcaafc39d04eb828b17aa7bfa68a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.da05f66e1.0.tgz","fileCount":40,"integrity":"sha512-wCp+Edzln8Vbsnjh+IXcgzK+R4hRnTcotWL0JyTZ4dHTAb1HNp83ESHt8iHSaBiSvHSac9OdMWWmrNW9RIiVig==","signatures":[{"sig":"MEUCIF5jinX3EDPwV+DjQoSXyw7cMrSjz4cKjTXHMXIt1T18AiEAsc0+H6aXiWR7f/kyr5qhAHK/0+Nr1VjncwGITehptoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrh2CRA9TVsSAnZWagAA25IP/3w9PiQULKVyDWh20DKg\nbKEQkNheKQii8aW0x+AkB7leRLrtz4pfJWvtzx/fVzsUW6sFeoC9gLnAczCa\nrNNQZzmhtHaf+CETXh6QAXOKRICMwMPO+a4fS0kQqtcwgMshz188pKpf//XJ\nN3nJ+8DTRW71c1UwdQf1iFlonk8HM3xiMdj7fyDgQJ+Ik15V/sQqpoBiEtzI\nDME2vAu3avjDm4Vbv5/gydxXxJadmwFFrL2g4Kc1MAC/uJqHkJ+sw+zG9fTp\nPJTtiz3N9R6ByThoTPS9CQQcW0j52uLq+/p2PT22VV7eY5o7wEHKrKT0rijk\ncFPaxe9O6WfjiOtb7TeV0hargQaLWk5ae1oJ+irsbUmPwFCUlyVCNr3HkFEq\nG2Ers1CYpce7ez1/tRp7i+c1MtYkRbA2Yy24ePHx4RDOyASZc4Z5S7tAwHFT\nohdhtDOpH4MICH5vN142lyONT+0CFnr9ybvWtNQ5DdRPqrerPXpk+u/Pdk/o\nCaNou3bOyPDZOzKEOtxx87KpAMDIdTyPPlwMru28rPLietBd95rb0QJIiS8y\n6rSpKJMX1IGFXhyP9DirWblTNloqe6TMrh4kpSuSkOR4Zsm4fRLvQgzmUDji\nrPGcDkMRCP0WBpieTL5U148a8pzt9Hl5pI8qmzD3n0WLhZMln0SgwDykpt0I\nlg3V\r\n=14F3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.da05f66e1.0","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/shape":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/button":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/typography":"7.0.0-canary.da05f66e1.0","@material/icon-button":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.da05f66e1.0_1590081653285_0.3555505370044616","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/snackbar","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da6c2abc0e61789eb2f0d47b42e97338a59688b3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.740860e78.0.tgz","fileCount":40,"integrity":"sha512-MHx+y802i+qe1Q9BHU6N2bUOkEq/YN+YCRXpJa5VghsyLr94D5Sc1kQu2Kgshdrk4EtFuDfyQywKL7dgV+yIAg==","signatures":[{"sig":"MEQCIFipGDL7kRpijcXogwFWF9ZlYLzLNkEL2iWhDmQXxS4HAiBsjQkBb7BPrB1+Lkk8bZTTkTE0Vmcti3SOfpyWFXitkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexroACRA9TVsSAnZWagAAHIgP/iXn37Y956LS32+Qs8nE\nutb9jdH7A6oxaG/uLcn8NltXYWtLiBa1Efe+4+wXgNXCYBjGWFYI0IOS9xtq\nTnx8wpsmSqa1ve2kM4p/IksTn3OqYyOw5dcZ761ix5Ud5sZTpQyeyfdlWSGH\nQsvGZFJYDFL1gE4oqbln9Uq1UO3ym53gdz6g9sNv/2X59nvEchXoOwQSk36a\nJc52WSKVPxjwoueEl0QXM+yV6Cc9qoLNf7w6uFwADdg3l70+oIN5TGzafipu\nBCMEKxwub/3AoKVhhEU4RyxyeI+Q8FgqtoMVTdWYUoDoETPxpO4anqN1LTyq\n6raTE0FUOUxACjAAvFz7e1xkDQgqys1QmqEAFSkM5kICmfXHVwJbnnKjWg3d\ngf36mAYpA97ppABmU2WRjOBX2HsR+8q81tVL/DzR+PYgvCGak7XwAKCWm7d6\nDEfU7LXG5XMPJZVPs0LmLDaij+aadrqVqwP6vvJ6h05vjCN3Y92yCMmJs08t\njmeJuozevuhNL+WAroDu6RyB2jucrt6jfwEwMUfaDiJPSWf6k9OLsE9+gDCZ\nVmwfQVzEcHIzk9EkW/N1SMxzFaZCzjHsrfbxcbVH2mBFy6GucQ8TJSjcRMna\nzuXgP8hYVcu+hqyGPLj1FDG07GxE2b8JOxxlgiUxxsxf4kgGU90+tPbWPDkJ\nQHP/\r\n=Zj6l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.740860e78.0","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/shape":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/button":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/typography":"7.0.0-canary.740860e78.0","@material/icon-button":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.740860e78.0_1590082048076_0.6229857339562683","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/snackbar","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c09efc028d65e5077b50bd652d78fa2e7274f05e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.5cea2610f.0.tgz","fileCount":40,"integrity":"sha512-CHLnYGt8pYd5LClt3ie6s9EdA940WoPoYpvu3IkaVPW0S81FE2jaFjrPOxQe3dj2xDMieDVPL9cXWFebhR2RdA==","signatures":[{"sig":"MEYCIQD1jeFUbC9NOEUeOocjCTqAIJk90BrrO0aBmBde5EeMCAIhAMeGUTS0DfnEEL0RXLCx01ZhHq2y2qrbIM/7WSKwyPyb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqACRA9TVsSAnZWagAAEbkP/jp9tTFoTqpKS2t8Rqne\n7s5kSfk0G7jI6pTjPFJZE/i7kTMkrmUXj4dB4F8W6epIDBVtyPWPLBY6zju9\nZNK1ZygSNV2WGTV0RLjpByBGCaxSO30H8t9wtithdx+ilzTfjdngUNqn/sL1\n+go77NaIloTTif1LafTy/xHvQmipSNxgCAkTU7wt0eLSZQAZR6QnzkHRbC1s\nHVoCssCmiHrm+0vFUOQGP9+gur7JaUqHk4n5Hc4dHd3mYzCdJUmnGJTJ3orv\n/IiT3EQVFucvlPC3RA00vCP3OEbuetBQ0xkBmGsxXi+Ko51yX7yE2uFQ/XSm\nuQ35j72vj/fvW9fhXcCcCmO9lrQuriZDhODWJMlidBjZ6yXo1dxwhZsrE3KI\nMxKHElsXHNM8AT9Gb1oznUQ+4JzAWjdbEQz2f2PB1lCT6NtTJOReDPVCbSID\nhtlGJFF/ZJhY2pL6DvlMP1NzDpiby7DYgKaCnuVMzexnIqHtnmfCuZt8F1Zl\n4LkpEvRoJRaKhX6mleo4RFD24V26y/skMX0XgmdZgNxjbCQkaP5a0/l0LoR2\nOJFLfDEXD7XAowOkBBzXXbAjPrpPFkA55EqrETi6uaZziEpsgUSgAAsJJ0fO\n9KtEakFQPA0Cma18ECKWac2Iz9SVdW9Z+inY0qMR6FQnYItUK3FRKr8X2+7z\ny2jR\r\n=e8Nv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5cea2610f.0","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/shape":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/button":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/typography":"7.0.0-canary.5cea2610f.0","@material/icon-button":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.5cea2610f.0_1590082175891_0.08354494473944718","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/snackbar","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2905d5e630850b4c202e420f343781fe933bbcf2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.cf7747ef7.0.tgz","fileCount":40,"integrity":"sha512-pa/L+j4a7DglDXLWnF9pMw/x31Ma9sTG7EezMo4sdKDD00teuJEjaVLmD2DRdLRyUCfuN8EkHLvX+Rdv6X31Uw==","signatures":[{"sig":"MEUCIQDez0lyH0HNEjEb9o0dNncOLJf5Vj2Hl3ozYBGQRV7tfQIgRX/gWn1LiWR0GwquAgm+M7HcMHrFwXtAlb0cm+JZiQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqWCRA9TVsSAnZWagAAnXsP/0RdhEKK8zYdWsqWzK6+\n56Rd7pGBKduOS1ZUWoNkSS0Kb8gAl4lfzZ/OLcMSL7cBMz9fn5JQXeRjnEyE\nqWXtLOb8gkMteda7uF97oHG2tU4o8ey31m8eHmI/RRkdvBIcjz7CS/sK6u5J\nxmyIQARRoXL7VMq+UPwowh/4HGAv4OU6w1na77W2fM9k/Gj4bHTfF5Ds8cdD\nMZqGjukXhc9EctxJ7sNwk/jlSP7cZQqUeJIBomopd52A2QC5WtzbcV4ZkL1T\nhkSKuv+YzDwwriwmkXivrhOP81HpVaOrC9rgqyy/eLPCsv1Q2dQBWYxy7OKJ\n5GnWtQaJG0RgM81iwQk0YM3ygYd4EO45pAFVoUFa3ZRURinm1SSeml/fJ1+9\nSu5GP20hrP9MagaV2sSJwwNaQRTzDUcwf2PeKkenveSqq6qWDeHUum9R2w6m\ncEQW/rpU3kgeypKHu0Lhlus69omODnMy7jVXq57XQrx/jVIiRJG6lsqyOSRx\n9xARyg8tZrWcym7oy+O0i+eWEccoU9Q92cHyE3URlIceMo1CI14W2xVjgqUT\nsHduG2zTb7VI0jwGY7bTggijLXQvIVwgUfZsrJVV99XB9jwKpF+JKKLZFKMz\nQNQTQD/0QxCQxFQ/q0SDd0DGCgrSOK6GOTXIFKdVQ0cN6KG8e4H2kw2ONKRg\nG+Ys\r\n=J6OE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf7747ef7.0","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/shape":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/button":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/typography":"7.0.0-canary.cf7747ef7.0","@material/icon-button":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.cf7747ef7.0_1590082197661_0.6042770920966527","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/snackbar","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a052c4cf6f145a1de5d2416176f8a956ac80c1c7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.862d0d7bc.0.tgz","fileCount":40,"integrity":"sha512-KYuWZRP0Cujifxxiy5LQ+TPnLe4cKxEjszqJdHa1W5LhBMQtxSYcOUhyXzPn83Ag4yFSQV+zzM0Eqj6hwjmeoA==","signatures":[{"sig":"MEUCIG9xHQiTLFAllwht6RFj6juHPC8U5nsKfA1+qClGzgsdAiEA2mIzI5HQfPHzCykIFVqG8LDyYrl2Mi72yL/bX0QSSlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsyCRA9TVsSAnZWagAAcQUP/ixCLsFcDSjOP1X5T8lf\n4smokxqRuZY7Mcc10lt4ddSKl2j8Q2lpA5x0AXk9VqXIHGT0d2EQtyxPddf2\nx5hhjacCvBUpV3bMIiIbTlUdiYj+lZPBV1qQ+7bptcDG2ORh8VOfCS01ZO8o\nS5nTYMo7SUb7TSet807Zbi5F7FtEJzVROmgrJbBF4ASt7FY8HbH4iBfaAkXB\n+2bYuybh2X4NObREtc+96u1eTswSxZxdf2ToKwMSh1uQuZkFaJDSJ7Pfd7Fh\nW7ZJRqbbBN/58SqFMVMvhrQwV1TopvSmc45XS99XVhCPFBNnY9XyD32J7xIt\nVymks3TEu70ziNZheLqsc2lZlRfUKRHQtz0FtN+YxOv35fnbEA1AfW8cXtyf\n42P9mmaOOLrLEbaz4pj0EmdzFakb8xrKnEbHoFsTbQ8HbuPYRQnYEHvMh+gV\ne10Glfk4KC8R34ym0shtCpRHyAvkGAbmmwqPrc9ZAKgwNzL3m6sOrwOS3scZ\neJOaRKrYP2BPjIale9q+Rp+V95S2MnXtW4y5fkZCTA+KdfksrREhe0HlHtw0\nmACC3rsHzhxbfm2HTZ9znkAuSplUM+b8KMUk5gM7eI1TpBFnVmvbMy9qhCkb\nagpeLb15CtrJ5uqP7rNfm8tPmQZIsRJC1d6ProklNdHsa5XOIqQ7eElNdZnr\nsbgg\r\n=4rHV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.862d0d7bc.0","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/shape":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/button":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/typography":"7.0.0-canary.862d0d7bc.0","@material/icon-button":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.862d0d7bc.0_1590082353997_0.5116492632739487","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/snackbar","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88721610ab35bb99edb0d7732a7e3b4894b28266","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.0008c8a91.0.tgz","fileCount":40,"integrity":"sha512-h2qmoBNVvmPgocFbwha7PvxdsQIpNJ/yNWm9IA+xPJXODu/n9SgKcw6CdOnTS+OKqyjin29/MoSR6KWmW2STxw==","signatures":[{"sig":"MEQCIBHeP1TkRjJLEQLLinr0RG2rkC6Qffs6KtPHx6t5wrQkAiALGOlv9U7vAnpvNjXtQgBIEUcDj3x8M45EjToc2uQS0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextejCRA9TVsSAnZWagAAjD4P/ivm2o3zYWbi1bc905EG\n2GwmFkpJ2dClZXFHaZHtmVrzupWFgfMBXcbvN9ecSYlzYLTXU3mRFvoeig4h\nkZTtKwG17AvUbnDsC93QT9o2kBMV/9y01qGToodmbDJBdnKpToOdU6ILDTOn\nS6yqY55h50wAwpLNz3vPVXpEa+2l3cSMGBYxWB7aZhhSvLV78wtaYFBkGTCz\nP4PkTzwLg+k6uSCdIjFfmwOAOXOA5SC24nBjsl5eXzZFuf0wmsC88pTXEG4F\ngwTPoYBCiJsBlB8iVQjp9Qecr/xWry1qq5WYKV4xEyVpgr1kfsCPwntIkgKd\nxEfqFIkEzOUL4xH9qlzyWA+vObczgS11kmcbiZt6D23L66VG8JHR85jyoFZf\nmed5M7e0mGCn071QujMi6ttGZFTvi6FCSYSNN45u46sTQT6Wd+DAICMhf5Rl\nGMPRP70hly4PAy8VZ5XsGVdcvN5Ggzv9FQDXvw38UHBctvkhgvgfZDTsWtGf\nbmCy3xw1GPEcXMJ7k//b+y5b8bpr7jwi5IyLAgz73FzZ/qGyKbYiwx8k6TAX\nKZRE/qZ2QdkwlG1c4aYgQ4umKhv4ArMRjVrBmXBjngtk22n9XN+WQCp5GqYU\nyLKjw+/Y1Ou7br2FHqG2QlVD8FLwZMofCf6ogq/XoKhXnt06SkwBeAMSQn02\nDfcq\r\n=1PQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0008c8a91.0","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/shape":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/button":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/typography":"7.0.0-canary.0008c8a91.0","@material/icon-button":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.0008c8a91.0_1590089635155_0.16868321250054863","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/snackbar","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea3464a60148512596d884b7e25e138dc8dbc2e5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.541638fa2.0.tgz","fileCount":40,"integrity":"sha512-121yhSMicsMBW6SW7K4OvktHOVUt04RxV5qfEl/4z2OyjJq3HjRrdM8jlxfJXIwQhheF4BZjWqo+HFif13l+8w==","signatures":[{"sig":"MEUCIQDKaXCA+PkpDK+ByXiAxQ4SYFGjRdGFU5ZmZUlvtqlw7AIgLSX6HkFBBqn8dIMybtp1mLPtbBoMMp+DNl97BHvX+Co=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextslCRA9TVsSAnZWagAAJNQP/2RLKxHStpy5vVtiGWhD\nIsxutCvelQ++Wx9eUYitsSzxhj1nBP6U6YLewOwdXjABBg7kA+EVOKjIc1fY\nANUJ4xVen73WEvKuwRRljOrMfqbCPx8KZiNyG5blbbv2iOOOUTaM1U3l0cpT\nvElYJ4f6IuAI7F2mHpZe+1mi90f+k+n0yjFQhgW9DaSpRn+owHZHd6QfjRnQ\n+w4f/KqYIZaONlfinyX0cqWhKL3qRSh+rTOtGz3gDr2O7oAUmTVoVwEY7Br7\nPhsfwUh6PhDMwje4b2FYLz0Dxd5dysq5uhLsFiElLKAdfUUWrZaZNqFaciWF\nJUmU78p/YSfn9AucvoSDPojt8/76cZjxT6FzZa0xEfMmCqx+uv1ye+I2CHA5\nHMH69UCC5FIEHeiHR0Dpo1dD0uaxmW/9CD1ppSoeCU/nyAjqwrYHZhrJF7cs\noF5+bF7WJuSTGksbe1Osvhk6TWHygFQRSWzWaRii+oga/qNiwfa/PuE0up89\n45ucNEuvW2/Lp/Xq2GOv/1/zPaUZFoWrzbuwR9taWDDRiGYjS+mp6yACoaY7\nkFXRKzeVuNvTwYMEeLZdXgOsty3tN5cPhwGgseSc+0o+CHrdsJPNBfUYalIh\nKcaEO2mZXgfVtYtOc87nNXZ4I3ibRWv9GK/rjsceemMWlo92ICooI6sNkUSR\nrNMx\r\n=Tawx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.541638fa2.0","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/shape":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/button":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/typography":"7.0.0-canary.541638fa2.0","@material/icon-button":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.541638fa2.0_1590090533100_0.47086728377691767","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/snackbar","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46ca2a0d0c29d23ed1500009b40aa1fa608f86f2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.6167cd075.0.tgz","fileCount":40,"integrity":"sha512-s4l1rNGe0H8kY9SioRHQOt4d1Ed6zno+wQ8ZbD748DS86udqyEzjVU/aky7/YY8YYyw4cOEowlZILJ3f3k2VZw==","signatures":[{"sig":"MEUCIDtahEihojSOQVnYTvKDxT9iEguQrJFvUYdGGmjd3J7aAiEAjol81s3OBmR4oqVY1yYj2ct+NvXu49qJZ1iGqFXEJlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuLkCRA9TVsSAnZWagAAq5gP/jFwdrAWIeJuj5d3rX8H\nVCc2CzN3pdb5nI0JJbofmfZ/I3yaExYaz8iIHElZMwwto0wQIQne4rMBSq1C\nzWEHeFkA/XNRGMX70ql3PrU3bqLGkFmaf/z9GnZbPJGeSRMiz71oegSye1Fs\nc7zWFzKlaoswDcjX0a5u094U1Q4+lBuJP7GrLLusFrQMpeIvprcogT+yhcBe\n6ZfRW3SrvvxlkOm+L3dfnqO3oL8QgtHHZfDugdFTm317M55NVN1z8+8kwnpo\naPLYeuzJGhlDhOyBBqfQ5UvENNy6oLjRftmDbISrTAGaNJsnnxEQvYr+2lDq\nGj2KZk+tBxbPi1ydFeOEJPdg940qgyvQnJltskGq85k/lgfw9IByVRroTLEh\nzbuc6TUZxvUxQILQWTcNMek45MfDCj4yp3z1tP0MBSDbdbaxNZQBh5FAtbMj\n2ZQmFrjYtJPCy1uBpHCO5TPffylyMeD9vGqzGYv580BRl/FGPzItmzweEoux\nNq9Y60F5jThJS/nuMsiOGMxXueM5R7ggDoSk1ZdUOJqOvLogk9X2IDJWRy55\nPszXQ5WyNV9YT11p26spAP4Khgs1hddKNMJSUHDYZroYe5ggn2LvfK4IlLTQ\nnUwUZe4qPzszQJTTs3VZ3011BYsfWmjbOsgcFipt1NuXJJEERYi7L+K8DH3f\nk/R4\r\n=+lZ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6167cd075.0","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/shape":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/button":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/typography":"7.0.0-canary.6167cd075.0","@material/icon-button":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.6167cd075.0_1590092516353_0.8533967222564149","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/snackbar","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddcc60cd64ec659db0f2b3b1d2a7ae0fc5f26689","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.863ac1b0f.0.tgz","fileCount":40,"integrity":"sha512-by8iqEvHNcBdIZV8KQpc+TMNNhWAtZVymwKH+7zzOB4qT1qEjsAeRtUyVSOjA0uzdsmfUiiXszMV0ci6Ffev1Q==","signatures":[{"sig":"MEYCIQD/Jd2I9MQar6PqIjIx4b7IMTPz+itiPGe96GQQvRIa8AIhAJ7+MImxe1eHRBHmrsXQWTiEmIbXtOPhYTQg85VoXzkK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuwDCRA9TVsSAnZWagAAtlwP/R7h/DLiDwE2cbYmKBji\nuaa6v544yQOmVdWoxoqGvwwAg/MQma/ypA+VFmUMAhweHkwJ+GDbG88wj6Qk\nnZTz2h5crVTAv3XgaVFejRGLezeq6eoIpsS/7mAajMwPudZcXj7eQRBGBfJ2\nq9pU5hTxtjlGK5qGgduvc/R5A9o9FjEgVRye/zcybmfC3K2JNiUXhTpW+df1\n6tUn5yosdZX3z1nMpyVZpBHfk3Yap+D6bbNWjfzKU3k0ikA0LrkGyN/zkbX4\ndpG4SSrS9JOYuAPjtdPOY/MC8TzraCEWY5yDJFvWWNDE8oQ3PAb7rEXIVViB\nIopigOMvMUz9BXDJ733GsP+DQ4f7M+Cc3aSN+IuoT/27E3bN07BGqKpNywk8\n0XN1Haxm3hwdkIvksW4WI0YQmaHPSOMOYQCeY7oZ9vTvWsqGNxxvSbQ8fxIc\n1bQ0WoGjHBNZG0Vd8KEy8YnaC3lyE/GPz5C36fNjKHbB6si4gjQyCXHt3y/h\nR+nUlPnAHtTkzDYiFEu1FF7v5eY4ZcuK6s9CDgykSUVH78Rs7y+LplqpPWho\nUJvGebb7tktEuHnXFjALM4daWyARBLJKwUtVhd/jJTn/KNWtmOj/9jXcIuJK\nzNZC7OIuS3+8Okvoe97QojE9XddVcHhTGttzP5vllFWLWFbcnavx/UenwDKu\nNxi7\r\n=Wrmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.863ac1b0f.0","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/shape":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/button":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/typography":"7.0.0-canary.863ac1b0f.0","@material/icon-button":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.863ac1b0f.0_1590094851087_0.4077565267433845","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/snackbar","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90fe77c8ba7a3d1b5a68983bbe6a6b53bf13d872","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d30a214ac.0.tgz","fileCount":40,"integrity":"sha512-mAxCfEuglasq20vthxvaspo0c0BI6uFxTJvi70i+/m9zXOWmUdrftkne1P4CTUe7gzGFfL7gvmzFWA+2BYB8ow==","signatures":[{"sig":"MEUCIHZPtw5J/2D6nueim3CMjSN0Vy2qkHVaDn6lVH74KvoCAiEA8yMRVCajDbn6Aro0nmBzYX8LjldILDP0C7HgByp9B7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzzCRA9TVsSAnZWagAAXHgP/i6VuG9GRKrlaS10+GV9\nc8nsPaId1pvO7LKQOABvyv5M6KWTHcMrx4+3GNeorBmq6jvCGxObrRDTZcz3\nTdt0d8T3x65wFeFkymdQm/OQD9nGvajyBuJ7+hSsDBq/jUVYuqgLc/vcXG0O\nb1SPkGVXtnTMDZYjmVkhZYq31YOPBNiQxmf8tKemnDd3V3k0D0xvFiycq5lb\nW4EKOOgxM9ZPw9GKUJs4Wep5OiPXSTH47He3yAhJZlTFWL/wwTn2ft+gDL1u\nJ+wVYwjptNJWkXTb4vQktWRWQ7hhiSJDyDOSafj5jgiPLt15fZ6L5FPWukU2\nQp3X1N8FTY2viwgSphgM+0htJ5KjaL5jWoP77Qj+XrY13OgB7Ss6EYGlS7zN\nLpuw0jf88QtsC8Bgs8ZKUpyrcX6GZpJHNNkrQWo0cggfJJfD0B4Xq4knEybg\n4krXG0PwbpNJKC9CcHv92DUprrFzSSLLnhWn6sEHDLRxHT29J//6Z4bC/HDc\neQXjUo+SKJ0hlpAN6jNWTkvs9WWS9aSL9Ttnh7gcbZIQqDf1vJ4t7th+/kA6\nWi51ApjoHXmPo2/UXled8oEL3kgKO/BybmcP+cNsouT6d/cmRSLTWSl7Bpmj\nXw+Hfp83P1D7I9oxgG5s4LEuWpoDZakxXETFiqtGdbmeecGM4aNh7mK3AsA/\nFpvy\r\n=Azq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d30a214ac.0","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/shape":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/button":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/typography":"7.0.0-canary.d30a214ac.0","@material/icon-button":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d30a214ac.0_1590095091503_0.1791948259301619","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/snackbar","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"575ff40a61b98c8c6b2dee0c0a249df1a96c5a61","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.62abbc8d7.0.tgz","fileCount":40,"integrity":"sha512-OZ5r5WU71rz3HJMT5rwJUATKvYmhECAIXvczJ7ERwQk4EgQbfoo3aK1dyeT4bpG99DfPBKjujFDXIMrh/HNVLg==","signatures":[{"sig":"MEQCICRqA6quhZzTbqyatrxNZ1wvV1F0IfA2nCWyg5yWkfDnAiBvgkQO235XMZMGrQ4/McDZG1Ox2q1c1T7JXrQcfLwD5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvK5CRA9TVsSAnZWagAAxXgQAItI+FflJhR6Nvu88NGb\ngQ2CcV8KiHWA7+Ha1CHQhH66UOeW0eXr3RK0ee+Ow+o26Jq+ZW25uHSA+Wo/\n9XG5lluyoq/CnT++7rOsAMEwS03PldRziNROlBAiIPkfQjb3hbEp8W4jIiII\nd1BIwZfbSCmSCJVuhcQAtMbYR/crqzEUhKr2W940jBWiF99BtTOYhElvOpgy\n+N5Jby3yVlVZkvRYQMUMydzNq4CP1jBLUX3FofvGF1ws6zLvzrm9EGInA2Q3\nMSdVIgZxFSrW/N2ohcMtNi3MZWm1d/5wtImdzkSb57XMpfmnzoITOxDliRpY\nU8DlgFkiNB9P0liGAVn6VnmvWHcdQ203q79SdRwwKM+rrXG29vHyDjRS3aAj\nexdlDUJClm4Tq4IL+upsoA9ABErU7L1NE8lFQPjEzrsNg1rwMzuhez969qBL\nOwq/p0f+buCof2HbPk8w08vvK9MzrCfGxzXs1cCD9qDmaaaNyBY/1rnGBKT6\n/8r6aHTC4fTlwbbXh8VHEs5HyTI1MSi53hljf1SkUhvRtfzdJuKdMjCs+gxR\nWIEB/4T66Cv/bqoQJIAib4WCQWyHK0/4kwPlEY8trjY6MC/sGmzLvgebp6OV\nlLsSIc2QFaykNzsZV3MVyHMeyuzlaBy3mTToJsdMtSiSbYpLfqIrJIB7dVJL\nhQtp\r\n=X+MC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62abbc8d7.0","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/shape":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/button":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/typography":"7.0.0-canary.62abbc8d7.0","@material/icon-button":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.62abbc8d7.0_1590096568656_0.9215372812075984","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/snackbar","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c9f19afa3ab480e9f4968846ad5315152678346","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.49bf31d5c.0.tgz","fileCount":40,"integrity":"sha512-qJ5AafbRuPD2FLgMYjO6JBkDcaQL9t4SRU6zflxoMLQlukV1HJ9eXgPAr2AM6bb53/pBSTbTtB1Uo6YIDj7Odg==","signatures":[{"sig":"MEYCIQCXvDc3w4BioMfu3ues1oafVuW50TsLu7MntV7dSHsUTAIhAP3qyzotSMSVAySvS3VEnCUZcgnVc0W+QMhYvvqXOdZS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOECRA9TVsSAnZWagAANPgP/R4DF4hHURoaC972vdj5\nI33Y4g/VlfbYXZEzRpY65hEIpVJ6xb0+iwLcVtcdBK7hFXkihjKUn78M/voP\n0MOMUTdveqTKIsHr+BqjtYbfeqirlMR1xvPItEcHd2PwxeY4IRyocKeYcXTo\nXH06I8kxR3BVr4XoKlxkRFlaV4+LHooPNqScZ/JdfGAuteLFZUtlWghA8jVH\ndbzpeTGhoiVFIzB0fO8hI5TI9mNanfEqrcfYDgwDqk8N+EbZduu0sYqDldYG\ncE2RxvYZdtmAMevj9vV2dhOkhZBfTmij+BrMWvRaHUTekJPqTE+mIaW6aMea\nY0JGpr36qgAqI0USuaMsigDJB0+ov1kZeKMPbu1eA7Kdr1tP2oRyACOtRxNm\n4+JvnjRGZn8yeM7aGdjayScuJOhokZXj3PIQmT2qZWR8M2pXCrBAu1yf9pLF\n7zizvQSmvmt96O/jT1upJSc+y8xWHJweUpadLaHaU4uRiGA6OVyWgo6m0Qcn\nlJUFx3/zi+Lo7dIi9XNJJ87/mpPLjJvz9DEpIpNQQ3Tt/NduK6TohrDxqmq0\nHYPuuMYZtRXI2tiNc6Jfgy/DY4YQZKEgGZMep6xTUhsU0B4wUkwJfpjIXzjY\n0c2boNTbAFa/b2zuk/aqmnVZuZkmQosuIDl9xk8CrC2ALJmrm9GrLOfdkUm3\n0boZ\r\n=oy7P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.49bf31d5c.0","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/shape":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/button":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/typography":"7.0.0-canary.49bf31d5c.0","@material/icon-button":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.49bf31d5c.0_1590096772003_0.5591814173385499","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/snackbar","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aebf98cebc80eeadca4a5f0fdb7d94cb0b2fe4d5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8e17857d0.0.tgz","fileCount":40,"integrity":"sha512-JesDXEZRKU4WEJNNbAQ8L0E4KAYdl+t0j7c1pFDdZvVEfw1Hd2BY3BqNP65E2AdZvkr0vftsHBErIiHjHn2Xqw==","signatures":[{"sig":"MEUCIQDmtMTl+/TWOJlOfnEKVSs6ig7gfuQyyYDOeHa9nOB56wIgIPEMTLI/xA8HqSQgFAxzKL5T9XcewqWk11IWr2lHSSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvO6CRA9TVsSAnZWagAAB5AQAKM4roLNL7T7em/EloiE\n7qBfsY1y/uZbevkHkTuH6qVrLdJH8sX72wyU0Di1Vd/W3EdWVvqi+jlxJcAv\ncU2baDaV1jRxUWse9SFig5ZrYU7Z8Q4w5q0kjEks7vlKPfE92oImf38FrhyB\nNnotKqisSqCR+75qI7p8RrCjaUk2OnczMJKYK8wLHWm6KR1j8/ORi2GAJYJS\nt/wKl/MrYv56QyXnaeYWGuutf1o1nar56637GfRFE/P10PPt5aBIo/8p8TSn\nZVRZPr/FQT7WJaOzs7sB+rFLAMs9tT918GWNTSXG280T9noshwTL8Z04dUeB\nnb0jSof3FG2BNkIBhngJEEN+ECEVrlWNqJMUJUVXtOZe+DJ6CiFGNflb8h84\njVXHNeKR7w0oRJ7/7biZUi22kS01f7ODWDY6NTy4Z4+WNoNxmhwVqgZkt7Zb\ntVT/fepam0916VCvjE97pwdAmKlF4A9GoN9d4kOh5cP81gqQ2iGJdZeu653D\niie2fNRJRtXmCtOxemxFwr/dSIRtqgX/8g1R4+hzNqdnzmLyjc+OdxsmhKIg\ngpGiZ/zIQdtgtybBQY57zV8FZI28z26QgzKjOBHYtFLXGGcBu1Xn1MAD9cEv\nOM/YPwG41/bRQwHEAs6z/U9v4ERkRYm7nPR/eRIDwqCtHZrQtwIIivzDF0KY\nsgca\r\n=A7uA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8e17857d0.0","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/shape":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/button":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/typography":"7.0.0-canary.8e17857d0.0","@material/icon-button":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8e17857d0.0_1590096825917_0.5249979898350969","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/snackbar","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a58f8df9c759fdb67a8105ffac515e0a8a54f9d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.c113fc942.0.tgz","fileCount":40,"integrity":"sha512-eViPL7hGB1Vu/3SSmYhC/7mVW+SdCGUMXAU3R8hFB8Wfr+N4ISIffieCJU8V4iI9t9p72uu+1HDH346WH05wYQ==","signatures":[{"sig":"MEUCICnYdsltMptLLelHPO6Lf+LroHzywnTV+YyUCtJjTx7oAiEAwXOn8mrDzVrgfv7TuKbeu9GBP8q9+KZC3oPBq4CoA9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwT+CRA9TVsSAnZWagAAeKQP/jYXp2JwlAWou0Vsa6ju\nn1WDucVOJLg0Aj7gtBRFgn7ABcUTtavONKQCXy++s5iYfE2LOKUI3R40Db/3\nb2tmfm9stxUNScc+0LlLq2ntC0Y2jKRwxjgu6XU8dw2n1eGjK+LhBFnIJT5g\nGnoIqvH5c6sr/hUQuhGTM3InZlb1CEsRPWzWT2eIO4PzQkZ8ecoongPeB0tq\nALgZXM0ahA4Wrw+aBNjPTwAL/CeiIGRYjER0BIHP6Fp3qItJmSZOtAECiAfb\nC1TXHs7YHRpuktbrb90IygNEElCyzCjnCy7uETlz9wgL3N7qEeZkdETdx0l1\nyR06WfukSPndCEkgiYQ7jtQbew3qlQRNkfoQ3hIxM+c0a8ujbjHCBVj/LuTt\nr8pEU2KqPYuePh/0ZiYMhSOEQGEhrzO7u1WMU5bk9aH8ZRVzra6ZAxNCQBre\nq+V7SJIB4UblRaNs2FKqjGPK/fQGc8qhFhAyFa6STyr6wICCPdzyf2lndmJo\nNbrDEb8PtH86xB/aBkTIlXiSg8JapVPv2sgE2aqLy5Og7qqhSKonSy/A9oD5\nt+0srZoaMf2409ae+tfA+3UxgFPC0QK8nhp5eCaD3uNnH+KGKAZmfYizYrIA\nx1U26yNcJBimf80VfBE37sDKxD0+iUt4dYNl6xnH+wyZWIxUUWrj6XvjWeLp\n3ves\r\n=gc7T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c113fc942.0","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/shape":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/button":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/typography":"7.0.0-canary.c113fc942.0","@material/icon-button":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.c113fc942.0_1590101245527_0.05495464129565519","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/snackbar","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12300f1ab2a93fcd6772b87514e112d66ed37b6a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.912d9021d.0.tgz","fileCount":40,"integrity":"sha512-4oJCnCqoiipU9AiO5muElils+aZZiQ9Wele9r1g3yrgvjIpfd86OLgx8XdMo6/ymufo3vWi9LK7o9I4uqTGIgw==","signatures":[{"sig":"MEYCIQCoSW2hA7Q+F2x6v7WnTkUm8n+M1qcXAMLYdeIGkjraYQIhALFcO9/RxVEbxlXzMtuz+tmWe5HoTLb6yfOXgx2IVpci","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWP1CRA9TVsSAnZWagAAvwMP/jAeN7q2Vf0iPq++jFSF\n564ovpOh24u+dR2EWhQ85rJ7vgSKsPbChb2inVZg2Tl8i40AAnnO1RCwWc8N\nCJkwQwnu+9NoTBy9KXj11WXYTD/kxV+BgKKfdsQGtONrTNUaFyysA4yiHoea\ng5Pl12nK81AHdI+OQ7IPXO8wdf3aldGcn/uz3dCDNx9tiqrtRphONEy49eVX\nErKnphCL/yK2ig5L+eg/lXaqXW1M72ZstkIpc3RzUAFmqClWdiwOZLY/2oh9\nX9TPSjRuaZ29ZLPWR3WbqeJOWle5Z2wvE1sFFXLY1C9fvnd1nmYSy/CpyGJJ\ncGHPLuPe4eCGBadt2wkNvlqky9aYLXWcby4LvcUxShcGfEnI00uMEo0SugYQ\n7RMOPtzwc8mNtePNYS+iBWDBOThlJvJXj5U1zT3D/+Z2aE7Z1PGejd20ZQvc\nIMFRu1PKSD6+Mwol+0N7IoTUwI4Ievt2ab3irTPGWafMQ8z30ffyBoBmrgaN\n1L7gBebiBsgKfkN6RkHzDANwh6gU9MV9BqpoTlmnQ/45EO4hEUPil5l4PzNn\nPuCjhIP391/l2TUpvqacwAJxwr93ewKIJk/gpR+w08R7wwPAdcKpjRF+rSjZ\n23BNbXng8tBO1XqhEVXu3+r8dFr/gZVS7EUr/bKmNl9RdElGhXFvzydAERPv\nocXr\r\n=YNlK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.912d9021d.0","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/shape":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/button":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/typography":"7.0.0-canary.912d9021d.0","@material/icon-button":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.912d9021d.0_1590518773336_0.4420491312388859","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/snackbar","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9e503ec853add8460ead7ef5b993d3746edd98c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.68a2af131.0.tgz","fileCount":40,"integrity":"sha512-RG3YOSftDzRU6wNS8RCPhsAMIs62MHX03rui6W1TzdNjyx22+jWDDNMEEO9HX3R1xgJmW2pHu4vWlTfkbGoE7A==","signatures":[{"sig":"MEUCIQDii5t1eZFZ9wJL1IhQpbuIi8x6LGOGIshsBAs5lxi1SQIgc/LrofdE0AK0eJDzc9/0oiR6snNSoKZ4ESGa/VHYzLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWklCRA9TVsSAnZWagAAF0kP/1211ivLKey2rPvU3Jv/\no0IGCfAyC195ZbbRqquwDkahmaOAbSryNjphvNzh7dmkQYfw1iYWuxMpzwk3\nwgS+0rhAQ5YBKfEhonDBSNBPWiWDytzDtGZc4X2hzIwJdCG6XijmVR0uheAI\n4iYWff3QVZtoYMlMZ7QdvuzF6oOo0xsr1k/tY65k1q37dJj7GsD/1EOYXje/\n7J7ch9bD9hgfL/I0OOocoRnkCa5XqFiO3gShKTX5J9jiz4TKxHv1nEKW9xs4\nZqGpYw+JrSpqJfxw2rehy98wkeJ34IN1DSszfDXakgAv6QPi3bSh6zIRbBeQ\nx3oHFe2X0Jcbas626bpCOoefbjEI26LTX+F4lSjQGUI21aqSaM2t7bOcUJ+0\n2LbR/XpWLyLgpsGfvHHY1Nx617xplsOpfCuRChLmxjvp2Q9avKK+lvXuqoKI\n9CNSfnISeNqtmpU5uD7p/DSaruTOUzXy4byAkJK9gKuNF5F8Z9x/0lvJo7tR\neSGYA8PG0IVjFLnGCv8gLh3DPXeej+4SbAbYBekMCJgsLjbiyVFL6ZPy1F70\nMR73kyqpRaQD71MSL60nUZg1PL0xsw4iEmHEPhFowTRv8r2RsVqOrDWB/CtM\nw4D1gAYQ9QwKgitWpDXugAYElrvzanBnjnOH0UXpIBE0Kyqkp/kVPQh8PPhJ\njgUV\r\n=UWgH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.68a2af131.0","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/shape":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/button":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/typography":"7.0.0-canary.68a2af131.0","@material/icon-button":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.68a2af131.0_1590520100866_0.195403697309382","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/snackbar","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50cb0bd59e2046b638df624b6275a46d18eb1bc8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.01de07011.0.tgz","fileCount":40,"integrity":"sha512-1LWBINgf6SjKXoNZuNHoF8vo1GGD6W4ILOXGOzB6Gs2msdudq4x+cumbsvRJCT48zpiwSSBK6f+WT8i5zmOICw==","signatures":[{"sig":"MEUCIBse2sXf1BGRN5hMoXzEgb1cXqCL5Bh+m9d6l3yhL0soAiEAir3o5up4xViYNM/vJ/blqdZsJxbJLNPQfsvYukZ8iEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOwCRA9TVsSAnZWagAAL5kP/184p7GX+ypvZ2BQ0Tae\nTTxaWl0V+qzDsxM7nnVb0fBgE4DhBAksz5ar95ttjvSROykQMCcw5/uXkMNJ\nxlHq8iEYgt3Gw/uaG/XBchpNLg0NB8ZNotXW4RJH+mXFiEAoA/086ut/59Yw\nAWDYQRFjqfGv8A23Kx8LFfMEcsTox5YZZdwyxQIXLz54UmYkA5Su6eS88E2g\nvAAiD+O/OydvrU/Af9/y3O9mxPZ9UxOHRhm8U6B/jJQXk/VD0VraMPozgbt4\n9EjbF6kn/8ooNqFrrUgfr3aS1WnZZ5M95cpCE9trJZ5Se1cg+Li46Vg/Cdy0\n4bGQMi6j8vY07VErb9KuEpMUbfPwjxW22bW+qNz1XQe5Uq/W6YbOpOBb1853\n1cxcsKn49M8OjcGsi3ef8iGetgtu91xfXkSCg5gsNeLJSR7rJpsYfojb+5uR\nvSLzmgwBag8DpgWe+XbrMwAIFFBYjzbqejxEmUIL4jEzOJ2Oi5gdgzDPLprb\ndLNf8V9CBNQip9D8VeNh1fsDkHKZ1MC3zJfEjjuQDxvUtp7uMpVXie+bMd2E\n6uKNy7vedP7toHi/LidIPi3F3RwtGmJD/UXRTJLom5ZhY+SvwdTWaS7xQT4D\n8HcUoACy5lPNMR9p1uaVRr1ezNXPsqtzZb6GnU4qe/Kwvyw9Ht6AMkL3l8E7\npwFx\r\n=nND8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.01de07011.0","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/shape":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/button":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/typography":"7.0.0-canary.01de07011.0","@material/icon-button":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.01de07011.0_1590522800420_0.5450429618456731","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/snackbar","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1329afa4806e53b133ae7f36e480d77774d9031c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.51d4535fe.0.tgz","fileCount":40,"integrity":"sha512-bBbT+2tsNiyz3BCKmybYhqTuf0AlRVq6+vXM8QcAyLPBO1PXK+oPn/vV2YSTRtj9IUl5kjc4wTuvuWDIrWJXhw==","signatures":[{"sig":"MEUCIQCzrAZQyVSUoePpapqpBqkVUkkVW0q6HjMZQ2rbDyR7gwIgeH2/u3gWgObZ3NanZ/84jfAx7it7qAF/uHOA44Y3VZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYvOCRA9TVsSAnZWagAADacP/0IBPmboK0DKUoBalRl7\nm4kW5ReFvNvr0nBpBKtwrZkXAOeZy+fVKtHgi2PEg4MeWHeJCASPm6vdQ346\n7ric6D4dfd77IV23xx4xypDep1oEpCiPNbj4ku2DyTT/smDBuKxr59sQ2BCR\n8Bbvrbkrj8ZXCBX8m0F3LDry5JytFDVHfMvmNc1yc0R1i4u542PX2SQKga/u\nr+/rX/TEeCFkKcbJLE/rWjJZOLiMj6TZXvz1U7f2yEDYxc5buprw8FWfVTx+\nF322VTbZwkD82bX+zZq/DozuC4OdhaMxjX7ZDde1xTZl3MutMn/jV6x1QLOx\nBUUZdy8gK9WNQ0H1tZUQ1OR6vAZzU3Wb+1ndpCpAabEBvXrMiRKMxiDPIA7j\nLrGsoHlcGNS2oC44qqY5iFt+/b9MJnVNuZD0spX1QSkhqaX3Jwz4ZDaB0Lk/\nXxCEq4u3L2gnUTHIHK/2VXbD9xMoBcThYrkoh8OTkvzYqmHcZbqxofV0it6t\nlRBDu2Z3yNQFvuxUHqJI7FkMW857cT4MGAyQiPrCHld2GmiZFBLhE6kV3ULC\nDAdadagrDDKyHQqC9t+iB0HQgZ2UAQY5BK/hv5bmbhpR+1CocWeE6ZfTqwYu\nyVe1W5we6Sy6sI0QkZ/FvSsFaiO5WUyUvm2WGd2Nqswen74lEsRFl5CYAKzB\nDnq1\r\n=VQn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51d4535fe.0","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/shape":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/button":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/typography":"7.0.0-canary.51d4535fe.0","@material/icon-button":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.51d4535fe.0_1590528973923_0.7912078257422206","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/snackbar","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"806d4714308101af7b41f6ed061e8832b195a598","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b86d826b7.0.tgz","fileCount":40,"integrity":"sha512-hRCU0g9xbLw4vCV6HOyRo+N6BW4yBa4A+LPzPUKUMEkiulCQ0/yrHDJgpT7+fqpgCDwuh82dAuJh4BVoBMlH8w==","signatures":[{"sig":"MEUCIQCWO5erEh+YXm/e4T+xZlZ7es/SodmnrKk92nwubAZFpQIgUpO2e3Na3qfQoOPyvFGzALxFT0PsBRgOaPCR8rvsZEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZTDCRA9TVsSAnZWagAAAGsP/AtbsO5e7fGspm1XN/NA\nQejbuyBDo9imjLAo01OgLWh4xvpXXTiYsMUY50y4Ld4fgU1DDJrhK3i5RDir\naAzcHnlOJnieqiwzt73XXtnA1zHLHClR8sIybx6sxPXtD5wgVHB16aF7GRp5\npdwjCzzh+ePxhR86j0N9WwwHI/253KwzApSIFzFyIyHzp7rfoZZR8TWGXVDF\n2QqGeFJ5M2B21Cphf81KGIILY8HN2Puzv1aXh3tNGZFBben3+DxLVT8zGso9\ntv9hyuU/o8BhSEeqaU8xnYG0iSS+A5VOpvXVOCXCRFGCzcCZqKMzJtg1rf9J\n2XPDjwa9GB/tLFooOCX00plaIjwbDvFrTI6l/j+BrpcsksCdqsOCDsi1fEXe\nUZfu0iqJmThwNyxlg8IUUkD112buXMfEX2z95r4ZfpyEr/GXE7lkmwqzAevf\n8uvmKy0wiwl0w9ax9OzB7ktQX4Uq7fXj5gOj4CoKpwTpoqOvakela2TYebUd\noTVrc9CVV14DU5FYtb0vK0QR6cej8OECegg2uYjTkZO9rHJVPRMTCnxvXtj2\ngvIXmBZn2iGDgouWWGG2SOzkSBLp9Ps0+rs/LcTFlTHxvwAfvXO8lSg9+HYa\n3zE4mTNKss9ZA220GT+eUzsdZ6l/gDTolZsP9cxHfHfAwMk4OTkjnsdQolze\n+0Fr\r\n=508k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b86d826b7.0","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/shape":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/button":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/typography":"7.0.0-canary.b86d826b7.0","@material/icon-button":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b86d826b7.0_1590531267121_0.5769052216808201","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/snackbar","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1afa0ff282fa9b8e3d05f67b47455244bd2738f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d91794c7e.0.tgz","fileCount":40,"integrity":"sha512-+pLsw/w4s6jJV3Uwrv4N0rjxPCC42j0sg3StFnXfhNZwfmWMcqxoXYqYKqJa78AISm/NNPRwvsujO4Xxqsla1Q==","signatures":[{"sig":"MEUCIGJVV5wlJzlnam4gQbdQonQf3WmSvc1njXQupU476BUQAiEAih3qNQItGEwMvTR55S4NZGvLZXpj81e4lK8qktqD4Rk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezax5CRA9TVsSAnZWagAAIu0P/08R4CX6UB6y97kW7FqX\n2e+B/I1eOLFgWlwcVhIpNAreW/ptqlFQkzomtWzTrBST9hwJ3erVY4yaGOsC\nHra4n/apzGHNdjCvY4EiyK0BasrQmHFHQdRE4EmkWuhht+GH6adV9wpn0rb0\nQnffOvx1c9vbAO29G2LzBvZgNoLwlM0gY+msOgkIDUwgS4sl5Sox2msHKQI9\nqLZF8UGFunsmZN5aG36LtrhiVdHBtxJ7zZSL8eEUayuF9YHy0+pkJ3u6ccLT\nA58/opoip14M86M1x9qKpFQIOYza6ETkljaN/Q6OjCde8y5S1UOPYXt8kvza\ni+IMzLh8T5WOJ+7Vi1DGc13tq7iA+h+fNkt0c+D2r8kf6THpMuvuRg7QYhhp\ne+4qsWoq/yt+YVpeOz40mTl5eL4JiQ3uvKoRHZUKQs8h8J6b6Ez+mqTDggWM\nDpodshUSc4n3a0xGEx9TMV6m1YoJR7o0KBWmRy0Bn7aa9KEFAplR3nQtSXJw\nbHDSOgJ4gTKCtxjhTSXsZS1FLRq8ih26AAyaDAa+dLHm3oNhrDfvnOgDGV+O\nEVKHWqRpWXzx/QlMUO2lYRw5VDYw4ub/a5I0Z5rVsTuMxJtb6uGdoS/d2kV8\nwEejklbY98tkUHiB/zcmc8UPI/XA+B5cPKovkGEBPRSKBeafDVke8RrUeUm5\nSxox\r\n=jyLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d91794c7e.0","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/shape":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/button":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/typography":"7.0.0-canary.d91794c7e.0","@material/icon-button":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d91794c7e.0_1590537337106_0.4274044198720852","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/snackbar","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2e7969890d7ff637d261de1db82261a4c51abf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8c6d7e076.0.tgz","fileCount":40,"integrity":"sha512-t514IW/sLnPB/T5rTMFz9BPHs8xOuxQVAMyyshpBAbxeiRufLd+MRRnjpoANhEzT1nnkgSBzuKY+opv3gr3Kzg==","signatures":[{"sig":"MEQCIFPIaMjwgIZHClQ5UmJg3HrsSslJYGV+hvPvRCTrffAPAiAbrB7gl2CRFqa55eqhKMs9m1ZRtB6QZSCaOBRCcnwU2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrjFCRA9TVsSAnZWagAANTsP/RFyqcbswPHgdgu7+K9U\nFaabFhTGlDqYxKwpx246/0TrxViezkplbGg2lhfGyaaAMSVK56w//nbHNHjg\nRrl8yN7hGPKZ7D/s8e9S1D+NhRywEOxh1G78lH5jNIwstwlheiowxzbXzSE0\nskqrDcbFcEToHSh4mWX7oCjjvRbRRQF0y1wXvgAeCrKdWiuJcKUOPj+SkAn2\nulpD3KWG5Nuwz8QYDDiHgPJtDTmeIVZ+Frd0cDo3i5j9q+gZCOeNBAYpo79U\nc8LmBQgXde3k+AcNQSmXQxn4CR12MZ8vpF1QzN2Lz41QstyuXeo4jWEiB2J3\nwLeM2VN+yUqiI126PK/bVmrlLtOKJtB/ceKv1JJm75pkbhflnm2nzqQcIPx9\nFmWfsKrOGPnTwx8nrG1S270FrYiCtxhxICDBhBc66/2fCp3ZmmdbLqYqXsjn\nshdNJObG7c+0kCSo+imhRmLV8wOIB2xIxsHNvJphLyF/baalBz3ya7yKGVPv\nT22CcTvQKTl3n62uosqRZXjbkh3dilmt96Jdwbr47+lWgmsgymNfcEysPdWE\n0+fuk2gvx05Qzo1GaakFz0XTag9IRlaCZxiUVyUuRq+45mRg5T5CcdXvBBhp\n5V2JHZGoDqRJyL5DX7Se4zKEgLNxMMDDUcDnkNIXJUq9HjKZ+Q0AdSEoMILf\n1L+4\r\n=alpU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8c6d7e076.0","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/shape":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/button":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/typography":"7.0.0-canary.8c6d7e076.0","@material/icon-button":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8c6d7e076.0_1590606021356_0.8437654073042502","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/snackbar","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0b70140d8e60208bb18585dcc86de6bcc8c2677","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.5b5f62f93.0.tgz","fileCount":40,"integrity":"sha512-RTA/xWs40T30gCZOqmFTkDahvds2uus29X3Nrh6JNQkbFMUZ1+Vg0l0S1eGcD9hs1ehY2YsvuWPgqacWl7OJ+w==","signatures":[{"sig":"MEUCIGs1JvvTk592gMeVxO1a6F3/iu/bjIIBZEm2hMorOexvAiEAmB+oDkSCz6tPP9hu8otMusHA7YClUnVVJMOroJyRL2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrzJCRA9TVsSAnZWagAAiMEP/jc8d8uB+tuMRlTReVUw\ngeVjJY05+dn8I+s4v8+gYKzHxNQXz7y7qOPSB31o9k4M88Eu0yW6d0J81Q9f\np0NzfPyAuZuJ4pChjc+w2oxVVepLdmc6oc0zuCkpxpfEOYggxBIflvvF9T+A\nmRcAUIaR6A6tIKgd5Vdr1occqxjcwGoyFu93cZ/S8eX0pq+Mx0WyhhzsPjxK\ne5ovPBU5lkr5fOvhFGz9nKwcq2xGaeo2j3GqWZCOXZMHw0d4gTT/Bvflxqwi\n1LV+5WwIR5sJ3IA6fXw5Jh7ED0jnQl0QnWpIbVGYQppmak/gcAGSeDsdwwY7\nYRPDQjLlENRhXnibOOOrkEiPsEGDff39Dln9wXdQW4WGuAiT5ii94MNEz8WI\nMXQxdBuvLC2gwSThaQNO5U1ISY/R5esNkolua0bWKX4alCbOJFP3G8s268DC\nbLfMTiMW2fsKJIje8yLCBCvHavhHsvrizxbmzfL2jfNogREOmtws5b7AU7Vi\nLt6rEIz7PSH4Opuy432DFRYfBWorUtYvfqR767LyvvELcBwMhTKNALXf1zXa\nerZYiJUcA/ALWhxThvNl1BQ8Em0q4kOSv1NlouT8ng+EkbDVX4Qddl9eSjky\nchybEo0sW/T0nhyg/FiyNfdG5CMNmk1UBUz02mje0my4+TsxicSTduaDYl5P\nJ+K2\r\n=xnln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5b5f62f93.0","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/shape":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/button":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/typography":"7.0.0-canary.5b5f62f93.0","@material/icon-button":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.5b5f62f93.0_1590607049171_0.601849406486948","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/snackbar","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7eb52e7f76c7310291d274af9f1d41023db2459","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d9972abb1.0.tgz","fileCount":40,"integrity":"sha512-eLn1MV0CuMbnIlpez2MyVwz7er77K4y87BXi0S5x8swy8P87lxxkNVbPwiLAzk3qbKsfzsMdx6rRRKA9dMHm1w==","signatures":[{"sig":"MEQCIG4MzvSJLEQZgyPeEbcGr9DRcnL2Wst3/WcRLoF/nakxAiAKeroN1hjcPY2Mo+6M3nz2lAQeBcqKChNaYlHZ1gIivg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsvSCRA9TVsSAnZWagAAUG8QAI2OM4HC6AYERg5kizO+\nleIS7J1k1ndyg6GQQ0s2hOi8p2nOabr6r7qmPWpUs4KBYjtL3r9IEJWBBmwX\nsu6wCCEb09Y2VWLAQDeHfwOd7YFKrdzkQ6eG5ajl0AEIHc1s+aDiLggqPoC+\ni++rvhDt6LuOhTJVyHgRZLox8iXtL8Pv0a+EqUE4c1WC5lBG3UhCx3Hqjev6\nIK9YkDW1528rmeicBb6+uPjpkefx2wjEV+vqWxeVWZ/ACCqAo2WfUAfbgLzn\nBRD0/aNCFi3NB5bxup32gASIC9ofh/Uj1BHbOc4+POf91cOEQzUZCbw+v5EM\nGkcJU1XAM80x+b9TiKbx8d7ZJjwTZCu06q7J4nPa3ovTCsJrDJ+v3REMIOda\noZkGEhnzq1B2cUP+/C7tfYFRUj7Lq4HHCzoqSckUDg5JjYe9WSKBdwWIgWNw\nuZpbTrrBQmWZ0qVd/CenTyStx+YrNaASMlBQHT7PxpcJDWj4XyXEQdgglJkf\nc0fjJryurwGZRI62FzbnKMla2Iagu36bo6ausGi/97izAc47mqdbFnCab6QB\nxaJC1Lkq+IkI0sar5qPAdHfOD+dNTykZCq0YOmn9Gk6/e0Eu5xFlst1SoUzQ\nxYaYHc1cCbgu2FKI15WR6V433XfkydT7nx/THWAfs/utenwWnbLmVk35jND8\ntG6N\r\n=e8FP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d9972abb1.0","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/shape":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/button":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/typography":"7.0.0-canary.d9972abb1.0","@material/icon-button":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d9972abb1.0_1590610897334_0.7244429619528412","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/snackbar","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"115aef13625dbd7146d22a9b62e9db50e2769d80","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.6556eda2b.0.tgz","fileCount":40,"integrity":"sha512-7IdbmTPudNEQGnM15fN/AOh70q9oCSVMwQg+RXy5faHAtH+uMk6yvXzbxKg4D8sfmQGEVZ87v4yUl0tp0yRE2w==","signatures":[{"sig":"MEYCIQC8X5SaxG3y5VA+9kG3YzwgG1AxWJGTEsc07Xk2Qz1AMQIhAJDmfCkufzA+r3FydISOa/lB7wMAp3mvil9VBqwMz33k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3+CRA9TVsSAnZWagAALa8P+gOtDBfoTqp18LkmmLIG\nFhvWnvkBsrd05ulBlXqQvr4lPyu0B7j7fOb6DUGoj2B4al7Qj1ENuip36MPW\n/PmTGXWVJZzfj6N4Gi6aVaxIgJbdHE8alFdB4xqWvJxsFAGqTtBHeO/3Nrrg\nlKT9FXPZq28cV9f1S10nm7f8gErtqXY+E7Z7E/WfvyE93K6v1H75ZehmQDrs\ncUD5WBEPppafj26pkeSafAdSQLd8U4P6V8WeD5GnRxPIG8sj8aGGZgyVkzik\nfEq7poB5YWx0mKp1lVYvDMwWlRC1DUgzAGKY8XchbwXF0YM9KKsxg7+3tOAJ\nIT6DL+SzeNFNiR/mkpSyHUMmdzmUBl0XxPgdKAPnKM9ChAPT/R/27rCmbap5\nDPqgq0w+0ySI6KPIzCqmTYKsZnwOM/AN0I5GuIYSGjgiauCVWujgOEH62LYw\noznTAjqQeU6c5jY4xe2uIyJ3ouYmmVnRhkQS2iBsTRZo7l2xoPY0qCalU42v\ni7IwvbYa+eQ/l30GUBsuDA3Shxt9c74sOql777+phz4o4g/h681te3cwpe45\n0rnLzMbLaWfKBbFDo5uOpr0vmIPpYP1R3Mvu5JBt/iZ7KZhetf7mIlFmGgut\nCpWD2KbY6z1bJtmJd8UmzSkYuY3roPRGG+GX/TB/7axZfLyt9NOynHH8Y79J\nvnhX\r\n=WCFm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6556eda2b.0","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/shape":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/button":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/typography":"7.0.0-canary.6556eda2b.0","@material/icon-button":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.6556eda2b.0_1590611454456_0.007477472165564603","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/snackbar","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34bf4f730db1d0c36de3ff7bff0b9bbd666e6cb3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.32aa23641.0.tgz","fileCount":40,"integrity":"sha512-WcuTAzxt6NtPmd/ZgyXxxqPRPTkLE4dtbz3tjrFuK2Y4UQGO1fN1gwsKCqi1ldh0I58zUjs91xWBmGhnPo1Xag==","signatures":[{"sig":"MEYCIQDLDMhHwOiTK7lxuHxsgOE7f8E2jGF9NorkVFfqvyBCdQIhALozxdYul0UeZQ4hGUEco7+iwb7NtanPn8K9YSBGmtYE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt37CRA9TVsSAnZWagAAGdcP/R6ay5S6yQevPciUzbHP\ncj4Q91YCnT3hXriutzpLzkneYC8g2w8nYakyCcnp8KiypB8KIN1pfGpSoeVc\nOmMFd8xJ2asl/tDwvajnHOrWZAEbxu5x4QMEqLVkVL15h3Dps3mUcfrTOj+b\nol0dmjS0iyOdpNPTWXPoQPAOe11LtF/rmE3sN6OatRC+BXHpwGiwXXtRazHI\nnGDexYA32pOgJgM26MS8V//wcXlhmdmsygLCq/YrPLZjke1cJKID45M+9IOF\n6VQDthtzQUwYDhMo+H1kDZF8pWb5SQAEpatJhghA5logdLG5EUIN4/RZip/b\nTJ2EkOtiPUjbjvZ9+tqlqmh6PfOaQGBDD58tFf6ZhqIBaEDYZT3QPAuWwxIp\npD+Jey/1qbxIwdpywWwNzEqbHukCTz80X8ga0PCm7Nao5uuBHl+HH7oMOBeQ\nkgtW6U2VR/gqqtqC8OVkbZIII3ZpXPxL7IKhjrgNoQ8+zk3yfypJ7rge3faa\n4ag+iERxlZaReTnGOaD4FDa3BJmqDwzcO6XEfTMddUXJnnLT94WeWNC4RbiE\nTrJLj7O3tvSc1nkmMBgy2wACwRxUZVRBhqlK4ywvyFpB9tLNv9P2ypsTKWU7\nIpLhVeKwPDeF9oO7YWHNey3PID784NIAT/Q0Hub48hKKyDRD07ZAlowf5lNa\niN7/\r\n=wgmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.32aa23641.0","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/shape":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/button":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/typography":"7.0.0-canary.32aa23641.0","@material/icon-button":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.32aa23641.0_1590615547333_0.6280413135808887","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/snackbar","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f93e7c538f5efb9d6fdd273ed07127f488af122","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.654934dfa.0.tgz","fileCount":40,"integrity":"sha512-kANzM90uKWQFMQUeVs+T3sONcibJUmWyOegXjVZI3cVRXZbeMFyybOKUPWHw5KNO9DvtURo+W0kaQKJ21hv2Aw==","signatures":[{"sig":"MEQCIAs4RvQmhRL4cJR+I2gpR2ZKVhxC0VoIlTRlBnDyDBT1AiA1LWz7qTEH8m2Dni6+v0PhMjAFi4lTuzxSw8B6Cqj+sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwfgCRA9TVsSAnZWagAAs5UQAJudD6oCYT38iAPfJUgL\nV9uRaIWuvUigA8vzpepjaqBbVUAQrGQTXDnCPRPhKV4X4IhBj3rYdYeBsPkl\n8zD+ZaJK7CTgVcj1jrE2f4wmF7qpBeQ3yR8oE26GCmvwxfmAbivYVNuSc5iY\nDQeWoGs7SqdfnlUj2mcnSYTM5l0HQ9U2nmsgRgRTz+xvGAHBzmJApMxdF7kz\n2O4zZ4Z/6qthm1tt/9QJKTLgFojjMzXXxoPApV87TqTLHh9SfMBVdmp3XKz7\nSrmh5XRRp5UENlFJ+GQ0FYasXQIfPRjT9OFdJ4wLKUk3WU7Ir/5sSeAPFay0\nSx+vinIR42oo5R5WRprtIdaso5dvu8qg7xsKbZuMjJThtwauoX3UUKJYWhOA\nOeCLQB9DlI4NKwsnHffY6fyW4yh1koW5Sn0sIg7++RRyV67VqoOyV2PH+DZY\nOaIFGS2BOPL2Birpq4/9cZ1V1Rdd7ODjuTMgq9khOawtQ74Hjlk34PqcJ4Kx\nDmWvfkHBJDpldGUPujZZ1TWuyN41o29Ck6t/CAuX1/L1fwBwVZbIaLgEwXL6\nwKjd1Iiqk0bTlcQ/o2a8nLhm2hxBp1ZNAWr3675QLOtPPZKQpuyEQtBdbXZl\nQB6XPE2bhUlaQnGQ/Qb8FgcJ9ecEuyvNSBCJLETfI30fXF6hts1X8P4WTy3P\n7GE+\r\n=kFqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.654934dfa.0","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/shape":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/button":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/typography":"7.0.0-canary.654934dfa.0","@material/icon-button":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.654934dfa.0_1590626271737_0.553265709645075","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/snackbar","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38b7e616f5178c5cd2a4b9af2244b216d6f2b21d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.41910b8b8.0.tgz","fileCount":40,"integrity":"sha512-vLib1RArlXmC9ZR1Y9lp82XXy7+ffcSrAXsiBQPLkNJNURxoaxAx0zczHq6t5CiV4/8gWgqtb3IqsTYOBWqq1w==","signatures":[{"sig":"MEUCIFBAltl4JNoVJES0CELOh3fhv6WLvnES2RwTrMsREBjOAiEA5gxz+UWZjH4ZBn3bkRct9FEM4cFtz/moylc6nBubfEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsxCRA9TVsSAnZWagAA2hUP/0/ZSBlFJgT76Ql5+DfG\nubqjFgPLWwFwAOYU+mDsy48kgFJQ2gHEV16dA2jbg9RZ8pXDOn36T+Po75Dq\ndr0q4HTsXfBsy8G7IqNwmw3hfiJTnDvhlbjNP+4Y7BQN3Sd6tIcnU3dZ/Ubx\n3DP4piUXUE0bzNKLjMIPQD+xIUpJ+VmEA+DMwYYv9Ah6Myz4Psk0XzlUBogy\n9kpLPyVv1GEx58FGCJQ0+/pxtaV5JKTZvhq03NmPSC11wwW5ElrI7nLYNXya\nbJvkdQSuxg7TcWvHAVu5N3PAwRVcF0PZQdVN2VMMcJZNslCZqxZgkCB959qd\nnDJBrWureAdFPe0I7xbtNQfdX7cJ8hO+YAEkbZI7ElcSUhIvCYOYTkKAtTpw\nLNQODTayllW60E+K5LYpx727+7kSPyD2dBqX5dfkltiy42kOPa7Qjyh+LMnL\nQXFn9UCHOttMIx+MqPwWZijD27ZL58W2X1QXHrwUA4FoFOvgEdldsF/Yb/5A\nCN4iIE6YJtVkbNgQ0YJyoq/7Fnbnywq0xjfGXs7je9smVDBR53iE2ztvzhTC\nwT/YdWZm8O8C92raLZfwL6CeDQIKAlcpoUMauEWLptZTF8qCyxvnY+KOuLio\nSW/0soxjy/Eblt/DxYzPG5loy0kA3XyTjPteCvpl55YNWX4IBn/1jytUPFtK\nuZA7\r\n=teAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.41910b8b8.0","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/shape":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/button":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/typography":"7.0.0-canary.41910b8b8.0","@material/icon-button":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.41910b8b8.0_1590627121537_0.69809264673628","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/snackbar","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3165ac2d4ec55560b18c2491c13048611b9d37a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d66d22bf9.0.tgz","fileCount":40,"integrity":"sha512-fxvpVrc/dRXLzmPNi6VjUlSjq3lhbO+SQJ8ksxg4dQbTqtCeGd1AiYVT8zG88+3g0+4pGfGHOOQNoKDL9rYUBA==","signatures":[{"sig":"MEUCIFBw9RBJdgXvkQeIEfcScLsmh10e8ZYOJi9+6ugmiUitAiEAu1xNpg1tOHgQCq59rxZwnRbQzbi4n0Rfw8R6WzjeRLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdbCRA9TVsSAnZWagAADpkP/iE/tdift7j5izFVV7qx\nRR2bj30t8iyTQqNohb/YqqCNCIYgJl6NR5dc5D9zl/19aoqVgo5No89VmtZT\ncC66ll0u3Fn8aFWWMoiMxkadtrSIlfCvWj00uhSFjRE5FvXkeSDfb5BJLsOP\ncpUzbVHGTAfE1IY5hOikfhJYl04rlEAFf7unqPYT+BeAra7/abIC+tNOnRq2\nIVN/Ghe8vE0rBxg13Z0v3+QcuhdV5pWI2VmK8x09zP/pKOF4f46OIBe99MrG\niGEfeWnmMO4roSaC5DTNf09voSJma8oAy1TWdwjwo7E9uf/GC8CWP+HdEP4l\nfhEgI+Ww6CC+GFOH4AAEwX61u20OPBRTB9KscAxGXaRI2w6kmXUI4pegyQFn\nQwq9pyVvaaOU6VO4OxkAlaTCvuq2yyeiY3C2RctY2E/Ygt28+AwW6VY83Xbi\nFVNfC9AUqW2YptWq+uC5u3beO6BrNnt/l4DIZ/U1x2mP9E8cy1s1j+jCbRrn\nye04l2oE0OyT8AwQVTqb9NFn9GV8Wd8TDiqJPKnLpCkyJwOTZtuuwjf+6ErL\nVG74JzVykU/Yten1iMigQSEFh0PvS8ydFfHzzu5lM8HaF4TZG9HirNqbN/pn\nHPbnJEA/JfcMerAVwPqR61YB27PhmYhCXMcl0r5QRhVHeX6oILEikcL7lQTd\n3suN\r\n=jEwK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d66d22bf9.0","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/shape":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/button":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/typography":"7.0.0-canary.d66d22bf9.0","@material/icon-button":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d66d22bf9.0_1590695771199_0.4386436274365628","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/snackbar","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00bdcfc8df81f1b573cb0dbb8e2bc2bfc4415e34","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8904f3cbe.0.tgz","fileCount":40,"integrity":"sha512-banie93fjpSVjpqWCv+/6VT1/JqONi66y6LfT+2/K/4V2bVwC8TWYc1PIYc58Fk3EROta/EYr9bvy62Upn59Rg==","signatures":[{"sig":"MEUCIQCnlu8JnyqakYLM0GAx/MQCI6h3jBDiwNC7vIzgUEeCDgIgRs0vfz7+EyIdUSzpan7jsVm7d5mnSPA18gDsIvw+vkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1+CRA9TVsSAnZWagAAgnUQAJ3OpS1/DhTdZ4dV7KY3\ntEayXrPvC/WK9MwOWDaQ+lGrA45lx22ezhRF8rAjrku9ow046yZMqyImp/wZ\nIkZyhxiftNy2ZxqsKbiJnGFvqpcRyeCnWSf+xrsaLDasGNQwRdMZXoITep/F\ntV/Jbg/YtwTQyQKiM1XQjOojL5pOp13EjNyU+MO99FD1zO+wsJDgvaF4ZLV9\nTBMukpwQxLo3dAGWvY6a11dYqZSXTdupJFgnhueCqQvpwZZjVIO6aS072gxE\nr/kzihNZ5fdAtkUB1J6flvI/oZrrTmnsTLTDGAyLRRYl/yHkt+VBEXnULtF9\nCmavstcTBfYCnux2iIDn/HVNlRQsy4s2hCRPiDUW4IMrgsSmsRCi4Dnb37zW\nC3p1rGHipxqpIjbw6WAstlLSbZKFrvXZtOgmk22S15aa+aiR/kjmVat2YQb2\n5stidCdL1o0BoCyuDQppoeKv3FGppSUbi/vIQZphKpJFaQUpZABCkmp2LwhH\nodwa9DwoV7+fnjNHZiBrhtD+BwvRTM52YnnwLltiGO5CXYOrBeQoQwPfOmk+\nkmGMEVpwiJ7RRRna/BYZ9+LlUiYeGGnHZC/SsI9FA7814ESClhEKx06jdEME\n2mCilOt5a60iBBW59S3PX1V6stfeXWyxIWzkHdSM5/P3RFdg5+T6tEruduKK\nnRnK\r\n=q+/i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8904f3cbe.0","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/shape":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/button":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/typography":"7.0.0-canary.8904f3cbe.0","@material/icon-button":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8904f3cbe.0_1590771069606_0.30914969659628366","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/snackbar","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f35445954bad97cec2d3db46bc76ac339bda802","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.51512a4ac.0.tgz","fileCount":40,"integrity":"sha512-DzeVnQ1+b45BTvbMUPyebpYGYeCDYE2VgYk0aEZlrC9r+kQOkF6jYHSptJaIMTLJWdDrFOn4SzAX1509BAsXWQ==","signatures":[{"sig":"MEUCIQC5tOD76CpEZHSZxEVCUcraEJYuZN3imH9i+gKkXtAJFAIgCZrMoAcluFlNd8znsiQ4CW0CK4Th6NDxSo25TEtWKAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9uCRA9TVsSAnZWagAAeH8P/34h54X9zXn2RMpyHd3T\nXe/eA4HH42Jw3jB2GpdeJLVBb7SH9KRoZWRdkTQ9B3/qVOMfTNcKDbjPYabE\niXWF+b/7iwVrXLUsw3Q+hko79YrgsPzTaRgMYUiX5R5UCGFDgaQ0YNRAiYRa\nzcjmMTTAHSgOiygfnyFTjE690rpex69ziqGnAKBMZ9dqo0oVXgCbZlpynsXl\nq4QzC+s/Ez8ulSkKtkKvCnQtRTLn/w6MA+2kdWOwfk4Cpc4Y2ix/8FM4cmrN\nTvMBP1zVCv4372nuz58Hr+Ypvh0KgSCjfMb+1kf7bdWbn+uUoBvLAu6TOxsz\nE8sJSeW6CmURa1SMlTS3XA+Cuhuw+wQMMxiN59wWjofwd73KC40hyP9cSub+\n4Ais/mk8RwRrnW44Tasa5Ceac2lHkrhC7FUYvG/NKzAN2HKNNFgMUgP/qxTv\nLrvrVHHRPrLyvgD4CmCMHCindd7L5Uogt7vQ6TIO5y4zZBlST6SeaSoSOPzf\nno/3aE+eIuY30C/axK2HUPz1CS4iKcbqB5A4Qd+BOg2FesC8omiQ3/8ZtSLM\nv1sjRW5JH76ZdC0xsGoX17M793Eu3pr/eVBJhA2K+ed88cUxRq2ZgQP8OnKo\neDULPVDX+4LhKvNaoBRSTq2HJJ9u858ItTQmRYp5kDijJR3E6GFnlDsDKLgr\npGMp\r\n=brIn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51512a4ac.0","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/shape":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/button":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/typography":"7.0.0-canary.51512a4ac.0","@material/icon-button":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.51512a4ac.0_1590779758267_0.3179288271844496","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/snackbar","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"887e2827e56932c4015d19e14542d0b0e0e0850c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.0743288fb.0.tgz","fileCount":40,"integrity":"sha512-cMvsmQXfip8ecjlBNqSqdeukJUMV+g+scDXqUCgvC7KA3zLwrXNUn7Lhl9RrHNaU1Ve41IW8OdQWgbdbs84TrA==","signatures":[{"sig":"MEUCIDlpxY+/OkJW9MgbwGXNnOj9MLjqWKViFpzrKiL3DULvAiEAnTgYqi1B+gqT/kz1STZqj6u4xvBVBhRquUAu1nyme6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WseCRA9TVsSAnZWagAAiYkQAI4qLoGHlfyL8CVpou7q\nmHuvpEwSfTJViG4OtScrBUotu2QbnVQp628gPAovcFmrlI8nYdjSpLX9iluH\nitn97b+hjU4WnVg8idGXhCk1tXm/yuS5H0BnOek8Zw50v6Y7pnrY6H2seGpn\nn1ThbuXjLIbK3Pf+9ObiQTieTO/CXCXNs0f4Y2frvvJajwD6j9aklk2Kxpgj\nGD7aPBFOzEx4B6VRRbxKsg1cbZFS1a4rpKLfzgheOpduG0t9MWEtxThH1uZl\nXzMcBdTwUSbtz/QauwJq3+8eSeo1XlEHNjNN2fs69Ns+Ac5s+voHzXcRGIUp\nH8RSWY1ojazss/vGydnrJ2smkZnT1AwPsEP+eAYWJo8yi/FdF4gUwVApVTIu\nBWAM7+LX4M7KkHy516YTt0pSUIH3xIwppwFaPxH7yleuFmx01xbg8k5+2W2i\nbI4h0S5q/IGDdvW31nxIeFrxm6O2nBZlaQqVy+1oVxfrxJfkJARQTsOUFoDq\neYP3D6AAls0uRgXvsvywczqcyG8e3E1LumAJFnLSzSkrcXlpAxSKnWPZi/JT\nvFJodZHrBy8IzEQiggwD74t6x73TVBA2zkiKnjRK/o4oRVMGbz31e3IecIb1\n+umzhBnCHpqzNPCkTIefuY7l6Sif1SXxhS73O1sH40LyThFYQxrMnLrX/bfQ\nWk4P\r\n=ZtL/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0743288fb.0","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/shape":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/button":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/typography":"7.0.0-canary.0743288fb.0","@material/icon-button":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.0743288fb.0_1590782749850_0.52346020521901","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/snackbar","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f14857c75961f67157014b38cccebabad61f311","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.06ef147b5.0.tgz","fileCount":40,"integrity":"sha512-9gMyWtSsULAK/V/3y2WNZFWDNVMVyyICclv3qqsa1EtOvBOqFktHUJUxNwmpPKjsOs2TSIfuInW4BLQm2dU5Fg==","signatures":[{"sig":"MEUCIH0zhGGo+qITdZ6McEBrAidhlpgJSjbLmCoLbfm9xFgKAiEAmC8MrwqF/hz8UMUV0J+J4RRq+y4xFTD/ZzLTB1vHGCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XN6CRA9TVsSAnZWagAAdKgP/2B23NJCUVLsa3qGZUT+\nZEdzpAh6hdVKg0fa7coHR7+t0QVrMXtIFSYIX30OeuaTSG0HMLr/7LsnWz8H\nTTuGiO5ZtmcFs2rhB/8Wf7Ql+WbBi8ODSn5UYpAZ4b3IHt7Xzlg2nooOlmy3\nTlOGxv10tqodQdQ4JtCoH47EuwAo0ZVesN6NPC+bZv6coVu2nTWm3wpkngIo\ngNNaj7g2UUp36Oigz7XT8XmhIYaQQ5+W/IMnuR63wIPFXlr+ZqajxHPaeDCm\nRKvsCgTHUioicqvmAUcfJt9TNQ+7NRFNLurnkmjt5VuAm++Fn3PczftOKXC5\niNm5ToM5Xxz0jul7e+hP0WbpjbbXdD1YbVTvhOq7NE4/niuucUuZOcdY+kkW\nfdvBd78lpRzfsilJxcoYR6y52nsS4pS7wtCdYsIt3Tkg8SbQ6K1J78xV6qfB\npUl5hiZIPuXnVwpVVx/JyttsN8G2aWqySSXMsI0ZHO1kX6fGf7r7OT1p57Gr\nSq2Csq8L/MVViRBekjt6aMiH7xWNQRWTc92jwEAaDa3Y0QXtPBkP5BPrBa3I\njdnyKwoLmOUgRH+YUZW52GEiqCDg+r7nRqXnzMLiGx7tFQFVyaKMdK6E/0yp\nP41o3i5oSs5q2pG98NMvfKngUFig7haRxoICbgNuoFI0C04clDeQHhrusrGV\noYMO\r\n=Z0K1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.06ef147b5.0","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/shape":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/button":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/typography":"7.0.0-canary.06ef147b5.0","@material/icon-button":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.06ef147b5.0_1590784890123_0.16291904958529058","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/snackbar","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f968989b75de0f9dd0851d185e8ac69ccf80bdde","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8073a20a9.0.tgz","fileCount":40,"integrity":"sha512-w6uyF5ysQsBLaoeERHbpNscio/IqTZWB1GGUWD+FB4RX5hJHcyEAVL4kvGvEQKObu74g3O/3YJRvaN+M41nfDQ==","signatures":[{"sig":"MEUCIBOwv4c8W/TyIaRUfJRxauojAoepALLccEfvFnzV/YwoAiEAh81v13RPAhKB27t5BznSPsFkm9BCj3RJA9luoY8Pt4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZohCRA9TVsSAnZWagAA+SUP/2rwbmoIdSCD1s3yFyVc\nZn+Uy58k6DWd8uOhYpNBKMJxiw1McpgWgWH3YLm4BoQSKFOtc/3wu1ALjiFi\nGn+SHfkof4LA4lyeTyH37LNviEgQp1FWYdSCGeLbSsQh1jYudnu0AfeB2Vjw\nKi5SejkYBrfTjPlI6bhZmjc0H8yR3mlazUz+Fws/ynw37ahM0j74RCqj/hXe\nGossSYWskSTdxjt+aXHCDHTn5Qxa3ZQWvVIfRboYR1yzK/uZQ0uldvYCR5NK\nClJfl6XSnCOaMlGEKL14WND75ze/zcxpZbW24iCGEzsZC3QfaNIV1HOSe0TF\nUFcULd4XWD5s7BYKZADR9FRKXhV8H+loOOX7EM739BZwCEJgl3jjjRpke+Wd\n8QO8UcWjrWvF50fqvuFL2B8yYPDeNGdKv6xJDK8WKn71F44jGyYOW9K4h1qB\n5EOPCpoRsMQMobdQCaraiXoldthhmHp4E8v+ixWHa4542jofV+uGKLiUPqLq\nYwMrmEWzhkC4TTEXDMgO2pqviSZ/udGRbPSaWGE/EwrShRIqFKOqPl+HUPDf\n4v2iEZdDwe4XOjlEnPXBOvSkWpT1+EelFSViBuYyoswnwS6FQNUT+3QYauUR\nLIEa7jhMVEmWBLgvfegdi8hhep+rDuC1/Ff9HnAqTT6Ole+nmI4Kyz7aZsvw\nm8Cs\r\n=JcSX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8073a20a9.0","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/shape":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/button":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/typography":"7.0.0-canary.8073a20a9.0","@material/icon-button":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8073a20a9.0_1590794784678_0.5074243819818853","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/snackbar","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2bda2fb8a803a3b69b3d2ae6cef19fb8b2aeea","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.72ff42330.0.tgz","fileCount":40,"integrity":"sha512-QMEtjS1etkcDTJkAvCSpbmjVKsFxnKNu20D8X0GSSsv3ooaE5bOIUhXwlupYW9P2GMx/xuPpYZtAqNLBJd+28w==","signatures":[{"sig":"MEQCIE08bHx3OZP8Tvadmwn4sUacXiAzp8eTmJDqdxKWfCAMAiBSgKGoNh8x/c3Ncxyxx/0V23leCIYyg+h6ezI8bMdf2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TCUCRA9TVsSAnZWagAAEmcP/15RJmGsQL+oa7BY8iHg\nk+qRL7MPai2JcFPBkJ92if6VYU+pb8lb0SZj/IggN6SSr/jdn56HgdXnKRAP\noGnBE3yVLs/XDPYheYoPjkTjGD6LJkKC5wSBR4JFlcMAi4LCGUJN75k0jqPw\nPzjdA7JNraaQWz75S7PJrNq0qJvm4UQPYM2qUtyW5QGBkbm8Io7POT3JPPks\nUxiTC2y8yegqBM+euKrGkkE1mLst+eBUgA/ZXPkbC86cwrgF8iVEIiVjQLtY\nkYDUWsDqOl4IjnG6hz90HUKGoMaDre7GektULHb+MeQbSdZ6VeitLDIJPfke\nIKeS/g8RVQVGe+LGuxn0zmpIpM38EUbyRWwVSGlmDoBo7rb7F8mS+s2AllMK\nC7kHmLgk9RmB7Gt3yf35ju9mIZyFbp+6tIpUlPbiUpH1TiEjsA1TRN7dhU/Y\nJ2nkSV7539uGMx26yqTPYGOjyjFdX5bPveQrmK1+/aRtWrdABY2hmM8T/7rb\nWKvNd4rIM0xLmJOzYob2k7ZomVNwrcOaCNcTgoTSIYXjPVpK4mIc4U8YLunH\njqy6romE7kPNS6+7++Lphrei4uzRW6lkAtu3nAe/il46soPUVCGE9eXqfoGa\n4E64TvEtUpee0Er3UPdUmoZ2EZdVCPs8Zv1JcE17/U6gSvu1vDtGdRM/hGt5\nt+T3\r\n=Z/iQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.72ff42330.0","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/shape":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/button":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/typography":"7.0.0-canary.72ff42330.0","@material/icon-button":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.72ff42330.0_1591029907864_0.5653297664810355","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/snackbar","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ba19477e0c4ae74823df8ace9de8fafe7796182","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.9ea52070f.0.tgz","fileCount":40,"integrity":"sha512-vN1o8/VPLyYvtLqfdl+kB5AJE6M/HEb2LwKctS4Z8N7GwQhgQ/n1Et5Z224xqqUCyO7zRbMOIa2OL+X9Zk2BJg==","signatures":[{"sig":"MEUCIQDAkXmQ1RrFE/FV/RPjG2N21dLo589AtWVF2M4aBSBo4gIgdi0EMjDWXjHU/I+DsfgFd9EB95e7fe8+Yl/sZ9Q0V1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGwCRA9TVsSAnZWagAANfcP+wVZTLMSBxv6SY3EaX3L\nUK1uJXI3fc+Z7nTLUc2S/TKRI8GU3gQ7/MytKq9Jmlv93AGHKwbOWYclvIgD\nzpbkHUy0FBSUSlWpa6e/VLMmQ7GKUlEt4NZrkN5dcy3GkPeh84bCcUrh9/Ib\nEmAWBHNtE073h8PQWdmIq/0p7kktYvEcej7Y5v6QhxNDYcj1MOOInjhGXjsL\nATY3iODpjDspygRKk+G69Y4gEPAuj3Vfm6rsVrkU42whJXj8i1SykJHCAUxT\nSzBDTflgjoSEUG4DlRSbw+H9T5+eInFLhHRsHYnLQat40FXDMQ9MBeZPoEum\nC/K3LG4uVJNhXegUWbiPJO/sWg1m4fIkFXsfcn2r7opfGhwaSO2muef5rs6F\nSoXw0Hj++LFSHwmVhmP4cI6PI4iuZnBF/PrD3RTD7EwZ2/r4vdrankYgHqT4\nUYWm/Kg4fyctPe+LCBMIba2CujPqxgcSYDne6QcesRehnJ+WktNJYU2Y2B2T\nQXi/M7DmpnCT+D4RZjioydukf86St1zvK77lOgPzendNeTZJ72mUi9VeG29r\n8zhS+Mp1qM/tEdmSJKe1ri/ce1Q8g2GpKsN2Jt1fGjrEDSkEzVNzi2AH2O/H\ndlqvGZcU+OzveaCDd3HBxwKTrGWiWVyXOwSLKDNqb7nJfzwjwFqUElXytxn2\niBSM\r\n=v/cO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9ea52070f.0","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/shape":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/button":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/typography":"7.0.0-canary.9ea52070f.0","@material/icon-button":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.9ea52070f.0_1591030192376_0.8860081854309367","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/snackbar","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bd2321024c644a4aec2f17667b10cdaef19be33","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d86ad3b60.0.tgz","fileCount":40,"integrity":"sha512-7Hq6gllcDua8P9+l8i8+l/4M+By3J1CRQAmlVufZE2ysN+pilYWUBKtlx/IOXjO+eeJEHWopwocq3Kl7cSz0qQ==","signatures":[{"sig":"MEQCIA771EkoMwa3PS9Zf6DGfcf4nK1iv2OGR68ERXJEvfhpAiB08MeuNnhZ8inRW3L8Pi01EI3vN1FgMel+2xVhFaRk4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+yCRA9TVsSAnZWagAAsFwQAJI5csAmk7fpIUEKGj0P\nmGI1XK+ZVpW/djBCAAFKTjE505opb9twng4hukZYKHeF3K07tMvYoGlKrV2i\nifQPQT1DxUgW0O+JBfVunM8zs+Sty5dCB5Hp+YdJP5duU3oYXTT6E0JGeOLf\nT8b65lLOcPr+RVBz0p2Wt8mhcf7EaFbPhucyyC8ohyFv9kQW3in240+xjGpR\nRctfciaYkNdizyzdDrdwC0YADk1v/VfB1xP0uW/jA77Nv55WWJHL+p7+YeWT\nBSSVHazgityOFvPe5hlVkiOkDLh+fyi/1K7kLFelmlh4cHSlE/EvA1ncC/bE\nB7Uh2nqeKrIZT5IdfFlJpKfAq/J7mFa3fgoNn6AwPYotJtW+1fNUNfLhyQdK\nV4CazHNBV3w/oDQpJJVdL6A4nmwCYxS1a5IoKQx0cnSfdDYkIADc5pxroWZJ\nf8OdCQHL73NU6FUUfbmd94zkHdop3WKoueXFktqPT3SRyfijpydWQ4d+lMkG\nAefUKyrXV84n84IDIGtoWasMoi3TiwaBofVnv8Jpxgm1yYlgJ4jUOQrzwWQc\nZHHVuvU0J4JSXCVCivlamxFmDPSz/7eq+JbdOYAsKZywg1jLNfXfqVf8/jmF\nZ4ij/CmUxC1b8f6Yt3G/OQIPHH7kt44IMVejn6qJ3Azr+2n3uY+NhAXmSNDa\nPmxd\r\n=WKmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d86ad3b60.0","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/shape":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/button":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/typography":"7.0.0-canary.d86ad3b60.0","@material/icon-button":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d86ad3b60.0_1591033778060_0.38149045867053366","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/snackbar","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f10f733956d7ff35d34aa3b98a5979a1cb1a3ba7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b9776b1d0.0.tgz","fileCount":40,"integrity":"sha512-VbrrgL+jUsp90zsw1p+gsAs5CCaD9uZUVMFJ4R98QC6ugdUmiMaFoHoFHOuTC9j8P9DlDXihlDjv88y4Dyy83Q==","signatures":[{"sig":"MEUCIQCSx0dGMaqWJRgKwXBaAbwUIdUKGYe2CmbKn9ztRFqlpQIgAuc24ZOo1s6x/J/bLHBbqWEDgp7zOVlWSzxeaX7Mcww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhwCRA9TVsSAnZWagAA/fsP/1GqinNBsruh4V/r1DOO\nXz4QO3Jk+GlH8AoTpgNexPGZgePMWNzMn9nciHg1NcKmyitGzLR5r2G1El4l\nqLlgH7xbfmm+eb8BuVZXnJD+rmzlMSnHEmLcdMDXKOOwcl02+G4vnYATW0fa\nRnHP7MoQCKTXSLljlmwxwBewvBxQ590JMlE+WbZ5KbLVqxZuX35TX9L6xyWH\nK8uzHEo4XZ54UeCWcatBrXi9aC2pN7QAs1pkGwer/PjER7hz9U6N/Eat4oWF\nfCjRdLKcyke8r7RdnOX05WE17kFBqOnNlOdFttEwQelQQGZSnNAjEVZ9S5vH\n5lmiCN+sOJ6jJ2CO0/GYCfnAvRB0QpRq1ICZ6iViS+fl5g6eYcyS3rOnq+iD\np2V5htJpBo5PspdaK3sdYEBjqhx/INhpMWOwL7KBunW801lOFVlbgn4uZQ1l\nVD92H55Bog2OmbNDFukhv02l1/jXuI97gsfoDl8BFs3qHeU0iapX4D/Va4m9\n4WDSxv62xUStkc+zyYrmU6V0gp5GESCCdjIL09ma/w3PmN3oFUqvTpBc5oLP\nvSYBZXxjhnGuaRwq1deLPEFn6zcxQ1tBQlFrY5/a829C/Y0Yf+Cb0smIxdIo\ndN8O64JmjDP038iVzbnr8X4WH03o/2IMkEvnc9OjWvqPHEuw6WYCvFLee60W\n73Gd\r\n=tj0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b9776b1d0.0","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/shape":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/button":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/typography":"7.0.0-canary.b9776b1d0.0","@material/icon-button":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b9776b1d0.0_1591036016166_0.29049023474613866","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/snackbar","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"584369dfb47ed8aab0658334e1c1ce9c5d04a13e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.ba6f7c294.0.tgz","fileCount":40,"integrity":"sha512-hkBtYr/GXuKb3u4qZAjDhDhTZDNTV7UXDFmVPpECDYoRRtjlwnpWvGsfqvDd5WKzHDcgMQg2+bPGU671g8Sp6A==","signatures":[{"sig":"MEQCIFflvNdrSW0+O5rtoY3LWN9Tas6QNLhch2eRT+UByKXyAiBrDe/eaRYa6VMtU350zGv4PLhqAiCVLhpyBBPxa+kFyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZoCRA9TVsSAnZWagAA+sUP/jp+GEYig0kwbHUv2RH8\nd3oFjgsmKsbm6NqiV4v/j2VOQOVr/0FU4nJQ/egyBgLhyfkLOGspUVe9gEJI\nlnJwJM9wRIK/Ej5IekjG0H4JPTQ773d9jJmXNEvzk/Z547pAmhMi1kP5+UUc\nH0jI388LfKGyD1zcvk/Ae13Lt8fvRp29OTRrLkp45PuTuJkj4jTxihfJ1fpt\nFduNozB+YUTR5EWD3w0QyjNq/rTkSBes3jXtNQdTVO6eFQOXqhk7925VB1Km\n8ggWzUCQNgi1SCie2UPiGoSknoO7xGcAL+/rOTxySsEOInbfAFfPG+scI5QZ\nMJtvwgkX1lYKJAGSwxCYey40AGtM0kCPIbFVvjWkQpqJ/3H38ivQnY8sDx13\nG3JRFQ3Quwcm+8H9y591iUp2UKjqGPJycHFJWy+MXH3rJ/SP2AoqGH+A3/b7\nj5asS0+uHxM/S5syVGaDcLDvc9zjUMl5HPIuOksIZViMJvSvrx5Z/XOJmzfN\nIaTct4fdG4sWbkS7S6vIb5fp/Yvi2td4IExMhtHfnqVFMHD89L2XsF+frJ3F\nmU0P9c6kmz4DgjKvDerGkRo8ksvi8leXJiakqsdIzhkH773gErAWBQ9X/DYp\nI7VNJO6gNxZZ44pvFnGl+gdDOU5zkmbtOFSyTw76U5nhzdtat53J3RhFRBy0\nDGjy\r\n=8QRl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ba6f7c294.0","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/shape":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/button":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/typography":"7.0.0-canary.ba6f7c294.0","@material/icon-button":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.ba6f7c294.0_1591117416229_0.19265491773791021","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/snackbar","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71467d504813c7b9a564a954edd3938db7dffc1f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.cf3b664ab.0.tgz","fileCount":40,"integrity":"sha512-MqTs1qTLB8cbKoqnxA5RArGkI4uoRseJrQvyb3Mlh7GFPEFRg3LP+hrELUL9JzeCWb3OAsr7nPQxb0d/HL8Htw==","signatures":[{"sig":"MEQCIAsIIdBx1Cc0f/jx+poLqmdETPHcVbS8Fd/F5KDpPLVSAiBrOzXhjxS6of5BDNi239WnFJpRnQtQczc/aDIW6V6Bjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1plXCRA9TVsSAnZWagAAORMP/iPTsaCv9qG9WMQr/VVB\nVpb1LlOnItKLZUO5qIuhDuUrCsgsT4oEjsjYOkiNsZM5xihj7CRlvyEg+McS\nvSB+lIfWhHYg/f7tavw0b98b/WdqVRu3RGokFRETwn7+6fXICLBGEkq++Vw+\nB9MYmYNEXo8nrPa05DsG0N5rsARa/Kaf3p0QNR2Sj9hzU1oF3Tsq5tSlUHs1\nvnQkmrgYSDRr4hD8udp3WjO5Yn/4ny1lRnplgxTkOAPjawk/QXn0J2tSLOQ/\ngsx3kGo2mRXn3BQJD5BSvGte9nssIqo+c4pDQgMfAMc0jxyHjl5xRLH5ZTEz\nQKLfmIb7D1MpjrhtIpNKgJHkDu0IpzM859Jr8WV/uW54P/u8Ft/SqZIsab7e\ndwuMSl4ryBfmRolsnK0X+4z3ROOkOTOek425jtORus2P6bk49/spwbt3PpGf\nglDaAveVWlY7v4IiL4KF0FPrOpTEqg6XxLP1wqkpsJH/bWrbdVAZ+doXC1Aj\nQ+fjUJFOr4pCwcVp5QAJFXFcoCwEpmKmQVuQS59IkN1WGrKPNgituON/H4Lv\n6vQ6WGNxgnhrMArVh5xDrQ3D6K7sHDCzGgE8qptc9NzOpsknoH1S6ed/D0ma\nnTR7HruE+XpD8p+Mr2KKrWQWL38qJ8dEbTZjAYPws6sN2yxAQAL2TU+0RYFu\nFtLj\r\n=YhBq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf3b664ab.0","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/shape":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/button":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/typography":"7.0.0-canary.cf3b664ab.0","@material/icon-button":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.cf3b664ab.0_1591122262256_0.6769338052413623","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/snackbar","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6f626128d02429c3eb9747a325d09297c425bd3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":40,"integrity":"sha512-C3jRoGjkQJnka8U8+c6b31ObAQOcpdB1mb1/8KEbK1zsbB8SQC4qdgq3n024odF+KDSuB2VyLoPZFExU0y57Zg==","signatures":[{"sig":"MEYCIQC9OiiFAhsjQIs4+Hi61rob2vktjBYJughF8ucJzic0RwIhAIRxkAxwPAnouJiZ7rryaitYURAEepTVvWdWJVe4RWlk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uZtCRA9TVsSAnZWagAA6g4P/jGVQmC3uf0UxCHVoGgh\nqS5rZEl7PfLlhUPLZYKmAU6jT5gqmnDPfLFEI0YD4qYIvSaOI1djf+R6+PYY\nys3lTiMRuiD+g/yGT12I/AlN3DN461Y3UjiYGN/Vmxi6sL2nen24JVczN2Wc\nFYwnyur9Oc3Z9/gOFHZOjeSHvJwrRMyVJsil6drFl/NVn8mQ6MgN8ugP/ooC\nfzOjuqFaTuwIamHnPlKZbqXngTLd4Ogu14iYFJtbT9sLUQVOdsIcOu2+nB9S\nMQBAlwUhp8PA/JqfQSA4tQriK+T4x73tmmDPdS6mJzAr7xsBnVJl4bMeJgDC\nS1+HNqFaNBthqTdqjXCscvgqma8OUJEUnfKiNxCpz2/9Zfz8t4/CrkA8OIos\naAR8bDFeH3/xsR/R0j1iKNw78jEx8pUuPpw6IMLC9bAZd4bmrXLzFpuar3uT\ngoGCm5vXGh50x1Y0PpG3tYP/AJmmv6Uh7NI0gJe9ckJP6Gu9GBm5ROjlp3cz\n7ostFpvetSXzl7gFNqzMLjODkgp3uMZ3TJ2PTw2U9hKlR6xz440nZnUGkopS\nyoaGtveCmNrO1Acxo+lnO5KJ6q1ytUDR+hfm8eJr0ienVJc1M4bpERaruWRE\nw17IkS0+bRdWmNAQm2JcAVa9v8s5bSBW9H0tDzeBB9h4zX717FfxyMzv9UC9\nvE06\r\n=MCPX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/shape":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/button":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/typography":"7.0.0-canary.4ba3c9a31.0","@material/icon-button":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.4ba3c9a31.0_1591141997325_0.7175359387520719","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/snackbar","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a84689039f34f12ce50d9188ee0838edbc0e7a9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.388b042c7.0.tgz","fileCount":40,"integrity":"sha512-/DZOrYQa2QqiVPQLB/ZzDk2TnRIb8rSJNVrMkbaW4HdbJkwohzEsCctkRNOre3TGsLMAxHWd3YguMYkOM4jTIQ==","signatures":[{"sig":"MEQCIDTl5fkkDOFqIcKvVsRckt69bi0HEDwCLQkjwCnu+F/3AiBa+D9kI2af+Pw7fyUqVTOKtIaCPHTdTkcn7NYk9fiEUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16n5CRA9TVsSAnZWagAA5MMP/iIRVJWXyBW89MOCXI0d\n4Ia7yrEphKjHcVDWS8ahrBWNM6pARvDLju1moM+++O7v5Ngp751hYLyNUFiV\ntl9sSrpmkhT5vZX7fP8WrbISxqwDMxQS3hc/VmSBWkrla1eElhPzrwBE9yFl\nVO+HXXdrFf+6VUO1YwLCHgS7hsHNq9mCI7nMtgeWf3zZsZSsRGrs2vve+Czx\nzhuQv8nlZFGZoTpxJlwxh3vlBIt2IwBPQk6f1NfY8VtDld50dfElbOX1gIto\n2VeqVGTc6xoemBHuK03gCHKv+Q93dd3BewrKEJGrGWWdtS7RCWGaGad8Za6V\nLEjrfMJi+3b168nVoTDajmyQbAQbsjiuW0sDw3nyB+W7OT+3ycTCbKQEFYGY\n3h0GujVpjhfbzsEIA+GoTlp7IucUdKSdqP6Y2OICVPWO+o/jqud+QNMUBKdv\nT+0ZAO/mqiTxV8wnutmOlRqVjnKmLgqtCn19jWIFAky1kRpbm4A5TiWD/m61\nN4qDPtpGK755gR0VvSz4kOOhd1XbLN2scpAePqBUp2647ozr1gqaXWzPwVYV\nBIOuj/wfHorIJC6UolrN7jI0XlqhihpLstXl1/Y4MCp8zFv6fgdxEmUmcYk4\nio9iJDgjwNRx+PGTWZMGJB58IedjHUDk/A6QJegt4DyOgrrJNDIwnB5FKMZy\nvICm\r\n=xGaJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.388b042c7.0","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/shape":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/button":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/typography":"7.0.0-canary.388b042c7.0","@material/icon-button":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.388b042c7.0_1591192057259_0.464717178279755","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/snackbar","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aba8423db51e225a6c31340b26440b910a952c3f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.cca1ca84d.0.tgz","fileCount":40,"integrity":"sha512-Eh+Ot+OSr0yg50CvXdV/O6ker8c2KAItGR9vLgJXw9cZC2q3EyqEX5AYqrAA+mXVfnh+LbeN8X4Znn5KAAEmZQ==","signatures":[{"sig":"MEQCIChEYlGhOEjZ21Tqe3atbqlXbJJG2mRsJ70bdmMxv5GuAiBRXtNiqC5HRn2oHRctJPFwZvq1uY4B1lQ8zAA6g0KvLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18n+CRA9TVsSAnZWagAAkC8P/1nfofasVIWrbvzNW/oe\nw+tRa6L4Eb9Z6MmRdsg6JSRibgsEdob3yOp8PVkEv3H1Eiu1vMgD1i63wlAv\ndkb+EUKiH2RgWaCNPksfJ0aKGXbbFbRZK9sNrH36gNWBCmwG6fyE+WkxUJUs\n7TMHKdfC3eZKP5ocQYRMi1NRpc/O1Jr41rge73kCp7R99fqjuFesCbFy2p9Q\n3uZCOqD1LE7R0SmJ6Pvdf/Bdf7D4ZK4EA8wyP60NGRXDw/rSKeSla+Cqkrwr\nzxyfdbxEO2DIE4pQQDXCPyNcyksxEJwvgkLLvOD24/JCviI/U2ZX7qeGxLaJ\n11n8tfORoKQG1Tpyik0q0NB/hY7mbVIEWn1m0qn3dDcrRTGjq/v9+iDe+59t\n8/cB3MdMsZZ2h5kt5KOTIhNUpS+0bpTN9vzE8gWfkvFn5hrUnmW9799ulftH\nMPcx6BDqfmc15PXvbttjVXDlFFycQTLvAWbAVsWZuJT1I0ndT9Bir2KKOoJC\n5Q8nWsQ2vas3hge/zkYVMmPSHSEPHVGelFXvidMF3kYpC/aGOBpo3gYcmny+\nbL52zMdttdjLgTyeyHSt6nxfFm59dPPaVyMTq2jR7SRCdXPeh6dCoVbsKRLv\n2RS0Z7eMTBiqac7r0Nkofr8040S5wXD2YN/6uya4HWwQRZOrMLbmBwwRhIOm\njzRQ\r\n=700g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cca1ca84d.0","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/shape":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/button":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/typography":"7.0.0-canary.cca1ca84d.0","@material/icon-button":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.cca1ca84d.0_1591200253373_0.18176919152992754","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/snackbar","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d87ecd41a0e97706835d876124b4b32fb355e5e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":40,"integrity":"sha512-31unxtEta9YIYBZh6/UfFK9kETFRNLQTbbARFk/0xhS7XndFH/zss4nq9OAOrk21k+1grA84664DihSrqo11aA==","signatures":[{"sig":"MEUCIHRnkFdTxHTTpxWjPCh/96wXOAHpbVqsdTmUyvRZxcbhAiEAwHKq9iAI6pdxYeQNGGChVAvEiLc2nbhoNp1U7BaeEhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/LsCRA9TVsSAnZWagAABrYP/jJhxvcWRv1bIdEZ2cG6\nc02LohI0e1g6ykkIiRi6zmlF/oyaJIMSMB3ot+LCjTanZsqH18RtToJK/qzL\ng+Hz6kzh4MnVq3HFnUeOr2p/lKzzn4jp8UE0phePKIMaenesv5nDpPNBxklr\nlf+iBdu2rOsgZeiZs8qTFSsGzQKpaKkU3EoUcPFpi5Y4DIQnLj8Q2N08InN/\nXD3cPxIxCUYPW6W1Zi0Z+ykF1vEO3+Wh4jgLC+vDSCbJc0SMlzQoMGqdIlQD\nffh00Ods7lOictCQ+TeULconWDt5TfT9zdwEKXVSqFSLBJllkM8HH7xTX1zU\n01u05QAJ/IvC/AeVCgLf3G8dmEE10wFmROZ0t/dyyauzLpCwu6xCUmXgfqma\n/uaYtdSC4LFaO83ifZ5Rnn+bcG5FtS6zzXwyvGpwnPH7ySgrHDMVM2QvW6T5\nH4VpZghtSTD/Bjz3EE7kh6Yr+CCVU2dAbInephStDGjV80DbZhuuY88ypNhT\nEM/2EOP2F7djqF+L0EVX0pj472RtBI5m6RltfNm+DlzoGqC14rxBNbFWSUe4\nAsJ2dDNU9PGtziFFAXub71hhKvDY0369kaRvca4q9ZCK9msXu7OTLsE9aywQ\nc7IXl3mitLW8d4k1f5MvQWvtlqqjytUjFkzfTCDA3DWc2wBC/oJQG5wiVhYA\nQT36\r\n=weps\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/shape":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/button":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/typography":"7.0.0-canary.9b0b5f2e0.0","@material/icon-button":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.9b0b5f2e0.0_1591210731909_0.6705742199220031","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/snackbar","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"026ca24b5a0d254600b772f258f691ae52f87da3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.0a7895f4d.0.tgz","fileCount":40,"integrity":"sha512-M+fjN0RLeC0Ht5Oma92cAEplW1s55MexyPc0yCP3pcIHrg5cotHU+GL43zw1hRGNeWXtcSggVysQSbHxBc1Z6w==","signatures":[{"sig":"MEQCICrZ9bjvpOpW4UJWSDdiWfrrnOEkSIPr/VGCdLmAhqegAiBqDknD1zwzJSL63ns7U4TKaN9qNzipJJNhDW7+Mr8weQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BGlCRA9TVsSAnZWagAAOWIP/1DB25CGGV5DM2qGrTAG\n/auCzOY1XsFUb/1gr3+gwnzpuakBJfGZjRt1SmAPhddpEXYvO957ksz1xC4X\nB6JXE9TrAFMsEUIwxLuSsmvNXaYI76eRIUULceNCHjRTF3YNzSZw4MJdOvQ0\n+p1BMetBCxouXWxHQvgej2ANX4Dx2Xhit+mG7HowL+ZaXy0PRQkKLiO0FPVX\nBs3z5CPVK4XiRLQG8/SE8jdYRHhXjEVF7UysEpuP3sqjkXg9rFixOl86PvEw\nWwdD6WD0O2A2F24ijOolOWQQBNrjS/xQfQUX2HCV/pJ74dPlhpgzzfOuGJLw\ns91oeo87hjEtYSmtg6VoL9+Sv/2vd9xPqFhYz4wrVTsHXsEsQkrHrEGYtyO6\nfMmAL/7ZvL1c4WXBs2Va3W5DKGuKHUuqRE7u3XEJd90+urDt30UIOovuNi0Y\ntifYrEmRdmhfIpo35DQriiNj/wTqe3biAd5BCUJNm/OobdIOVPnPn36Le/X7\n75zLGM2Z9O0+2NKVC9jX1nSCSfslWctrgx/UiG3f6A1o0i6F5L/eI52JWy64\n/rG4Ndw0YmG8W7PXFzrlFe8R1cqdPxc0EnOMqjxaWNpiTjbZhoL0D5q9QDDz\nr/NpV9/slqmvoLYHTR1s1o+vGc01v0O6XuymR/qt+DNkHzFlyUHLGE6WLBaB\nljsu\r\n=rHYw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a7895f4d.0","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/shape":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/button":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/typography":"7.0.0-canary.0a7895f4d.0","@material/icon-button":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.0a7895f4d.0_1591218597518_0.7977575753653976","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/snackbar","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"939eec0ccd061f633dc95887bf1a0aafa22c9253","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.7461aad68.0.tgz","fileCount":40,"integrity":"sha512-NlgeClgJtehhVRooPCA4Lm64nWXAylu9dBqXkSXUbHymHGrRXlHH4Jtwcpl7bstzGvW26y9RFgfkkfDpakzPbg==","signatures":[{"sig":"MEYCIQDIPdI1Mrr0yMuLQJgEcCzNW+7uvmHLJw6A/ptg33NPRgIhANNYUCn9g6qDV6ybs0f9ZrACUhjgKvSOFaOk8j0frrc+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CCNCRA9TVsSAnZWagAAzeAQAIY842RkT5gHI9/WRpO/\nqK/eGlrhdj5PjN0tBV8vf6POPZbmH+FMOFpjXtybWBVSshalN9vyMmf0N8f9\nldl9Hbr237zYk80GAyAmJ51DMzpYVtEyn7ekXUDVXxkmVV78kIiL3Et5toZe\nWWmGk5aTgpc3ExXlLzwHPYFdTP1z3hFAFQUXQD/w4uXt+apWxv3TmWtjtp3j\nSOo2Rc0xaw6GPtR3WNIh7VvR7epXF+66iPBXI5dfTG458IJAZZDX3/YqOag+\n1wNBA7H4rvvGxx8ZPDQ9/GAgn7GtAYBeY2W3tBCB4DpoLlfZlFS7BUA424kZ\nHExCQbuSnppYYFCH3hCu7VrtLKJnnfM4sGqoVtfZpPRjeRYOhdA4e9mou3hF\ncP23QxfbynYF+mafton8DujODGMo22Uy2CuxGSgzJe/nGdhWmZ88Ph9N3jwm\nnePsKqZDGexh0FdFsIE7gcdtF5EHdMNK0vDhhPJWevRept7ovl+1mw+N0SrY\nsTzwPXALl4fA9M+PRAzJMW5EMa1ZqK3ETGN3Ij94iUjc4Lh+ZONEmfYE9FL8\naUjPHJ0MglGuRgfZpO0xZWpjp2AtPDmV4cZ8DRi7+6TQO0kZUjgm8vGLzW4A\nMnckI2uXdIZSi7XCU3+vqsV2w2J6Tl/maN2W/cYRmHpBywXs8n90Je348sOl\nhm0x\r\n=K9lq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7461aad68.0","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/shape":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/button":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/typography":"7.0.0-canary.7461aad68.0","@material/icon-button":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.7461aad68.0_1591222412921_0.26426737870508243","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/snackbar","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"431885f5f75769c9a16a6abd9dcc984491b420f9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":40,"integrity":"sha512-jo+APgab5ZAwQfi7lkBENMEDaNdeVtAhFFwhRge3pUd5d5InE2yQRPvwVN2L49uHU1rlsBCu4uekW12LoQZPPA==","signatures":[{"sig":"MEYCIQDwAuh1Ujch1one8f/fsOx5djXJhLmWVbQdLNfhJuJ/OgIhAOOupOL24AgVB40W02Y+6tpC1GiRv/s2r/D4VEP71HOF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WRrCRA9TVsSAnZWagAAA+cP/0eUjlB76NuZlQtTNNE/\nCS9I744ujdnbAy3DNmnGocnNY1qDVcpAMuxdgnAZvXl6XRxdI9TFe4yn/ec1\nglOW+baBZ1mG4/8ec3DqppTGNVU4n3csyVcYP2rhJYSX9hZHYL+Y5+pZa7xL\na5Zq3biuEvQXa/ESEfwcqQj/kgaep1jU7livqwTgkGX+ZHjcum/tYMAup8fO\nhs+iHEkyZDUQQEVjGrC8bMZ/RNaXTvDzkwo3M3DnyKe5Qw8WGaS7T8DuHHG+\n2Jk+pCPtlC3yQ2fCcZur3WGBtOOWXjn13HcHYrRy5IOeNNPTfcc5v6HVyHQq\nNDB3seRpHF61fW0F69yiRvJtsfLqZs2PEQU2WOBRF7pGUciMAk7Gn8XFNbif\n1bxEC0RIvtepXvyPyUn0Mn9HcSLzJDnM1ziSux3bDwPzYz1x0own4SXzQg0F\nkaVbq7A84P4cUCHZNYvn1aquaM+4+MPi0RkYJTlNimdNOlZilK2FaRx4SnDS\ncrcTD8sbSZxbkdXUA43FX+S395hR9wigCUnEkbKqMEtoDeWEWjQU2+HkHFmt\n5zHvMceUJPT+PavDByHn9xfaGzDD2g38pQXaiN9uLcPLZmY/CYUR+18BvmWb\nPY1ir/w5Q52WnWNIID69yuA34R67CsxMJsDFzBMieFL3vhx73dHOfyqPL56q\nfkAb\r\n=v0nX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/shape":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/button":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/typography":"7.0.0-canary.a0dc2b5c4.0","@material/icon-button":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.a0dc2b5c4.0_1591305319944_0.09845544949394713","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/snackbar","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"769729b43bf09de9de0d632c61ba41620de42f81","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.2b420c5b3.0.tgz","fileCount":40,"integrity":"sha512-YnWOxt4s998T5jgDBleSYwFO0Gm1t9LHpT0oOHQW1gKQUkt7ul2BgZM+Cn/I7VNsbIscAthKpH79Xa/IMzF/3A==","signatures":[{"sig":"MEUCIGQ9Sk7QGuc/luvxkjGMS9M3is6MNEKhffLH4DzCU1JnAiEA0/m6P+i3j6y95rQHOpmd+BmQ/+B9IDsxY4oN0c9c5Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mQdCRA9TVsSAnZWagAAS6AP/08MYa+FMHT+H515EO4E\nGPXYzrgOQVVhSEmKZx70u67VrRC1JLhOnbPTpAj2oD9r0Bp9zYq2/kLNpnmw\n9mb7WTISz35kxsDXlYQ7CMFkqQ/5zu1NHKptoZRSk5sYmlOPog18GXiNOCoK\nkHAM7LXXa3EiSdtCF/xToyojyDxf9eWgerWtXr0xANskTldYhFFxg5r8yMB5\ngN/4kkAbARRob+UFwONsBzz90SCyDvsJff/XxgijPRHD3Ry61Vbch5uySsLi\n3sanfyO8ItFAH2a1j0VoxSaW1BQJsLya/yZeOkr3e4eG6mcU29xAD5nXfJt5\n9RQbXIaiecjHh37z9ht6iZdys9IJCQ956xRg/6ySqOQCXfTr5NmnGI14ua6A\nc0s5+EzGZbaFJJuV8lLz7SXUkl++6+MXzmLdHKABYXFdL4uOkLS6yoTyiCmR\nIZJEz8HFH92qOjRoSksOMsNw2Mw/NFhXI7slSSp93mMgQVcJX15CbnUBaAoR\n9dHlfdYCynBhjwgxuqWF1jJTd7GRFhxpbSwffXOGKMt/nTp+8GfLFJ2BTV41\nMlHXX7mz0d1ijyaGxrzRjqc49ANZV4dLijU1zK1A25Yh23oqBrq1Ydt7nBoz\nkKj1BNzlgWFoQQyq9kThiVyAKUcaIh+r0teHoPIwKl9JFBjcbtxC5KqBjv1i\n5BOz\r\n=qV+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2b420c5b3.0","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/shape":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/button":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/typography":"7.0.0-canary.2b420c5b3.0","@material/icon-button":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.2b420c5b3.0_1591632924825_0.9222271342752977","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/snackbar","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b4d5ad077e52c6e3fbbadb1506fc35c475f2238","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8fa22aacc.0.tgz","fileCount":40,"integrity":"sha512-LDge9Y98C3FfVGSNDOqlYEm6jHw78y1/HIEiOsFCxRC3wqO00Aowe5zx6Wr/s7YuqPPIkdKJk9qjSPZo7bQ5ag==","signatures":[{"sig":"MEUCIQCZI8iGR+Rr73AbXYDqELwof0WJamgWB7LlV8V08e79WAIgAOlB5Noryam3Or9AkFeibE3FAq9ZPVAmXKTNs2ni/fM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n3oCRA9TVsSAnZWagAAC9EP/jrddPhCagjgjX4BHVdQ\nUnN37KQyakZR417oIHmjECPLPpgCq0yPshO52VoU8j6YIiV9JuVZ+DEP/vJ2\npWC3WerD5DgQjefIqqN9cP14q5k79YxasdA1wGzQEMd3kOyXlcGtxCdzFhq6\nbcLX6gUsGthVQLXSnCxduR1SHntfDwjXjwjlxAVdaPpZYYR1BNxrNh4v/3zc\n3l5vKOpL+x3WycAjwAzkh/HPC8vK5fLr+RuvwABzdLZbS4+6j3KxTHhhQh68\nlGyGsSzWcWDSk3NVODVZaJov4ObCIOWE9q741yfii9oV9Uhcby4tnq0XPAAp\nqeR2Wtz5jQCmJAL7Xte4Ysd2IuCT9sws7cpItDGRtwBvAg1KYUwhSDaxeTr9\nlmYLqNrkZ4nw07fgdOk9Ep7BS5TUAyW0DQ1d1cwrTYJd/jsIBQniF2pna8Yt\nqIco47XxFZQmNZue/R6pi2yCX7m8ANvm90QieIiu/LXRm8J7Up8SZqmuc5nx\nJxpTYoruC3qIDc85qHsI9w76AEJHMtWOlMChCpgqDEQqGJXUFcH2Oq3czgDO\nbBIj4oQGUfJXf/BF/7g7VBn3tmSFHbv++ViqDX0Vn+xm1ezzrFyh6/vp6NBy\nL7QgPkiDbWZG7WhQnpOJkpjxqSOgtgEpVJE3HUuTACOJ8IAgLZX+A+mP1y06\nYYGF\r\n=T6FX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8fa22aacc.0","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/shape":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/button":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/typography":"7.0.0-canary.8fa22aacc.0","@material/icon-button":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8fa22aacc.0_1591639528191_0.3271606300579546","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/snackbar","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"702b7fe3d314e790fedd087f9193dd59fc77f19d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":40,"integrity":"sha512-YOO5iax8S7BNykcp2LM8zsfVbRD8Q9lPpq5drGiQi+JQ95S7KvKg6u78WyovMb53s5/nKiBsBh/ClJykdI/t3A==","signatures":[{"sig":"MEYCIQCIqcmU3n5+svgpoT833/D7iNH3D0uRMr147S8P9wXofAIhAPuas4O+o5WZcEOXNM25qJfsENwMWoqGPIhUhzFTXBon","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3oc5CRA9TVsSAnZWagAAlnUP/RCLG5Gcb7L2D6hVOD/z\nr23XkX9zbcV/zXBQEtsNGUbztPl+V3DAu2btLsGl6z3YnU2DjegsP4wX++vs\nGRgrYvJW1nznXFHNOVtTdAIZFVYxy5hG7kNNKHsMYF+d84rIhNlkGtIrWz6m\nHHmEX510TP+jRnLKIDYIYriWQUwgsiKwDuEF1fmhwOPH8T9/GigmZkFmuUa+\nS1lJG/hxrZ5QijnbQCB6O3DYybTNPE+kqBxTHUzBSz5XeBWmGYWWQw5NLolj\nkjkFN/SPpoXLI9y0Sucvs98Cj3Gpzj4qwrkiKM78ue0xd1KzuL3EnxYdZrBn\nlJxMANJgCgDlxTLu9NqpVg//3kCFMEg4zkDMPqtFYidsUDFZqKJie37nmaej\nAeNmOAdmjSN7cP9d5+vjRuLDNDYNMEQa7KRK4x6sQbDLgH3ko7hwjIF0ZaPL\n0qIveBsEXXjPNHXtXq7xu/N6fT+H8tv0XUg/PxmbCbyTIPhZRG9mXyQIVE/X\n12xRjcTEzV5wAdcuJGF+79DxMlc8oECgSxIgnMbx4dEuZ2kvRrU2gfIJSY2k\n3ngudgZM7SrwksASWx0RUK4GDN1HcoEFUdv7l9yNyrPdNO6BKSX5cuxLueJC\n8YQqqepBU0BKAMG3iyhG/8z7VjyPMhbS7XOd1sdaI+wtGv5kL7vS/0kdTXTW\ntAxq\r\n=n2PQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/shape":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/button":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/typography":"7.0.0-canary.21c4e4ed8.0","@material/icon-button":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.21c4e4ed8.0_1591641913161_0.2489575870103995","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/snackbar","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a69344598f9b6aa2839855c927bf95c1b1c5c757","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.dfde46516.0.tgz","fileCount":40,"integrity":"sha512-3pT5U6jp5S4tHLQHUSHd44Oe+Wpx+ig4RZZXwX79DGcRZAmsM94GHHxb/tAkrfgVj1vb6GWspw6kQ3+abkMv+A==","signatures":[{"sig":"MEQCIGeMlhlCiOgwBy657bXQtsRwv/LgSA6lE4cl0jwFzEQLAiBmOTf3UGsfPgGk23wdsuEYh/8r08NVZttaI48SF4Ba/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pTBCRA9TVsSAnZWagAA3OUP+wTtUb3Ano1jIhNzlTgg\n86UWTYCy3sISzIWf9b51Qp9yhqFZaG8JBmcz6kovWxHcneiWen9uwhHi7Av0\nLtF3/jIZ5a1QK5NKWMARLo3eFbVAqkbsHYdeb7MSjP9GepMtp3ttY1BoyImM\nNckSWv1Ciq5ZjFm08cfIpaFfLq/II8iBk9l3J1gkAOSNZ8QCjEOpK5OrkLwY\n42P7XAdpV+B7yIrgSW84fq7C5HvLaE7cifhcMRuJGXGi11q7mUb9ZGF9w7MS\ny0tmMO/07MV5RlKtaRuGMtzego5FN3h1QLSxFUsawEoYsYwaOCajg3ffMJT7\nrCpJUXijYebQG9iY77lUbTMEvYHPm0H0NHWsL2DMs39MVSvyOt/2HDxcL6h3\nXD253RClBZuTvgp0fs4IxstYhTzhzZlyM5HAb+OlbKNFuhbUn9ZC3LNgP/ki\n1SFaVIuyqxe2IxXct4E1u/XgAxhzsLi7YMViKjexnRHQ/y2nBVq+inBfGqD4\nccod8sozu4VyCqrKwQ2KJmBhXtYeTfnAitF8DW1qorgl5KFVIVjhIftiWXvm\nQ7mevFzdLte1YWGvDa7piFjgVyYgRcV+5lzj6B1ds/dopMn+4eQ8WTUNZgk7\nOVtmquVRg1NPidsjgEYlD6lFLXA1WtvTSwqYzmxPKLt2ZrSdj+hKSbqoMMA6\nUpjw\r\n=jDPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.dfde46516.0","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/shape":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/button":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/typography":"7.0.0-canary.dfde46516.0","@material/icon-button":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.dfde46516.0_1591645377163_0.0225483195266325","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/snackbar","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e9b48d4dc05fa83350e93782f10e0e5df3c9b01","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.05cc5c206.0.tgz","fileCount":40,"integrity":"sha512-ZeZgiDek+aipjNpsyU1HhyeKx1ShwyfKibC6WJ3S2mh5RLgixQXn9PUk7Q5oe6LnZV+Z5GH60gWZQo0kZbu4HA==","signatures":[{"sig":"MEUCIAdPs/s9Mfvcs6LUz9jJ4Wh8S/DFyrNqvBqDdLPWlMU9AiEAnLmx/VyY/W10JrX+Mq9siNn4qBmm7mmDU+VPY9ASiMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qZzCRA9TVsSAnZWagAAnCIP/iXspwieYsuNKvubMhDR\nn7TPuranaVKowhjN2aY1Pi0UKrIGlsMa+RKCmnohPVxeHVSnk/Ytlgg5tU1z\njYdaJqUmcfFd3NrCgJ17JNxiaCDFHRosh2/ZoTEqvBe5oA3qUsecFm5WxHOs\nhJF2+PGR0Vqlx8IBU9NHq7P35+7nlxwCNX6cGiQOGLWOSJWDggWOZ+w8SAC9\nR2iyI5xWdha1Pu4k6SRbFDi/zBVmFp3B0GiIoLcGSjoFExt821TU/U7MUxFW\nh2RYYTq0VBLQvKJBrQzyKBCCUDaz2hLa1oVn4A3WztAtXR2iaYaG8t9a6TAC\nlGij2llLFON48ThCY3HLnVzQy0qGSOKvwL2h5Py52ky3bi7DAXCayzLt+mmP\noDu9+EBS/n1OUnDQ3KEAEdrREtQyE+gaDMg3TlvhWbuKETqTInTStZeJgLDK\nJNeVfEHtPmV+6Vq/PaEmuIbKJ7eZcqSWdpxqYg548kiRE/z4rkGaIq80C49Z\nLdt2jVrkMdaMt3sgtQU8y8ORUZ6NyVRpB3Gputeb4NsWKg7NvMg5NnGOTRE3\ngLa7jvReJD40+FHB92NKm0KGg76+8PIOQVrXwCsaKXLGFe8Q8psxf2wdS41r\nHuKaHZbqvWBUKMMJ4rRg/Q4wbkbo+S6X9wvA1QX84UwPQmWla1EaPLC5/gyJ\nMC6T\r\n=6aH1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.05cc5c206.0","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/shape":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/button":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/typography":"7.0.0-canary.05cc5c206.0","@material/icon-button":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.05cc5c206.0_1591649906469_0.6261419011123297","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/snackbar","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76309794c695bd3e642ebda334c393014d73fae7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.3ee488f1c.0.tgz","fileCount":40,"integrity":"sha512-K8f8SV9uhw4rsWU6Vlj8XEwjVzUY/VARLtyrvqMlrPfcv0Lca/G23HQ3OZ3JdmU7NFUW0aiN2bSCmrWTTTB6Hw==","signatures":[{"sig":"MEQCIFaWhGEjh2jYMqIU3CGIdeT09DLY/4mKm4FK5l0MFCIKAiA0bivNybLpmj7S9y9aNAUhvDoD6Q0A8GbhOQN5/fIb3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36K9CRA9TVsSAnZWagAAcYEP/jEboLaXCCfG0QkzaME3\nIBROYTFL75OS1iCuyjB7mQ960MWTvye+JpEZBj9BRWSSyBtc24Ib683xiFZU\nzC/4XI+ljQgbqg2bLO99ukAeLeUUhqvtASCjPV0yor1QqJ9OYPBWDisimJTP\n86unGgsrRXXoe6sNS9w53dzz/b9JX/H3sYNrGBugC1LGJWxiutrC3IUs/sbB\nms8YqX1GwGYeeQsgeKw25jQ9S/eWRZDQrCUBSIhWHKcWiKVkLpV+ssOGAImp\nOyJQxh9CNml13g++4rFCdxR2QYjE9zKbiA4RllFx9Shxj5um87HQVK59cJup\n2p8EoOsIE1vQ47rzsKVDXLocHGmyt54Q5AQry1HJKJLrkZAhzQshvDbusG1m\ncMpcR1lqdAIoHDJQ/koZmylfbBsrokB9QcM03rBEmjxZn9mkc51yc51COtxm\n7hmcptRlOAcuxqTB1xpLjh1chNdIOpPwYMB5Z+y4bzP4iOo2BrxyCWFZp6em\nNIWulQu3AoD7935S9ZMVqywwWP8QFtrOYSItPgEy6tlkzXg0cwFVOTtf/5Q8\nPmm1hl+PtoH0VbGUkjvi468lQ+FiDc7Ee10I+LRecCRDvdEwHjhCoqaiHjd5\ndMGafpD/S6ZO5EzQ1tnkIrReY6k15VrfpBO0tUQiU7i4s3cbifsUwsB+GxiQ\n2jSQ\r\n=lX9M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3ee488f1c.0","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/shape":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/button":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/typography":"7.0.0-canary.3ee488f1c.0","@material/icon-button":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.3ee488f1c.0_1591714492904_0.7866351112413239","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/snackbar","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"356c7befbdf33f7b0ff413221332ad8640a03019","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.b83d720ee.0.tgz","fileCount":40,"integrity":"sha512-Y8bl7XxAOiboBix1vH/p1Co6cFvIwLX6YgmFxU/LTF0NZLRJIwb4VW/i2s5gLI+YPd7xdy2iZpVf2B3wdPdpuQ==","signatures":[{"sig":"MEYCIQDjUL0OQLIiqhITf19VN75pVAcxrHZz7KQD4zVdxETaTAIhALrLJqy4HE5g8vvWEd5S7gNh7XLuLetugovqxQkOWcyZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZsCRA9TVsSAnZWagAA5asQAJ7N7AjYotxs/lm7I9DS\n+KymnOJV7gpUkqPIwhlxw+u9GY9888fuJHToyZlSeBc8xHL4II278lpmY2OT\nhTh4EObGK3wOQji6zRKp1A0Xm5wWKgj4RDtMhfNVwEENZ65XTZVm+GTfJwx5\nsY9KHlMlmFZ33es/+wvLAFZVT00mo3M9hP7ZX8sagt+A9FctQH+X8WnUzxTx\nZTYBWG/bGX023O4r2XaKtUrVEWhbzVIDzgIWY27Y9BdNIJTolM/bC636AvAL\n9eVxTKM0BR9I0JeqkAQzt+YDvo44ywA76+tvwSDMdm7oP8HjRpHg5toAm2f9\nkZUOvNgmxL8ILbIGLSsHYEqx9THopaNHXcj0Au1aKZJx2dFYY8vHkd7kHDcG\n3AnysWwfWpVHveaKCsKhRouSvJve1ki69PPtlny/iQnvInaBo2mGhh6ao0vM\nrC/xkMJRIQ04qYJxhSHtbEwsDH1jlVuFG/Uz/gSeOFO8MxmMfBxBCe0jRNXO\n65Ovp7QjEl3IIbXzQLjfvt9xpZZsCXVfGU3pgqnr4TN8v4A/mgUyfE/c26+2\nYfzTZ1RCWmzT1eSUGzCM7BuBuztyTED525kIGn0rvDS22/lqN4qE2Oz2t39w\nsNK8H7yIGXwDUtbKP5HT61DsWSxFTA8AxfFAdJbg9Kim0j7t+1eenmAWnLzp\nJH/Y\r\n=FP4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83d720ee.0","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/shape":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/button":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/typography":"7.0.0-canary.b83d720ee.0","@material/icon-button":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.b83d720ee.0_1591723628032_0.89974610191053","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/snackbar","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4ebc219c61848b289b433e4778dea538af50bcd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.afb1c11a9.0.tgz","fileCount":40,"integrity":"sha512-+t+VSJrBX5juFEv0/XSZsy5xZ9sa6PqZFIB9zIDtlpIY/734QmxI03VzMPAQWaqAaKgsWi7YnIk6S53tX0sjUA==","signatures":[{"sig":"MEQCIGMCsbxhpTQcQ+BUN9T+/JIHoprWVjmtDm46PBaTjeE+AiBvHpKjEplxbsGND2kEQ5ioF1GhS/f8eQwsIRrmV8pIMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5XCRA9TVsSAnZWagAAqXIP/0WPgI/mP6LCW+h30+CS\nQsXY8+fcN12ZDr98eYaedXeBljwK1uNj3B2MlBrEHh1A2pykd6G1ew6qCzhx\nsxTOroEN/JUFuYXA61P+nKHuYDLOieH5apxvzzGPBBSsbEdg01VU0FauImC0\nwZvYSrYHjZHKT5FGqUSoQTNm/jy7nhcFpLek8ZGVIIPAMbxyg3OFv/T4wjzk\nI/Au79IrVqtM6I9QBG4GbT3h9GseOfx1+5SyxiMav297y43dXipPCDrOBrgA\nEmwQW419TJiIk06z9lStcz5pHF2wR5LgPK7k8UnDWfv0M0GZwv31eIpRFaFB\nNmgxfDgCDZABPrQj4zpSgbT3djbJAO7rH7uXVfgYBc6g99kQCo/KKmztPt07\nFMyhADIePeGNSsRp5wZsq+1A2efLls4icGZn4P1XkW8LkGz+jamw8B3jCWHS\nxmMsGF6OFQPBKEt0/cUZaFv1/LptRSwWNkSoWAyrW5wzacqpko9E8AOCOrRC\npIxZ4/Kb9bEt8b3/YC4J430DRcPSGT5+1wJEl7x+1Mmu364CvuHjnWQ/t6Nf\nUTIglcxuSwj3O2qy/6W9it5qppu/8Ko7SX2mIw4cnpkLMVaQJ1ppibVYo7zJ\nCbOPfA45/OBZhYQG3SrRbiJihwiO0CeSYOig7PZddZpdhs1rLORCVgIB8gfb\n2I9Q\r\n=zWe4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.afb1c11a9.0","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/shape":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/button":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/typography":"7.0.0-canary.afb1c11a9.0","@material/icon-button":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.afb1c11a9.0_1591733847041_0.19764342485208064","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/snackbar","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06e7b2bba52a16fae5200e6fa1ae19d266e71cd3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.39e6f71e2.0.tgz","fileCount":40,"integrity":"sha512-vU6+lDBD+HSZnTHNkNcGDRStx5oNXwdyCXEmbkvbUTTtab7Mk8atZEz/XWzF9EaQllZzdNbjjIwtoB/QZ72/Sw==","signatures":[{"sig":"MEUCIQCqrD0lPewreotU4W/ho0LUmS4nxHCqn+Is318r3NCSVAIgSF39MCCLo+nsBJJWV1aWmYOhyatyKSSi0lNj5qwnh+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B30CRA9TVsSAnZWagAAPFIP/3bvoa96PH794hAd+TkU\nLnXwXEI96zrBXeZeq+qdHzHeiCYTZcK5PwlDdb2WfdRsco+MMjVEIsATBpka\nuli68nTbhBWv8dcCxvDrLtbm5bNHTy6JP1s0O6ceN7Bfw0ffEML3pWffl2JB\nnBqFKzllIWoytFXlUgxIn5V78MkDt7V86HvtEacIlDMzde2+6b90SvrGIMvK\nIyYGm8LQ3CMnswAfBoTaCVy0ery/l2mpyIiwJbLhUaH1waXvlzwtrh6tGJ88\nf9H5L/x3oG2BRT9Cx+ALTszIBRBTlYISDXc8v599TJnNcEFEp/1ZfVyDT9Gs\ntpKOnlWg6QdD1osYtTQ4Ai9XL1wg7QSpWpU87hhl0FtBBh1YGeR26n+6Ekwv\nb/KQMjjEQFB99gsG6fpJgUXLkzpvv7uo/H4IQ8TyTJiLiDqZm1WX/CFBeeiV\nOLKHv3plMa8J8lh8DexwAUWNsTAQ+JPHzr6gMkYqOR1wckmsf7c20QKtzgey\nneAfuNGjQsGnumuJc2rYBLtmWF6De/ACVoxz3SXbisbqF2yiqje8EA/eg+Gr\nbAc+S/DKTwm+D2whJ+73y2K+lxflX1gWeOvbH7xA/607bUfnpI2T8I/j4Z6C\nrkOiZns43Yx17NwHkxMi9ZXZYnVIqPWH9E/j5yoM53O24mj6VRvSt4jRuEDj\nAEpZ\r\n=NpC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39e6f71e2.0","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/shape":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/button":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/typography":"7.0.0-canary.39e6f71e2.0","@material/icon-button":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.39e6f71e2.0_1591746035762_0.505324686468402","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/snackbar","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1f595f7c74756d8de2a06a458d751bad4c9180a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":40,"integrity":"sha512-2NddR7kuEClKcK6H59FyqCbO4Y2oU0416ECJpXnchpVIeORkiTu9DsnVsXAEuxlXtGJ7nq78Rks0oQm0bqi5vg==","signatures":[{"sig":"MEYCIQC3FY+79YQ0vE63diH7tdNxwrRmtXjERKYX89Q1faSNrQIhAPcqj91+13M4lDUkc5IdL1Uwn8iBmwhW6HhQVlKiDDta","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m43CRA9TVsSAnZWagAABxoP/Ai4ucT+OFnglj3tDs6o\nmytBYPg1v1erZbv53wVY4TkKcLeuUDSKVQZyLRrCGME6qXZgimuALlSeSSV/\nMiL73VOCggu4n/7wiGfHLjF2oLLX3KulkgFvO8S99NbVsHY+UGFsqro33GwO\nmWckUfm8AuwRAHsnlplPJTmQwcbJenP+qubDwGEeZewQU98UsotJYokMwDJs\neS8NtGzV9h7wcCEGlya2FaOWqmR0fBKT7KDN+dQW6BRFH1uZpIU24kWqMYi7\nUkGNgli5ESyfUy1Io9i95rGjjEcrG7dSp3gtFex2F17AhQBLOJkgkmDnRqzY\n/HYrn806VZ4wFdqGTytTi363Cwp7Nkv1+1pleLBTBx8CQ4Yv4PXul/ekVpBR\nrCMswWcdSCzFeVzpzUGCRwmX4Ktc1IDdzmOH4NJv8dLZTtcBfHYoRMUHGidN\nSFL4MSCh+vy0PeBQ0dB/lXTBLoRgDOo+D8E6tq8G8mWp2pxIFpAgOSiGT3Hh\n1f0fr2qqbCs3yxkAbG0fRvVKAqCoH8+imYfllgPoXyNb8S4xpYsp48w/9Oey\nQ6Tz2qEwe555YhE3/zqxwrQOyuvWvLGTI09cOH/Fpu1Dca0W+yuz5E+p9mXC\nzdSqrWC71PQnG/dBaFOdQ7/YeaNIzNpx6DwASmUTZN75tLxksyVeeTgrIJZd\nxJfN\r\n=Rw5P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/shape":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/button":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/typography":"7.0.0-canary.d4c66dc7d.0","@material/icon-button":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d4c66dc7d.0_1591897655274_0.4672460750554701","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/snackbar","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fbbb4ad200195467d784330ba53205839b03c15","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.be4a19f9f.0.tgz","fileCount":40,"integrity":"sha512-2Qk3ODG5MHKr4Tbv3IiNp9aRnuRwYZyTYe05d/xdAl4atSdpqv4jjpCy41lNYNfSc9CVAe+XEYRj0rBqz49VFw==","signatures":[{"sig":"MEUCIQCACHGxFtGhIi+1olNW/Is9AJuP5BNc6kQZ70YLeDmi7gIgUoE1Sd42g+85nIA30dYNT/hkCKgnhzTMVZOdzt9zykc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xwRCRA9TVsSAnZWagAAMFEP/iGqsrPAEVVRA0q5j/N+\n15SOep7IZ/XtVuOuZ6geFywWc1aDiMfLcMNhjNhBGiad6g2jfqU4yglJLFHw\nKNzwP2vo4yrksG5gM6mi0pMWRM47ZF6Plm90QnZro7FzqvfyBKP22jSooyKG\n+2on20COtO1qJ1AsboD1qenGgg5xi/XWXgiQOJQGCu6FfY4yGS9M7RGq6eRg\nzwLWdAeV9bkZpKvfPmw0IrYNa1FKpxZCnu+BYIWYV39WH321A9Zda1Uje0qQ\nS7pryLcC8r0u+HWEIs1PEiUidmwlPdyrT81HuN7hvQHwxvaibGF7odZR6H6W\nBQACedXywWya/kDvqckgHIyAp9qR90wi4aaT4a0lPqy+WZkfgR3mRCpAxSCU\nX/NXKyy3sz84RgSFAnmimefjNTR91ISoWP0Y2VwreFRpC+OxdwwKBrx6uAWY\naKEAsGThp+RGhWeQsa8Wrcc9jYKQV3LxF8kLOhaIw0VOWmIgTZUw8El77VJ7\nXMNcV8CUCh0YNThNvuKygBGe25GQCsJ3ZaT9ACD7WjQYZTJGqTypJBwwVZxu\nXjMpvf3xBdF5zPHkq5qNrMJlolF/sidhNZyX27iC5aBUgRAHnaOWXKZu9FZA\ny35mB8R1COnIp+UBQYTBgHYXOL9vlorWvc41foEQoEJ9hHpQWiaS9CK+0RDQ\nHp3/\r\n=vGZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.be4a19f9f.0","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/shape":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/button":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/typography":"7.0.0-canary.be4a19f9f.0","@material/icon-button":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.be4a19f9f.0_1591942161487_0.934437440180512","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/snackbar","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95da1b773def27424c3f7d7e932fb68db51b971","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.a6ac8f629.0.tgz","fileCount":40,"integrity":"sha512-tM0xK5PX1WBwFEjKrX7BM9yzqNJ7008pzJV3x0Z5W6pmqDu6KuuL+8pwM8gbO5ers60E3cZIZvyaHje5cs9nGA==","signatures":[{"sig":"MEQCIA/eUMSC1uugzHd5aIPzSm/y1MK6U9aUQx+eOs7UdDa3AiAE9ifV+CLD1z8P/gO1/sR1XGmii/OXM4UDb4RnvLVj3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+i7CRA9TVsSAnZWagAA1X0P/j7mYkuXL+yuP1XMcuCz\nqGt2TJYw2YxuQ6+SgM1K3Y2FbkiWsWtmsToiWIE9i1AGJxfw3Z4Ny6YZCwaJ\ngLLu5zlhqxnQ1BctHC0IU+6fy2yK7/Chfg9piYPDK4VvyE5I+p1jIEgCd/h/\nFIlNYzVDTTIdL3J0mFxYbiaJnm/eRhK9YhqfaC8C5pPoERBx5CZ4sQtNMrMj\n6E8ex+KF50GF2r0LHfiAA6bRYlQW3CTM0zd+p/6PCB+ito/qifFSaYlkaEgI\njtShwPzolJyNnPZXZ1+oqTAmj/OYG2qgGMV2N0yS7oJJtM24kU0nfUhNge0Z\nr6bjPzT1iPwCodygGabRLxv2ELjjkoVyjVckNPIZmN1jcObLlRupMx8wWFeq\nrI0E/M8gunMTe2CsyKpCV2iyDkQr7353Kdf5bRLVJtAdAPgOohK8Zijzukv7\nn+uCpfpS9+C03vv61HURwIs2K0GV7erIN15KvPDJ8NAUtKPHPfNgZOfcOvKm\nkku2nO7eEe4ijWdSYQ492NPDVcfeQrUsDWK0bXo9NZb6Ey3LAd0NERXPdwv2\nR9RL+qTcbm2okEfQVoRPNA8DuHhDK6gWp75qHF3VD0fkJ/XPDeT/+zEMP5jg\nLhrgl2RLdbO+//rd3maXh8LVThJqewC8BioqgBiNeFMCe0o0dgCmAvOuR1Vk\nybmX\r\n=9j/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a6ac8f629.0","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/shape":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/button":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/typography":"7.0.0-canary.a6ac8f629.0","@material/icon-button":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.a6ac8f629.0_1592256698886_0.543527690009276","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/snackbar","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23af917d59e8f70ead35776fb4cf2c8e4d371feb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.9833dc287.0.tgz","fileCount":40,"integrity":"sha512-qiYbaIvXtn7nIqEGNqX00tsZuXYSwjiYQziytCNkV0gkvX+AzuXhQ4cAyznnj3FK1DnKTPNl78sGTMPfPmvC1Q==","signatures":[{"sig":"MEUCID61fCuiiD5NccpShemuT5PM3TxPYCuif57Hl8H6ausiAiEAsQoovBgWOjRO0NL5vE9eSbuC4p51uQgYmjTGQ6K1Thw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJ1CRA9TVsSAnZWagAAw2YP/0GK3MDUCh11cLfRTNZR\nY4qWSVZnrsxN9X7YFLJO3qAv6ETAVOfC1K28pknyFeMhILv8Hol3MO2g8mR+\nuX/PhjuAyy/l6Nrnw6XUUb8AMnFfS6R+hKUU2vweePPWUs0wh2TK1rmdYBsB\nvfCYWYcCnqwjj/ePFVwEvGBQVxPTnO0nNdCpMHGam+Rbf4scJc1UyNOIfpwE\ndWAJ5cfolFjNP2SoKFpDepNPeLWbwTmhA7m6qiVAf+oxG/IpfiKPWY4Bls+T\nyrsHzLGzBeBJxnpZMWIGKjZAU0enC6EEx/ioeyfD3KfKy2nWSkdK6ZHXYFTR\ndRKxMeZvrOedmlE9pcSTVFFJwbF5HhAcKOhdp0JlY7gPnnLrNjXUqk1kZzfp\ng+KNo5ikyZRXSkdwTJFCKVMhhbE3LCgI54egKqGg0fsOEEdNum2dmPIiSSmI\n5GrpZKvRt2ddSs6372a66tF8lZbU+9e0UjwBbFloWEMu5qD04AQ6spQA3aql\nwR+A84C215htHOnfqRWvBvGagCEQ9MVHYrYNlqdWHpYa6AlzityC0e893BMu\nvShWhwJW8b7RJiOymxTJ2kBagnNGKKgE0E5ufC/yj55RRMd0NseIK6ePq9hE\n+WYuLPByIMdUCEHhQj4/qFLZi7JkhrCIdRiVj5Q3LLyKRxr1f1VwxuMKwAl+\nOFFq\r\n=4IIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9833dc287.0","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/shape":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/button":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/typography":"7.0.0-canary.9833dc287.0","@material/icon-button":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.9833dc287.0_1592337013531_0.2957676673999057","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/snackbar","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5207753bb9fc29ef63e7cee679211008bd31eeda","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.3aa33998e.0.tgz","fileCount":40,"integrity":"sha512-ZJZ7Cq3VLD8X+iiNTtFiizURsUtwQmzPt0ObkktcwjsOPFR32zuguBtDSyipASKoLdLCtzB4p68OY7OV11UxHQ==","signatures":[{"sig":"MEQCICC2AkQ2B2QyyNZSbKSPwuCdIdmUEIcyDLcmHIV7mrTEAiAeSoiiMLYm+q0x+KsrrhtNXcAtaWAuIK4kj80g3PLUSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Sn7CRA9TVsSAnZWagAAxhEP/RIvCMXA9783vVBXUEq+\nrierPkjgETc1ILBENqeprazEo2qHYODEwZXWC38eV7NpKDMEBv/AvsyCfeur\nDh6K59IwTDQSklHArDcAleuyyTRNZA6o19fGn5/cAcYtweeczHCxpnWi50Im\nEuiMULDsRVu/1IQPXl6GT5fvKKZ+rrlIB6P9+iCXo2pyPPHitSwsh/ZVcGOa\nskRGYT8+BOy16+BP+7XjyX5issDS53QnPI6WCUa7H3Woa4ezGEKjeqvfAlJc\nO/UziuxrHQeJauPXerfolbZWysaM/Mb57hJMJ/maamjvpQ/MvVeSjhdiSLwI\nnJcdpkYQwGWtm45IVg0+nnxwf7IkqwML6uq2N7sW0aMFAGr4fN6N5eRr5jGv\ncLT4pc6zv/LlVY0+a/PPGh1oV1N+0wqw/hIeORmvK15k8K/9pSKu1fy6iP8k\nluLUrX1xwQ9NLBH/PrmL8I46b4AxcyoqMlmgmf4SW74G6+ZGD1ApCW+GFTrg\nDDuql7ylbici3dSKlDZBE5VdKauFpU9SXXknQ2b0bBGU5v45vc0HQzGiulUf\nVdY4Tak6TcchJgGwA3/hzbnJ7MQMhvls92TKluaoZ0lMxb2jDzILb9wG4OxZ\n3ACIjzlg+ETzmeEPjs6jdr52zAsqbbcGS/EO0TuYRE/m3AbYN4+tJuDtOVb5\nKvoP\r\n=uCKG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3aa33998e.0","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/shape":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/button":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/typography":"7.0.0-canary.3aa33998e.0","@material/icon-button":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.3aa33998e.0_1592338938647_0.4159716294750784","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/snackbar","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f836c67cdbb2a5bad74e4aef47da622a3cac3b89","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.d2b54d183.0.tgz","fileCount":40,"integrity":"sha512-P/WcLz1orEfM8/8k43kurs0Yprv8ZGDedufitcn+LSwfhFQj7G5BPhguOZ8jbyBNnLnLC12ByjJn8GKJ5Ue+OQ==","signatures":[{"sig":"MEUCIQDFRzq8639ApbgyUTHXZMUly/k9dGGNaKqASo6TAgs57AIgeFMvJ5T0JEN/Qo5ZkODNxKTjRSZRr5LhngrrY8GvhOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sByCRA9TVsSAnZWagAAYDYP/0R/u9luN+yuMvKy0CtY\nMdjM93h/pEMO4mMWYDIJD20/K6KFNoRlcGBd5RU0sFFal7/brcKhlsi2yiLg\n3JD3vvcH9acGI7LD24NUA/pFHpn1PpnqmcOmDSUTRJM4O3DGVcqi6domGXUl\nDhjMttMYZtzR84+t7XCdLL+YZUgvilKoHpzYMti5ilmDePrDsCQSKTG5gO0w\nTCgvBkB8PF7jf6rh2C/OuGGdHn5IAV75WmXpsvh8ghKQdWl2iYwrr9VT5cPb\nFtVC9atDyuCDejXNQGH1JLFu2o9mVPPb/ZO+ZDlRE+gg/cgObDyrFhh8dfm5\nLspdMfS46PPpT6Q7WoOD15Xza2I5ebmACXV7iARC7S0krdpnnTjptMFoja/z\n3xfr06+mGFioPbhtjXQZidOS9WEpFpB/RNCnLP6xs2akdG6GBcIp2xT4Bw7U\ngEX05rFktpnxkWvIxAu9xcl8IgEPCmFaI5F3GcN5Kdgczel8XoSNm96u3LKS\nZJHO0yOfkKrvgh3RYeo5Kwco5+HEblDp++3tEMFtF04macA7TSuU0VOy6fJf\n1Wkzxr8KzVatNakrspelNfNSDFnZzOiJcFo144YCVyJbA6Nl5RgyS2rDXczr\nfqNgpGoG4E8vYO4j7/wpezOjy8qMxtV18r9IN4p9qMvK1IRsY+S0UqjbHfWe\nqAu1\r\n=5Kd0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d2b54d183.0","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/shape":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/button":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/typography":"7.0.0-canary.d2b54d183.0","@material/icon-button":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.d2b54d183.0_1592442994401_0.6909250761054289","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/snackbar","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd54b261f5a93b317333644ed6543d40f20b218b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.f2a488e95.0.tgz","fileCount":40,"integrity":"sha512-rh4IiMmTbqVa1vkAJ2WapAeLGx3Q1K7iM2WZIQeMqw6WL0EVirPAfr4sQsMuYxQgkPdfubOmKwWmgaRHFaXt8A==","signatures":[{"sig":"MEUCIBZqMGRem7true114IHoHZldHU8bumFjJ+hwTeti8QU5AiEAs45e0aOHTL4YSL6+lRPteCm0+sbLMOoRrjaPBRgl/Ok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KsCRA9TVsSAnZWagAAacYP/A5tH2bNFt8ghp1qmjGv\nlggR1L3/TvCkF40VJHsfts8y8VbdrkIuaNzhjk/I22CBjBBDOrHZu3Cg9tzN\nYnb/0G2OJhasD7E+sMjBt6nKvVw/gTBkIKJUr7VJ2duKrVZP39cM4bc4DL3z\nJycW8QEXGwhPguYX6bERdA/fBrowMXm6vAPWOfmww1IbteHXCPekYl1fuyiK\neEwEJDcdFOMgw0FmKnBS5otHZ9VIRouStXO/dfIQ2I1skGumZoef0FmeAuh3\neDYsw4u90K9qoBwzQhl1D5tN1K6XtBcYvvzjZDbAc+8mPziQqSpSlfpLbikG\nT3ekFPlirySqXG2kGPahPJ5JxlGUl3zGGdZq+IssBsBOPKfi7Kn/mygYo7yq\no4zRwjStWXMLZn4RHekB3oFSAL4ja1+1Vf5lq2Ch/S15a5iuR6SD9Gzq2FUs\nx2ZIgpFQ1upulKGIAAfk7tGFMPm2IusiEpWywqGwqVuvgVOvxdMkYQquS93s\nAqRWJ7a67MqMs8nBNS2D0Sk62IqDfiulstNgUvOut7qokisX+VVrGVXi82j1\niu6dCnPY/zwqngUveAxwj9Tfj6xrFjBi+ulaKTiwzpWIHCndT2CTs2qe5gjO\nOWYWWwAzyXtYIfHi9TS6GRK9AJF+Y4p51bkCnGpwMXz2BnyUvh0EOOn8RLtG\nzMuE\r\n=jkXL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f2a488e95.0","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/shape":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/button":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/typography":"7.0.0-canary.f2a488e95.0","@material/icon-button":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.f2a488e95.0_1592492715493_0.6268953901461352","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/snackbar","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c417e4d24212bb3ba200dd3549da44d6cf29d236","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":40,"integrity":"sha512-QMWr32dREQYrKYn+lZMjqSWHAqL/bZBbyniY/93wTigEhWlQxT48xtplN8bpw9E7qKGdBlUpl3mhc4b6SPLysA==","signatures":[{"sig":"MEUCIBkIryeTexxi7chMxbY9rz/oPu9n4QOVBuOutTcFSpkqAiEAyT7V4W+1RZ1ZJ26gTUiKaXp32HyzJUdIJKcKzQt/zKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64V/CRA9TVsSAnZWagAAo4QP+QD6UEDij8DVMXQzHoST\nrqOwJTYRjg1cmHw0/61H4KiKn0ztNVDXHX566uYP61O4RQwlgY+jxDFcw6af\nrujhPfLQ4GQ/O4l81TGTqN8Ly+KPuy2N4RpsaH8DP171XQf6C3Xl0nCFFBoD\nRG8vcp2OsHlGY9qLy2g4SS8k3qd9ISNhxrD3xn9A+pxPJyDx91RTFwoOLr5D\nRgh6oBXpF/Z1pq0W32ofCKUDFnVBfvIvF6iOq1kOzXp5H2StHtQpUHzIGyKs\n2rEH/5m3XJW9KpvXJpdtpwep1Fi2/6V5LyijIwNXC/wU80qh5P5A7gzJAAhQ\nYNu6TbRryYfZ9Q87FXLrxtfpxfD1mawAR7dVsVteI/Tu8Rw92ZcEp8Ast3Eh\naybBgTTCZxRn27S2fvveXpmqr6oaFStfYsMGDUqcsx7Wern/4C/vL1M7kgwV\n1tDowlM5spzo56VLbscQmTiNUbV9RvGWNXk/+hWzocdcACTNJrcLQ7XrvNVb\nSPKKxYYNkmLJ8XRyXSY1GmqxMh6Wi656kmEhUwIm13SDsIZPXLYS13mKm9MY\n4FV78nAlW26vQxu/eV04DJbsLZEMwoe/QfojekW7FB5Ue8irAM1mcvg65U7C\nj1Ov4rfg+khZur3eorcoxhrhWC3cMw8hfUGwkVrbhXtm6inbuisA/ZN/zq0u\nt1qd\r\n=3mzn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/shape":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/button":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/typography":"7.0.0-canary.bd8d1aafa.0","@material/icon-button":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.bd8d1aafa.0_1592493438781_0.9901662858406723","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/snackbar","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edb50335a1b879f7bb4956d95079b0145d7682c9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.1321eb968.0.tgz","fileCount":40,"integrity":"sha512-+4jvcMqFigGy1cWbNJHFop5S+4YYDNXOz3HZXpCmfaDJPEjIHNrB2coavSHvmIHWxx+en/HzOso+Bi7Se5LRPw==","signatures":[{"sig":"MEUCIQCzFxYyMiofiff1hq5VYjpxJAFZWmlNNdQ4KFP8o0z8awIgIYLPlvOO2km4PEQYt1sqIjTouqr46IM+7Ma8DIHwOog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBtCRA9TVsSAnZWagAA3NQP/0ccbkayYEi2Xzf7WOMY\n1AaBaAKMeTqqZwImZ/cnJnGDqJVAIWOmsulROoGtm87BIiVPJR8fl95Vfn/y\n+yGyICJmksNAZnWGEzBbOPm+aRRbpa4mgUXsYcWYYsu6Uy5Lr1DZzJk39Yem\n6wA/LnyG9E+AebF2Hce9cpXHq533KOCTUJ798occvc8jj2TusGD7ufwhff+N\nS2f73pGw3ip62yOXEjn81Tp+VoZIlXWFPJhk93C40C1rCfAKdQ1k0T0Z3lZs\ndfzzjfqcXolQCcFmqxL1/HQRri4s1INyt/BD+9TrxC6nnl9QsPZhMBLjMuRP\nEBiK7kcmJCE+M7ICe7RC9gILXMuijsKfJDlrN6j1HkRU+Rwsew/Asum/P/OZ\n7IDs0WDUSImuOJw5oJZ2xDZWU3OejWwhDLCHzRgf1eVD+Mg2mh2jhUVI1wQO\nJwAZDS5ayGkqOf7HNgU0yjWkj9i7jnZA1Q997DEdxiNcyYdDesgiQ/JdIY96\ndQ8EG8xZ+eb4YlWtadeb3BXUcrUeMFnDgQOvWVizJiIjnXa7pBveuc/jaTSC\nw+6AfsmrEnQnJZ6uwnd3cHzEZc2QeKrfnnSxfO8f9Fm00AQp9/MlSyVTYOQG\n8puOs4PYLiNj2MX0Ci9DFf3xK2bp/qKIlpfSfzJSheK5FJrXr1EpADcVpzRl\nc4OW\r\n=IgZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1321eb968.0","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/shape":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/button":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/typography":"7.0.0-canary.1321eb968.0","@material/icon-button":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.1321eb968.0_1592594540611_0.8600450101218247","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/snackbar","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44b3c1ad45d53eb04b7b8fe9b5830387eae2fa1a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.db5cc0382.0.tgz","fileCount":40,"integrity":"sha512-kKmNzJuj6vtxUe+uNWxs3T4pn7Lyyirg0CTX95VymTO4D7tZwjADSZl0N9yUTXDGJehba4iyvgJIe7UPviptdg==","signatures":[{"sig":"MEYCIQCuUxl4lKyp1ClyQt4JNhBCFl8ZKQkgtC1LXc4oznpP0QIhAMuxt45o8R0lworHMZLOL2ahJKo29tpyuzlAOSvmgExe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHnCRA9TVsSAnZWagAAOPYP/2Ya54v8kfRccPDReb0B\nlhYPZ2UgOSkeJR6m/OyU/2BUhfqUh+oAkeYwssOwxYdiptbxvF3hcI6At2Mq\nA6I/KTsUDziqH7awLt+DHeXa4i0rzK0sGwVO9ALsstffJOf7SMlOpsqD6iVH\nNJ0W5iphQz1ZW3sNsg9EF2QGocupQS0hjO8nWaM4R+t34hd+TfaMMBf31DQ/\n0Z2CXtgn4iHeZQG4H6tl5btaZnJrCkjTZdudcymMfFdDxOYQciF7KNa4CWMS\nx5m9uEsLNAxRdpVnXh7JpA9Qrivl3PrsI3Zjd04pclBqKNFqOJmc7+U/MLMe\nxeT4zcU7JOTjC6WFs5DO2NM3LdLjhxZ7iqkmYHNFM/Gd6vzIX5hssrT7/cWm\nPfWJb2/NF7ySHGh4IxxpPElFpVcwnHZ30J4V2GA+jwU7+CQtOUw5EU0eOKkC\na/x1JBWG+Xh7HFqTctkKDPVAqbH7MDTrck02xSDWsTl98n2/eFS7aZQtPOdA\nCPAQXSicFeKE4Xhvq0tlAy0zrSiJHD1qpKEOSqArsrf0Z4p4GRJQvavevKgW\n195EK6CvEZ9ZIqpisqlxoLp4QiNhCj6bkjHVBDXQQZq/vRJSyKpfJm99fWYl\nJTAm2jBCruX5bxDk2rV08BnsWzZg2tKe74hrENqNvCweS/8DNnNC1LY8s8hN\nyieA\r\n=2LCw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.db5cc0382.0","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/shape":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/button":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/typography":"7.0.0-canary.db5cc0382.0","@material/icon-button":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.db5cc0382.0_1592594919473_0.3349451211262964","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/snackbar","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"273058811cb37a120ec8297daca79beb194a0474","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.6ac9bf031.0.tgz","fileCount":40,"integrity":"sha512-qekUif9ZuBt+3HeL/ieXPL2n1Ok1ItH5aP1muk9EDbcFZyPgblkAdPhODypcg60m8VyZ+QxMR9xUGmQk/P5Ung==","signatures":[{"sig":"MEYCIQCqBCThlQZ3DK1Icq1qnwfEFsHHN2m6FpaEMjBPIS1DMAIhAM0DrZD1Y1sDZOB+UnV7wRt8cXAmi4y7tQqMzLXrRnwz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Ra6CRA9TVsSAnZWagAAtE0P/2+f59Dps+Fj1Hz+xpxv\ncJsGH3ug6FKndF0PKPH3nVa+wpq8TpshzdVRH6MF/kZtg7AUGDTRp2VZgqAK\ns4XM4z73PsY4cKPNAU4xgqkNAOrLrGCwKoVzJyK0SOETs2eBj0SMfWWBLgbt\n6F4hXlOl+OIODhRsIRrDz8Akg6/+t7EwshK56j2qFhhhhhYeROICEk8a1BXt\nmXaf6Hl+wzrafIpPEYrMy48kpl0TS2RApb3d+x/JhfgibXha63+xCMWLE82t\nyZIIV8mJIphoJIx0ekgBtfUTyI0r3LjFAWElR5RJQdeDfcHTgB/xjNcQ1AKj\nxSaj8A+J8wh/i3+wLHAM1zKxz6DTaLbESinZ9p1PlyWojVZ5j8ql46ZnvNTZ\nsIMgOcmD4L5ewdbd5zPYhkDXR9cYACGWTz9RpRQXkAltV3aSmUrVdb+LcQ+G\n0g03pNs4oxrGrQfcZfP31ikRtygy26nDSnwWaXJsMfwGBG5kaIpYE5w1Gs7W\nwB30ZkCO/+ijKppGXSvV1PnBdc9sie6b4MvnfCg4iJLfZlsmyIa7S+Ho1aqM\nV6DBWinMqsNj56fWYySPARjgKC5TubLrqbZBgDDhm2UqFmxl105nR4fallDb\nBufStlPbr6Sgf3Y3TU1FAgNIgRvaJtRSXO17y2MjltwIyUpQ9mcAtbEwmyA3\nS7rV\r\n=bq9G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6ac9bf031.0","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/shape":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/button":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/typography":"7.0.0-canary.6ac9bf031.0","@material/icon-button":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.6ac9bf031.0_1592596154470_0.09867810423272716","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/snackbar","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c942da2fac954d7c9889f1f692cd5ef91c906e7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.c21b5c367.0.tgz","fileCount":40,"integrity":"sha512-p7YhOaOsdHTcKZdOgf8MEpXpXJyRV4raPKUBSTs61cCvGWWZYo5t/3kL940OJSqmRlhPSv3TzMBrCoK1B/Ss3A==","signatures":[{"sig":"MEYCIQCLY0C+kVBQmOkvwfFeqOjirU+5OW+SKTtK+UeP6ZXySwIhAIVM4yWS28kdbya19ocQbEvBR2lYYC1cARTkltOVmprh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RwRCRA9TVsSAnZWagAAkHoP+wXo2hkm0i0bddMivVjV\nkbtRt+2kxpeBX0zugRZoeEYVCnFx+Wv7WJVVbEAgUFzAm20niLjWTmQLTscE\n//J8zphmOYYhcj0tWZihuwpfCNAtHqVrjbhaBtYJxgpXXiVHy4r0u84MeTZR\npbGXld3o1OG9wiO7X4SvvRraY81cEpNXt+YZ6Zv82c1ZwXO3z5kya7UbSJBW\nhtPwPgVY/dnpNHGahNxgTWnufgI0rg9XuGIvVpdyZ3enOBeU7JEEq/ilP+Rb\nF1j0U6crb2YG1afbTCT6tbLkmmGs2JjixXMXbLOK6gfL7tdwRjSdkxbJMwLX\nFOEja4BgQS17hi231CizIv1i21FQlo0kmqdBd1wLrma76gwAdRK+ILFWFr+9\npnIPxNBIaoGR1pujgqOHcQTMsEoOrc+53vkeg5Bv6mShdm5lETwZHVeWoBEN\nJ6thlKApeGSLfASN7LhKVhWr52bvCOC5kQWq8XjSEspOJUQFyAPVMFl3IasJ\nxB8fuhihFiUEW5xAq/KSIlk1F9Q/CiElvVTyGgAlr6CX5nOOtVK2ERjTqkl6\nOV86wzgB1pNWFKnLaa9qVppH487AVR23fX3w9Pfk0ay8VLXKSVVXrf3rELN1\nrS87CeJs0XsCcLim3vHOQq8sndd1Y6xSZ2aqtwBAKTvgOBYAHasLn7l/++sA\nsYQh\r\n=xgTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c21b5c367.0","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/shape":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/button":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/typography":"7.0.0-canary.c21b5c367.0","@material/icon-button":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.c21b5c367.0_1592597520618_0.7506532602202425","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/snackbar","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad387e09d5fa8b3d66f8bec95a7c9bf8dddca6da","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":40,"integrity":"sha512-oWTY3Lce5uSWkTOcnBDxIqvKbChWSGT8sZg1w/HAvSgtkZTswzdq/AlDawHEPEzFof8sz9l7AoGBqQDSFulPnw==","signatures":[{"sig":"MEUCIDvThYqxobKrVEDd8ASOlwjex1pCyQkV6LGe6Ctzq6cRAiEA4D8tzXDZ6eO9y6+oKh+ZpaZg8JJlvrLax8n2F6ITIYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4nCRA9TVsSAnZWagAAbSIQAJQXbkFjD+d/bPszY/a4\nyXi6Znrz0dolQU01UxeSqcFQ9D8HBsn4Qa1kgnNwsvr5Tw2aS5QHVOw70JbB\nH0Tcp+vekUMckWRsBjXNjQ0pP+J0Rq2514j1R2Tj+0bLWUB0e8p8F9W+2HJj\nEa0cVdb8o8iYUWlrUgo/Zduz6T1BpIWuC3xolJyC/l+i0qUy9i99+g1nqdq6\n2Ae7c/RZ+ALQwG6ixPb1GKUbrUrGaRfnQ6W1OF/CziPzUyFxYPLnOEVMR5kY\nzniF1d13iPb5YMD9PW8CBFioG193d6LPoUh7tF41zg1+t5VRt3GN9neZoCxN\n8YReCUU6U2jNIqr1bQqG0HQB6nv2YFPAHda59J2Psq2Hy6NGKM6zACJGY2mM\nYYl6orEj9JFTgJeahqWLYl7QJOkUEVdmCNfGk+qQ7FhlSz4fmmXXWB4tDn1X\nKQ8GRpOYFbtKzKxgOusYD69dMiryCjBgD1YkDRi3qgflxTWzMCdj5ELbW/+m\nWgNx9O+pbhEPgadfUlnaGYxmjl6Cb1H/nVVcX79yq8dQWyo+nRMT9qRjAXpS\nfrX6zbg/KF59fGVo7pe+pjNKiB7zd6NfTfowrmOhVMNMl4YJiJsyTwcuQXmd\nKjZrj5Gfc3ZwV2pG5rxDHcU6CHx0RI1Y0uqmaMt13RK++Wbu14rNSylRfohB\n+lPS\r\n=dMrN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/shape":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/button":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/typography":"7.0.0-canary.bfdd7fd39.0","@material/icon-button":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.bfdd7fd39.0_1592598054823_0.07107387516910868","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/snackbar","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6257c8d04d28ed071e0ce2ea955e93452a9b4b66","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.10b505785.0.tgz","fileCount":40,"integrity":"sha512-Hx9YpvXrIQRmke/hCbWD2SWD8lVKnraYqV+2rgZBw4EvAFHK3LGsQwnjmhVbTwwOsUwLnvkXttatpq4J9D0ULA==","signatures":[{"sig":"MEYCIQDjo/P2AYJ3I/TKQXTes8XfKRv793b/ODr1uYV/o8zGlAIhAKW6H1iIG7Fn5q4itl6QteVRzDG6SgiPVPWWqCAyb67s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R57CRA9TVsSAnZWagAAjl4P/31z384NsHwWbpU2CouT\nKwoWlV8aV0gw4EIp+ASNy61vbcGvq07Ux381vy/rQ8UKoknbJirt6y2G+P4M\nSEmFYV4fh6rIkmCSvW0Nct73RXZeOHeEpmjtyvIgqGXL4wxlHRzzhAKgAkTG\n2DklcvIUh33plisBs5mRupq0uDfHoOcgsIAXdr/xD19SqGA2Uto9wYZUXGUL\navj/tJVt4H6WgvzhPdJRUbTJr9O/Uu1kXYWeM9fvI4krNMgoFJsnK3lVPqV0\n3SgmWn7gVSZjmHBbqDdKdcIgWXuu42zKInMndcegG/CdYipvMZxEedL2aHMu\nuZJRgk/pcXHeBo2WAUI5VBk1LyJpLbUiLcuqdxvvvPJK1QUEofkSpX6r3gov\nLtZLHlETu/bnsAyYRoxoDhVcY98w4xOVeFT45mX93xbFPO8HCQQelbfUsm4B\n3kZHHAc31oHQvtkn+YKPRzl8iQolV4tbYlywddA99VjQSdz9osSBbGfMACqe\ny1BcFYTFSoh2NJmP9uRoM2A0xAHPQK/wse22Q6bSY3e1UXdeX9nIl+x8Kmzi\n3KhVjkYFdiHfS4tBXZTVf2GRvPYnTS0QMDaoDtjE32pKgnooGog5Twtaz2Yi\nqt75uqtv41xI/U50LJ0iqB1c8JLQ48EoQ2xOBzUPW0vsaaO+uWFelagtuH+r\nedC1\r\n=pATd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.10b505785.0","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/shape":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/button":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/typography":"7.0.0-canary.10b505785.0","@material/icon-button":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.10b505785.0_1592598138497_0.13984332945464928","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/snackbar","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20ae7e0fc01741bdae26688033f7b8534495d451","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.6483d3f44.0.tgz","fileCount":40,"integrity":"sha512-xYCqEuQEeaYO5lbzt7KVQZZjuMtVGqlcDawSccMFSAIcAYPfHdfrhSCxorqvtaDlGlorFE127x2QPHQooivy/A==","signatures":[{"sig":"MEYCIQDsIpmvfQXi4hCis3o5c8rnb4fxikWHK59D4ndxWB09BAIhAJf753q14f7lnGB2BUHZ1zu7p5PVEyB1j4oXkJCYTjLy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SJJCRA9TVsSAnZWagAAjEsQAIKrbRJuCcXsjpCfU+bU\nRdjhlBPNMn9t1N4HvNe3tOPs8WfpKAcqpOxFxTGPOX7u6+4H+SrRndSOINJI\nf9vtVb8uMYEAeDs52t8sA7c2KXXSvmvFA+zA8YexZkhujNTxlKvrEU2RXyIB\nwEfC5ROoFut3f4t+biXfqS41RXStkHPsV2bwomCahp0QsjMrDEuxkLtmObkM\nBh6ReRj7k4qNu37n90IMDHQj7tmGfAc6Yw7dT6wgMyq1iwsIzl0OKmxokdWV\nFOI0cHYdWE/W01hA/hVuSyNu6dvNH6BYDpspvecWGDZRmmXex9soBdwIaUrH\nTKpxdqLV0Z743d1N5Dh+4ivcg040ehPAuz9jERt6HdVZrncq4+5VsoolSGja\nMZzyLpT6wbPnu2T4oqMl5efsmO0h6zui06786Xsh8tKt1k5QKpIrhYBWbUyj\n3nhL979WzXKSp+/z4OtvxEkxPoUOm4THtq2LtzC8isLqwFq0U5nYDSp9aOy/\nuws/SLQRqllp9A/DUK7DkJSXwJX/iAJgp9iMJHQAUuM2EQmalhUjxiK5x0/v\nWzKEFe96MXVRI1t3d3s4te6DSvDiw2HekZM0ZsFGBT2SKykJWJC12gFJXPv2\nf3ifjZMjlexqZyhHw3X0QIfYzZGzj9fUcAxe8QPWrARL0ZVLjuxBmeYvQP7w\nv0Iv\r\n=CjoE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6483d3f44.0","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/shape":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/button":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/typography":"7.0.0-canary.6483d3f44.0","@material/icon-button":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.6483d3f44.0_1592599112899_0.4889127884185025","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/snackbar","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6df899fdc74af801af7bbc3dea0223c96c091f8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.30a74e921.0.tgz","fileCount":40,"integrity":"sha512-YPXPIdj/ROn3vysn1uXbmVtudsNoVc8Jl37qBhSCpnHUZtHXTeScIoCUPExq1L8c6IBLe6szpha7wjgXzHTj7w==","signatures":[{"sig":"MEQCIHF4EZxMOlmvKLZUnHKCdh4aha8yOmH0/NhmsdeytOuhAiBwWkg/Y7HSYWGuD8k9cBoEmKoAFmu4MTz4nYIqEuRWmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SLPCRA9TVsSAnZWagAAO30P/2pMWUqQYMVXAz2Bwyu1\npUxUNEFM/wB5OcG+eIWNuENpygh4BQLXIkFlSTCm1g3P/RAZH1Zg882adgET\ncRHAWAMrLhQxrshjtElDC3k5pSEfDdudbcsq5fT6vpWi1CpA99/XSZJ7I7Vx\nD59WiWvsPFTujs9of94h49mpUnPAy4O5TSjQ1w5U6NEP9w9a0sA5ujugLIur\n5IjmyXK2jSUSKd9BHpzxa63RpI6P9zckr9dkVbfYPOGBlSX6spwIeKOnIfgu\nyDKQeeoxBaf/0P59ERghLech9V0Yz+FIxWUMzqKrGtDhOZN4/PS/3woLDMHg\nPXfH2y6q/ypmaXwrqqj0m7Un9/fP9nO6cDDTAlCwbezp0WAxzW1cY8S0jR/2\nZFPL4b2QOFN+ZzCyBQDpyxIBBrRsgs+AfYeKnBitMN4/nr77DTdrryBlL1CD\nvlfc2eo/FTzEEVOw4zVjXWqKY+dTij75FLc81IcqfCL5ks/kULgWhQldOkXh\nG+tFX1HqbhRrUd/l3r2JSnrnmm6mnGw5Y3UffDb09UYsErEqlvh+sT4opn8Z\n7t6w5p9Vsirw+YMHL2vQx+8zxwgVvJRXVjPvbEGg6fxrzs9WT7g1WjmlQlI5\nDX+xlfa64nXMuGD68pVAJo5VXaAJDsTjf7nlJccOBM6MdAGqFq+jZhyAAgC/\n7zhU\r\n=vB1s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.30a74e921.0","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/shape":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/button":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/typography":"7.0.0-canary.30a74e921.0","@material/icon-button":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.30a74e921.0_1592599247093_0.42082838838753744","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/snackbar","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"533f131bbb54676e17be1c6b985bc95e727d2686","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.c20727498.0.tgz","fileCount":40,"integrity":"sha512-YBIKYPb7uCvS0YPtt6oXeVvL8AtmETLE0vQIHE7vkiA3ZvFA/lFXrno+1pnNgnsR5S0kL5TQrWowwDju44KLhw==","signatures":[{"sig":"MEUCIGInk0fAHqtM4FtJLVi4ItVF4QBgAJZyGYUG8d3L3sH4AiEApzE9F6r9Hr+1LJLBkMgQAao/kkt5k/3KCR8vAOugoUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SN8CRA9TVsSAnZWagAAqOsQAJ6HcCwROQGaOWQO+k29\nbFhTqHk+cqkOv80LCOgPjphXL07P+NgEOgyJ3XbTN0cbG8mHA46KHduudNbP\ntnJhvP+Pi6LrlajeIZPSLXzzQ5WkNot9z+EuRATylIIPH5M+e5Hubwk5qmYJ\nRnd7tYBrzLgjAeNPYK2LEYE8Bt4Tb0uw2qCbVfRHMuya7FlT0iLKj00U/ipA\nUm03fE/KD9KZIo2NdD7g9s0e4SZXPia/q7Z15qa+VD91TnFWsE9AqrAswUos\neA5I7m38lu7h7CtpPqiAwK1yP1xAG1G1iDQJl3tP7JfOJd8nJJr1pBnr8vTd\nP8/PP8tJVTW50yHL/WSr6vhWHE0mH+70KAQHS+wOezH5J13HQaUdhrY7D7EG\nqBZAJiFlV/NnMYLeKIq7bSdPEQTa/q6I9Z9cApQEMBJybhgCixkJTzXtCxkn\nH1lhvwq2Rwd3oTfQu1pkXwC7aJLviSJOB7vVq1J3KY24oxlKpAavr/IZ0UPN\nCMK6lmvXvEnkIumh2FxuP43zxgm2GLmyOimeZMyYtP9lubQpAXXcBINSHz4g\nif9U+m6xhoRr/uTIBt8Gb5dezrmR/PLLsE78W2UoyCeY4V3MJAZPc8TBc3lc\nQRKsgSoGw9FXvc6AFzT+Ml1jZzYt6k/eYqHWsaKJR98gGYxUE9XIEHn4EHPT\ncFIU\r\n=+E7L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c20727498.0","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/shape":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/button":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/typography":"7.0.0-canary.c20727498.0","@material/icon-button":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.c20727498.0_1592599419731_0.8522686456168753","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/snackbar","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24c6480520d8d20fe938ad332646f658bc63aa4b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.4e360ae94.0.tgz","fileCount":40,"integrity":"sha512-j43Ga/ZYbAheeUNJeNRQ1hxUx5vlGCqy7hdZyHBLJMvn6Mb7OH+ESrVOBewDrJptTAqXFX3MjdoS6VJ1SV3pFA==","signatures":[{"sig":"MEUCIQCnrwiDRmy3Jl/yDruW8e02ILueQ9keNCxmi5g011rUHgIgD15zDkILkNt07loL+L2q6IQpA5oRMXe4mNGbo63w+u4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdkCRA9TVsSAnZWagAACz0P/AyTcxITWOGELXzRbom8\ng37Adr8wF4nUCVgRjM9FMSCe8y2FVEl+9dikNjC+UhV+N4wOv/YVk6vpdOG3\nMxbzQh5st/6vvL+rie5hvO3DzlCprCcgnlIJGRAtloJV4HfZ1SMLLyyM9E83\nuRJ+2T8nocNQviOXZc2UNTIpJSqGM1vHY1sTYfCbrl2qISsiNDKgSXLKtFEC\nZGxVvCTo+puo7YvnJaDC8H7II+u82gfu9BMZ1UNTOD1I75UFouDylOzvZmYq\n92QJ2Y5G1OwyWYnzlEWAeFkYn4d/IElhlHNyU5FR8rwE4hzUImcTiHDrFerd\nag6+RPoXW9J6JzqM39yIT/TULRGKog0WmuNP/5V2fny4BsEFp3Izxkgw42Yy\nvnoy1Hw65shpYJ+rsSNbexm6MaF6Kk41+tNugKr9GcoyChDOv5L+wCg9txIF\np9SmvIQMwxsl6dntNMyWXJBn2eGHV3FLmecVBlRsQG+vBXHG7LRMRDNyZr76\nGv0hf+SkDl0pDsgR0G7TtqzI8UFWydRNi3oMUITONImP4b7gF0m6ByX4MC1G\n1AzAHF1wcSaNo1MvhOcK16odpEbtw7TG1EmTZcvb/M7hAIvyY1SNG19WcmSG\n1+0eeHV06YzXviXFC0E2EtWtsW5HbfkF966EiR/79iw33FW2BJYTj34ePoJG\nUaCE\r\n=5vKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4e360ae94.0","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/shape":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/button":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/typography":"7.0.0-canary.4e360ae94.0","@material/icon-button":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.4e360ae94.0_1592600419472_0.3147484444526316","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/snackbar","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ebf56d5cfdf82f878cbbea1ee8da8c3bffc1e70","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8550fa53b.0.tgz","fileCount":40,"integrity":"sha512-cgol7KAgfqPtTsqxOODYbJB0Zn0ba5aqRAV4Tkmuo/sliGYva15lotFvbd0eKPQFA/xbzl5LAV1+2b2iBAQcuA==","signatures":[{"sig":"MEYCIQCVKJCxw15VUCd6e5kHQA5+/hNBd01vMCt4QQJlvpMomQIhALJ290RJ6I9+ta0ZWmAuE7ckDdNWK+xtk5eBgAN5VxqK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sf4CRA9TVsSAnZWagAAOosQAJw7tDC/5WMrcKr7KHJh\n52xXASNE+5fsyxDwVWKH3suR2fb9y494fyXjSPwYFg1KN3xw1EdfderAPtl6\n0e2O7olqq9mgBzcOS0zdlKDU4yMfdbN/EvJRFBS5atGNdMsavblHcTVnSNMs\ntqsblX30S2THBQS4LccgvEorbAcoEvnm4OkKHTatzPnCyd4uWhJzvcQubLjQ\nh6BKn5smxhffz7tyla+2kE2jnH9aHhukeWEtdmUMROKJZmh74WM/fYzC89T9\nxcOzDviar7+mrHN4cPfqxIopPJ2Dhf3KxVZ/JxJI+kh5zZ9gRVnYikBOzGVE\nr/wHT/SzASzrYy5yDJQmJ9SFwakUFqY5lYpeLgI5n7BVVBA9iirdxADM0cqn\ncxXdQ8/GKY65ThcyoRLK0p5XvTu7KNgciQBhPNhHwwo3YO5a0BGaydc1GOcg\n1Pe4MFXddpkflcszIZUSc4JAoyxmLA/YOYtwFUc2B1nOfvmCPFzs/tI38b5/\nVLLDLIOTlyAEWIMUoidfa9c3AQ9vGA+9LNsTbskWmrfXuqxYY93YWzkiXVIu\nIkgeJQ0W7vJXrDDMmfgecxuts9MLBfFiWvc8AyMzMQ/oHl7xTGuHJNsYkMTq\nHTDIXy9RdSXbZigNfFvBnFyDWeum3WT3cKsIUmSxmtQo4CQXp+j6AujiLxTD\nlDxQ\r\n=K9c7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8550fa53b.0","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/shape":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/button":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/typography":"7.0.0-canary.8550fa53b.0","@material/icon-button":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8550fa53b.0_1592600567652_0.5223138117402946","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/snackbar","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f8f9806e79cfafb008f4383c0087f4f8f9e26fd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.93ade142e.0.tgz","fileCount":40,"integrity":"sha512-4UdT3fc79U43Bdd8HqFDyEDfu3bVn28kI+D094SF8EVVS0piuibJMAP+LUMeBw76+KANpFeDRRtzP1NTk9y2fg==","signatures":[{"sig":"MEYCIQCS4UM+CDNLVmgvPmMuX/luptsh49rSHf+KElOKc6ddyQIhAPh0QnWFO20a/TDhB5+1qNWaTjSZFzCpHLTI5+xDPb99","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sg9CRA9TVsSAnZWagAARqkP/0ArtskpKO9jIp87WO0e\n3r7E4jWCUDW4VK8HFnDEiuhPHnx81s+101cpi+IcMeJ+sSz2AzsGWsG7vgS3\n9eipsugWcRzGRxXVcTDT97Eq+aaILfDZ6Qz8jpieh64c6VEXOz9Hfx24QC4X\nw5muX7LZ5GB0WQXelSCZpt7D0YGC1hOzFVoaNcMb27D2OJjqxoqFKUUjY0c5\n0alDBXdoGMs4iqb8lQZSdMi8xeTNYzaa9ITigIFd3/j8BoCCXymN2DL9sSOf\nf5Rj+/gLKfeZHsLH3Ou80L/DOce1YDhJmiRiXHDXsBs7HTWPLqOvfthpD669\ngt+RO7Vb4P6cxcWrhuA6dLfwYGrtVUMHVgEUt+Rl63iWWr0V30HbN+9m8cu4\n2am4rjfOt28gGddrHpfUhYxXVod6S7ykEwX0YaEwfxErJZVfjDVjRaaw2fcE\nylJ1+0Ri5yxSLPuCMV+ETT8Ojk1GBpxaiUxBolTwMPCygcM5jocEWj/2/1WM\nGrutC/z7w/X1foLMYgzgn2FEFjzQyM3j1wkllsGqCdiUWKGMiod8eU7EHJOs\npP5n2R/9UfldnJTvKjVwjsu3SXGWuTv7/XV3H4YLJCYYfupaf2nWc3EzhK2w\nQ8CrhE1R5A140LORsdconR1yZ9Lv9CLMJijJ3F+PZlNpAvP/lNjvapfqO7jY\nQBBz\r\n=jPZW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.93ade142e.0","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/shape":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/button":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/typography":"7.0.0-canary.93ade142e.0","@material/icon-button":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.93ade142e.0_1592600637122_0.5800197308981245","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/snackbar","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aeb0574e2bdee236eb6f43d466e3912eecf6c78","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.a0032f5bb.0.tgz","fileCount":40,"integrity":"sha512-2/KDdGOujcsc/mLifkqLMORmom8xnw8rQFqjgXgSA9NRlliU3nPshNTrWSycId2Zvi6i8hx9vULvMV7KLzPCGA==","signatures":[{"sig":"MEYCIQD6T7SLAtX9lOiMQfZgDNhLGYUJhOexnDMPK7KIlacjewIhALrD8fLHM27MJjBAaIa4EGP2XTTmJvFllgY3xrKx7QQC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4lCRA9TVsSAnZWagAAr7MP/jJAbqCLxUyXwhgc6aLg\nLyaKIKnIX92yvn4J2WiypCAymTCDp9P+OmZpzJlvy8Ta+ZI675gF3WfSOD6M\n30trScijH8nKRpjhsy1krFw3xsKz6sfN3fxW14FJA/fWn9rwJnbAoeLDEfW7\noQIJFxLJHUdRm73H/hwJ9F6NwThADgqS6QRiLDVYt3fBrW4yGH3h3OhVp7kB\nm8ThWWYkyy0skAsEtwgYsdnixrQnHivK2dDz7j2ZqVEPP4oDLJsjNJmQERsL\nieWngDTiRzzL3Ts7fSx5CLZTasdxKWPUUDMXPm3YV5cZKSBQdZ7OAOnTHwfD\nG4WL0wQqWq5Jqt5XRiUek6ulgbRDdD+87ZBMhI3HBg2wtPMoyB7StZESz08S\nXN+x8qN9yJiZkdrGNlxYbLr9sm+Nfi2nFxF3ZaBQUioq5H1D8MlgIgV32Tma\n3wAPK+Tt4IFpmU/BsH48ACebZ0rRBu8YHUy+EMS3t1GgUfv3c/dyHLWMZ59m\n5Nzofpu4c1YP8cw4XUwetxbRNakk+vMscI4kVGKuKVsDk5a8gPfr9E0yme0x\nK5sG49P9oTiFuQ4rbzWQMWeTMKt051Lvf9fpM1XyFWXqlkfj/nZhiXZ4pZDe\nPgeOgX0j+2ow4AFHrdo4mMJdHXGjXHkhu2IsA54n2XVLk4g4H/3Gb98fNYym\nSoHC\r\n=m2Ig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0032f5bb.0","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/shape":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/button":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/typography":"7.0.0-canary.a0032f5bb.0","@material/icon-button":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.a0032f5bb.0_1592602149275_0.6432535810499442","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/snackbar","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f908ed5a8cdfe484730d312512e4769f47ded632","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.3f342e721.0.tgz","fileCount":40,"integrity":"sha512-5OP3ztp6fGj056FciFL38rl6Qp2q31O3D+3L5qcjTMO8WX9eO3TopguP9x/xVpZSs8rDhrjR6AeZjzXHzzB+Iw==","signatures":[{"sig":"MEQCIGF9PTiwAvyarUgWzz1dnxNCLxTAmG0WdK02hztR+pMjAiBw00qJ5eiYg8/eWHshxnIjcaIHgRNshHpF0W1XW889Aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6rCRA9TVsSAnZWagAAmQAP/jEFh/mx+LDVFeNWHsrg\nBCOFYX4uaOgwTiB4ARluVJbOA4ddzTWroavM61u1Z2hp+xqRJDuJoyc1FkWy\nBm0GSqAy6GCTxDozAr2rMwfAuwgsCSUhgHSKA7vw+Y6oTUnuhZR84djtVgGX\ndH6oSC0o7Ri36XgFxZp92/+CVCHeAQFj7lPSKlWeYgJgYYQfsNmffbpHJTm7\ns0N/Pra3RVI2H1KacNhxgoW7bKpzIj4+27BSZNxUFG1LpCG6JTgAy2zt3tUi\ndD1r77BlKg+WbJSv/IADN1Hp3zHiZJFthkAA5ddrtv6fG9YjJc+trENMz4gd\nU+FiPm035oN0HqDrvU1PBzKGdqxipaeUTxyzrdNowQLvuKVcZMSFalDxJdE+\nhc54MmKbljFPS50SaXolmWtReMekP7iGoaCLsQg4A4tDUlC324tv7aKP6xYd\nsJ1XNogZV5xI5H8vzprU0DVZpXPNH584L0LuuNmrUdpPn0V0aj1siD/11KCh\n38ohaW7tq8qUymS/tOcWt2jhXG+WWwC9p0toVNSIY9rY4pv29o/dtCaAPhHc\nhikZ1Oaz759Nn8LKSufwqlkbFnUlfbvYQ3CYnh91iYyFDCbeZPGqeM8Z1H8t\nsfpAGfLH1tJkJxiuwXXQDRKcGd53394DJBlA/pHom9XdLg7ytns3Ui6Salkv\nU6UN\r\n=Of5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3f342e721.0","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/shape":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/button":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/typography":"7.0.0-canary.3f342e721.0","@material/icon-button":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.3f342e721.0_1592602283135_0.09541489035454753","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/snackbar","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce588b279ddc174efc9e50449668fecd18f3a42","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.ff89457cc.0.tgz","fileCount":40,"integrity":"sha512-ErOmlRDIAv1ir2yDn/JNHI8g3XuC7SgAqBk6DY5ho2Jtx3+p5RkKefDomSe9gnwQhvSB6+b1+0reDS8NTDls/A==","signatures":[{"sig":"MEUCIEnc5PcDsTKIyfYUF3jInhsZe2+Lz15NS2Ah82lcD8btAiEAjaDdDsCNj3UW/5EKezP2ZR8GOTx+vQLsOJubeyHp1Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7gCRA9TVsSAnZWagAA8qgP/1wi9272KR05QJhtgX0R\nWJLxEHs3iCXqT06d1b2fCynDbLf/4e+ucxgZGZsH715x3YrwVSog3yJ6d+Cm\n8i7du1xiKBDbDd0K/Lf99BeqHcoh6zZhpLG8Czc3JfIvqa1uMMKqJKmiU3fj\n7IAFGwNDbNwNcd5T7A+Wuas9KnAJYPNxFPa+iuYfQusrI8R3wLzaePHZQSvo\ne3amqFOM5gqKtaNK0YpYF4Q8Kq2OYv71DNV/uJSKUAx+vI5LJlGuiddnVI/4\nSJINJrsm6/r0J6cRGga1cpP8UFDoxeGZkeBPcB7D4TpzqPDp0tKN5l6rWe1i\nT+PVidCZfcs8ff/PrkgCc7ks7cpfY1wJ5HqFH61qXb0SBAQuf+ffJa+AHM1T\n2tPi10XLhlynsE1cBOq4QYmicvmKcWoxQs6UMBffT534q9Roclenm2ZXxb7m\nXsB3PLlfdV3XYUT6SfXcPitsQCPNbss1VrGP4mmXmHeUTbAcT1jLHJ7PkU8b\njmlOphO0V2bKzf6ZgWrqeLSXTDuT1Ek8PI0JJeH9iDJsGPv5LykCkKIT5Qen\naokwBeqTMjvyJl8OUtpdvFc+w0qLe+SmYMt91MUXqFI6/qhGUFs2tf/Mjmap\nLCc4QgXk6PNiMjJvhUxY/a/36Fdchmr0MrmnmSV2GdUcAkN5IVzk0LXFOoUW\nRFqW\r\n=OtH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff89457cc.0","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/shape":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/button":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/typography":"7.0.0-canary.ff89457cc.0","@material/icon-button":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.ff89457cc.0_1592602336161_0.778907915462395","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/snackbar","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c866d0d3f76344ba0d2ef3bf3bc25467720a09fa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.4a1855cf8.0.tgz","fileCount":40,"integrity":"sha512-TvDMu2uW2IMihZrc+yBjzyDA1SglMExj5hECKMMNcHkvo8Hx8qIcInauWgkRFXRjgxc4nNCaxkanPz+FkNoT5A==","signatures":[{"sig":"MEUCIQCh8PkltMgc0muISWomPbayp3DnQ3i4nk4U/qpU1n2b6wIgDG3iaVfYKj2VQQJntwVaMlnPio3y7zG0cE2FjkBledI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S+FCRA9TVsSAnZWagAA//QP+QGR5IWJ/UVFwFFx3l0s\n3zTDSw9rKLmfBhs3CybqIJEvFJwgRPa6/GBOJcLUZXlQ0mOvD/HbFHWu1sY5\noO0K4SRPyH4vBoUr5Hrz6RbM9WARIXP/8a4zWdvPgaD/UXe/T3CluToAnd5N\nJGOh1idrG1VkJUipLrz1C1Uo2Df06tpfNs/WaeOrW5DUV1Vr2c43ZoG6PyhA\n+c9UoYCNVJxKzvYSuC21sB9cNf5Sq8wPApCdesldOlS5GvU6cBYnugMMW7JP\nOwTJ57M3DPXL1hkaDEP07fzWv63ob+JARGrwnqJ8wNJX7buY/zWOAP0m7M2z\n1Pf3OF7PDYY3pn8h2SAcZ+h5BUU6LGQ7q96BLxml++pwIE9DZe9KpJHRzcU5\nwTWZSc+DSWeS+Bbf4phfSqlAmEUO6Ws+QOUebV10WQ/dr2TdQvmQj4t1iyo5\nET2Eg5N1r59jjLSlne2bx+tUjsiKPdIfyGUAQO2lyNPuPOrfOhz9mQChG9NI\ncWqgvrXc70AZX52nK1JZzoL/7+lmJl7Ep9ibTdiQSfPvnSvqEw0Veilydg0/\nDb/lob1mXmAhRchaIrk9mcthKrd7gaEsoiW4ssgr6lorxyjjENVi53aQNEQE\nNpJMtaeImjz/WTDfueMG00J9HABFO3fzsDdrnSCtjJrLKopirl0l3RPs1I+u\nJtSO\r\n=C3zI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4a1855cf8.0","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/shape":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/button":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/typography":"7.0.0-canary.4a1855cf8.0","@material/icon-button":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.4a1855cf8.0_1592602500060_0.28653556244220924","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/snackbar","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70225c287a921ceb9d503d6632e972a122843498","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.8602f1b4d.0.tgz","fileCount":40,"integrity":"sha512-xoujrl7lZM7egquw3UbGKRoxlyuQkUWyJGk0TxO/VkloiKogeKsN3J7i0gGdkRBgpdXumONAfErNCA7vA9F6AQ==","signatures":[{"sig":"MEUCIQCnFrfEcB3u4z8NIA8KMFa2LCObQ4LML17TD8DeNxfVfwIgIj3HkKrmSZCZC0B1zNxHUs1ZjlagWJBN9Et7j66wqBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlXCRA9TVsSAnZWagAAi4cQAJ9MWg6Y8J9AVv6Goorr\nINgd9ROMWogZyTR2Uo5tPZPfLwTjewKwQIuIQPN0lq1wXtLAMFsquuJewKeF\nxtjRJS5oE9eKloW4msxjW8Qne8veZxDEzQHEzvdj3TJ6JAliXQVH4hOxwmId\n7Bc0//huW8GRpR2FGiGMAlHDO9/F8flD+lOwm7+Jikrp/8vJhw8tRv3jf+/C\niVBYMAUufykEeY3Bdn1HxX731To9x+99ODvbMRtagzYWxVv6oIikN6IC93N8\nzntKvAn4sLydMr+2tMT1n/VRDT/HbMFROsNoGl1/gwi6FXpVrMQ+U3W6r91E\n7ijFOgdPLdGC25iTe4kUx01Q8FjXHS7OjeaoOAgKBaBftULyCQlIxHPvP4en\nPFUGF3FgEwsW5LyFJhg4CkbwsXZ1s8SIOSj6HnWW9dLdR5Lnl61IYtHopzY/\niqI2a8Cre/6Cvm+O5x1tccFGBGcUczkr8wKvIMGvE8KDb4csjdfeTH8viUR7\nO4VpfBqsPDX/LQ0lnEB9cJhi0WzFfZyEGNvZI4L8JIPLkhovODd42PE6aqCi\nfM9/fYyr7ICj2tSTo8mA5SCckyR3lCAA4bRNhK2LEsTaXJsy1p3HhFrJsiTS\nU2vlNtIbAPFAjgYCS3A4TWYCyI8wvc78TbxsWrUxJAWIoothPGWcFzhYjsKP\n5vn1\r\n=hT+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8602f1b4d.0","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/shape":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/button":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/typography":"7.0.0-canary.8602f1b4d.0","@material/icon-button":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.8602f1b4d.0_1592846679471_0.18240925433234434","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/snackbar","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20cfa0259d76ccef040fc1e7a8e2fadb2e667b0b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.69f9f0982.0.tgz","fileCount":40,"integrity":"sha512-d2dbOUC6J/t1gw8Y2ku0keyX93j5yuYTOC9AqyAZw2dZ4FI4GJPJCp2hD/0m6P/bzXMNVf3kzSnl/ZOqLyeJUA==","signatures":[{"sig":"MEUCIQCJGeSlrcsf8xWrb3w+jGMR/BrP0QVL2rZg9cwswXUpzAIgJfADuM5cEn60WfmK+PnJWFHCgAdp7tfhcSSkDAErmGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R95CRA9TVsSAnZWagAAQJEQAI8E2S+3C4ifZ+kUyxmZ\nFmCh4P9sRlZZBt87NeHGuWY1/jfIhbdyk7HrGI7OjsOX67DGWnKn+9rvLegq\nsZNc2cHmqnL8eGv6dhXi2qZMxmvpQ0ks5w0acFZn8Ize/WBbr/NbS8ht8FIJ\ngq+9WTB818ayuopM/yu5Fltpg3gdHssvm5+Vcru8+TiWX1mRMgylxnGAd8tp\np+hg4i3gPypi6myY3fua09ZveCSZKjmZPlEvWa3CYRyiBIqDY7s79GuF6YFD\n+CCzofq/p5yWdEt9LwtfJ3QJvESxrdy95iCxQbb1Sbj3LcEod1gwToo19uXo\nkIq6O0EsLbDCilG4mfYLx9ar9wL/2hrojqHC51J5P/hhEgAQUfBtfKAAEPPX\nBI6rwKkIptAsreZ1b+u5J92Dn+IbMJc96/Zd/HpzKqk1GmXy06otMWdU8qP+\nKrTpULwGqs2Sqisw4JwTC7t7ZMVZKZCT9aZt6jU6E2Z/1kSOModB+9T3lgoq\n5tcXTmf5g52wRjfUuuo+BaMwLkKiTjTHM0xb1IT+FNN5uB2Tv2jnZzOxIw6V\nzCoHbW5uuxBfRnKYD5l6AU+IAzcFchdd293jXtaT+RhsVQnifsZXMaCCjaqy\nusHXxKJuPfSSa5IZA0EkJ9HLwDAYLVsggmQYDOgwszm75MHmvGSUE/Ib9pcA\nVJnV\r\n=t6MZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.69f9f0982.0","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/shape":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/button":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/typography":"7.0.0-canary.69f9f0982.0","@material/icon-button":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.69f9f0982.0_1592860536960_0.652506213864027","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/snackbar","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6fed5d39f59d612c86f9906335fc9e3f31b8c6a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.369a293f0.0.tgz","fileCount":40,"integrity":"sha512-w1gs8a8ZO8IFoufneLrHYSNuTOJOwqbx8VzGLfVgVrG6bcyg05SYgLofwxGUFwxNL8HIfBXwIpnmErDIpa+mOA==","signatures":[{"sig":"MEUCIFhyCmxGHi1fUATmHjQOIH8Ps68xJD9a3N/4T4oRTvW7AiEA6dTONyctteuBJykRUTi+GOfq1yOMw5NVOL2nK9VhI0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SAdCRA9TVsSAnZWagAAJWAP/jZvzvsZDwvKSxt6RrD1\nqMjezi1RmVfi2kkEC/5nBar1yk5R3jfsBl1VlQwrlvLelOwSlmr0hmkgrZLg\nVEP6yPiOL6yM2CCfa+1gh5b6pGPbS8jLdGj0XtbJBWOWklzYi+NHWUbFBeVF\nML4E914SHbg4fPKJ7KxIpE6b1/lzcaRfhXVKETi1JpFvhSngaU/FMc3mUkIY\n5N9zZNIIlaJK6vjQ2iHiRcM45TLdKJSQGDGFaQGb9KlJgDmXll87DqLQBKuI\nP4mx2fpk8MGZ5UlIjTeHD7kpOxnon1PoG5YW7MKEfZQT7X0UmSuwfbwh7ZS/\noURf1UUtnF0owyJQVqT8cACDZHblTxSAiFHur5XQGWespVOjQ0hJdeh1rEuG\nXHDnLz/Xlkba6THo8oVi+kr9EemCW0HSHUXHB7aRj0MiF5t3VJEHUY7qcmwx\noKQbJoV1/HEVDjKOVzdPeSshNV3z0geGoXwVvqnNW6IH+idmeruXmymcST/Y\nQAVwZUbU77CkB2Jid3pycLxLOMEO9VUB5jlRg7SRN7p4JeY+2BVxAU0n0olY\nbgFeJHHdbawHKeXgjM7WjLbToLKUsPhjBxPvtDRMPE7FDsJmDMixERu+VXXx\nKuWkLIvX/I6HDvdV/0QG+cPV6r5yyrRSzfzEnqFh/AR9af7lYhW6csUBC+eI\nZlyf\r\n=DxTN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.369a293f0.0","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/shape":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/button":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/typography":"7.0.0-canary.369a293f0.0","@material/icon-button":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.369a293f0.0_1592860700811_0.5262850951544689","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/snackbar","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5827573f503b8f842850037eb2a8d5a2a9e4414","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.f1432b5c6.0.tgz","fileCount":40,"integrity":"sha512-AcbJo2lZjn4dc1FlGD0rPzgNH1c//pEZrIKX0l0nho5CW9NCsmxTsOVdgzoYkLoOtq2pFz1kAGi5CTb62JH7qA==","signatures":[{"sig":"MEYCIQC6A0LcRqYeyDazE8/LgCt0bunfI9imXhY4moogc1KJ2wIhALBTMpxjRFCbcVPwsDHU9uSHP5zRtulVxfhTNILU1Txx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHyCRA9TVsSAnZWagAAyEIP/1LFx+shTeYaq0ot9k/d\nxxlkbydqL0T7jELxxvPk2YKpduvOsiF85zjHBjSk6A22lsVWEnCbfSMCrsRh\nd8U/4fWQSvMB9ncWy/yzbBlwYUypPFTcB8SNCAk3vAy0xB/7rk0k0ejfHAjJ\na6V9rAcAKkZ1mb59iKcXifTa+LrLUccneO+X/Yh4+Zf/za2hjSGBFjqf8gjQ\ncnE4Zx64MCzIkz63AzykDdOKLL3/lOEVdvvlW+01pBLnNIIazFYxjNWMhJef\nDsYmTg9oHL0fihgzdPJqLfHR1gIac+vN/Nbb7pzECoDUWvILYqzysth7x5ck\nT0YVmq0K+lwHRRimWVH3lL0M2vhaznkpWBpr1ca4PQbldVOBFwAc//Za3cS5\nXacoZ/KAJA7Bt6n6oMM+LNzRMCS6Ya+03BFMbwE6QDOemLy/aFIWCsZO6phC\nrlMFa35k7U9GojoDm+9T7BqHhgv5kZ3i65Y2c0RISG9r5NEDvJ8PIgndRFP8\n1lb9yi3lZDK/IeIhhsx0rya9KaDICIG34e3eRtHXY/u8ayAc7Le9ILXZJMCF\nCptiPqJ6TfBY3mIzSlmFBpFcONKOlyLjSNX0paWhmmj6qAQc5YUCswkvyWQ8\nh8WE9h8HwhmQ50zDIGB0nLfM2M/BmMJdw65cvAMwcwjAlQlEVRjZksHqvYwn\npNTO\r\n=0uU6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f1432b5c6.0","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/shape":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/button":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/typography":"7.0.0-canary.f1432b5c6.0","@material/icon-button":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.f1432b5c6.0_1592861170183_0.49975785130062245","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/snackbar","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a9cb6aca439a17684f0c4b6e892643f5c06aa84","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.4757a16b4.0.tgz","fileCount":40,"integrity":"sha512-QDUFVD0AUvmEBelkR3JG9V1RwXRfj25RfpYxaMqLLnr3ZKFMSLpJF6L264IIWUBlMhOl7VhV2AXPlYvhsb4E9Q==","signatures":[{"sig":"MEYCIQDflQiu+vhQgvNh5RyjxoG8AQgrjYPg+ki2XdUzAuc7ZQIhAPY5xyDfM2qAZhuUa/T6TxFE7bRUC8RZ2Lcja2P1d0kO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SiPCRA9TVsSAnZWagAA8NkP/RrLp5OKqPCFI1MmgJZV\ngQ3OjoCC4Wghbw8KU7+/P7coagCKms1bheTQwiYjzxhZBQCOpPwoSRJTvrR+\nTfslLRqhn9Ig3fPJ6iXA51v1UcLNbKPkn9Pam464WoansMu+7klZZxcc07wM\nbNmnFLuYVljMNcEAxypBLr8Gdfz90rXmJy6cF7rw/DE22fLqlI+2N2QflU1p\nUSwWAmEILvn85PYXIYk/x24Pu22Qr49xr5Y0MsQj6axIzBF/hI98kxvB70tm\nPXUzCu+//CeZ7wO2HKMpq6ll2d4qQGp3G8WcTVpeGjp8HM6coLQC2/EwvwIk\nC4vh+Qv+eVSb0Vhq+x6JbuVN6fo2BTL8Er6BBlvh1f9a23jBgKXOmKYDRhFh\nXcPxKo300Yf/Jdhf74mOc6nZW3iH6yY/d5XQfjnmSR3nBnFiBUfEL88mgdBn\njdtFr0tXnunlVzLXaUa7NI+CQEuVDKq/xZ86iQjKjSEH0HGNvjNWdpwBk6zf\niXl9sulNK5QmwY9RQmbqBrVHpxZtn/jWIrmlEju2A73M2jOAnA1ZpLQUAI0Z\nIOyiL6Rp6K9CJ7c26F7r9PBzB158/T8Et61ALMs+Sj8/bQnQSRuMZ54r90Z0\nMWW24Cn9dmEmHb1mvOS/JI3tTlqWKlyVTZm+9n72x+FH+2lzfPTfwNr3tMRH\nf8CK\r\n=2J1+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4757a16b4.0","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/shape":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/button":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/typography":"7.0.0-canary.4757a16b4.0","@material/icon-button":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.4757a16b4.0_1592862863114_0.5640100402257975","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/snackbar","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3931bff6b80314bde9722df4f24cb8a3e0d03e8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.f8f472762.0.tgz","fileCount":40,"integrity":"sha512-fXe/RVo3Ak/M5grRdRYsv95o5hRzsGsnzo87dyDsF5na5igAQuYBv80/DwNCVKUu3xR2/OWqgN3Gy1EKJNI7EA==","signatures":[{"sig":"MEUCIGNwdM1Lf4FUcF3ZHHcjqqxQ3789kKCj/eY4NwGQHCDwAiEAxCZUDbc4Kf5JGO0aOUV/EcRA0BLXkAOj84c/JM6Q66g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SmBCRA9TVsSAnZWagAAw2wP/jlJvf7kvFQYQ3S3/1Ad\ngSnKM32bAwOqc8sUl61tsMwXEF9DdR0V4ksyZCoNcMsp1J0lrUIafegOW4ck\nVEZ5VmEgcYhdcd0+RveHuSG5aAhfG6GNpJbtL/S1UyfGsCPJsC1u9Z0JnEt4\nibZCu9yVGDbO5xvZIg/q0lzPsZloFMVX0nRsjJAQU9f3e7fL12yx0wtH3nYd\ne3Updz1mda90zqmfguniOL0yKWnO3aaKZn4AlfDqzuOhut9EhgQZTnxbvcll\nKGUIsqYnfDYi/BUZFpiZXI1/9VzAWkkr+FBwoH6GXU8zjtR7luHj8T1oUp9P\nqwGEWgo8fgkhPQjHibjui5W8FW+G9pTpv+1vnEo5g/wYvMlodXJA6Oqahkom\ngyXn1htbYGpYO8JkRxtM+VCJZtYQ1PO8XEMXaYR5DxKsHwOxAUvVFTrvhgP3\nFj6RBl7dfWNnn1ghRju0zRR9h1jHlgZ6qqMxrwFhDP251srQxrTIgoSGFQ8m\nT/CNrsL6f/0TDK75y+Nx2DcPPCKZ2q/b8yPcgcenyhcLNi9qh8Nf5N6jExl/\nawHzoHiZ0iWF9aFxwXm2sSsIYGTw45/tTs8vQZ4XpL0f/EflS4/lP6hwV5dC\nWbLgDjaATSSuyfOTJNTlA/MNmtZ+2qfRpZOskJE6mM31bydr9vqzPKQ+AMub\nkXPH\r\n=ibfj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f8f472762.0","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/shape":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/button":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/typography":"7.0.0-canary.f8f472762.0","@material/icon-button":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.f8f472762.0_1592863104181_0.1180831243880871","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/snackbar","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e17e4d746cc1974c2839a26acd4a61442fb15d7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.7e4d55c34.0.tgz","fileCount":40,"integrity":"sha512-CtH2R5IynZFz5WYx9ite6Q/IKrOJnqlp0J8uX8AnygKcF4toflnQ+eC75lXNXYb1S6c+Jy8fSFfBzbOYhig8Ug==","signatures":[{"sig":"MEUCIAKsCoFT9eYMRGVr66wts6fxANTIz4zh1rhnFWbbz9WRAiEA29sWfz1o6NXM0VCb5tRXCaPOWptn2XdnJNF2M9Fd1wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TD1CRA9TVsSAnZWagAAQ+8P/jf+/Sd5WWOdiXkbNHu4\nr73BNUt/Emfh4geJ6QPm9M7RxD/Bk/T7HJk4jMOuQROlEWM9BOWlyWWcV+lD\nVEB+OjkPyjKDt+SgeBDzCvrBMAIwoSplq7KOZ9t2Zwi3gdQjdFMSnyvgb2o7\ndgbGOEoPeUtpEuCRKydFM6sbHDRErfkx2Bb8t02giiYPjOKYoGcIz/oOXH5v\nigtJG95M4I4iFrmZOU2jZKmIRdby7cppqu9COQDuvK5obVMSH+89AaLUGQSx\nn1F2sc2i3I6nYD8fsKXOAJp8kmYqJsNC76W7p1Jn2PsiEJro5N/THv8BswiQ\nhxkJBKXS7fYV4/X7i30ljoOec9If6alMjow/13lKDqelpAylysZBli14IG2B\nM+ejw6qMdIRyi5yAFqZtNDkKi/tWwGPBDvy0GA2iWwoTi8nypp274l7CAaoQ\nycVuoDzL9pwcF40coWaK8hjsoAeRNVMizBTmeFpBOwwHNkf4ECct/hyX3TmX\nB3ZodQuZDSMWhJ8QrVGtHeBgDpDdaJObuZdk6YJR2YOeIesNudSJIBJxBkp6\nC5u3s8uPHlJugn+lkaQOuOmmzs6ZwEOpQpCl3N0KFsD397yZroV8JN42ScmS\nNqtC6ep05x+jf2lwh1cWW5JcktIrSqshvFeh3fpGmWCbaiONl3c4AEpAQxXR\n91kP\r\n=S0jA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7e4d55c34.0","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/shape":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/button":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/typography":"7.0.0-canary.7e4d55c34.0","@material/icon-button":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.7e4d55c34.0_1592865013258_0.4587864176810861","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/snackbar","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34fedee6ccbdc722f638eb1dbed4a6e94aec3f8e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":40,"integrity":"sha512-dP/ACLX8+xgTJqLAfF7B4da5TJCp/X7ozcCbDBzDJpd40tSY1MgnaHIKucX2HFLBSk0yetNGpCNPrmiA5uuwYQ==","signatures":[{"sig":"MEUCIQD9gakZMiG4Ioru3pgGHH6q+BjJ0oJ7qWh+GpfpUD+XmAIgTTxiEgDS/OvZhtLIWw7rjfjoV7P6ba8PIT/L4DEnqxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hG5CRA9TVsSAnZWagAApa8P/2cM3/6XRFZo7+wCbsLi\nbR/p6tsWD+BICbKFI+8yNm1sp1eVO8ggGd5CGWenajO5CMAyrEzB7W205vsU\nTSM6PAqDsd2JCDKdWQakvm0JQZYg9HIUN+iBD5Q1GxfKti/PLI27w+u4ycOj\nJlHnJNHx+2Q5zPE5XC23fM9XXoMEi2hNHHxg8FGnz1PRUFZw/ET7gOyqnnDY\ncFpZTo/5TVnl40rqGAlyGxVMEyTsvjKUZPkLQwsIPuS9abhXT/eBxeKfGp67\nxflxt30+m8mTgVHOcCY1BzuXqdNzJszlLTtK2L3Qp0y7k9lDnS/8GhhDCY3s\nsKJ7OzXpwhvZiEaUiulCnwN7RQlyrYhSzJEqVSwieP879SWzicHdNw/x1Gsu\nqXuCyFnZVPEbLJ6VqWUi+usz+H0RnxXckqwQB/ajtejbcaiNRJ4zXwwzXnCu\ng32neMi6QN/az7Y38t8DKEqLmCtEWjO4uxDQ9UTa7MaGOMKj6h0rvR1eEMRC\nDhTLbQeqhFaYdjykZUtmaqbctIVeFTOGJ69k3jaBrJZ8vOQdi025HSgpp3fz\n14UwEv3XjtJ321LE0oUIH3Dz4k5yaQvc4vs6p+7Rg1M/Mm0eUpKZ2gun52ZK\n2Zha8XMG5BSrs0eF6f/bSadWCvqX15tl7Mbly21AAVGlX1F1uybdrhgi/ut7\nUawP\r\n=Zgu9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/shape":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/button":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/typography":"7.0.0-canary.bd1dbc91f.0","@material/icon-button":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.bd1dbc91f.0_1592922552782_0.03065569297472126","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/snackbar","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d329e5ea767ca3dc0ec9a7e45d919a0ba304a97","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.31523bc62.0.tgz","fileCount":40,"integrity":"sha512-fAbCmpdHE4UYh75RanZrQ8RZNFlZhJrASQV/8eoX8VRKleoc6oCYvjtsO1lYE0QD08relv1wkI2ORD3sOqcrYQ==","signatures":[{"sig":"MEUCIQCOaDlrS7ztXp+umuH/ncxkRyFqr977Gvt3Eq179JscxQIgbJmj+7uiP45qb0mV/XaYIvjWazHwATr+0l5PVTe+q5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hMSCRA9TVsSAnZWagAAVaUP/jC3aCtsC9qJtEho1/ix\nMR/ORVAGbQWONZpKfHqiOy9GCuqWqqU1o+daLVFUtJTa8tCzNGMT60w1WQNi\nN2/4sg6YFHv3ns+ZfeDemxyfcTu+51T0t/Z7+DF6o6accCnUMG6OqPIEgqvR\nhVSJ9XIORg3Ubv1oo9mRk106KniaT+T6vttTuFcjZEEmjOXm14vjsqhQ+CWu\nLZ7ecXifMgeM8B6x45KIduHfwvFqrfbH4myAm7Y7S6V97EcSHJLokKv0lkuV\n9QmqrXqHuHnhTHPAJ0lrb9qGEByJj2HztTsD8sEnZ+xUBCvbcm3rFdYRwnd6\nw0u2dh0WCok5RQwEc62jHMHxF7dErFbqfdsH7XIwO0Ks+HbEUYl42LydNKnj\nlxay77KV2VosumDiI7jb+/ODkxVV1bD0y7H49r9VWgJMWzly9ccZs4Mwd6KY\nPxaTr7jlzTzJGce88eyZqrafNmyrfRrT2B4dYBwqnE5RD+Ldkle7mbIkxFz7\nUqkWWtADIu+o+ijLOlewYqbmdOOYLPAn56lwepAL75qaovY9rFq9jXXwq5oL\nPjLg1HhDpb5ewYsga24pBf0lPTlDbOUQl0FVn30tMTtMOVerk0+fmfqhsfbw\n84P/VE61KCPTdcCu1X0bFGva2X8zyjTbwIVXYyY7gZ9ZdjUDpnPFpd42Lo52\nN2Lh\r\n=Ihxi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.31523bc62.0","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/shape":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/button":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/typography":"7.0.0-canary.31523bc62.0","@material/icon-button":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.31523bc62.0_1592922898197_0.6946179388449076","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/snackbar","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f11945b96c375dd10ad6371b2af491947be6d17c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":40,"integrity":"sha512-UHQrkmuQZL9r1n3DVTliP5uaS6pFhnXoB8JTwwM3MUCOJXr3QmtwtnIfueGpDA7mE7DpxYhEE6Q6Y6zBhksl4A==","signatures":[{"sig":"MEUCIClttLy7x3KvC6jCrjrx4UjAeV8Ox6gKnOsiA9huuu+EAiEAiqEeefA60SNnPhqj7IHljbcwDvOIk3hdsHyw+VpDaRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hTvCRA9TVsSAnZWagAAdL8QAIUvuOIc2m+x5veVILRj\nYftmBmnkU3XrdxZkJB0h9xjdIBRjLx1zJrd8L9KdFXQEE0Ik74DN8Pm/XBXw\nshHOR/r5Y84pMiVkNBz73N1yNU5vJuzZKlravwy49Dn84Rd3i6M1cxonNwYa\nAMLQxX3ebZDDBrkG7O/Wg7l2mgBAc4i8H6cVumvbg8Yys9d2Q9XU4uiy06q2\nxj1/X0lZ412ajsp7ykSgVaC700g429uzLIUwgl8ExVVLnn6dEcHvxH1UX2df\nmFAKSBwk5sLTfQDu18wT4Sc7zC1NNK1COdU7+S1Aae/VbyziSQwDVFYujq/K\nIFfD5G857xdHg9ilTFa4Pk//21AG0uAXYAIzBfoHKS+rEbDJMm037OVR85GS\nWO6j7lnM1uzvQ0s5cGm5wBtdTxCfyrB3tpA25rrdc4Hp3ctG1p4dtYiEgwG9\nfrYKpJR0Zr6naQcndXaQMmCOq0nWV9kdnaA+OT8BmwgZ3yrFfMLQFVy7zo83\no7dmrFMyzduzax9XpDfxPmvJBFHHr1ABA+vcqGm45TEfAqtnsyFToezrtgzL\ndp/bSE2FK8QMweCEkxm5e0ByRVH6zMyvHB71dkvfbRCMQ3r1OWapPPQ/IEIb\nFrCW6MoXaPikQFCH/YFq/hk6ayeHA+A9gmIovhboh0w7LrgIMswm1rQssvjf\n8KO2\r\n=KOPA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"96a5767feee3e2fd2ff90ed98a721999f8cbcf5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/shape":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/button":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/typography":"7.0.0-canary.a96b6d4d6.0","@material/icon-button":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.a96b6d4d6.0_1592923374860_0.6076262944038835","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/snackbar","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e08a48ab2b02559e435f1fe076cb095c9dda1b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.ef3a09533.0.tgz","fileCount":40,"integrity":"sha512-xWC+teA91xvfdFZ21wDWE5pgKTwp37Kj1+qNd1DCFZErZ/M8N7+mSlP7g0AQ2PRwAgz7v2Lpo2nKUcPr4qZfDg==","signatures":[{"sig":"MEUCIADLAMc31AHAFe7SOB8N1UZpgxhQUyB4rc2tBgi8DckvAiEA0i9d8hKk+bPZcGdhCTYrzCHntZBK1syaBxgjZVBwBoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZnCRA9TVsSAnZWagAApzsP/2vKj4wZwCc8H6haPkHB\nvbVmln0sC6ltO8Vq4DtDiDn6BXhvYSGS18LlGdyZ+zQxjuwcXTxzBAIUNC1v\n1NPrulLEQ/KLEdkZ+FOGZTICIf8ZR3BTTpmof0D9ducR5CaFxOKFzJjVt0V6\na1GLEC6d8N3hQiQG/DQl4QkmdXDltuXoddoMV0nBwylTbzzhaTArmahXUt+M\nLp9sPSO9rc/jk5cFTBW3xY2MR28ppyYQ79rOo5GaTyzTmLW9M4ef4BIyMx/a\n0Y5LUfOlFcwlp+B7APvihox876sI2ZvvqECjCF7Vm8MtWjd+e5Ob2PHgnNOS\n1Ea2n/k0Nek7HV6+Tp83ZtlXfFZX4ZiA517pEDQtJuS59wHnwL/i52aXef2z\nEJ5YSZ39ZtEzi47j0gEqviw9wWBGbp6XyFDTIj5J8P4jPgihrqAv/EefTDYP\n+eXacCccOtMaF2dTVWQ4NMiyJOVeTjS76Kev3mFbwLEkLKz6W9Xccc+VvZQ1\njuOS5cewoInyS0XJ/YslwOpvGm4MS1Fus1Xwlkoqg38FxdMoImpjgK/XIe8c\nlX9Q5NadMUkQZZtiO8R0t2Mf1j4AIVLp9GqmQ6aYd5GTZygnmOwJ+7HbbAkN\nfre5/PZEDHnRM5NG+1fn9ToLT854ZC66i4g5Zg9quHTcK95nXEP9eXkm0xZJ\nvqnd\r\n=0KCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ef3a09533.0","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/shape":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/button":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/typography":"7.0.0-canary.ef3a09533.0","@material/icon-button":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.ef3a09533.0_1592923751026_0.1719024980394308","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/snackbar","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"291d70a76b076fdb97659ce5cad3cacc02f7b2f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.080965f39.0.tgz","fileCount":40,"integrity":"sha512-dabrzl/UGSy93T8uapORBKFg+FGWiaN6QVFRq4P9gKSsYjd6e/9p4PumhsnLxmEtRqCDpvgrjN1vNndFA392zg==","signatures":[{"sig":"MEUCIDvPFmcVpNcQuUrPrCGhAD4oK7qoYLb/eXJpnh3Op5pmAiEAqNssTc07C8LVdwCtaIzg2yKEgEvtYh4DkSwIAGweR9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h1GCRA9TVsSAnZWagAAc3AP/1fb4bwFYmOzpTYhHaiD\nUIS7WdupVjvC4iwqGeGOxOIH8JcESXnftFta2BTi5nx36lhRUZeq0s8g39PB\nJ9GmwMA9brhbHqSonCrCSF7eWaRW0MruJuQe176DCzdMQaVzgpmxLPYeaBFJ\nJ+BEYLz+AdcWIPjVPMQrwoADvnN+8WUqG18pKc1QBgNvXquUX5boeTPxC3hX\nrM/FLnzIpP/nJ3tN/fkGtlb9BI8+rCJsrHjVhlKM1cmDFBGPFGZYrEhMts7C\nL9Dkw7bfT77Ztl6ldrfhAo2SAPud3jIvtlQxWmt1xvLk5MlKWm7Xlkhxh0JW\nehOi2YDH6FGkovFhYwBuVSoMMdu1Ikr4PBWtSoX2pyJ2wgmofDBu3N9YCwVE\nEMQeuqWKwTW5cX5B9mOHuAkHtVr7uhbrp4f8gMl03YAk1e7plXKofDTsFtpJ\nNYAO5QK3IwWKir8h1U2gaxxAWxi78YA80lkZ5gZrInMQ5iSSgDPclJg5CVPl\nfRI6/fpy0fA+ykEzwle+03afbu3FtOvUvCcOOIslK3qlZb7Mi8PCVZGSSkvO\noZtH3p9Z9FcGElmMihR++Rk9TUJsAb+zbxdMwCOqEROBBj/VNrh7fHg077gb\nAIFc0SWXRcRKzUK7yqs+TJOEWE1Z6CpMwcyYOvatUVmVOFg28NKg99zzIh+0\nqc6m\r\n=UXHb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.080965f39.0","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/shape":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/button":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/typography":"7.0.0-canary.080965f39.0","@material/icon-button":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.080965f39.0_1592925509544_0.374560001236931","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/snackbar","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1bc4e6824685b761c3154467d83d2e8d1490c5e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.1bd67b65d.0.tgz","fileCount":40,"integrity":"sha512-oPnR5d03+mvF50mtmF2O5AFb0eT3HvjNMz6s998+A2Se+LM7ny07bNxLFLLAHgCYEBkyEAFzkctki4ylcKe8Xw==","signatures":[{"sig":"MEQCIF5rQTdsqfL9fZmGX+feRmZ1s4G/pefO6kvpngS7LjPoAiAC6QDTKZXpundpiHwZUcCf0VvTcmdrPX5ofJl4iKIcXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ic7CRA9TVsSAnZWagAAtjoQAKUn8f495TlQjEQUtMiB\nNzQek4UqHlWWKRbfZRi1Arq2a8mnANIhi0JAav/M/1Ih4ZLgDzQYFEbr2ra1\nR2rILoR1XCNRl+mE0VlaIlANRPEPP5jH33FtNhyIclncFVrZzDfNTt+SFPX3\n5P84RHmg+JQOZK3Q6XuN3DVX2TP/1z6lETuSsR84gMe9M+A8eyhh/3w/yKxy\nH0TN9xxfsGThwpaTyE7D5YNc/x5EjuD6y6y6gL5UHzvgntrvaW4Agc5eR1QW\ncCQZHIp7j1AmK2LnTZrhIRXurRpiByeZztcZJiKQgnx4mkP3XiAjAT8ooNEh\nbP4fJ9aWR5HeBoQlUEzUl5LOPYBSvrpemnOTlYDgr4BDaroUuzYlWEJq5DzH\nN01K7KsQmHZ5WF4JOJqq4/38RliNNJC6e9yitxfzaoVIBshULa1Wb0mymqiN\nv+JiH56ZNQybJqOGLVlunzZHIejOD3tR6Vh/1E+v9NCPa5qvcydoS3WFjOMl\nmMKRaK1wP4zBl2FwkKu0xQ5lh7ucIZgVAFlyH9cUb6gneP1YmxmEvrcy3v5A\nG0DtpRL6GpUg0AR82BjALgSVXzqhjrVLIiWe0hq/pJgI5180IW8cc1GWKa1S\nKoQhbu/ZRbUcas73v0qHYayYlXu7YAir94aHWqXTOkTa3AHNlZIOmuPhZnTS\nw+uN\r\n=jnZx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bd67b65d.0","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/shape":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/button":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/typography":"7.0.0-canary.1bd67b65d.0","@material/icon-button":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.1bd67b65d.0_1592928059220_0.7126055386188939","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/snackbar","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69e7ab1b5f63cee17a12ef5d10b70114fcdb75b6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.18ca31248.0.tgz","fileCount":40,"integrity":"sha512-IP7D76z0pubVqWpQdXo6t3ily3dFlk303rH6+Isvvv/yzQBNlsji3v9gVNXJhOgYAwlzWbzBwDenUzBPtkLv2w==","signatures":[{"sig":"MEQCID7MUruH/6VRHIXUPL6iO1NHCv0HrgUU86sZAQf8xh6yAiAdNzDtZWdEn+ecNdPq+wp/3XV4KOAie9sTX9Bg+Sa+Vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kk3CRA9TVsSAnZWagAAwDIP/0rOFo7zLvU0sC2yMLbJ\ni87X2Bq+WcwYEYqkNDCNJ1Td8nrFX1bLcsmw5P4lJ5P47486rbocoKE0DcNU\nK8gQnjI3kTrJRrLKJeuZpqxz0xxXTz/vyiFOf2H++WZTb167F6dfHrhJtcUY\n1oaQClzRn48AYu/TbWBLHj/vOoOm0rt+Il4f/NnBGwZILMzfV3RBisXAqLjf\nrMEzlPUS8vpoXQ5a+LE+EoOiYIwg6x82qHe1AVPEhqU80F8NdibbqfhZEiRp\n+7ur8AvGs/IOzwB03J24RsJ0UAhBSqT1v943x5Vasxd+04LftX2av4oasQED\ncwq9MKn3Dhp6LiAe+A7XKxWt9nYnPxucl2wbD96HwGPI/KfU6j3odyf6oOuY\nBsmY7Z5gOyzlZ1kHlfi/lDhP2FoDbDeOnmHxbrQOrRKQzvXPw6VcC+8TmbPO\nLN9iadp/7QI+vjKg1W6gn5QI7XDis9uATsuBPQvMN15g93wLJfZeF17+rnNE\n02y/lyQhzk9YGpo6UaA/wjZ0jqlHz+Th+hshmPobObgFWdVh6d78lN6QtbVP\n/GQbpkO+7Bqj3nLn4902H6OgdYohw3FjI+UI2ZDP8+6jrynPzaoXFVhZcZT/\nOdXIdDQHb/PpUf4LBj9ODAjUQ8vilFSudd5jl+Nuj1ApG/kihpIsT23wr1tl\nlcdh\r\n=mISU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.18ca31248.0","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/shape":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/button":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/typography":"7.0.0-canary.18ca31248.0","@material/icon-button":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.18ca31248.0_1592936758771_0.14281716332728633","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/snackbar","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29a25d56efcb6b94b7b486eddc27832e28bf1da5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.39cf00836.0.tgz","fileCount":40,"integrity":"sha512-OXQTxxg7/8lcE70QHA1bqMzuSsr5rkgkiTcuwUH5x5U+TT6wf0vgppZB6yoDUz8wRhaF79LwnGBdfz4485cw4A==","signatures":[{"sig":"MEUCIQDGDzFDGFSfEoCD4VBknhVvMHf3xJmpATlVZSU4Xb3E8AIgEhnrKo7LtE2NaoMcGWduqDcHX5I1R0c5sbTIXx2YoFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k6VCRA9TVsSAnZWagAAUWUQAKOL3OUN35Pal76TjQH1\ngMnvm3+RcqMVcx9vEelnh9Gsl2tDcHNrKJjuMK1ZMGv5qNyMPVRSgde5ulTA\nVzSd/4EQWHSUNoESlD2v7kO2rRj18fbThcNw87M+TH8hOY54znt4/dP9q+kz\n0W8aJBS3Zi/joZ/Fp8QJ53Brga0IG36NLAl4C2OKR1pbsGeh135mlGchflOm\njycKRHbcvyV5Cpctyjpm8DrjHjT/lwII1T4gtxZJWhextyA77wv4BMm4vIuX\nyvsASwsiC+b1g8Sl/0KY8MmS5XUzlfpPV9SY8PeodKXLRmH8DKcv3pbYeuap\nhGkHMBqXawZTmWcQhmTPY7ipdd4W+ZMzYCjHEZFrPGkO/QFPrZ7OVoktS5bx\nxnvWc0QVzRb1E7AcJDGpz2rnxEUQBMBTk9ty/FtKtysplXUv3ZkKHItXfEk4\nAMVoxJ5MIYsNvAuDfwkT6fe5hojQr3tvzfJdCmZqzmRikL7Wja1iRWUc24+J\nfPu2EXYKmZIz6Y1aF5BT0zhXCYJEWPRBvTayneR5I5ceqFKHmt3EQPuHBe1b\nui07xAj4kuk8u+0U622r89g/MwpHU/1HDAq7pluOEnLMElxuUuDibcghW6YI\n7zIBDnVnHLTb5EAfUmrdiuAVEiEC9L1rKHX2ywlrh/rs4yLlBONc30iRTZhM\nWCSs\r\n=itiu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39cf00836.0","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/shape":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/button":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/typography":"7.0.0-canary.39cf00836.0","@material/icon-button":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.39cf00836.0_1592938132607_0.20464886146854866","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/snackbar","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"750d773e64ad835ff840a6c565e114300c3aae5a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.1bfda9e05.0.tgz","fileCount":40,"integrity":"sha512-mztujQk4UGMgkTzj3+/0r5Ioliaxk+w80yZW1of573meNU9vps9yIbjeQQLGSkdKwPu6VP2Lp/SQl3VrlpXrUA==","signatures":[{"sig":"MEUCIQDoW1PVSS5IFbGCtL5ew4gBJ3isPpOlcBElaL3vR5QjigIgGyek47h7HZgD6Iv8obGYO07gKHnN9koXRpZFTDP6J2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lGFCRA9TVsSAnZWagAASzcP/jpbEX0CKmx+S+PEa25Z\nDEAQcGKDsc16MeProyj0LF1bEwRTDtlOsYHerSjNwhkpSBm8D36go42EC3hU\nvgN3Dbm/v891AfVUw14s5Fute/r366Wz+uBi+wcwNN0geTqN2mcYi4LiSGQ9\nABBUisBJxAPAUS7NCQEwfJzAVlrm+ItHzI1qYK3SYvK+4g5+8hjwv6QHX3BW\ntS4pdsjtXaEieNaMEpAwlJ2wvm39cFX1fZVsDM+IblSMZMUt7tPtY5ZkkceX\n2Xo2f8hrAmhbua5dGjhua62MhVg3xY+jqqIxF50fHJwckud4XOBruWwXPV1s\n0pT9bPpoOyvl+4mhaKFpJdaaPXJWVvxnRqDdTqw3Qm5ve+OP4U899gyBFJAF\nosbv4q/Q33171d/vMrdxjMBVmTC9pE0+UhemARziXNFnCJtwiVOnGMb3DbJG\n7IZ3xiwcUErfnmOnu74GzkMs6/+PRMSmf+5VJ1F2ijNumyP50rzkOAqMTj6X\nzgN/sGm9XjZx89h/EcwtgK4keKK2ItMW6xW3dmo7jhtVHr6P7pVf3zRhzdTw\nUZQMsH/c4STQO2N8ggc0++7TFk0zEpE64aP9zFhgBI4Qj18ka2JYCCCrAIQf\n2D0nBu/exciWI3+7ziOMgAb2Pk76amT07vaT6AFfJH5jQ5Nx6u3oFFXkH/hJ\nOKy1\r\n=o33K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bfda9e05.0","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/shape":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/button":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/typography":"7.0.0-canary.1bfda9e05.0","@material/icon-button":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.1bfda9e05.0_1592938885442_0.2692757327408888","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/snackbar","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d02a828c9eab2ffc0135aecd4901285089921c2f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0-canary.08731bd95.0.tgz","fileCount":40,"integrity":"sha512-3fMxCbyykw1y7c/JelkXUc3MyBEJD9oOhoA5TC13PNnqSoijhvwOO9qitxEuvp5DZ/UHMYmyAv7wB54t8e6efA==","signatures":[{"sig":"MEYCIQCu6emGKWau3UnEkQIxRR1jIfEmfHiLhrnHahsJ3BfUVwIhALlmsLl1Ay//cdk16V7PjO/thdVgeZSO0JTUUakZm52u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lIZCRA9TVsSAnZWagAAT7oP/AmUnkHfODZzpNjMzk7f\nr3NYmFOvM1JWwUhKPy4p7t3qEgQqDBUgJEVoPLaejK+Z/dPQ5ZCP2LfZ8rcm\ntHXOI1PKtI+Tda9dA6xsDtZok0s9qmckgbYHOiGQLpmHUOUaosdeNodYhkoL\n7uNrcG8UueYgRD1ypOudSCgp0lI9HXmo4d4iKqS1zC5z1KkSWsV4726Eq1yf\nqQzd2JOwMwBPjhqUJQfeZlLGw/YQlYkpxGAQkbXDqXwO4AwpebRnuZAftkbq\nTILyi+ILa9w0wF3x01NM51OHF8zTs79mELfUbcfHgxr8q2OhCiFXEF/3Z+UW\nCXVC/D3MfwzsIqyJ0FZqrjlsi/bNSnHF23hg6BaFF+Ulf+zyv0KNU6nuccNA\nA5NCE5nBNHZZ9qXOpZwsIwM1aTQM1jd8F2xkrS1EpHKE9BcK6HFxucLGjlSJ\nliPBr9z4qPohF1Pc/75zX02nread43KxY7KlwYYvnMiqUboLJEZrTbVzbsDB\ni3BshU+clRCFf8HDTBAxxg8HJRyOMk/n+bjgbU+XSdcZGEkuzKoP9F4jS183\nWUMCWCj+RAITTA0Xb1i24Sf3Ba4p+3NscEutBZqLLJkZDRvpryPhdXWo0qzY\nBg7dwrDNtXZ4OpgAHSTD8HGiiFM5fnBPz4XN2K+rbnxy2GSvaTHpOuO2ParP\nijrr\r\n=HG7k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.08731bd95.0","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/shape":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/button":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/typography":"7.0.0-canary.08731bd95.0","@material/icon-button":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0-canary.08731bd95.0_1592939033286_0.7390949872638308","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/snackbar","version":"7.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4002b652e468b09e10d63ab46a8fcd8ae221e220","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-7.0.0.tgz","fileCount":39,"integrity":"sha512-t9tYYTBIJLx7f2jl3E8miGaNc6Dh73gSY+gbwYAYHQKiXXOQj9234zQOEOTi2xjMkf2QvKecZ/Wu4+bBDF77wA==","signatures":[{"sig":"MEYCIQD3j32GrN7TBT7mHoJ5ZOOU0i8DEebTWBYPdU/UKjbL4QIhAM0ahxm4V0SqkHSeyUPE7Vo6lQh7mV+lkZT4200zZlQU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lP7CRA9TVsSAnZWagAAvygQAIKhf0xeFCrAdjvc26aw\nhY1TO/2fwVhdN0oi/Pb31XW10V/0x5BpKYLfkU7XjkONXbgXEFaZPuPMgHb7\nCl99jW+KQ3ysKbKUBovvNhWLXlQjbWfSJJBXHqOlaPA/iNGF/SCx+i8kdZlK\nHA71AyefP38rtqyazKLpy5COSkpb9KhVNVsOsnbtoxMXww6SoQjUVDExlOB8\nr06/BWQuS/t5BF0gUXDzyZDYfaJHDVzfIz7xWlOj9Cg8mb1yYDe+qyVtpClg\nhuRCHX1U+fb3/PKJocJ7M8H8CcqyYyxGgbpY1u8a344kpDCQGzzsNBzb4Elj\ntvcJ37YRhfzZEzoCsprJdJzxKMFLU99cWTTiFTodsXiq+wnaTWgBpQPRmE15\n/MvZmVt25ebcLyeaQe5p0AlGgC7ERAuRVS3DBFMDNLh96Vk2aQXqC/ipAtql\n1kx43i+69eoMRAv71sC6L2+UuyuxF1A5udwjFwRS3ueNZjU8ym1SpD+PR3k5\nrvhMiBQH2OHdJ92Rxf3CFstTYNE3NM2gDmxs74MGWI/4JXQwWpZJTsz+UQTJ\nb0hBmIYVYjZ9/7JPFQisNM8Tl2B3Uzkvy5DQnEBTxhwt3ydV3hSQtKHnDXC+\n0EEzvTZquJYaOvOusBItPUiD+y2BPSacywi2sREcQXcrfUVEAlWpR2b6oNeZ\nlK3g\r\n=uSx9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/button":"^7.0.0","@material/ripple":"^7.0.0","@material/animation":"^7.0.0","@material/elevation":"^7.0.0","@material/typography":"^7.0.0","@material/icon-button":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_7.0.0_1592939514819_0.4055086766199345","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/snackbar","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63afbae58d7e0afd0ae20644d4fab15473a49fc9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a3212b209.0.tgz","fileCount":40,"integrity":"sha512-74Qdo0I7s0o8vJJuO8wPbWzXhXBPXtE5o0QmKGuwKBmuF7Uc6u8lIP5jjCoKnCVjrj10PftYKjHKvx0ktOWBHw==","signatures":[{"sig":"MEYCIQCHRU9WM4NmKrDYOCUyyboDzMWI8jcV9T++kiFxHpiAdwIhAONExP7G/+QZ1p9JT7F82LAaRvVD+9gQ5jfzkMm2JqeQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQwCRA9TVsSAnZWagAADIUP/jXtQTvsgdHDKge9KjHV\nZrhMxmqflJ6HIVFTxAt25GSw+ZkjG6WC4YVhKWQsi57CS9v+EB69mkI3tpnR\niNTyKwbXEkK2843oHguL22CkAUnbbLBgY46KWRzFxsEW2ciit+rrw9CvLHl1\nO7aturZIRqbcRerZTfD4aMSpRKY5ohVeSY44C6ff/zoUdDUgma4p0rQQwqNq\nMLKS7n/7X2rsvodC9hHna+wcpq15Rae+Q/Uo1chg4TQh41GCq0CFhKk6AkzC\nnceCuJHEdI/fmYdtwJn4zBfuIPlFTzRAHxeCIxsphEVA6d+QrzjjomW0Uh8e\nei4ZR7L+lXf0LpWFAeIrAlfznOJ19sOdw8qf5eAZq2kG4kdDLItJCNNuieF4\nyg179rNIkrOeVM1NAa5l6IVbHwo/WsbIGSpw/B45McXsbgD2HanJEENP2ozK\nmzkR5Zsan+xO6lNvWSUsX2QwvCGaa4mYfUK/Uj1fU+sbna5USIL/H4IMfDI1\niaALMQMSnWNjgikhTfVtMM/7BJPEXmxUeALoLQmmnwNvqGISHgbxDLQtDTTx\nPHkZUeXsCeafBNHhHsHLhMTgVFR9SWX0ePRP7QYJntFZhGW98f/yDlRtwDoe\nACeBGhf5BGBCH4IULbqsFUyXvyXctHspJ0rnXuk1wREqB0eRfwmdE3oDLDGg\nH//0\r\n=23kz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3212b209.0","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/shape":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/button":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/typography":"8.0.0-canary.a3212b209.0","@material/icon-button":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a3212b209.0_1592939567966_0.9460455730979698","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/snackbar","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccf648dc46596d0a28c6684936b541c0949865ef","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.15e81fe98.0.tgz","fileCount":40,"integrity":"sha512-Ze81uemXgPeFSEjwTMXnFfSNgd/v84dH+/2BeRS757g6/CCjZ/WF2Kdntl8C+eLEevqmKPXxGGSZ3R3Jjalh7Q==","signatures":[{"sig":"MEUCIQD3WL1jBRJiIanGyvul3saMa7Lhh+JJ2R2KC9b+lgFEVgIgKUvhcOWTb7ndBz+sQDnRT03vzEAgMDOyzhDitKkJs1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lsTCRA9TVsSAnZWagAADlwP/32r8UsOLX9dPT7y75Fe\n4F2mMloFOw+G5kFoh+kNoexZzARqevW1U338qdKWqlgq2oSBbWq/tEiibAo/\nSOHIuxQKzJCuo4a8QVrhqA9XcjaYBGUW8UV7pzV+cPfWPfM3eUp/sST3ifnb\nHnIrwhQRww5FAzRGvQP6oKON0fc1IcyIHS0234s3ROyWEmoFyC5Ez3yOSKdQ\ncJ7o1wYhdG8MgEiFyJ+vgazz3sGIYgJfagYsxNdI8m40FZlOCkH3MvR4xW8h\nUDLiepG0bJyVzvbi9iSMgA7BAI5fUsKyVVMexwI4Ql38hrU1QNV3OsdsuNPq\nNuqemH3NjXGDL52IopPNqP2nZBufdu+qAwxLEeMFZ96nc40zBUuJUiDENJY6\nsU11QMMgwoi+wcky103zaYGFe1+ctEAB0t6zMG2pG7WqR08WYrYxTgDYWM10\nUPy1I2zW2G24UkqI8rNipD2w4mYtwp1kzdCyC0Cxjnh/tNNiVjAoNfDO282m\nijSh82DkCbZHJGp1X7J8EAndR7Fk8iXbZ8IAjXlOWlbHGWBfUB26i6p4nXDD\nj6xP8ZM3yWFVh5+ApRnwF+s0jVpclk0jVfWn8x/lN4sbLBZ3DO64ACz5yi9A\nldTijKyXZtMqJMr5d1N9D1JrrHbd32AXQlcE922c6jtH5SKphit0umXBwBLd\ntaKs\r\n=C1nl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.15e81fe98.0","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/shape":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/button":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/typography":"8.0.0-canary.15e81fe98.0","@material/icon-button":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.15e81fe98.0_1592941331080_0.16896196914676698","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/snackbar","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"647dce209532e63a914069b699ade1f46c51c489","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.004c9d392.0.tgz","fileCount":40,"integrity":"sha512-23W5lS88+tYe/eP66pkstxGAmWiss5kSd0O3C9g2CIBAVakv4wfDJTwLHSi70tZfRTlW1e9XcVK96edMRg28mA==","signatures":[{"sig":"MEQCIBqxrAM+zVM4RoTzON4JroYJ8UhSIDHVWA+rzEMMM5CaAiBtWCid4uPWRH0fVSzMlnbes+US2HATM5S3bME97pZ7ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oixCRA9TVsSAnZWagAAU4AP/jrMkgMQaD9B1C3Kx8nY\nE5NvEOZ/PqftnSqP2/JOpWrAbPawFpHBo9cveDfXiv/38k9gtZumWd0HfWsE\nkRy9L2mtxKlR4nUjdQqynfg20IWSXFyWJwbCNXEb/1Rkph8C/cvZTwh/oa+u\n+/QZgZVZrvf6B9VdnrtaST6QagrrQ6fP+liKE5LB/+NvyZ8PurV8lGT1vjcR\nDkWB17dmcI3ScB9Sona+xQiOnpyVXiLjrJZDKHh1Q+juOqWTFcIVLeKLj33t\nCcHOYyGHBP8CP0WbYuYFWgom9OwONtY/4CXp0fUlTM0CGZdXXEHssaNbV0mI\nUBHUbM34xadFmE2VZuslgXEgUTKB9eug5ZCV4/vmi4AxRGdXgMZRceTYzVim\n2ASLv7Re3XXhO57DdVAiCQoQ35277ZXZDk2EQCizXKET4xGmkNTNtSJVa0Y+\nkmLWvyP+SLj2P1aE7qETFBH/Z1SibiZrxPDvzjsgeNq2eOarTc7eRlo2PEyM\nK/4qQmjBUDSDNNAYkJFoODzHdvpodDU/QS/UX0HCbaO8STA9mvhC5/uZ5hrf\n7nCDcRJY4sbDrHIrxWqbI29gOAQvkC0oC5HKPZFN0f9Yn2sIniDeMOZYv4wS\ngka+EVjY2A7S8UyWzZLjFBw6UasNxQihg1ei+BmIu8BRkG3fMhyg2GCnZ1h+\n/Iuj\r\n=GXHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.004c9d392.0","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/shape":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/button":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/typography":"8.0.0-canary.004c9d392.0","@material/icon-button":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.004c9d392.0_1592953008668_0.664875086074528","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/snackbar","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89d1be6f5a49d0ceaa88822fe1e843757a53786a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.03bde00f5.0.tgz","fileCount":40,"integrity":"sha512-XgAci3lfIqh7dwgkQ6I5xrMj7pQFvgmMZCZDi79228ogfyqCcG38AELPsftyL4NMkHYMfhpQTK+KG7hwdCS/Ng==","signatures":[{"sig":"MEQCIDs+Cew5AuUWliaftPy1Qs8lk7jrKGmXfPPZs51dtL/BAiBLO67ULx8CF7bWryeWYrISe94zOlsach6wSXYoTfV6Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8jCRA9TVsSAnZWagAAr0cP/AxPrG+K/PgEKP8GIe2o\nPoFYPFzriHDI/7l45/cUvMxpWobTdhdJn/USvHMnYEzy4RQdePO4BLvJ6bJO\n9lMveP1e2VHWyqevKdLcBnm1WVTDKicbgLkFeY5GCiQ3SnUw5dmU4UbLfW5H\nuW2eUL9ncB256GX0kuUFirEcWW8VFwzhpINPPPplaYlKrgkYb1zfUft6hzNe\nIDFX5OFptSk/UM+uJ4V5D5H4r8eeqWV3XQOWly0RWR48CdB/5UKczZTOhgq+\n70NL+2ksJfuRyqtH+5zr5OuAabdNPmDxq7J4H75iDOOZpAbDWzwshsrrz6TU\nUticXiaY+DSrss5EfffrzNGslwIlX7HufNOd+kX6rT/Ns48w8+aCU6z72qBs\nXRJefZ3OFv+4IReFqZhVGP1+N5CCf+9VYU+sYFjBsXvK89X1DPAeXjlcYXCO\nM2g6fnhyND67LAQiojQzXuK86Y94X8L/VJdC7LGOD/Y6JKoDeX/3UVTiP/mw\noAvV8M0oUNhr34jRWU+xONGM9hyeDOiOs2C8YIIo0W+m/sCwIu7HaT0psTzF\nhHG3ENeyrIdjhHtBUtuSe3uqJpEctrG3D+AHXl6wgnD0DpODPeqsuCJnp94A\nyNrNLZy3KglvLnnDdGmR3ccXeTo+cfHQU6Nfz5j88m+aSf1Zjt3I80LQFHRG\n16D5\r\n=L259\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.03bde00f5.0","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/shape":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/button":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/typography":"8.0.0-canary.03bde00f5.0","@material/icon-button":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.03bde00f5.0_1592958754879_0.6295283886308454","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/snackbar","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1296499f5a22d845a66d5c356cb7641c97b97ab7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.599b8c319.0.tgz","fileCount":40,"integrity":"sha512-+F5bv3iVhdbRNSZTtXU/zE0Sp2Zw2JtgThyovjQxxFeu79f3l3WB7TAdqe2BJNXuSZ96SEqC042YHqKOVKMaCw==","signatures":[{"sig":"MEUCIQCF4uRspH6MDp4wkJ1nHktcuTnrHTBxrzv1JZDFNtFe7wIgH7Pl9nK4wo3//+PjB1qnfpmUZtP9d5NN5gH8a9RVzjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82nzCRA9TVsSAnZWagAAnlQQAI4iSQ9L7oakheJ3hEpX\neDEA1TluH5fF31ouDYgPvkj5k+eEgIHrB57NG4SArKqiPhxIS86q2g7uOWHu\nZN78rzfvJz93UPBvETVHCDluImCG7IX9Bi+JimF2YlruQPqAqem5LdUOGD1T\njqzeMGW3REj1yzkIgIsYODQFAV+bR9Tngl7ySko0rRXP2AqETPVbNC4DYz5L\ngxM1PZ4FbBGbL/H9K5EwB2GPq4GIcVJ6mVaiy6KXNj8Tpil3HnR+HXdRAuZe\nysLzEFPyO1L15chHOEFemXl/JKDvXE2c+lteJ86NrU0iYbGdTT5hVIBL7RxG\nSWkq+woDk4P9lApkt+B4itKclazhdBr7LB1aSUB4AKLD4XQ+Kergc4MZp0wn\ngtYnBZEaQCSfeozm86BthbFFDIDJCkY23AV0mGSkKjfhzGoTER1EgRQ/xYO6\nFBWWri/2JxtSkoPE6bFHusVwUAeGR5IQVy2i2/qNKxfMGu/pg7LJDL7AGwbI\nWKXmpW4VZb5Pq7afhyVYfOrpcprWFbt3fWCYyQ1ysEBLPyFYW/bsvybqxREn\nwD+ijmJOyLYvw+jKJil07e/g58chVTWnpQu9wCKpuMkBgdAeB8qyumErlz8H\n3+H9G5KOLVMl4pbZKidWJbZWdg9T8WOTXGvc/2svYnfruVXxrzQ/lqhcqMGa\nwNFU\r\n=eKvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.599b8c319.0","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/shape":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/button":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/typography":"8.0.0-canary.599b8c319.0","@material/icon-button":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.599b8c319.0_1593010675219_0.7289535929593267","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/snackbar","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffad7fd8eeec6ff8b938253471c18ae54dbfdfa6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.87e3be418.0.tgz","fileCount":40,"integrity":"sha512-DfM21mNC4cmY1lQj/TvauSMSr2rmc65acjK2h2/h8DcirGuZqyv5Pm0YMldEBH5nCc+s3it62FN50+VfIW+enw==","signatures":[{"sig":"MEUCICn6huWltwTEwmVIUqE/RN3wkbl1MtcN5GC6BMF9DyIKAiEA5YiSfgZ0XRWKfOyKJWcQtQmvpKuV8Bu4FpTKQZ35WJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85NHCRA9TVsSAnZWagAAEdAP/A0KLMRDSqTnDBWAHgPx\nZ12zWDHKrZ3HjgEzW3ZOVj3kP0kZ2TjKmm6OAI/lsve8ZtKAAacSmc6WHf0m\ngXrsIQGIwK0yYzouYFUJbQoMn/xeu1kWXTz6eKtfds7xGHX/NrH6xetSCeRL\nPJwGVsOoDwFUZZ48ifsu7NomA7bPtw0O4efbxH4j3ktaVlGqcR7LhDSy+2BM\n/H230qoJYF9lNGR3CH+UOHr3/QABv31nlFSrFwQhVTu5R6JkS1To9ehW88ge\nPEUZEgFOnGHAmXuqxvT9Ead17hKkp69HKt7ltZdLIuMkK+kawoRKOqYMdnyt\n5nTcioh9bWr5fo7FlRGIfyNWYshAHSkglSOr8Zcl+stoZIsQ/EoFOn+pDe1S\nF41X22Eh6WpaqEOpnUzYyXbbUkD0JCI/LlKruI0FMomy2OdhaCwhQ4H+6br2\neB3OVyiBd4huFdC3Y4yAZw1xJ1GUyHxS5kF7bP93nF0kBIqVA3eWJlkvLyL4\nVdOViG7yccYISrIXYHoHSCTh3xz/Egaf2r+NtNqovgqDyeVvrNGjzGhwzBAj\nQc5qrrCBLjTWnFyuBU/+ktQsai8ltNbuJrILfQZENZIpAD4iGcY76gS0eclC\nwG0rri40nVWo5dEWdQuUEnUBlE4qoxuVwrXttHbUUQMjFVKY9jo64QLunbdz\nIEO/\r\n=69uR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.87e3be418.0","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/shape":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/button":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/typography":"8.0.0-canary.87e3be418.0","@material/icon-button":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.87e3be418.0_1593021254796_0.740768780343924","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/snackbar","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91d6cbe82e6f64fa00c1c30659a7d9ce208ac23","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.035cf2a6f.0.tgz","fileCount":40,"integrity":"sha512-3CDT3NtpFsYaheQB5oenUfclTO0yMoFZYikEVDyBUJZrdTGNiuW/ly94vXWXspNGyG7+sbKb+4I/CmmtdTP5SQ==","signatures":[{"sig":"MEUCIBzRx8ARqHBKVxdIJEnlEcZyu8Yb8S4FGJ/w54HrFgi3AiEAoE8h+UNQVf0lGZ3g/XQ5VNkMV5jdC3q0z0QaNerk6v0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853lCRA9TVsSAnZWagAATj0P/3DzpMhuAXgcSkUCHpb6\noAN8FjetRELkGaIQn7cucYnwR4Sjy/cNPAKlyWxgPXFd15GcOTamMRWmVyAe\nvL/acUXZBFBOlTfqKDotLFEcUiE65CQAXWSDF0TyobrLZeRni4EOyvyy3X0T\nwNF12Koywjx6g6mo6/c9Yd2tzb3NyP4ucsNOqJjpMBH6mkyZ9MPmZJ3Gt2gy\nDcCX7hEpcA9cSrjmcFy0XV3tclFKThf35YGE3SjLtliihJImSirBxzI4xZ+R\nRpQvg/1Z7/qXgaxRsOtC9nQvPWffaO5AGX5DsG3o8+Wpu3kNp5WS3So+5HuP\nRdmJKplF+FS7SQ3LfXCotV+65EFLcOJFKMZ/BqG9mpDj/ydR7v32cj6KQZcB\nQ0iIwwOHhqbhAgZiTcbHcwHhhNz/JU0VUtdZR8IyRsuhB7/AQklg7tNM38h2\nGV2o4BjTfByC7+wgHAzPWNtambS+XuYYesn89lT8cUDKgDQIO7MhdeIfd9Hg\nhLO518l+t7maKsv8wuV1A1Y/pB211mi0W6rKMHtdG1G9ogdtHKsf1gobMIv6\njL1TS8OqTEJ9cd5mJwzqsQcNajHDwqz0MzVlp7TEWeEfsDNOVTWDWPbCxmGb\naLKtORqmQK8q912AtrKYXIASO+Awj8O9YbY7KGMtLN6zE92E2q2DMKhFReVR\nTARI\r\n=HLMl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.035cf2a6f.0","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/shape":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/button":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/typography":"8.0.0-canary.035cf2a6f.0","@material/icon-button":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.035cf2a6f.0_1593023972469_0.02700459767170682","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/snackbar","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f61e0c7879ee1d23ad48d98a043dc732fe6f0b17","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2fed2c12f.0.tgz","fileCount":40,"integrity":"sha512-IbdCdvF84BT3ylCHgUOJ/87PyrOIwKmSvugI0LyaJFInm4diPrkwn9NVoenG/FjcouCHJ3Vio23lP+A+N4FD2g==","signatures":[{"sig":"MEUCIFgk4KwGmURxlfqN2PO5HWjVRzGhncTEMc7RWlzKHSCVAiEA9ksY+lVcyxCsX38M9ghgIZLfPPa06nR1yfvCDzwRigg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLhCRA9TVsSAnZWagAAyicP/iIr9paTlv6dJX7vatrz\na4YmHuTVEmQt8YwXdgDA/1qTdU0VHB3ObptAbkaBWhOCwSsB396oqqO7FtlM\nhsjML1M6rWz65i/H/vtsTUPflw71v2EweWXHxuiqex1LBwQ9e6MQAYvuyp6s\nZZRqsU0dsZFtcHfXEN4q1uM/Fjl3hwg8rXKXB0VwceF3eVlIM4CHR/XWhs05\nVLlAFDNEH7dVthbW+yziSh1y+or/myzqz8Q5H0B2UrHjfj0mtiD8Sk0ezBIM\n6ic70ikC5lNujXpDmtEFScpB/Yv62dbQ+2TVkxowFOYo6ftA+RTmEP9temGZ\n0JoeYKUKURM8x1zlVN5bCB2NJLEB4SEH4zSQ1hf5PP2mTPmweQjhCS+cqMGG\nTkKZpZShAn7lJkp+vx4+9BMhrQLfOw6LZgX6vInyFDqOWb8uYRHaqjR/Ipxl\npLxcTxJX7TEzo9n/gTtZPsU+e0IGDE/EIpYYllIBSZ2iy+PxjPmZVUvimykv\nVq50+cL7wPcBclL6vs8FPBrRC9QSn+Ilm4uiGpmBgef/pA1SokwWcBJ4fPFv\nt782C/dSXn8CCxdLMctY7BQRt4XNMMa6sQNXvk5Gfoieg6yawjcfrUs0gRTd\nahc5dMF7QJbMt5J3fqsOTOiuPe3wxTWC2WS7b5W786IxIZ7K0pHkDyUhooNe\nW/KI\r\n=PiJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fed2c12f.0","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/shape":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/button":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/typography":"8.0.0-canary.2fed2c12f.0","@material/icon-button":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2fed2c12f.0_1593115361247_0.25922882513389034","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/snackbar","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33409e01cccad446e90ba1c44a7624b90ae661d8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.38197b443.0.tgz","fileCount":40,"integrity":"sha512-s8V3nfbKO6HZg5o+2QnVLQTvQD/4rpqT1oEMz6s1B2jBYUY8RsNhZVpxb2TF4OzbB8KhtuYJOvJGAQM4286yDg==","signatures":[{"sig":"MEUCIQDxAcA8inoWfdvWXfYaA9GHPftBDhUNAh+/tfoG2rT7VAIgZwdXkEmvfEDrlrPl+KHnlpUxSoHDkLrw1ZBIOU72OfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RXTCRA9TVsSAnZWagAA3CIP/jdVcDHUVnCf4xuEJdgm\nHKf9+da5Qlknvgj1dWmN1IZZp4Fv3uRBEDgeZVDKk2MwHCBetGvaW+m/LeIx\njgrYuI/z58Ban/2hWImxi/uTomzqaXlsAhAjdVFOVE8zDspkYYefJkJtOcDu\nTM6C0Dz3qSr7qJJP7LPLzcI5OqESuXFVTkt6H6Ypeuu+MSmQZ8eQ138IBcMw\nSJi0B5FJEx6lb0nm5UfqcIw1zJiW3XfPiVVvXvU60vD4qdgJelY5odRqe2H/\nJ57hTg5YO4c7JwZRWWmJAfJPDpqZ6uEYYRo2CjaZD/RBmhX9mNb56gyJIMAL\nB+bcW9zTsqSbLJ167DATMZEOy0kCxTgNG8XZUYAUkUlXcjkkrMXElmmrk4Aq\n+Eun8F/hSquuzmWKUl+ZVBZLGG1CoQXQKZIeMa8NTVL3FSlxcpZf1kvIEGq/\nSc/Gj/IHVbJBJ6o9vUHN6+wvQ3N9eHoseQ2Tw/Zqd1dNWtSMDHGS9WRVXMn+\nlwE9NDBCC4BVp2K0oUr6OzBlEuXrkxnm2MG/GUcP/QFLEhk/Fxtaf363gqW8\nqnLjAIKjH6L4nTvLd2fKPgqlY+7Z8xqJFbLhniR3GAzhjM62SqL5iXDq4+rc\nZLNonC27GGULEPksrr6RgpjfwjIeFE8X5z6QOqrg+iv+omMLUapKN2Lvj4gr\nfe8C\r\n=TzTV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38197b443.0","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/shape":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/button":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/typography":"8.0.0-canary.38197b443.0","@material/icon-button":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.38197b443.0_1593120210507_0.809995259986604","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/snackbar","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5150b24ef1a2af898233029e6df91b68bcf9cec","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.69a35e80c.0.tgz","fileCount":40,"integrity":"sha512-W9Rk3++55zFR/08H4+zJJzEaXUgvsdeXD82Fvyilp5DxsZRTZc0lFyzRwK4sxErrRJc61XWdfQYX4Era7GO6aA==","signatures":[{"sig":"MEYCIQDdI/6nJ10EcJ5X1TfXyerVqlGy4bXEoi0rVSeNg0f03gIhAOGMoudrIcR4/3XIhOakuRRoctnQodWYZyG08vcQlatj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLbCRA9TVsSAnZWagAAh9UP/1EWcrQbTsauTla03KPu\nHqEyN+e2uTmBJ+USnAngs1OZEA5qRBj3aDATYXyt+n9OLt5p8mtO/2ByOB6R\nJ4o6hjvtPFX7vFHzfAISUyDfzdCvmb8vZk7kd6cqIZZbhCzz9iNfLb8rNm7n\njDbuAQ+N0FXsNywV9N5BoTNPpEZZkgR/fEAsN0x1ItCV3EDd9l80UguJhm/m\nRepM4Ae8JNNcENtC0zv0YRzwc9rq7u1UyZOFPK15aBfz0gG0AnZMexBPoN4U\n5ELVtiimXYGH2bqIlXVDLPjtXSeyXlaedBXPRaMkfkfmCiahTIryF03xgTY4\nddX/b5BZDx0qm8Iim8BbKyF+FkFoFQZsisejTymPzHizO+IIvRc24gqu9jMk\nB35Dh6z+2568GNd8EN+pJH1oYiJ+1k5F3XBXeUZeMUpCriwc0G+TrNEKa8x4\n5ZStpUplsNKULvFZOq11LYtKK3z5fEXoecqEEztn72hItJp3lgSviYwApk90\n9IwXXwf6WQdeAKjVjUBCydWXOH8vSZwddgszeqsyIeAG8TDW3AcDjJ30WAnp\np4kGMJUVkN7o1denWBA5ZfubBCh6N30Rk+t5l0LKFntOaKfhJB7TD8OV+0LE\nQYz5lxkMUvyKhYUuSxKqNHL7LKCy44bMfdhNGDbkamj5aC2oBnTgLu/n1L+C\nUBLG\r\n=RHDj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.69a35e80c.0","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/shape":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/button":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/typography":"8.0.0-canary.69a35e80c.0","@material/icon-button":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.69a35e80c.0_1593193179393_0.7669930699639436","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/snackbar","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afe83b7e755304146009d3ca6cbf7ddbfec417d2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.df7154fb3.0.tgz","fileCount":40,"integrity":"sha512-lnr6gXwFyUr2ZlIQU3hWxdX9mT1SmyzMOVRxB2GeQj+bjEI+ce7rR+K7GPpoyhpQvcqergK90UDyzQsnxcROwg==","signatures":[{"sig":"MEUCIQCu/RJzz3sYPhuOkFkKuTGJ6xSvBFd762KH/8d9GvdG6QIgKWR+4KP/iRHQuT2Al5r8BujSQ567s21JNBnkVxWtuRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jvQCRA9TVsSAnZWagAALGMP/2IVXghRMczSlXN4wESR\nlY6k5Mr3PZQQZIQhrjgz46RiK+6oH7S7mQLp4MrsVglVDtDStOCxhvLVS/VF\nOlRdLfQ2Kv8FAgcnD2U0t+vxFK3jsr9i1T0Byh1cbi4q9lcC1vSsxpMmyecO\nlzuK6qTFshw6307z7Q4H8Hw5tYwVMVxcP2hpPcuxkGYDxM8TMPt/AJUfeNgC\nPk6rzP4TOObAFMjBfZ0PGLNSPYBuPWIYIWlGCmKIXr/V8sx3pFL3DIRZH3Ml\neG7l1oLZ1uUCWsFxzE2YAb2j/abKx8293xnqLqFKYJ/TKf3IBicl+Xc1+P1B\ngF1HpD/4Mw77t1XILhNyRJg+wVD/FwTK/+Oh6JcrIiglaaPt3g+q3fRZHb7n\n84LM+b+kiGryDuf3Iq6PqxkhdimdS6hitRFBE7Su/RtaUzBY+zwvzxd7/7fL\nCDRI+iR6ThQjn8Mvg6BDS0b32OKiywYIqcDFnCIBEdSXwvFyfS8xb0m15h7x\nBfuG8KHQdra/nGQfrNfFtAreRJC1i7N/JAe0kINbzUR/gH7Z4NcsgA0gp/Jz\nYpZ0tSElNo0cp55DLt9t6/vngF3qnomaJM1Q3NAM0eAOMWwg66elU43TnmoP\nJkJEF2RT9cFTOiS0Mm4vOI2BGgMVwJa9vND/InGwMoFBf0LOAo24PV2oVcRt\najkf\r\n=2ZoA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.df7154fb3.0","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/shape":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/button":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/typography":"8.0.0-canary.df7154fb3.0","@material/icon-button":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.df7154fb3.0_1593195471752_0.8686543673216225","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/snackbar","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f61659c33240c36c0462687dfaaa1f2811d74c5f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d5618602a.0.tgz","fileCount":40,"integrity":"sha512-TrtnwPA5zjTnL6EmAFrZtslZ2DavyVxPe6yNndWf8jQyqdgCvoRBox2Qaol46/1BrbipdBMJme8MDZtNI+rCkg==","signatures":[{"sig":"MEQCIAliPaH9F6cPh1hofyy/Z44pZCtB3RA+nganetf/kUByAiAkvKMuc5esuDdd9701u6p7A86feCFQZCgQwCL9Ihve7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m1UCRA9TVsSAnZWagAA488P/0YKfMFHNDJx1nRMyGJg\n8oJ5a+FL8piy1LT7arHwpJ5fo2GNQ0n/Harbxc9WecDbGmxXGUs/LpdFYgIW\nIscPVi9tt/jOvB5yL9AxvaYPVWmWzznPVbm+IFR+beeOVoiyj+FXCPyJQaYT\n3mOifgyKmlPmvD8TwKvx+EFg/WL2xh7J88GY+HySeRfBou9igXI7USADl+rj\nJYgCnCh7E1NpJfeUzI31GOG66s32Ju/T9KVfy1iwvq2h71YdPlcuCdrH9SNG\nRfAYKMetSPrqV0t4y8KOa0IOqU5MwHpY4DKFSNbiJ66T2UdrcfsXJfWiRiIx\nhvJnnNym1F398V+B245Oe84QepTmmSnHebu8B9jsKJyNut2JbYxhBmKUhsvI\nUFNDIE4Do7Zt0r8Xl3c6ALsEYttwU5HLFQtQY5MsxOzgDBVZA18+EvAcCB/V\nYZYdEtox3HPvJQSSS7O5w0fean1b2R3nAV3ugpCrs50oGDPgxHyViD6Y0YGM\nbp2BM88aJWaT9OLvW6hWpSyLZnQQughlFMahBt1W/bMjNdMaTiQn0AY1siDi\nVZmj1wLqbW9mxJErkxZFPxffZg/QuJYLeN5wDeD6bxN1CB3uvVn4sSoYVsXD\ncYzgfeEL8VRCdVXy1pi1fs+3CeVHf6ztDF85BdRvF/e4bSR61cIGJDvto+o2\n7zDW\r\n=LqzB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d5618602a.0","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/shape":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/button":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/typography":"8.0.0-canary.d5618602a.0","@material/icon-button":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d5618602a.0_1593208147515_0.2842118953799171","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/snackbar","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e832ba9427cec21bda700d466dca5c6738badc34","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e590b376b.0.tgz","fileCount":40,"integrity":"sha512-3sA/cN2G++WNvB2hXO6fgPetwsrTpiiNmQaUCkzaWDGp8QJOdnjYZ4VtbnxEXeTP1riqbdnFZqcpT+nC24uVDg==","signatures":[{"sig":"MEUCIHt0eTqgRWLIfiuJpSTdUuIQEm+1667gxH5+CJF2E1q1AiEAjiWAWZTtln/sTporz+FAMdDc8kx3xz3cl1Oz62c2Pwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOxCRA9TVsSAnZWagAAxZAP/AoPXet2GogBCEazRmJZ\nII1Gsp1phVXOGTpCF13/lswYDz20NNws+D2w67wcOsEnkORz/NVkARshYxYu\nSxREnyp/3LUP8c62l8aE7Z51wMGi1C8CSBpjVNhSiVHMQGuC9qUmt5M66QCa\nzN0+2g/i3LcMhlGeH34AKxLJGv2+1s4U7YbOQGhOof71bcQXvLucwK5HPIn5\nwHQefw03iaH642Bw2uZF1+XlC04mAreQwgWCfqoN3LyiBmpAZMtwkATfB59Z\n32iq1expSjdrjIMaLBLvdV4O6Zn3dp6RVJkyVxrZa6fQSGNffKbfquVonJ7X\nfAgyBl4k6Tnur0SJKcsNSWB6YWzzD/+gorIZ3JX7kScGVEmOceYAAvX49TGp\nuzze0OoBg2yIbfEXEbj/8c0J9VG2hMgkS9ewEPeb6R4oas5jHlw1bPe3vrL/\nlWbVU4v/OGEjlEhMPkyw9MQRVeoIq+7M2pZoq0SeVY+vkSa6bfiHLMlazCmG\ntmvYGYYeRaRKRRE9h8TwUCBYFyXyXJ+xC0mhWMKekY+LMBVy19w5HiFikUfR\nJivXecSXO9jk6kp18C/oHClSAtMnQ8ffdb+QOSRh2T7V7W6LB7NXDjfPaEzk\np3nDAJ3HpMtMjxyEu/ugx0XMkhJZUyvLy46anBgbqiOZYmH+nbjS51mDJ4xJ\na9ns\r\n=A6WZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e590b376b.0","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/shape":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/button":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/typography":"8.0.0-canary.e590b376b.0","@material/icon-button":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e590b376b.0_1593213873382_0.03990334767342962","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/snackbar","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b27fa4a9396a63ceb531b569d71d4f11e69a40e8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":40,"integrity":"sha512-g3mJji0c7GovioP9fMMmO+WZPcXTXU8ZmJjzXgWHDVjok660CKkb1+E8ivXd8PUaEHQZ/v9RycXjayCjXQKFMg==","signatures":[{"sig":"MEQCIBleY7hcJwuqiyGfQ7wQtzrX9q2lUTFqL895ff0kNHFOAiBEwSwydLjfuBRRPbLKKr28LMsBC7/+MlvRJ5R7bVImug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHfCRA9TVsSAnZWagAAaC8QAJApeqEhM1wMkce7EJnU\nrtqqYB6AHlSXSIs3ra7x35jYpLzh7IKF372zPjKEoWX+sx8jCDi67Jz07eID\nHY0jUTZKq/mhwc2szyvvHFF7Ln06jy50+GXW35ASP5oMRnntvcHYDElN+HNm\n3ksOMABrvHPWXjNQCCWYo8l1DMY8QCd4VbyMmHZLcqDnNW9ZbggFeNnadCG5\nXCojoH5YPFZRKc2ASsFljPrIjog/jODbmNLgl/oClo8V+zx2BTKopWUbrBpD\nyD8lJUqMrNvMWTjpivFFt9u1HHLFVsE0ffy1nN6wXb1bIaakqMf320EM+1pe\nD5iXFuXybWPG8HGsTG47fmSdp3NBwZWft3vFauTetUHH4CJ/2HZwGHn8N4Cp\nxx9Z9EVb0W7EI1y/V4tUiJC0LChOk3QAzIpUkSHU0OdZB28J0wRZNkQBp85I\nO9+UFMGtkoRHeZ/FjOw0OckqyB06zSkDoHi2iF834ja7ovNv4WaJiGjxZ2Kh\nvuVDNxsEW031+KCspia4b5p6WJLq4tYwoCz/LWn4vlifJVq1EKR/6XvIwS5E\numY+63nb7zQ9SMxQxGuOoN/Jk1OfUOVJ4HfcFspwUR60f6bn/jNpoBxqi2KI\nBHdURswCFC+q8Iw4om2yefumdQQkDZTU9l8M07Ev/30To2rficjUBG9IeQsz\nK2Zz\r\n=bcea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/shape":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/button":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/typography":"8.0.0-canary.0c9d6bd2d.0","@material/icon-button":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.0c9d6bd2d.0_1593450975435_0.04580498755622009","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/snackbar","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa2fa8e9d63fdea8671351224ade494a8d70c404","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.c1fec4246.0.tgz","fileCount":40,"integrity":"sha512-0CdPayIzT8XFwJI1fgDRTzjD+ptAHx+EsM1Lr2ewouNMQDbDT3kBu9TQPzrj8Gi4TxPjk+Z1UzWMxa/1EnGleA==","signatures":[{"sig":"MEUCIQD+nihrHlwuWKn+cmmz4ANAmWwAB2IlBLOqWOkoxJLiHgIgQm/3wo/F5+oQGzyC8/azqG18EV8KRtvEuhkDXP/TlCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iV/CRA9TVsSAnZWagAA0SEQAIWVze2HStdPMsLdBIFn\nqPrQYvRkBnjBJK2UvDulpTfAyxRrL+3NgOj3AEHEQUt1iuIoA5Owq/6oeqW9\n1HEBP2DuirYzBzmk4f40BUswEP5KdSTyfvJ0P0QmN1LJ/JA//1gJfRj7iUsm\nhD7u+ZazISNxF8OvjO+5EJfTVYSZlnH3Ts7D9cmlQTKkfWuYNUx+wkQbWX8Y\np2cGr3msJ3jxP38mAkNHoast8KdfZLwTFb5YarEy+kI3vrwzgSnjtlZIfi9a\n5gEKxZBW6qnEoPQlSe+zKLnxm1JnIyT2PfnWAK/6U9eyKOAHgELXnhSogoPo\nUP5OYq3BFEngeu1/WJC5MEE+q14WUNh0pG7icXuMd3WPleVM6zbSevSI0SsD\nbyAlLShvM6vk6Q3pompXyKeDuulzV4k50GBe4JsijBNoASKLqVVp++kiJCvI\npgkwP7tVPAEYWrxFmJ9A+9gs1etTm9FplIuEAXB7vKTF3uGayvwbqEqAMZl0\nGcOlCfvpvlipGs4MJFaFcSZUEzs2opefgoJYt4/3u4mtzDn1Vef+GC68RNUL\nYkvXOtkHBySuKAbLijV25KZ1Dr8PUolyBCsXjIUD9ev4GKwM0LadgvcfHP9Z\nLyldkTa78NQSrgyM+NaLQ25y2WiM10ppGQ9i4U/nVYl7N73ErnjYVyXtKW0+\nz/jY\r\n=t9y2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c1fec4246.0","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/shape":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/button":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/typography":"8.0.0-canary.c1fec4246.0","@material/icon-button":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.c1fec4246.0_1593451902514_0.5261011728612297","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/snackbar","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ab2b46935e24b39574ae2e521710165ad9329f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.c678a9d34.0.tgz","fileCount":40,"integrity":"sha512-qG5zDo11CCZktgcQrK/giYOYbVZgYMnFMO0uIg9UPKltxXrXscXNaYPUEhoIlT6ReSKxSHp9qK3FkiTuUnuE5g==","signatures":[{"sig":"MEUCIBMnZveDGnJA/WAT4rQbfvvAs6O6CpssNuIOeiPn3O68AiEAqiTckZFqeV0u44zwpYM8zWEm/9jfA8gxr8iI8zPcIZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ipzCRA9TVsSAnZWagAAUx4P/3YnlEop7Y2WOsOHgYqg\ni7UHBxg8bqA6+Uha5Y1FOSQvp0uWuJfowlWLJNBQpVG60MkUK63UEEbz5Ngf\nnENbhBzZp9L5whYXA79K2iLMv1BjCyF+ioGjKfM9pp1ImQxDP1cTGATW5S+3\nBA9g1UizS7o3PFxAH2dULl2VD6e/goCVpIOkd0zzwCSMiS3xvNW7YpBQsn1n\nnYQCpMgKNdxdxLkV0jT7JNYlLsMAdctqH4GWd4euvKt3eq77/MAcDE8H9Pd6\nCtfj801IxeLynTQX7hBEenlapCB+7qLtyssI6yPfHqu6QWDdNQ3ZSIR/mv5Z\ndh0c37CTHE1L3zih2B6tpA7Gxj2z2e6du51xDErJ/16MskUAJKvUAi0Mjynr\nZUIilYrIv7oPlPN6pYfdZtwYa0J5dYEv7X3+lmXBMSrFAFAriwrsC8ofWgr3\nGFtW1B5w874p7EzQ4OcUnOXdlwBnjXS/iDgGbOGVGgFgvUKNyO3/mF3nRmKF\na5V4c3Zum1CogFIpxf4A39rwQ/8jmm0H+jVBsH1dJ1jyqbcmlFWZmaJ1TLfz\nr6qpxQlMzsB6v1YqZ/KjtsR/ELHhwmIdqKCMvXedlOLdkvx5Qg1Ed18QruDP\nyiktMuuRLOFtr5NY0VRxmXtopiTvd9WahRsXUxhJGbKKqwG+8Oxy5mAzt5Cy\nDXJO\r\n=JFiF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c678a9d34.0","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/shape":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/button":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/typography":"8.0.0-canary.c678a9d34.0","@material/icon-button":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.c678a9d34.0_1593453171295_0.26773111976549435","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/snackbar","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a57311ee0f983c6fef6b96aefeb1750a4097208d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.521afaf6e.0.tgz","fileCount":40,"integrity":"sha512-4nAmj98odaTlaeUMAWHxVbkEAWIv73syKhmxZkzTNvqb1CFHxv6ICmFfK2bqCczBZ1PxLMd08Bqe79UYqW5Jaw==","signatures":[{"sig":"MEYCIQD/oSVATlrw5Ke2SsHQM2PBD+ceShiWj25HIMwd/iSR6gIhAPIrSuzJE8QE4De/enj91OpD93uFgOMm7m5zXQuednxZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1UECRA9TVsSAnZWagAAvIoP/2kVHA6K57HqS8ZStp6H\nH5ni4wyHL5D1VrSbMOZNz1POyB3s/esVLns/lxZuMe7ifAh/nv5A6mN64kb3\nqRPh2ACtiPkE2king5D5aD2Z6Bego8whgKCus6ryEjYYLlA44jIuoXMDraFI\nqQRoaIRbyVgWOKBPYvZ43rQo//e/i5swkpqAc3am7AszSP2NYfpxgKqF3kLN\n82diEUE7oUjeKHgKKmwjtdGq2jM6tyO7y5De/GqFIKXB5OJwlAO4+AdsecWB\njuqUWYqq5up+wUpsvvVv/yPMglAxZXjLRw5/lPM9nxKoemmxBuLGXdQOhUQQ\nd+lsSdRBqcTZ0s4USkgITT7/RpmJNfKAI1cILwLRGKN7/hjmWcirR2Xl/MaP\nLJ6/YNA1hF9Na5qDQxeikEQDSU0spf9mmJHgwsJtMCMvBFnvl7vxe1qeJ8px\nuQb9i3YA2Aqv11AAUoj2CG/XjtzLSXJoQO1z4GkNOp0ncjekVlRbYg88H69S\nD8Qeq3s7XHGDhgC+Ikg38+V+ZLGHP2oNI4OaXK8EUfYEo45o7aM90vJVNYY0\nRKRV63YPKEbxaAwWjPIhWqnEzZfe34pPtYLUffT3I1cRB2Yv3GvRVp8oNQuL\n/mEzCpdmggFAUfpAMGH738NZgAd2KUwxJicPeU5p9P0XfeBTKMM+kpWbUWON\niXJu\r\n=xOd8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.521afaf6e.0","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/shape":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/button":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/typography":"8.0.0-canary.521afaf6e.0","@material/icon-button":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.521afaf6e.0_1593529603731_0.7316852545741188","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/snackbar","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c48f31fbd7a5441212b10640256858585891a6f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a2ad48839.0.tgz","fileCount":40,"integrity":"sha512-GYc3AodnEIl9YiglHyByMM8YqhxkIdG2STgxRRNx2GRzwMhODpkY8BptQ2etPfW81RV/faDNrJ+v7uFlBdFc3w==","signatures":[{"sig":"MEYCIQCdZJ9n6PyY63egmcWo1IAWaDWvFsMIRHJ6HnlkMXYkcQIhAIbuMXoD5/sjpPOhKAKBA2QgeImMrHkKNn7fPwG5ZYLg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+49SCRA9TVsSAnZWagAAPUgP/3MeqegMOc9nPKRFvSbU\nyDiclXc9mm8F4WODOZY0SXth/bPf44mgYqlDQeHTtQeE+hBSNdEqGWLIT+wE\nMtxf+jKjDudhYnf5l+aZCbjbia/9tQuSoNu/2jjHMudItBqIrDIGXTJP/nLv\n86IGbbz9TBe2JdLT5q3J/V6SOre9N/lZIzXmv3KzOnVCIFhe4N57MndRgnnm\nsWrojd/Ay7DekFiXBEruy5Zah7redvji4yZfGoTQnCeCX69O2DtxYKvBS69o\nhZXrK1Aa1AbMkRrAfH0FGeKuid5PgCVmMzH1doyy4onP8aDZ1tCX3fRB1ris\nEZ1FY15/GQ7qhOE/eB3nPpmM90b5RMFc+RAtrRw160dunlxZl7j+qAVqrBgh\ntTTu7iPc0PO/U8wvoNTp1AAPbvt2LCQXQbv8+T9kgpPVLUMDfB4UkpCvDizy\nIN/kpaytDeOHcRIuCR/iDJJuJ2sizlbIbsroPms4zrK1Rq786UMSlJbLjmh6\n64YTQfGPP5fK2r7ye0HGrLx+TwV5ggOWybnjGKCXLcYfq/QYwEkWEHmV1gxF\nQAeMolMzvlJB2xoEJHnfvgiCPLioV8qb/6wtdh9BePTtwxKhGu1biDK/izbQ\nXfPPZLCpZxmaQANvDZwA2Pf+8nFrAZqv7pXU3fItF94Y8pd9t4Re5yFZv7sJ\nEhRI\r\n=sw6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a2ad48839.0","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/shape":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/button":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/typography":"8.0.0-canary.a2ad48839.0","@material/icon-button":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a2ad48839.0_1593544529812_0.6328938334226604","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/snackbar","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d664446af86a325b486577ff1fd9dcd21234d739","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.ec2385881.0.tgz","fileCount":40,"integrity":"sha512-cTb+Yc1LhLnjrLODvNFguuGWTiBAUuiMiaGfE03XOJSHS3wDL/SZYkP9o8p/4Srgjc3Xw3HsMisQizJVgyyytw==","signatures":[{"sig":"MEUCIQDTGVxRR1wCprodvhEQncFDZTPVu0675cr2vLP34wNpHQIgW/pEedH8K2tiu8UIxWXn1UGvaQXsIq8j0NTEYkLaqVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7MYCRA9TVsSAnZWagAAf/4P/2ZzceNV5moQS2DJU4lw\nmweCTUPfMFuyF7BRLrmDDgLW9A/swDVKrqHrRWSaRBIoHFntuMHlF8n4t3ec\npkXJIJjuOCjwdNisviRpOQXBeZhduJghTG46BGkVimPKspCRx/hDG+XBRwcg\nRznL+ei/XoCs2eKSjbPeBQjkn/Fh5k9cCrFQA20uvQrC5ua0WJy6w3aAYwSG\nwqo1OQg8v13W7w5YsNBra0f5AgPVopvZg/CIeN4m6CrVBymB/Knn2iXSDeq+\n6DKdyYMpm3b0jY4jLlB9NPTZ2Iemc0k6mthMHU1HjYZkPZtkA+brEWdaq9V2\nb6zFSksNTpjfTIpgTYttbV27tNlTzqsgYkGFm6fHKMDDzkIcG++iszUGIu3v\n6uL/ufUGd4AbJwL58agiIULsSS+E5zzkqSagCMgDI+THEvK5q3JLP9SZoqMV\n4/tusLleE4HP/J9CphRPtkskWiujah/3UBqgDePGhq1OPGYF+G73rRpDKaDt\nDeZld1cNRql1cRfE0bfFPsPKpPFQ6PpuVSaxT49+zg7C5f3DuITLtN3XQH6y\nJYIXDm7nAw2ZDHDiIz+7XSftAD2kN3ITUBmKaoCACvGA0q3ZmP1DKeJVeOnV\n1+Yuhqg3g/kseu5qW68Fxctp3duF0EqWVWCl7Tzsw6UrJc9wO2fV0qEz1dgj\nAl/E\r\n=wjMe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ec2385881.0","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/shape":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/button":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/typography":"8.0.0-canary.ec2385881.0","@material/icon-button":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.ec2385881.0_1593553688317_0.6271326207358303","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/snackbar","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14f9f009b1507ffe113e2610ccd2d9a4f48c1a52","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.610c26c4a.0.tgz","fileCount":40,"integrity":"sha512-9fh/yszozYRqP+2iJkAw3XBhCgFwOjZHyg9NCG1RgnOYbZO+zsHPlwhsvB5na3kWnT0gTWraCSCI4JqW9u9eNg==","signatures":[{"sig":"MEYCIQDo/BBTzkbS1l4uVlZywU6UYNJA+QckQxw/7ue4vgpQOAIhAK2XTzGIRoot8viUQrO80NNM8i//OgIi2vDMKckmpvbS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KRTCRA9TVsSAnZWagAAL1oP/ia6iDKdY4gbT7nYehJx\nwXqho5bvrDjEptIix3LfduDIvIBOeMiA3x0UjYTQDKcyEXigD2C97fwo6sW6\n4PIMmYNirPaMiVmQ+4wCCtrmYfHorzJf9kPttr2TUAhIjTtwft2zB+cQgdsr\n5oslTDCcncArMdTJciDT4v70o7pf4s3zcWkWRslyjd4Qj9BgR46h5lBtORfm\nGzt2M0cwL8vDTntm7U9uqj8CFdYoPLWRkLJevTG/jWyjSbqaUk+gYLx9fUaa\nuke4of2KBUgZi0ard17UU5mFqwlZyrc7X/0Qk6xS9RNvtp681AY4vn/6PFm+\nVe/vRotDalgjg3UzM+L8RPEkPPzdwXQL2Ifj6gzOr4MhrRGiNBN5dwaHtvj3\ngp6L0Cq9nsbXn9Jz6Xxk2xHNM4sRKrkERlsCfM6GQt0jDyj6iy9BLFFtabZx\n/wERBkBrDwWjpRq0GpMxuWX2dDtwWigARt9jiYV0I38sXbvlss+9QU2//+Ve\n/rSrN1qUFLLIlqW0kUVS1yPITCt9wlwHIF9W8HSQY0aaBRnBcJx2G6gC0IWp\ncHAXGATdgTADHrhwa5ZmvCOcW9VsDLM+kAFMvJSvm4GrfKrNebhS9o+UnxDp\n/TVx/lI9bb+1vMSvQ4oSAu8wkCKMMuU3CxXpgZ5rNObITYwpbjKLRipwHA2t\ntRVO\r\n=Buo0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.610c26c4a.0","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/shape":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/button":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/typography":"8.0.0-canary.610c26c4a.0","@material/icon-button":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.610c26c4a.0_1593615442513_0.12759914445572518","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/snackbar","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"487785fa4c1d156e0eb9f61fa946c3969928c7bd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":40,"integrity":"sha512-jNJM/lRu3WtC0TZY3r0BiSMwAdAovyXzukZjl4NmIYUAxrlPCYa7EZ+I8C9l4DsJ8rUjh5sQPWptwlhaBIUL6w==","signatures":[{"sig":"MEUCID40J7BctSwrkqVdqo4JnblbteXp2anoNiUyt5qEQUehAiEAl3h6pT8lohGxCEhAD4HKAliXMTzwiHddhSehcPRk5Ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OPICRA9TVsSAnZWagAAWxIP/1Qv9/2EGR1ljz3yHZXx\nGYzADB5uHfki3/YzZBdJXm7CU555LF54drYV+ysB79d5eqcdukumPj090Ba0\n6tbFtM0EVGH375Pn1LSUfLoWyng2lViT+tltMrN0zaJ+kMwwg9k67qROoef6\nobZ1UiBYp/S/+lvV1nqsoe1vSBxAxINAlVJyfxMvEuOGf+V1HYRMLxYgj38X\noB3Aw/HUvqS4jeD1jAhmDClwSvaf/XC31+13uGRPnvh0j3YWj+NvIchKyiOD\nFWFNDsWj+FL241M+/tlWgrmLf/damp2rhZpr9POoKclGjKQa6OSk8bc6x7Pc\nuFK2+L1cRqY0JqqRSWc2x7Mt/nePavx3W1247OgJnQ7/mrCcHitbcdyLk+F2\n9rGdtwM3frc9s9SwowB9neGw5/XDhwLcwEPEyA+9mZt75aex8qYxOctpjru9\n8WZ0o44SBB9UdBx13Oc8kJ+w/po9GY4hHi1m1slDOgLge95jNRRCk0OGVoZ0\noG07+rX+tf0FJZjYtwpYhj0N/yxTayTFuuaf1PUOYbJzE8lsvxN1YNnzPnCF\nOnuiVRpDNryAhE076tk4HMbGcYfZh1QAq5o6YHlRyHkKtQS+VWoFkO/4ZWQT\no9kNFPKSOkVXfKh0zD+j3++ciVcOG559aKmolrUSRpFp+tf1WUPQ3grkQXpv\nhLGo\r\n=2JKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/shape":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/button":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/typography":"8.0.0-canary.e2ea4a99e.0","@material/icon-button":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e2ea4a99e.0_1593631687881_0.516084659467281","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/snackbar","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f125ee306935bfa2a6d0732ff2d88ce5671a1a17","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a78ceb112.0.tgz","fileCount":40,"integrity":"sha512-WPghNrSEn2zxBpsFhRIyhf/vMbKY1YuAtBK3SSnP857cAohEd+E9XXoE6LUGVPcbF0e8bpk/7lnhcB/8z5G3Dw==","signatures":[{"sig":"MEQCIHAP0vpebGbCFjxtopXfmtwb25vFeE6beKZQXUviFQldAiAFjweNv5l7jgOP6CIMFN2a4f5HVkxR0uh/yziamcpEnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OaKCRA9TVsSAnZWagAAp+cP/2xqJNPuq0olwrpiut43\ntAUF9yhzrG9w5WxhdRaKiD+7ujAwOexMaDq/YuUDhD1M4X61VN8NgP6kWU0I\nWAkUysl6zS+jBR1BuRT1JkDUV4RP2aOl9fy3R4kYstt8P3ey1JwTffQZU6JZ\nQ7M0Y5+C1gjXe/th+1UpiW1hzEyl+oVtWiuSa4ucgPrSwt7ajOTV2dP9aPbL\nHoP0SCAUG5Osdyf/d0G14CkbCHE7HsHTmw6UEUe5F1iXlhW17slOEuvGZ6bi\n6L7GuvK0a5XOHhxCAkWmL7eNbXKIvHSu+xrCQfy8vkHwthW4+F87vTPg7rhE\nzIeezsgDKFga4/yZ3+geZp/Al8egKotqhV/dMDViAZ9zWExttUNx9Q0DVQYj\nxqIWWr5ERv2zDIAN8O9fnsOfhokUEOyCVY1WXhgB0aYnVdI7Wtq474pEQ/um\nW8Z6AvWEQnyLKrj0CyT6AYUhYCXkcTJul9ZutuyPb/bpmbcdh/LCtTlQzTTW\n2OAoAH7t6MFkssiR0lL1t/otuq2jd80C/J2w/ReamIrL3KLAo0hyFNNZOopH\n7hZXTO1NVlrIXUzrJb35MULAVsSnwyabj53bkEKGUl55UK54UwnrhHmF2/9T\nTGsqN9pGO4/TM55HlCL3OOHalivIorfWZFzY95VtIIIzZ9FJzI1EDVCWBPmZ\nTJJ8\r\n=xy/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a78ceb112.0","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/shape":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/button":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/typography":"8.0.0-canary.a78ceb112.0","@material/icon-button":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a78ceb112.0_1593632394391_0.42566383539523733","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/snackbar","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98ca69abcc1ffda640ae67ca36efa33ecbc076b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b0c456d33.0.tgz","fileCount":40,"integrity":"sha512-nrXm0oA68a1njyGqbX5OHPvpSjmNV2ZxeMmPQcMhCquZR/nFknPw83wwqoQj3e7chrKUSApCuMyUqb2/TGPkjw==","signatures":[{"sig":"MEYCIQDkNNEPaov6ifZNNTbFeEW+zVtADYPSF4gwbipgV55zwgIhAMPC5XaV6qhUZu2fmPBwIM4rv/9y460SH0LCPjl+6QIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6jTCRA9TVsSAnZWagAAhYMQAKPqLos1wpI0rNeHSwS7\nj2pdNS1cTeypg53E0ddZPugqqbSxq5xK8yCBXfg6fKB7ocoCNOTu3hZDDa9E\ndaGkoIuXSXfM3lgcDSnJUZ3KNlEtTUsM0J2OsBpMi7pkvTwBN+aDSA2kIXa+\nYRIbGSlVqVn5EFPvDfHrut1LztfNQdpadvBVyb9+fIwzi7//uuMA0x/CwTbx\ncRQtocF03rtm5dfzxeSsQiT0XhUEkyhK0ltRX7SNvnwDVUvZ76EEb6bldjal\nbcDVWK3RWZMNvTTGRpg50W1go4D4n4laIwm1/ZqKzzpyyX95N+6Xixt2CWnh\nwdVWc1+68M9Yw0jM2QUSAQgjWhTZOAxF7ytUYmW7NSJSq7oF34caYO+6k7vd\n8j/kOXnEBYqURDeLbhrprrbOYxWPzzfn4cHbjCbGsTZbAuVWkyTetjUO+kUm\nqCwAzeQzb00osFlO+rhHrfdbX1uFYsdtorNGcWSAXrpsN+UVBAj6WPZ4Z7DK\nWnHafWoWDeJTbCfWn3KXdr4D4mKTFIIxFqZU7b8wSRl0Sd6F3qhvMpAsFgY7\nI+T2WynAy7HDvSH/zcYqYRZNKnexfjw0pRQvx7PGJtzBEAPesnYqoBfn3L+P\nY9mHgw/BtTeJeWF2OMdmCG4/159iI42VrKk2bGdTzjzFlDn36YUaaPYRbchf\nGqmp\r\n=S4Dp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0c456d33.0","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/shape":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/button":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/typography":"8.0.0-canary.b0c456d33.0","@material/icon-button":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b0c456d33.0_1594075347079_0.32003231174054037","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/snackbar","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbd650e666062c70f68426b40cba2041c07e2f76","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2e5711e04.0.tgz","fileCount":40,"integrity":"sha512-l1pWktRgbqRo0hNkEgceKE2OtdDxBuoJ814tGVC/uTeoswVM/qrV0MS7uGWa0K2L+j5si6UHcQ/ZTucKle9SAw==","signatures":[{"sig":"MEQCIBz+ZWISH4Co02ySR5JWyAjGi406RXU24p0V/XJ3b8zZAiAtcAV4JoLp0b5lCENGINK5VS4g8xa9bPpRcwn2XWJ7bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfkQCRA9TVsSAnZWagAAanoP+wdRS5fgWskmKWK8Voj9\n3lBmZpjsAwTQyJ+HP+hwAbHL+2WNT3jXqU++jULmif14uheDVt1BMVe+c/xx\nhc+8rRirfHz0mAcoBbzyo/n3/7xdLcAAB/m9J1bo/pBlcMV/Hc0PqWMq2Ife\nHej+pfUnUDBShsVJI6V0WRiem7P0IZcSSFwcbVdZZFCnsDa3giGTrSNmP31R\nVhcK48H8ihiZsHd06BnCc+a/DjPwEFB+R+0hRcweIxA/sHtdftYml54K99Vy\nVrhbHSO4SCM2k9WNRsNDxuYzEjSM+3Jtjrnpix3ER4zW5DWWXmxSoIaWYWYA\nFWXd9vzwkzcdVYCij3yJnTLZE6FzrCzRlOW2iT/jNqvouNeqAEyQc9+SZn/M\nkmw9fTqAEi/mTdJILR1NnQP3kluGi2YoZedYPU9zgBgs1+wtqnBN0lx69c/h\nD9dtFiVFvxEcNhq9PXR03gZZvz04GwVa7/Q1BzAEvMsBKiLcNX1dqb+K8QKZ\nBptOgoq1CHf7M2Pq35MJxESyYy7kUA4Gjwnqh7NPUYZ7Y5I3s8ybsrKhZl/i\nCafS88lfmCyw0EKo87X8Ed+tISg8T93BYDYBMPxYbXhOBDnlmmjGqEzPtX/W\nn9bonVK2nMMuN9KiWYcR4T1okW3yJEY3et8zm9p/mof7j7FBh7x2O4jPjbyi\nAHk2\r\n=rwgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e5711e04.0","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/shape":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/button":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/typography":"8.0.0-canary.2e5711e04.0","@material/icon-button":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2e5711e04.0_1594226959609_0.373268128343061","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/snackbar","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a3d041f1afb3bbe708781d50d5862debab9d3e1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.811fc5d24.0.tgz","fileCount":40,"integrity":"sha512-PCaxeK+ewqWWdwh+jc5Qe/EXJF/7YFfn+otpmkHwE9lWmEpRA5Fi4OPbckwzz22hnf0SsYeJjMRij3G5XHzHDw==","signatures":[{"sig":"MEUCIDnvLlwzs/1ZNL2QI/tXqIFdQVtRxDtBirnIErTNYFWJAiEA4ffS4Tm9iDmekGmCR0IYvoiQ5MMRWkRjXrQILNWvBG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf+ECRA9TVsSAnZWagAAnz8P/ioTZvtFLCNPYW6rfjqv\nyHNPL0C+whYgp1a8YviuvcBuipR0mY4NG4VuSR9+LT9v+ZWs40i+gq6PONfx\n7iafUcNSsNGSlsm0JPSMvx0MsOY+vhMsd+cqY1UyfSimP80i7agh6tEhi7Ki\nPOVeurDjoto8OZh+//nUajyf/c4vXY1aQT1bZcFscAmV/XoCfVtqlqbocnE5\nbxgXwwLLDyzwMhKF5iKQHYzR+WM/fMxL9qroh3z+MbhI4hBC8L/Jmoyebjee\nmcPytLNRG1qgwQj/GF2Nl1gVJsAkVQEDfzstnJK6mBvTHuNgUphhOMswyWHn\neZY56ll0NAStE6D+yoKlVE91+w4BBB4/suyToC2IjELceY6CePBsjsEBjyqB\nvJ1gmeR279d6O5Ho+gAjdAC9bZuLSfozjPJa12zG/AWoIOWu6vJvpV2Jhfga\nbh43CnGsCBRYL+jCD9+oJNsV1k5jBipagwjVtezzz26kqZ61AB268jUp+2wz\nqp7UUNJ6UBfxNkqeO5Uk8Chp2/F70M7njyIjozq/5Quxl7UncRw0XeC75Vwy\nOBDx269IqP18PFJlplFs3uGmL+VVaYUv7MDd6BBhVM++MzwZOPLFnz1nYK5z\nBMz55Bz6Tzq2BwAMV4aTZiwQeB7q5YXUWwJXiA0/pYhUSNEXEh7hL/pH1yxE\n5zUn\r\n=2UKH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.811fc5d24.0","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/shape":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/button":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/typography":"8.0.0-canary.811fc5d24.0","@material/icon-button":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.811fc5d24.0_1594228612256_0.15427313291351163","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/snackbar","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"947738a6c205904be36f122c937c1ee55548bd70","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.6ed717ddd.0.tgz","fileCount":40,"integrity":"sha512-XZTudF8XHHd11oKDCfmC+V5givUxE6XNgCFBd9pw7WLuf4UTKrbbK2GJLV+vPx5a9Iz4uZfYNDBxX1yc53usvg==","signatures":[{"sig":"MEUCIGMrA/1Mwp2n+0vi4M/+eEbGnFdy8/lXGvvYaNiwrek1AiEA31qxEfdNNJ3k2Wd+h+YXf6CtGwUl29qJ8vFapm7U71w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiJGCRA9TVsSAnZWagAA0XoP/RpdLgXe+ksO+uPt18QW\nfdVpntNfn+3/+9BLdjDgfeiYEt0LxyrTYrt8cROUSz85+zmaemgssk1XYMZX\n+jI9VCfdMFU3AP8OZ8UHW5Vv6q7Hgpk3GF2ncVg1beBS3nE/GEomYykZVuPY\nebzOxuKgDaI7EXJaKfl2cl3qDpElxzFqU0z5JewUZccAuvoerfWUHT3WD8zz\nUXlKwsOTnv1+L1PxCvqnALYNHg+j1sA5HAuxIyhVZCANIM1vciiIO+5w1cQ3\nsmXvq/j2uP0SjTG27HYnPdFuTxFD+MPYZdK+HLOZuZIyjw8WgI+ClmnuKYc2\ndtOukJeCwWJOLdOjjh0yxyL57jneulT8lPfsnbLt+wui5QhZF4cERD4LRP/u\nyn4MJbxClRt0vWdV9JIy0uC++sV58sqyDmeSFMVHK3j1Qm/ceS1J/fI3mp0n\nkunLXt7XViPTOqJOOkUlfLHthyyZcDU5vFCyVA/tRIFG/6xAUklznPlq+qhb\nUhp8m8JUrVfrAUfIj8YQaKvLhu3GJsg+4mZAN3dbZ3CPInwB3h0le43zHSPj\n8RW2GNSt+CrEL9w+jkx7nT621G/kKAqG6CyKtZCtrPU3VrpoCjbs0WG6DFTn\nTZfMWacHFYPAipOLxNKwzPjTKWA3nqagheavyF3eSHsTa0IBsGXuHoEzEzL6\ncUOk\r\n=8Gwp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6ed717ddd.0","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/shape":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/button":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/typography":"8.0.0-canary.6ed717ddd.0","@material/icon-button":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.6ed717ddd.0_1594237509606_0.12889621810854668","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/snackbar","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"affe7d85a289aca16870bec753b93125f4363798","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d850de590.0.tgz","fileCount":40,"integrity":"sha512-Pz/D9jo49rxYtf3M0TbaiaQ3CELMIqtskC7XWL6Q2FgS0YscDi2G1epleUvTdlaWLXZEcwiG6Yhbw3y3OYXgNA==","signatures":[{"sig":"MEUCIQCcmMjamYoYTyLuezyRc+iKbf1QkPclduMLxjYyksoAbwIgMLuY9aTgGCGTHUrJU4Gjj7lkeTMOgDxEPWSOO6h/eZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1ykCRA9TVsSAnZWagAAUBgP/3xuDucI9p4cmBU5EnsY\nIZrXcP0ZmOncivMSRLV7ra7avwcWOuWK2ell7P8964pzw4eOxXL62MsHizS4\nU/Jiv0eZf+RUd1wN7/fz9Grl++v5alClJtJaQ8Ki2wqgWtUWtbnUwZ0sMDH+\nYsA2/22cvlx2eGL7qOAWUVWiXD06UiDlpZWUZx5lUP8QNEETfxaze74VL+N6\ngwPefzpTGJV20st32vHujx7vzkV/rZdEktTBTueEvxclcwimtAg89PA3/G/i\n+RH36kHoWA3vMO4rdsOkZw+0mKXWnoOJmsqhCK7pS5DtR3bCJoIsnxy6/bnj\n4dQAcRpx5v7EePYLibYx5XuHP3etES4roFQLe3ZB20lGzkSts3IzPuIJRBEt\nXneHG4o+15HcQtLKdzOjnTrKZ5hXJlabEaJyExHZv0IuGiw3LJGiwkbSU8Gz\nYGFHhlU6uuVy/WRXKtU573TI0XYBDkqB2Qi3lIMJ6vmD5sqkEJNtz3dkSD/d\n5mAdQGswckqP0YIqYvZa0lPsYCUC2bL8cegwhohG7EG66VcO8GYiUhLE3kGG\n+oGTNMnaUjpSRG4siMsEDkhw+ibT+J5FUkDvomTUJCpZ3jlVJJjCtmgHK5+G\nRy92S7YIdooPc0Y2TITqDQtLWibrCU9Px0LftlOENP3ntQszZmvDKFLZCURM\nq1k8\r\n=+yaD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d850de590.0","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/shape":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/button":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/typography":"8.0.0-canary.d850de590.0","@material/icon-button":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d850de590.0_1594317988080_0.9459091956168417","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/snackbar","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4292b79f9026f4523041a01f32211de57a5b2a44","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e07a70841.0.tgz","fileCount":40,"integrity":"sha512-SJvWIOO4b+TX5B6j5jA8Ws9kF5hDJrMKBqhEKXaWN9GdUY95p+mlmsSm2Y8NU/WJ/sNMGopCpXqVeBoYuxvT/Q==","signatures":[{"sig":"MEQCIHB7nx3jFuaiIdzV2CeAYCsVo/htst0o1pDGMFMU5DuWAiB0r8IEBKpwMgP2xwajK9IHHfCFKiJt2F6/LskQSkwySA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OdCRA9TVsSAnZWagAAb6MQAJo63GsPC7x/yB2hjCZM\nVj1pDRtDONf5yXcCfuUytqIn4mS1SaEwAZumljYsP3m59wqCmJekMEzlBY7d\nydmOTdK8eAPPTT6w0OILJr3t3w96FtRyYhyGAyGiMZcpvyXaJIKtkePlfW8g\n946tlth/gkPfQ/lv8KUOGxtQivGtUHMleXtJ66jBAe/Uol3+HBGK6GzVdtLv\nuxZnyIv4RtSdzPz98wPmFxynrdDIz8E4ausn+GJYU6XoZ8vlU+jP0ZkHL+Ov\nFb1LzC7j1wSZgfwUSVcwMpedwmYwyxMYRvvr2dwu+nKpVLYGGHZKfy6twTQ7\nb09TUUgcL/NvGr3WKlFDRL7DxcRYwWiDturx5aMSZZZnF1Kxk9yIr3jeuCeC\nQL3DoaVCW75G56qfw5ifcmYGQKCEBoIfwlI6ew0b2IOipKGsndFKJJD8RwJ1\ndcSPcOQTzcyCPbC27tPiX0ylpUlblIlYnzZCM1T6eQekGNxL0UzmF90YGkfU\nylFvtVwKLMGXrpwgPPeIuI/w0lxKDnQQE0rnr1MxeMpOiS7tcyxoTjNGkPUQ\nz/xUAUUTPOEt3agAAVQg+FUfrz+IBWNW3KirSNBKaAa+jfapoF6VbdA/TIzo\nUVd/FRZxLHFw18sCAbLT34+7aeCGLHdIkDiUoaCSvUbkEyOcfXK7UsVyBA79\n3z0K\r\n=PXil\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e07a70841.0","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/shape":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/button":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/typography":"8.0.0-canary.e07a70841.0","@material/icon-button":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e07a70841.0_1594319773059_0.06619857117987915","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/snackbar","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4022cd6e4f48eb62f89a4c311038c95d07224ca3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.37947ed6c.0.tgz","fileCount":40,"integrity":"sha512-FaJSS2mFzoO/90kCsa3DpbVPuiHX9L8k1bxELuk7hFOOzejrrNG+2fKxB1ye6Xd4r30bv845vX8JGwM1HS8l1Q==","signatures":[{"sig":"MEUCIEwQkTRPJM0gBfr/AXKVU0MYKP9/24nA6kOMtOe2RKA7AiEA+UQfojSYyZoguPPVdPSJUbAnRjNLpGorE31RQbwjlIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/6CRA9TVsSAnZWagAAfLkP/3IbfKsp6fSJq5ymrw1M\nYbWuA8xLL3q8JhAxgW3mK8RitYoE71VljL/Tmxew6V7Qk8hE9o25TDKproJ7\nYGtSV3+DKRp74PxXF/3ca26jbUA+TBnsX7GtugjxY/mC+DfxyIcwC9Py6hq3\nPpSeF+01bcDKC3TmPFQIrvimORdfpBytqNnJks+oZ7s5Mki4W4Yuy3YuCJDb\n7wbuc+E6+kbcgx2L83/mPAFYXPeMhaQB/Hr0ccEYdyDC0wgdSQ05AYSjAl+a\nkMusbi3vDhWQhHxReefLIVIPOybSUE1MEDX6RaeeJQo9JGNzctOt/7wAIv3S\nHULDuWJONcXcM25oDS2dWQiGPVzqy3vNYMZfsUsQXXfXH18zFe/aYUP0Rrtz\nEWCRnJc/dyzZEODQNZvp+uBjs5VmznzjlqfWek7q38KiDsq1DvgrRz39nr69\nLiegXdQ8Oy4YhxdFNCRLFcSo8kv3JQHOtGj6c2JxhY8xlglwD3j6Mtzbnf8w\nNOJUzN25l0wbzr7ECPoxiZWL2BE2NVal+h+1C3JCtk8a4+AdcZlmNaSjD66M\ns1fqNLsAsRMxuhcGWOkTMVFKNdxZfGLo744yW+3wrg7EWrAtSp7CTpNCOEjS\njupNWiF//DbQ1zfcY6CzKgyZz1fHW/O9qpI09nflrp4zCW+CHsJPrWfw3Q0G\nX5if\r\n=HmON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.37947ed6c.0","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/shape":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/button":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/typography":"8.0.0-canary.37947ed6c.0","@material/icon-button":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.37947ed6c.0_1594327033081_0.177870012353172","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/snackbar","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b422b2791693f4c92da509bd18184efc79dc77a3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5d443afec.0.tgz","fileCount":40,"integrity":"sha512-2Z5GWwXTIHHFgmSGXoX0Yn5iyV7r0rLQT+oSNXjaiXalXk0Mnm4iYHaUWEVKHtDYdtHG+datEzWegA8s3NpWHA==","signatures":[{"sig":"MEUCIExjoiF2S/y+X/7R80ET5l/xAwijisH2KRwDeCGKYwPHAiEAzKlly5dxag1CrLXo3l+SKhPHvbDBq+nnSQyXkJorOzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4OdCRA9TVsSAnZWagAAqy4P/R7STg2KlkG+RDIrZg6g\n/yjyvBHv3Ft8VX5equ2wBFzaZ78ikxdBHp53FD3KVMrcYRk8N+QavK+p8crS\ndI1/jjvXzy212FB3k7jiddOkIIe37ww+Trwomu5wwntklFddtwei+70HY9kH\nwQeT5PfRbn3N6ZVWtj2QjMUFDeJ3bR+efhwo6Bigh2e9C9t7vHkgC7+4uuCX\n2ow2B/DfTz6EPdMtQKmiZji3t1DA0QD1e4qsFjfIh5pzGqRfT2+NpR7xq/MY\nQHdAcX4JVVg/73GPnN1Lu8N6JdaqeduGVwxZAluJtiwALWusg6AqGtZkENpf\nePOKub5CNSqrAfKNxzN7GVDaiIhrxN5bXGLMMAVcFR13Okd3xNGWZqXqVRaC\n82IzSW1gYNMlmytt9z/sFo18MsNu5C8cecvr2rtoM2ozy5ZMAgzhYobl//Ob\n0Wfih+iHO/oJDi70qHuTuZ+xgHF8FQsxUhgQ5KoNIaOSP6v8uqUBLyJmRBNc\nGYIRmsfAYcnWx8L/1rLwAyLQM6zGIWhIP05N9MF6BW9NqtbbBCnnHZI+FcyB\n+7HDUnNcYlAKl3QqRqcBkCvRCWYn5doNPJHj5ZA0dvTAUIJNHZKcVPpeeDNX\n5xKZE2g8TZGOZeubcrji1i0y5Up5Sa8ZTKN//8cYZSzBS/3KvY3BzpdoGcLK\negdm\r\n=eUE1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5d443afec.0","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/shape":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/button":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/typography":"8.0.0-canary.5d443afec.0","@material/icon-button":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5d443afec.0_1594327964655_0.7956542253559502","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/snackbar","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f2559d1099369e2ef46d6df937b1ef972c73aed","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.9ac1ed914.0.tgz","fileCount":40,"integrity":"sha512-TfBIMx1Sg6lNThXj5LpSSuidgUs735KkBnAwU7ZqNAnWPToRIXGo9GL8Xn+UdUf8uJ3F7f/Pnm3iMGH9gghOMQ==","signatures":[{"sig":"MEUCIHBozKhavfAf3aCWcdFTOFxTJjl7UwJqXDUMV/je2BC1AiEAsesL9WRGiCKDQdE+Zi3V8xApK4nqugLp6oHluvNZxio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4pkCRA9TVsSAnZWagAA+VAP/jqWMKpHvKu7HTDPL3Wa\nkgJygnEkrwcaJlZJ1D5+8gNWLSafYcFQA5aSChs9ODLyZjoNux6Cz9iuBbYX\nT5JpO3rDLnKVHOde4ZuM7As9M3GZTyWv0GwrUwCmQ/WmQlN2kX3y3j1h7vgQ\nH+1978Pd/FgvF/XJ/kMGYvWqm9j5OyhUqiLb+5DaywPrZFHcXL+xwSLUlAht\nKTo7rLGyseigRZNiCFDKwQlsVsLUbP6YzZhaE0qpAkXUVGz0sbw/PsR9HEpZ\njRcm4BOcLIRbtLZZnm8piZYRKlDpdhI0PQb+LcspQ+kamunupLzq2FVaTnTO\nUkKetgO25cYn+CaZ1ih3Bq6teSjLasCoLygrB62RZPzNteUoxONsFqvR7Tn3\n18c0WeKNawkxwRw9C+KWzfIo3jewV9cPmETlXm/qOoCONmsyXvNgKmMXqU7x\nx2BB5zSE0mLD2W4KQPw5cRp1cXG4/yqSQkX6MAdYNkGkXmURo+01Lc/kY3ie\neWGm9UiGpVwJOfgd5MN7cgAfDAbOJKcnNpD8KdmhEae7dmajXBDM+GVUAl37\nxtuZHCrTQGWAR62VOn7O2rd7asuqRBL0SX+8haU+H1i4hYrrTJb3tMJdpkfO\nEDngjzWHGmh0SbEMrH7d3PMCJ39Kt/pocr96++1TZrP2Ldk90T04y6WcJTY+\nJRiZ\r\n=PYAM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9ac1ed914.0","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/shape":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/button":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/typography":"8.0.0-canary.9ac1ed914.0","@material/icon-button":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.9ac1ed914.0_1594329700115_0.5093394121099828","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/snackbar","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41d6cce7601aca7fe6468a1edacf80ee7f75a4e0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.1e7cb6198.0.tgz","fileCount":40,"integrity":"sha512-eR3336ofFlWtYoVNSf2T58CkGe5otbDojY0s35tiRMadIluME+TbXzWgvsOFq1wyqpNS2eUGKsqsK4do2QbUcQ==","signatures":[{"sig":"MEYCIQCS5+3nYR4qhUwpEJWZExUpI6rps7RwdSNMCo/KIjxQvgIhAPaRMRwE54Piiyixq+I6rwB0YBi5+SrJcsFTogZ/UruB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5aLCRA9TVsSAnZWagAApMUP+gKXmNz7KIoJnaIxBwAG\nu4GYOjOC7KU4Velyk2YP+DZl3AbPa5DdqVUrID3uYOZkrjVPHO9sxQ/CHJCD\n+Xn/+vjnwZiMf/0z3daCbcOJ7AUIq6UEQ7iXsMos32m7CTCw+sm2e0e7JFq1\nJQGhqL9lmiKl8nEs1I8LwiA+wRlDStmuQPwmacoRbdVvxktQPJDEu82BH/2J\nRWPhJ9PJvDd918R40s1cXdEcwcOKyHdTVtwcQSVJH5i9Wd8lAz2mwwzFvSZc\nXZsArJgs9T3MyzYwEi60ZnN9mFMyrIt3jxXvq9Jbsjaie842igLKlytrggkh\nJkLtoI0ATFbgBgJAyh1R0Cd7AHjswkMok0YnR9dMH83AZBQ5C65DpwnuT4WU\nezdmdALZyFqbqf6hCIGgURQK6IZd+l4phVewic1ifh43EI7v6G1nRrPf6tKd\nVgQ+bEfdiNe9ZSNjR7JztGO83f5/SoScyh/iOzl73di+Lsw9M+haW9EHFCR9\n29Ki/UK8yOEcLMkXeHo1IlirZL3/OeiovmDbqBMYp+hDON959LY6nksgVO7O\ncepJNQvmBRi9mi8AKGbW11y7ch7jwTuHhfhBW+VC6KbkMjqTBymFy6zbp08q\nTOxws7QvS+ilzG9qEWnffX/jwi3Rw7Lt9lvUEzum6//L0Jib3ssIpgwmUoXH\nN8nx\r\n=pmG8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1e7cb6198.0","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/shape":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/button":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/typography":"8.0.0-canary.1e7cb6198.0","@material/icon-button":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.1e7cb6198.0_1594332810477_0.9184595000729028","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/snackbar","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad960f8bde8290f7f16ff55a81101bcd9f0eb31c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.843f636c0.0.tgz","fileCount":40,"integrity":"sha512-X+eFgVchk79oyvWDuTfXgcCCU7TmFRa8iPv6QYFS5KbBStWXtV+ZP/IfojXryTnp8xucaa/8B5FvCjSTzbXkyg==","signatures":[{"sig":"MEYCIQDdp/458bbl9hIhL/GzvL7DGY57SlFOAO7hh6bloCrNEwIhANjVBgPu5Y5T+fSwYVrHGlqSUzR2opMdcavk1kkBz/++","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKjTCRA9TVsSAnZWagAAp1QP/0cYOaU1pq/Sic1yAMfH\n4DHKuaqyA9LuCPzBSxIATh6SyOS7RFTFBdFaeeO2kA+13TxvYDEuo462Dtz9\n7mxLWL6y4b5Shr1Q/7cf+MlxePzoSeZ0Hu3kFft1vR8YcUYSlSUgqPzdsJuC\n70Vq3djOmUn/ncJXIs07Mqtdp70tcts34pJDoPZHf4OSE59OvxddCp4U43RC\nX2BoCCBMCfIJRoAxXTUPnL8MAjOP3s7m4kImY5x1yIDbQtXZSUFZ2EEQgUSE\n+RyZNXFYWrSOQ+TeDnh3gKNL8+FZxhPQ1gP55rLJm3HxP+yTwWgtmivH+Tt0\nIaymHygEdb1QGgR3Oek5GyNpvlpw4OYRHbckaa8H3ZOraXFW7xOv3ijciFrS\ntCO7T2sWNGZoiXyWlBt4D9NT/8kH9y5EKkzTXQe5PeG0tBRlbt2rCiqVvlDx\nhWoqxIrx47MTpR8J481o44jQGkWkCiV1o3s0QGM/LjVmE7enRV2qHo6P6KJX\naHpNTvK8ExpXpI9VpywXmKJQauFloYee4duusMF1PcPwWlAuC+JXJuhe1hA5\nmL9j1Z7KVHSj9NRBqqyjJTSvQ6HO+6tZoKdm5ujO7M+C/Lw+cT3DCm5KaZL3\n3/a0KPg0CHJals+vvK/7Xtj3q5pvdCO3IYIpk3zIXlJ9v5VNUcqgLHjNmPiZ\nElQ8\r\n=a7Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.843f636c0.0","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/shape":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/button":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/typography":"8.0.0-canary.843f636c0.0","@material/icon-button":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.843f636c0.0_1594403026702_0.9144836857812093","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/snackbar","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72b348911b2d7165d0859f03ce0ee7e296b925d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b2edaeead.0.tgz","fileCount":40,"integrity":"sha512-oHgxKcudKw5Tbpy5uhVrqxo3qY23VMIOSivP4mk2L0UqZVRDasRG/m7RUPyFnJ7jGs3kK2v0rZXcesVzjGo9CA==","signatures":[{"sig":"MEYCIQDBwB8aKbiQvH6duEIbep68kvkJLQDgF6peDNi/dzP/SQIhAKkgGZ+nsgUSkOTaFCkdMTFDwy8JSs7T+zTm6eYW/qcR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK6PCRA9TVsSAnZWagAAUhYP/jMQLroX/C5YUzaFu5Bh\nc51bHN9fg2zcul9y7y/ICy49bk86mpezVJWrto1zYGh6z9D3XLPgH7tIZicG\nbJ9R4+TrZIWTo/uWdBgNS8FeAp2T2irau3LOUv4rLwdMTG8N+hNvIWKKza+w\neQBNbjLlqAqk6cONvrYSzLpdVm4UK4k+gNafpg9crK0Jdjs68m5IwTo68o/q\n88UIF/woHbCfXdka96192D3E33WPikPIyzS/NhukcUQQO+Re+yH72vct4Om4\nqLEnbV7LSrGsL7cUuZYdNu8usBqhxlF0I6DOeI6jDDp6ZaIJTa42G98LuC4w\nXETdq+7+2CPTBg6+i2OEoR3rBCo0iNPvj8hSb4VJtnohxJnbTvIHyNic3Ck5\nrGNT4Wis4Qbqn7OCNKAc5hMKRrHYrk1sktuy6l0Lo88doZ73+z5jiRzfeeoQ\nu8fhWvPWw37fZLPVHnJEyd36l9lAOQZy1cz2mTBjAfebiRZukLyCX47YUyfl\nZFT64fazxc86sR1IMpGQtO1vPsjG7dvi9wWtm52QccXMSSngi690lSwuDUrL\nAdc6kr7/O3xSc5YBdmm0SvBPALQ89/KKrFbqmfgoz1Si2737JbYbapDL8soz\nCc9vYC1IKOpDXnKcbZfh14Qf72/DWCIlr83ZB5fl2QbYQNK6xwo6FAFY6/71\nTEiN\r\n=lIU+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2edaeead.0","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/shape":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/button":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/typography":"8.0.0-canary.b2edaeead.0","@material/icon-button":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b2edaeead.0_1594404495335_0.8801324343960091","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/snackbar","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84db8ee864299f00948e46f85685036188215d74","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5dac1f624.0.tgz","fileCount":40,"integrity":"sha512-oP/GwMo7qarIYmGjQgdKSTo/rSP0kAJrIOQMblIRHTH0aRxwcoKf52l0CxGbqfGlWAAcL6oC2vu6WjHKbqix0Q==","signatures":[{"sig":"MEUCIAJ/a1CBcLhVKfTcH1wTVDl2F7b3LpmK8SAiPmWPYulmAiEAlp4yM+Xqpd5vttFYAqAd3TZDlvAEebgDiU+r7PKZI4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI1GCRA9TVsSAnZWagAAHGIP/1qmxIPfjQLgmdWQhdVq\nMspcaphvey3aiY5Lf1hOigNf+FvX79TYYTc3rnUtN6HnIKcBsTiPPrJ6JNfW\ncLw/KUn+C5+u7ycA9H9SAyp4HcXjh34hw1WCmAxr9cDNzS5BSI3eJa4Q8JvJ\nrkOn0Spwq56kTkGo3FnLO6rxBUjmsKn900dzHfEszmgLlSR0oXXzBQOMMYVJ\nP+vQZHpylHiMMrFwPeuTcZIZg88KUOKPoJMxW8L4N2PXlz/e47lG1//lKcYs\nidu4a+Cd8phSfkf9Fv+vpHAEkmgeaYFBiBUAowpxNmYStjnoJdIc5p9nBmXq\npjU4sa5/PpbgbPYKAfYcBmgFezdHTfZlDJPxhosYniT7QLhdpOYPdduoRNDq\ngLWn/ftMyZPR/cYXRUycgG3yOYkYAxYBB015iXS1bMSJYRxrIVP5kEtAgCk3\nUAHjVk8pq2XTjbyIX0WPgkygr4I0EfHPCuuz2NjjzI1sc2TaZwwy7qTZj972\nVflUvmlJYTyU3cv/BU5PokzqWOvQghwvIxBYoL93k0DEru2dQUpSyG3NsMcb\nFMsIi38dlPP+5tOU/zeCV1r6XFUg0PRon0qM5NizoH5E9pdCeYxDtzFSMl6g\nR2y7UQrEfoVGmBu8VWTD5itnLi1L5RY14Kl7u7qWwzIxDOs+WEsjb6JCFVsK\nA53G\r\n=muIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5dac1f624.0","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/shape":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/button":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/typography":"8.0.0-canary.5dac1f624.0","@material/icon-button":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5dac1f624.0_1594658118272_0.03964571176115661","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/snackbar","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"105f998522f1677462ba2412d5a6b2b243d98718","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.4497acef8.0.tgz","fileCount":40,"integrity":"sha512-nRZvmlCb7pFtixQySVwtNWJwiMMFhT+xd2YF6/nK0IaOJN3LGQnODTuIAo2KzLpQwE4NaQTvrWOTrRmvdiwEkQ==","signatures":[{"sig":"MEUCIDEsB9FUgBFoC0XBxerbqSc0LeBGeu1U2U9x2boTY+3tAiEAo6K1Z4ily585kthQMjnLeR4ijrUt5J7N7eHgQG/8mlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9YCRA9TVsSAnZWagAA0RYP/3JvyJJeaEy90Muc2L75\n526Nuzc5hMWUGmTnuyUNuIWaRpKztXryH/N2xMSa/1Cj74FdYTaVs+gySuao\nTqL4/lSmecm9yJrmSIe7H6Qrvs/FxrA10B/hV/rtSlzy7WEjCuoMOY8ontZ0\nNkM04UKrnbAxwhnvcUFfeN7Ys/pmW6nCMb9H90uqncmd5zaDHZsDVEGM6llE\nH56SKGD6kiZs6b7Acv/uk/UHHHZzji/SJjDiTHy+mhtVlStMbtJ0/3Kaxcck\nKWBJqol6JMY3MpDO1bcNtAl+rIVo3gPD4UwfuPS3FELb+hrxYcqVHD9US1W1\ngIU92k3IcUYQhyV6LJJiOctvpJInOXroVisSlW/VJHbdgoHk9knnUklmlmKG\neKTzfgtwztONZKRLTf55V2DoUj+gLPNKaWbLETuio1o5Ytgica50et0Ns0Q9\ndTRiN+fP1t3Mx/+ac/rT6Av0nyVzyPLrWfRcLDpcOcsYY9uvaj+P6rrsB14B\n6Byn4p3qfD0mWaIHusEBlH4+eU9PMZ0c9QYV38Vq91sF2hWNgg/bRG2AOUvb\n+gL18AzNbNIJu9aCWgf+p40l+jF1oOPb+eYkDeC0gbEJw01DMCyX3Q1118tB\nOLo8Ihug4fYZkaTRmWpG62Hk18m9gIoQWT5gTRXPcSL+qzDw6cMxgmyIWkLp\nAqot\r\n=P8Hp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4497acef8.0","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/shape":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/button":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/typography":"8.0.0-canary.4497acef8.0","@material/icon-button":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.4497acef8.0_1594736472219_0.6207012390902493","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/snackbar","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f81ec4b10be2b1e137f828fa5b5b6a6d1039a2c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e6e23019d.0.tgz","fileCount":40,"integrity":"sha512-IynwsVHh9dhRFVTmMY/7uUhKYSlyGjklhAdpkw2sN5SDvPA+aVhCcowq06ooYRGXQY+EWlplnrCh6n7Y9RjKPQ==","signatures":[{"sig":"MEQCIAUj6+yewXaYN3vgeIonF6W2gh1/Xz1l4pieSGP7dnt5AiAFNCqVN/Xcn6Ss0lESdb1rA2MDh9tIzk60RPUJfD+pyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhF7CRA9TVsSAnZWagAA8bkP/jYYMCDqz29DpRioRxkm\nWdcIorLctfOwSmNcrEwFf38X28E3Gv2mmImAMNAV6ZgKyKMvNHe6zjGMPPXs\n+5Nzrkeauano18vyd3RxpkL/JOYgC7lRQ5/yiwNgigLExSOP13XkR4mUWrjf\nWMqV3qvAxT3+tta3N/CTJkMLDggPEsM5hG67xmomMSpXZc2zasS+aRMvPoFd\nFVpG1QqjYnJRHa2yLXh0wx0gmNqzly+1WKVxirU3mCJDK8xQG2toh1l+DNQe\n9feLNlB/PWIyz6u9hMnPMzSlGJtEkTNppDBMwDYd9hQ/pzBH2YMaZq7Eb/jR\nYqkU517prBcflDYRUNL6hVI5IpNADh1U1Xj5WOlogRkxUmFZXlp8CDqZCB2J\n8fdczdwWgxMykHka1WssKbBf767+jTAitSVqVvlnMJH4LADs7cqCxfqigsqa\nd+UmEw3ZU18Vqkyut6EV2NuQ8MXB8uenPk5apgiuLuIUxoTbeFk2hqG13JkE\n5jxX2nuwu+y3YB2PrhhlqqmUFXaZx8b29W/lBd31tz6h3lmAluSpTK72cKC+\n6IT091DCivTfts7NSTJ8Re7r4BNFNN2iUZ6FQAlUglBQCOUFUFH5cBQYy7bI\nWmwomhMVACRoIYANkIAGUnUt81/BwAElSQoK1T0QhzQ4qXj5MVgkulE1fftC\nd779\r\n=Xfr2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6e23019d.0","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/shape":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/button":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/typography":"8.0.0-canary.e6e23019d.0","@material/icon-button":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e6e23019d.0_1594757498775_0.7360769650528225","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/snackbar","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aea96848c146048ef896f8af0d20158417a99cd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d548d7a92.0.tgz","fileCount":40,"integrity":"sha512-zcELF59Xli9gQ+pvYCrkQtx8Vk2IPbPHT0enjMe2rg9ju2c7dj+dTCqjW8CnaIXuUKX4qkaNxCIKOHTtYOI1hQ==","signatures":[{"sig":"MEUCIQCwGBFAPemoep5HlVAP19bUxKLSeErJnfroyV+ENvgFxwIga/cxHLgqqco26ULNiWZ6WUA7WOz3TfG7JNz1rM0qdmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAcCRA9TVsSAnZWagAASB4P/iXGOXXwP0Rg0nryPMBx\nVQUf1ZXEMztRzQ4US0JAGOWUJNuYlhn4iVQBJb6ljcm94Ictc0HvS1jJJpmr\nclbj5ym+H9p/aGFQt4rKM24y8g+jI2NAM4AN7bvvOK7SxGyodakuP/a5evT4\nePQVwWm13ykaQAtKht6+XiYUCc54KTqeVwSjVCoiV1L2zBWDTT7sVKecZfW8\nzkUngwTFxMnA8DqZLY4NSRz/kgS3tDCvik0Rya0LjupUjGAxnn/Cip66qwED\nCCJABKx/rU0q0Idg2pijvCI7vHEkc5snj901LBbB04Y6s5ecii4VLBL2AHsk\nUvKlehoJReP9NleyVFH8FAF6iSGvGqH8UYgwd1RVCnWkv+W2LgR9NauZEnnc\nQ4PAV0dX/l4YER5dM29bHxpOQn9DSxxCWRKr7yTX/y+48nzcJWqyCdOhxb5r\njoYEW3UHMLfn4GzksKSiqZeD6QGnVf0CAsAVxt4jUaxTQ1kgkaflhVhqaVD1\nmo/7REVTvQH0z0UntLaNNpz12ENQQouXQ8INEqNMbpt2kFcj5pZU1V4XUvNl\nkP0XwFnpfK0J9aYiRWao3XlNIKtJOpW1Kf9+r19CJqvCx+D/FYp20EVzM+x8\neKgG4n1JmcC8JrhaTnJIqyEF6DyHklOhYb2Ky/FOJTwEjTrLsCV0d5h61Z94\nn3zf\r\n=7Isz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d548d7a92.0","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/shape":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/button":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/typography":"8.0.0-canary.d548d7a92.0","@material/icon-button":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d548d7a92.0_1594761243634_0.6916964407637851","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/snackbar","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"248a903a14162c9288e423b892b18e57a5e476ae","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.58ce529cc.0.tgz","fileCount":40,"integrity":"sha512-tL4OEGrKhGPyGRZOOQkqjs+lwJNtS5q2fag/LYNT3qPCnfY5LrH5gXJBNFDuwrSL939VkTte3CjhaqUwrXHMXg==","signatures":[{"sig":"MEUCICw0YRWWvWELWNwgH6TX9ukA0QAaRYBiF/AkyDc649kGAiEAkBaAq4+so7HxVHIiCo2rd+wBkZIAc/Kjtj58btjNbTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiCUCRA9TVsSAnZWagAAygwP/2k0JXqoCmVfaa3A49vn\nLiPgmA3Vun5FX0ubrO+Jl1i0bKmZ41FJgdlC4fZ3gddh4GoM6+GyzOWlsDw3\nyLZkxU3QPOei11voV4biemj+ECOy31rT9nU1xVqrIYubnpzeuSCPPYvUjZwx\nJkj3pKy/aoQdH20c8Sk6mfG8bx1k7XE3PY+j+bf0a5eGBl9amV/ox1JeuZcY\nrWy9hBSsRLhBtmyWOOTOt2IJ4vpVRJANwYzWwOyfYMGF53ogqpcwzYCEA7/O\nG+AvPzT4rRqqk0lict8YCq3unZltcEIFZyjDIU9JkzHgoY2D3gqG8441fH3S\n0Mg4pWW/ITVhJ38PSv3C56x6ssgw0+1pbr6tThASFlIVEXycSy917PE+3yjt\nP6biCZsq7VGOKaHEx4aiDTPqYdaCEkerc++qToK1EZdqnfmnem3Q6S+UnWWI\n4Aj4pGzPOhLGzgq2XFzTNZri+1dvmI/DgIRskOxafP/cxHEyuUbsNRb9+I/B\n24aVz/EX2KZl1bxhBaP5byv0/tdwlUNQ5A/E4MtvhHBMha43m4EUJusOovB1\nVCrmczID6a6CedUCFyX0Pa1X/u8cmGZjBWOtIMgnZqJWZ0SsbYugRgCXuOYx\npV/F2n12ypbm9Ecf1FNuVsDmmygpu8HVqt0JQI5XlV1XfqEGSS6ApMO8oY2Z\nvJdg\r\n=FA57\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58ce529cc.0","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/shape":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/button":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/typography":"8.0.0-canary.58ce529cc.0","@material/icon-button":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.58ce529cc.0_1594761364038_0.2635686200588132","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/snackbar","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b3704ecc5dc22b96294e0f6c1285ca47e121f7d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a0f1202dc.0.tgz","fileCount":40,"integrity":"sha512-LG0WLpCXgrfrG4RKURcnFWttgEYG4LZbtdkwcwRkzb0oPonIlTjTYhSYqlofw/uOLCJs2uOIh2dCa7zYW983SA==","signatures":[{"sig":"MEQCIGOqoXPMj75sOJTEgXYNV33dIOJolpi/riJwWDeuS+L7AiBMhZdqLuURkKQ9lRMvKPOFR+M4Hdf3TnPPt6yDYlnknw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUnCRA9TVsSAnZWagAAZG0P/jJxsV2REBR0CrC10OAl\nXLeJclI8fxBKaBSlzJcGXUFhYS1J1t0fyeugVLVzqUPb1Btj/31Pe14QujAA\nOhidbcr15daBXhTxGayWstORu/+Y95Ty2tkqR780Yn1HE5Jo90+0jtELLWvl\nQuDe6+pkHyxkpwUUtQbUC1VbayJC2uobRcnK4HY4onBkb6UgZXuu6dVLHqg+\nF3r5ldugyX4PK/vC6397uNFbGqr/kt8sL3rOXKJdJZAi10VHi0kUdmW+2Q5D\nSTEzLYh1aTb+r3kmai8mM1nYJHXvZismkUG6AUHV5fmH2GLItKWQAgJCyPdU\ndJNPRkFRAdpHEAhBy4FYzaplvZx44jO54R4Jp2P1vivW1xqdgaHnH51b/YsZ\nebvtT6a4CBDpIjpv7NdDNzQD5Pb45iQDNDLrBQlKkWd3zdxd6P6c2HjVHOXg\n4nIuZpD1bm2YpUHaQ87HH7Lntoi1MhnwagkRZRdjlZuCf6t+oK8weE/CYNvd\n1K1gBJ0OMVgZmWixfhO4IgVxViLbm8dsfOzLe7V4a0czipw+JvZT1KSZvzUG\nNNNw9UObJt7+HbSR9QcMWk9b7E2EOMNSrK3K0Y2cjUo/4x+St/8Eu0Kq7fgQ\nuvEm0+5CVy079RCBuMLYfnctTZGMmroYHZwwO1pGk6PEqOUpER2mp1e7MAaN\nzn1l\r\n=+ogi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a0f1202dc.0","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/shape":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/button":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/typography":"8.0.0-canary.a0f1202dc.0","@material/icon-button":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a0f1202dc.0_1594762535191_0.9234072695565607","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/snackbar","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b73c799e6dd7ea0a83a5645d14d61b57b2ac9bf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.ad4df58c1.0.tgz","fileCount":40,"integrity":"sha512-2JDQZLj8e0Pum41XdQf31yyFlq6AgJ3mV8vBjo30NDbz63lTF750qgfq96mHR9MPtaz1LSar3QkBGQl+aWHyMg==","signatures":[{"sig":"MEUCIQDM1u9kHa7HylnNbbTs8iIJZtey3qHA/NfUM/4YOKWdjgIgQI0sOJl7VbVV4SPrqNTHdCSX+G330TkXIAsJ70g/EhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklwCRA9TVsSAnZWagAAUogQAKRoU2mwharn7Dz9jgle\nBZ9gGJhOnUF5x0SCSur5zHdBwwV+ivt8XsWC6+q93AjP8Be8QH+sbsh8eSrY\ntQKii5fpJ1zdTFBQELJu6BUhGl/lDW9IgfJ3SzUwIs3GvsHXOv7Gu6MhNTLg\nUXaeZ6HUFsasexWfKu2yVORntls5GrOTu0g9ZjJhw/tsa549BQKP6MQE9Cyu\nyiy0TMdZCEoCcdtmR8qWWswyKUHto99EL7js6bS3DetMZDKqfer2xO9YmA2U\nXO7zUxZ7Mp3i9LmUtXLj4LPrv3jTwh4D8zBhl5lBtU9nc9N44nFIuJ6fJeAh\naw6y8X9f+CWR8eKN3AleAK/Zclec15S8F4wxoNfZwBz8z5mYRsLMl1wp0cBw\n8z6H23XQ0QhkU9RQtXQNDmnPhELLJg9kxjSMxl7fxWdgdwV3NGR8H4zOFM8Q\n1XFPVI9OZS6AtPFPeHTJwu1yLzBBGbXMA9i5dybMFwXzyeC8Z+8+HnVQaRbi\n3j+EkEHLDiM2oQ8d2YgrkMdeFCnjWTXuxu/KL5u+UYY/mxM7iTwLwFdjjzfj\nGNv8TwhOLLfghCGjVYSroi5uLWwEDCk8uALwZ5QqCk4YMiELYlU34GPkGRzC\nmnsyXMT5j5dzAaYt1h8tIBMqk37v0cFuEqsfWI1vxJrR7UnK/cMap9hLoX5r\nXAPq\r\n=WSA+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ad4df58c1.0","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/shape":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/button":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/typography":"8.0.0-canary.ad4df58c1.0","@material/icon-button":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.ad4df58c1.0_1594771823942_0.07412193097048392","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/snackbar","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1f335eba2f3783a77911e9f7b31e91e74a84ddf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.01db89053.0.tgz","fileCount":40,"integrity":"sha512-+LLieFGX6lM1nBwBHEu4Vu8JxkWRw7B973NtmZm/Dul0ol41xHQ9m/qGdfhZOdDra5UupxoMaY0KjfsDlmVjUw==","signatures":[{"sig":"MEYCIQCm73sn+ck+KuhsNb0906NuQkl+KuT5VPVCRTH/pr8b0wIhAI1x8oTQH3flz2jLoc1EBwiAHeqqf8OjS4Xlxm/aGRG0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIMICRA9TVsSAnZWagAAs5wP/RL3fWAjMf/Vm4G729++\nId/qXrS1urQjw5rj5h6ELJIZJe8kyo++dvK0phrc/kotUYUrPK6ViZRanum0\n50Y/+ggEGQIkpVnbrprO0OYK9JyHw/+1Co6oGntIxiB2lAcmLfsgydMSBosP\nbdiJ+i7zUULjW76NlaSBYjq80mi2UJI6x902fS8SaRKPusr1KWF+HPPZWOar\nMQPKE/jeK12UoXHdqAgZamByn8TpbXXL+349Qv8MpXzbjNFDCv18h+BW5sRV\nbp6JwWPdCpEQeBo3tjoeqbOGzvRgGfNilfWNsKwEY8T+yx1sGNYKcSMWUawM\nkLM9GYw5kLAAidbdTiegm4qoMuALOLd35khcCFl/ey5lRu/cofxid9mleSj4\nMapr2JgUlHJ2EHDCXwhS4KF3OUM8Z/6E9L+ZdXAIzdWZBFTRR4gdzRJzr4la\ncmVwZmx8lhu0nGxum1meHgX2LeBvYMmhDp5pm0T0oLKEA1JnaGOmUJKBgfwN\nrgPVFIvfnBzS3KIFKlPEjw451/YGfQ2149QxcjddmarLCyiyFegHY4o4PYVX\n5Nvs2F+KiNCx5AYY/uxSlBeGMlUj+xU7mC5iJ8XK5JjXhs85e1FGIAp8cucG\n7siwYhlsusnVVI64dxwGPETHsvrribinXiE4c+06sn/4z3exdfDskyGcTQ21\nNWQ2\r\n=O2Ey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.01db89053.0","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/shape":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/button":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/typography":"8.0.0-canary.01db89053.0","@material/icon-button":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.01db89053.0_1594917640242_0.5584747153579308","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/snackbar","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b9d29ad09fdd048e0be87d019e77fb00c84e641","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":40,"integrity":"sha512-7b11Vf6LA/DHU9TXySRyqWBdPIguCgVKzQW0oNWxtki8ILLl8fip8Lzsm0n2/xBdFT++nI+ahmoiS/f7R1TPrA==","signatures":[{"sig":"MEYCIQDB01cOFjmYd/8S4rFWw2ViVdw1T8MO/kegrO82pQwEsQIhAPldrU/drFHlFcgZYIodcnT9qlkMjLAt1ZqqAeRWya0H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6eCRA9TVsSAnZWagAA3GoP/3CwG4zOy0270bgoButN\nZX5A4fQtU/FB7nTK51aHxOCbPzxkK7HoTQPDimenw9FHMh4zDXL5/q13VpbA\nd/L7teczCWfQPdBtgb0nhTpF3Y1at2RmuY5ipjPIHwYNqB3aap41IBEiHf0K\n6kYLuZNwWAGN9dXf+wn7XhLp2OmcZuaX2ZLIXgSdfnqe7YwUO1EKZE4QmKtR\nya42+zww9+DXQwXn0aeO8XPrIXf7ejKdlaMSYqHYVIU6j79GZA4Xg6/ZIMGc\n01M5XSH/fLkjwKXFJAjUKT8iluPaeCjfjBSHHGHrTcAMKaZz4k1rdCNuQMPO\nfhl/5+6SJCstHp+KCULHmTrd2zeAS8zbv5ssISwmgj2hjcaOpJHqkp7cWVcn\nzGRxSK8b2+JdJzAJkbcLWGHG4Ah3r8VkwvGaXXrcc6IdGBp3c53ejv83PC2S\n+LO2WPA/lNS4elujx5iUftx83QG7vtVD62hPceI5t8PqjuR1H1tthLGFH0E7\n4qfwCmrUPftRgFv1j56B2Ph1nK98fvijq4qheLLPLKT9k9MDEZEgHqCxJYsA\nd0jx8FrZ1DAJOIRakE0D30GCFPGMhaTfAJk4CxGO2wT8nP73XzZqxYw8W2SK\nkBz/yHJgV08f2AS5GGHqrT0bhpy5s/uVSe+qNmITu8qaXNKI8n4hheAX9HlT\nEzf4\r\n=ugJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb5a4cdeb.0","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/shape":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/button":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/typography":"8.0.0-canary.fb5a4cdeb.0","@material/icon-button":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fb5a4cdeb.0_1595272862242_0.5649942309788945","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/snackbar","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bf2b3c7a0f7cd40b9a86ed8065fd5011a768276","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.8df0f517c.0.tgz","fileCount":40,"integrity":"sha512-D/UseFGKFK/ACL7ASPfqntiB9xewkOrVV91N5fzfHqAIDSWXXVVz9ifDbYcGSo1j45LmPzJWOsAyQtjUzv/Plg==","signatures":[{"sig":"MEUCIQDBy/OoWK+PtJfpPxht3AZhSV5CHz25gzmchnLYERMIOgIgRg7wfkB5orB/O8ezDhAZ3+aXulaACrHI+ho5NkI6JS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi85CRA9TVsSAnZWagAAF20P/2/kiGIOskAOfUyWv2Cn\nhhQ4maHDCY1hbXBjPjcbW2IVD8dyUlJXDbN/jVQ2I37V7XUS41y7HUtxHV14\nzPlse4fj98iO0Cf/4+N7Q84UUyG9kl4QkrCRayZP/71r1DcIiYunlljDWFiG\nkwdN64HH3kBYpsu13u39ZKI3v0ktJUhATalr8Eu9ZGj6R2m+zz1qqCYDPnmk\nZYWv93XmzgsHwrBDxiZgPEgAfSGw2CXqrTlavQXyc8hwm3FdXceZTX46Rg2L\nwd99JDR+0KieEKNFWQ/nUOhYgvFyitTK03o3lLG4sSmpJeo8eJVFSx/cFXPv\naH/PtsWUwHQ1tJEf01JBTYwXyhWT50mHdI6bdQh2lVb3KtfpEOPEQzhHvLLj\noOpn0ff9u1taJXWihOrgYnsfeFTHf8pq2Rzq/pMGIqFZPEMqdLd2pBp88LfB\n6Aiv3NrywKSboDgqhQnjCPyk9EgnhnVSsMPcoV/hm6vp07ky8ZK/lkEHY6y2\nijjY9oGRDilNCOz2WfUpaH3LOh9xHdgrLe0dq4RQLqgsszAAf0as1s/s2X2k\nV9cK9KTyFxcWPP3+lJ5Ia23V2n7Ii2sgZFQkq21fbzmFqnFqzxtPEFW1Q2OT\nC1PJnVy13zkKv5rxCW7AA97QllmXbKtazW6TwcLwW1LWzQBJpMRdTfTB/xrC\nJNds\r\n=vrNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8df0f517c.0","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/shape":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/button":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/typography":"8.0.0-canary.8df0f517c.0","@material/icon-button":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.8df0f517c.0_1595289401109_0.5887529040145458","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/snackbar","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a5072ed0fb936501e71b5621664c026340ae343","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":40,"integrity":"sha512-5J0c5+foWDKbrNV4wrqeeynexeX2y4AhJwocA2EZ8rTKwsBT3PNgv3HIuI9lhluD/lF3TKS2y60gZuKhwpLU6A==","signatures":[{"sig":"MEUCIBzubpZ7vid+KhK9F8GDWr91X7jYJXOZoHyItYvu0AGTAiEAttF9z4fxi0vG1zEi0zkc8ZK/9QO6xoJpRG4VzgXDrK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjwACRA9TVsSAnZWagAAYaoP/R8dkcBUyG0ZTNaDrko7\nJKvRQo9FEc4Qstu3Axjf3aEWnqJ4gDeJN5gF+7PmqpEJoYdFe27/OS9advqr\n5PPWav0FE5O/lM/FIDXV9rjNUEuyvpAWbVHkCO4+NfxluwNd41MNqQZk2D0U\nifMCS5yIGe2vAJYS6JO2dRrv8X6DOoVid1o4AI4QtQqLSLXFtuXx6jVzqVNO\nbX1eHhsv1/6uvyNSIGrxaAg7aJjV/JoB5sDxFF1xrjoFQ9MMrjlYrabuMZnU\n2ts5S6Gz2wwXSVbeLwktz8jHuJWDwZ5dphB8KVwNFiHdhBvlDlyNz1z2FMsg\nglAdIa7NUv47Zd8sI/32YyqsodS8DHfG53RyZ/0wnxIXwj8SmvWZuXri1b4M\nCKHN/kei6ZmWa+ujsL1xF+prpL3K8Zffi+Jir8hmJYDhKbJOX5ip7euLcQJH\nn2XP6/ACyHNR/bJpDLCHLAPQKTNrvO/wX5kKjMhTnen6KFWeGHoyeRqTcI+T\nQTo9aLjKy5NvA+HKcuXlcU2A1aIvWNTv2aA2uCnfAIyFgRTD/dgu3gHClhRB\nQ9OZ61mt2IGhAbc3v5OMsSCVH7PAGxm2so82f8FWe2G5bgIWWjCP+MkBY1gY\nLsshIzr6l5QTjbL+/0Rz+IjdHtPXZRhl/BrjFtD9FCJzA9EPWd6e9DCXKA//\nAqrA\r\n=D/0X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.abcdbcfeb.0","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/shape":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/button":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/typography":"8.0.0-canary.abcdbcfeb.0","@material/icon-button":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.abcdbcfeb.0_1595292672449_0.872581084937845","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/snackbar","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01686acbc7b27be763dde6e1ec459310de83bb19","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.7bd5075de.0.tgz","fileCount":40,"integrity":"sha512-FQUvUGXGX2gVP9PEgAkciNHOzCS5ys2G3bOAfJ6tu5xEpJNADXKwPggmvB6NIWgq/0DE+g633TBa2rbY//zjEg==","signatures":[{"sig":"MEUCIQCGgi7pvJAJAYJcSlZIJfb3ZI6c1P6RnvzrUC5guhOHYwIgSHgI2nlGg+bKJrfvNM4VPhA3KnQIetPBXjC62hgPaqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhuCRA9TVsSAnZWagAASlMP/2R6STsOo20wgIZSsKVg\nLkcIFVPoOq70psM4u73k5BHPk+a2OBQh5VzZzIPM31R9EfzDlWzf7v3eZBoK\nPHUl/X33cIniNHyV5iZZRKcMz98OHL8cJMWk4rcWeXp5G7GaBRUG0Fi17NZY\naD82N1ulAenAP1MBZNxZ3E2dPsVoptJDa1dDH5jtaW8/2WLjqmWsPaTXmejg\ncsTtCkvRLZ9S7g8bTlf9MC4yE0xP3uBGU10k8FigaQrZCDh9bSQkhxW4pvnX\nkp0D6cFbfgvJPQ+4z5hROnBfTtkKVJm64PbDkKxsnezXPvyVkSZ4CUWfQ99C\nBUOKoRRC2AoLi6MiAS3C9+uWtjtKtPhZ0ASffapbqF2673OeK8lakanlPy1q\n4RU1BcDswCHmKfFZp/tobWGQ8IJzYWe1bOcPCKNMcWwLZvN9D4ZEXClKd4Sx\nJlFJNjnVujHpmwdjcaaojP2K2rn0iCZj/cklthW8U0EGz1OW3d86km6LfKUy\nbFSURA8G6GPH29xENhclXNLrPUTYvtpvRNYf/WWUkexAZP6/FrOi5UglB4Cp\nNwe+4w9cYwXfja7T/q6qCwdPM3xMBbkClX5F+HocQGGK/UAD3gYudRvdOLOs\nRGb7f9QeC2mK9anGRRzH+TBiYPbylCBjJp3CQ2fubAcveiEmqG6ZdYDe467P\nF/Eo\r\n=H0jG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7bd5075de.0","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/shape":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/button":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/typography":"8.0.0-canary.7bd5075de.0","@material/icon-button":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.7bd5075de.0_1595357294358_0.768607391992234","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/snackbar","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"900b27d840c47bad7eec224001f3bfe82e69d5e3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.405a29a20.0.tgz","fileCount":40,"integrity":"sha512-0Wxx80jwr6ALC2tFYLyd6hTUTaMl4bMUw1S2bodGoTxaZCk4lCDdb0zrN3UAF2TjUQ+i0sMzBG6SMlt8FNwd7g==","signatures":[{"sig":"MEQCICDV/gwCP/L7/oQ1dEXGxX9hqQS0uVjkDx745K3raMFEAiBNVe3JisLP+/4s/EX+MX2MW4x4rLKqUWQNTnGKmZ6NiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLyYCRA9TVsSAnZWagAA+usQAI5soDKRpQfaTtP5DF98\nH70w66hp8rpFkVdqB+MynfaT8Ugn2YWMpb3GZAuvzit6erp3sbEnkf1FnN4u\nCb6GDh4j+C0CLS4mgvrWmGGkYwX1bJtnxgNuFWJhDUoAodE6VG4GmpD8Mibs\nj1vIIT1tT/PZ7lro/Y3v6mvwMIOyHJ0A4Z4Om73Wu04bh890CpQ3JIhkOOq8\npfVJ2QPzE0r4IS+uxU1g0XbIG94Wv8yYtWcM+/bVbLi2JnQDrahi1VdCNdO8\nk2uHPbJVUYbMlBbpQYSKcbgldD7CwLrR7SLimzTjyXcUAFVgDIicaTdo9lGb\nYbeJ2QmC2nT+bcv9qZdluQVuvXvheHOKLFPDLvT34X2bfEIYntcjIJGKzy+J\nRVxCo+WoyABQj26+iE+Ol+uA6fsDuSdUZGA2Xs1AlaqjmENznA0icK34lZxg\nYwGBuY2tUyoaUvEWFF5bl9o3pxNDVDUFJkSihR90lC2PSHOCNN6JXuz/Qbq6\nxiKTX9vhxZUBl1S7BSKLf8K9cFZxskw7KmNRUydEp7K8jj9zdPRI7AHHYsI9\nNu3TSmI3Y1dlOPabpUW56uE3w5zNbCe9+Z/2JzyAtO3xthoW+8wQXzAwQCVz\n0pjCD2wun6vdyqtDDLfc2HPKYRdSt0FIuCHTDfIKqDpkYASwimEee+ZU7oH5\nkid6\r\n=XiHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.405a29a20.0","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/shape":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/button":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/typography":"8.0.0-canary.405a29a20.0","@material/icon-button":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.405a29a20.0_1595456663796_0.6322908647511201","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/snackbar","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b4e058be6852294061cf534cff134f29f25617","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.f3693ac4c.0.tgz","fileCount":40,"integrity":"sha512-+JwrYVlXhxqHez5L14RP2oY9ZxuTDXVQPAu23dA+fM6h0c2EdB6Sj2uZOQTzt1agkZ4N0tXtBXeIRgfM+ZdO7g==","signatures":[{"sig":"MEUCIAzfMsiNvnUx28ysPYJt/J5jgvc6iseR9qXQOh2lEOFeAiEA7pcLahhH/OqkuMCsRmzeMkb531blfff3XsG8f1njNSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":431590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL8GCRA9TVsSAnZWagAAar8P/i3ZAvrFXC1OBmKTOWrh\n8C0Fw+dJn8gdpBfoFmnBDfTK/b7mnsw0XY5r084DWBMQzFEhpYBhy/qHU2Qw\nkqt9oiJ4eXNC2YW56a9LjqX9cYlzY2EeN43sejqwQr8ERnmqMrTnAmj6VkG6\niCuc5muYI/WXi1RECKuswS7XDzyZqiouaJtzVZlRgWky3guH4AqDRr8w9Ir7\nYBW0C8I6lwgjazA4tUaE3pR9GC2PwMsuoS1IEqdW2tuttOSZXCiWXwTmBkGe\nhwFClJjejhzh0F7rze3PyGZuRILFKRKgbdYZWxowMOc3FPAhWcJsVqpPXTNy\nizh4KKCWpFc/d2LL1fKxQshIqf8uqQOP4Y4Q1T+gdye5CE/2ZcXi5Gmqzwog\nd8MLz18xVTg7FzlcbcGb4/xbNF/PwvmkXlbPMvz86yR57p9bv1p9xRnShnOp\ndF46Ls9HRTQ0LRMxqM1iTt5cp5DmrNnO/u7uONqeIjMlGS2/gTi9P/Om9r99\nccFx6572UpnIiXAgVHHkL2R5BMY3TJxU/HZEA1KHl8513EHAp/+7TKM8e3mG\nuKWOD8b6sB4SXqgPIHzX9ydG5Lrlw74BM15PXPFRH0YdvSxPp+f4DA6UQtX/\nZIrsYPnOW6tsid3HyWmKyUTWz6J8azKiQiCMFRpQq6qsdi7sCO9j4fS9Lvx0\n+1iG\r\n=k8uU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f3693ac4c.0","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/shape":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/button":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/typography":"8.0.0-canary.f3693ac4c.0","@material/icon-button":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.f3693ac4c.0_1595457286171_0.89615385867584","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/snackbar","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee7cc15e27f380a88873eef7c5963136ecf24df","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.12a109680.0.tgz","fileCount":40,"integrity":"sha512-A/pmxTYanRTTorTWP+EGPdDU0vdGiss05T4++xmV5nmvh7rTtOq1gUvMlo6Qd+q3FL3QkTsGHCQdQm8yzr4Lug==","signatures":[{"sig":"MEUCIQDY798YJ/KdFeLhLYrgipw6otO1as6gBaBeT24JOpvcrQIgNdVJIdQWCTz69YNX6OoqbEgNwnmfGmTikR1fyltCKOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":431590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMYBCRA9TVsSAnZWagAA7q8P/0RFbcnZLja2tLCU9tDk\nVizcvO+SEpWTdfbaFplZ76NoH0SZj7WizSdijhu/rVit1YTI/6RHZjc9pFVZ\naKY3S980m+FQoFV15cgj1BaaQqgll3B4jkxtrd6KFkPD7CCf2z4yd3gMtbBH\nS4pVSlxwBpiTMCmR5GPAHxUu0dCCEBdjSAI7fdBn/1t47bOj4cltBAiMIQEA\nxLiKSjYHFtdG3EjYjeb2+lbj7jp0ZGYUAlgfzR2WnXI+9pwG+cb1w3VfdVjH\nuzf9zBDKXw6dBesjd00bxD78rlWqK28vMSHBbuY66jSZAzZO1y4sWGbc4xZ1\n5X4MWsikjD2INcpwrA/PvTI2DitxK4HVMl7tg44BmGjUOuCL8iijCNq8uWCo\nO6EjKEYry1IipfOW8O7MJU38dBI0j/dgVwRci614vB0/JGLi5IYDexyulekf\nq/qzjFYrokmeb0PvyXyy+3vMEYonaaUmf0VPDFS9OKkNpEEsTJn2alxcMIpk\nifc6mbEQ6OT5zOd1AZUQpM1Ti6xPG67EIVuajHWzoOyZQGF+Hay7m4bLSpSl\nce+iTkkxNnD4jBQW9Q8bCfr4JhkWqCX8iAVVxy/9P2geUGr/MbL7Yf93yJhs\n0NGIav8n7BKEzOPCjcUdCQZl9WgAQn+FH8Pakh600kuNQpe+CfVgW8z26oYT\n1OEe\r\n=MYxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.12a109680.0","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/shape":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/button":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/typography":"8.0.0-canary.12a109680.0","@material/icon-button":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.12a109680.0_1595459072790_0.3818874461293438","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/snackbar","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e89e9ae0772fdd2a01ddb577e3e04a7dfc2a8f8a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.bbd06696e.0.tgz","fileCount":40,"integrity":"sha512-MebIdh3nqZ00eHM6k5Lxp19nM23N9E582jONI7zJS78vG8fK9Scb68sXqywT1mhEGaMa8yZLUfO3lng5RaAmQA==","signatures":[{"sig":"MEYCIQCICEs7y43LsqgtCHl+luPR62H1gTX2FFoU2KGZKv7tBgIhANGyImVUM3gLtWjgtbbiOUb9v7wV3katq/6/CwtAizm4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNGYCRA9TVsSAnZWagAAG9YP/2VZ9nlkJMfSCyI+0it4\nA7i0ScKJua9c0T6YUXh9V4upTAz5pNFlhmebXciI0Guj1FVjDBcrOFtbN8I6\n1D6XdO3oYE+Jz6enU2vMB3GRwuvhHt1EMmFEE7TInBe1bSNvEOT09JgYcE5g\nT6WlLg1MfyInBFF2InbeH0tOaPCFNduWcKMw6kJYJcEV10vMvKVLZizMn3wL\nUUEe78RObKiNZ+fp5yLlOmJkRZNO5d4UQ7c86/plKUmvnWfzdrYvNZTmlxvg\nQY+uX7SI75VeeqjjrBrv/IWucBnJL6/1uspoAeEsgiJ/To+TnpsunAaWwtIo\nBs/dHRJf0omTfKoGzFI12BXXGX9WathDhA2OYKUua3W7ssSDw77sk2QauDYq\nZN2wKJ3CfeVJBWY+PYwQMoaeQrnth/VZ55HPPUf059ctU9+8Y9jBJaPH9y+h\ngaxa19KEjSXlFYE/9BG4gCS+zo5HcF5X9fKdLH+Vb0kpt6RX67rElpUQ+U/i\n7LD2HRqjeU9zFXxu+0kgRyg81/A5ZSYcnpItkxuVtilHPY5qggeF28PELZzJ\niGGpwgp7QR9elj8Iyi1GTysH/tyybzLI9BQK9Ndixe7ti/itYyhQBtDobc8T\nN0FSAYSO74+DPb4EY/rmmHJnWVs/FnWxLNQxv8XymVPSrKkVi0iLHdDFRGLd\nMCaH\r\n=HwGu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bbd06696e.0","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/shape":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/button":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/typography":"8.0.0-canary.bbd06696e.0","@material/icon-button":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.bbd06696e.0_1595462040307_0.5759148313807154","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/snackbar","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4606c3496579f4491e63abc5b88e005750f49538","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.4951e7651.0.tgz","fileCount":40,"integrity":"sha512-lyiH86dVTTvdHAUJidjyotPaCYIC1QP/rYXBmyI6lvqXlx88r2Bh5HmCRgJWyVvmWpXNPXqc3nj8tIarIlUpBQ==","signatures":[{"sig":"MEUCIQDhaK27ODuoUD84vpmkHnxj7uHPfpAKI9DeEduMZ7RJZwIgGryQOZgLdhODX2xmcRu7zx8HAmP8iimcZiG7zDpOfyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOz3CRA9TVsSAnZWagAA8YcP/RqWE+JlLUGMsJiBONVo\n3yV5ZNkHjGIQpFZED9VNO2JZ4ThUVEGtUGFpebOrMvStOKMxvTJrzbkUmGWW\nbvVdbhJI0OkeV/IfRJZImSsFpVmrw5etHRgfonu6tpFq93fplwv2RMv3zOcS\n3IpgtDIgZ9LKO/aXxOMx75SJQ1/0Qhze2qXm6FuqW8BvHC7eeADDnL0vX4U2\nhUw0iQ79DMo8WYIY2krzJd6fxgDDDExsh83mslzA0GRaWfkmcy5vBl6ZWefu\n4D1L6sBTfDguVq1lL/llpXpYFHVL2Ih6AYSSBDrbRlzg0Wds1ExVK1US7wgM\nIypdxvftBsHYLpU/kZWzBC3oPChCoxLkHHYcnFKGaFUbJ9rchKK23Tre5REg\nUbKrh2XxvvL9uwdBLR+AQ75Bbvv88wMG2qETU0o/fKvs1JnQXpjCsi++9sMH\nSD4LHsqAcaGlcda++FVn8bhwNUVEyzrKVecf01noAh8vTG6xoEVsI172FOwK\n0KX02bFJcv/+eiIQ46KBiLiDjmx4sb4R+kd8EpUvW98YBQSWhdNM7lHMU6Ck\nFZWRb/Ut36nAXlvI4mzM4WegB0mlnloqeY6YswK6K0CkCF8bev3noRKFsQL/\nFNptq9x/3R2znJAgr6pg1i6gbbT7/2lSeQ7x4Sf0vN+zmQdu+ifB9NrdmHdI\n9G62\r\n=T+yK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4951e7651.0","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/shape":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/button":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/typography":"8.0.0-canary.4951e7651.0","@material/icon-button":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.4951e7651.0_1595469047158_0.4627016351887263","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/snackbar","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dd8daa76b4421eda2093e8dbedc0faae0bf90b3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.75deebbef.0.tgz","fileCount":40,"integrity":"sha512-PS5tLrIzieyhFiGYWDgJCwu+PXYbPf0/7yVAozsM3+N/vSUlUMdcU+oc2+pFioUo5eLjdoo00dqRzEIZEr0/oA==","signatures":[{"sig":"MEUCIQC2RRoPqDYRjJA0hvOlgwoD89n+PPlOGA8my6zrQogy+wIgaDQeaDkckkgUb2VBo40X8Uu7gTJiZ2PYZ0nLLkC6TyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc1iCRA9TVsSAnZWagAAbjMP/2jLt2mMSeHH2eYDIi6T\nKVXmCdcX+aOdUmzGWqt5iEP7L0PuYYStLeC+qaL1wun+bUuG2HUWBo6tBcK1\nBt2IaYVOwanMrM8xLMjQeZ++aR+nWMzbM6EDGghm8I+wX7N5b6VftMOmU460\ntfEzaAr2p7NPmceNeRaFZ94EB8vRb6qFlenReptpM+WwvJkbNZUyqu1ErG8W\nHRvELCOPSljDyn+ANsu4rgpGk5WDFoXYT7zQjKFgyjXZjM7dMOJEM6OP3v7n\noQOZ8Er5GhHFK0PLe2eSxRSgTRLoUHpkUQTlIAoLkocgE0zPnGXmtJTnEXyv\n+JcnEI78HQ+T9yTd8ucO2eNeHOvRgAobq53b5dkA27KOVqlW3STegJLKAlIi\ntlRO05KLvO1jwChYbCHS3oIVFW8i3E+m+5VSItKCZMX8bcQfWF+ULaFclAB+\n/9/o5FBt48M0S3ERpg84Zgmdg6XbIdCfclJHPi7haHyx3ahlKUoFPIuY5MFq\nI5n2d2oWJf7K7/HknjGOUU9Z04L265oAqG/rQJ9GVBl1VWq+iwMpoQo7Ex4x\nyZAvzXV0BQSdGM5swtHO208ipy5E3hXEcktCGNMkE+fisAZpsDJWK6jexzzU\nNjyn1uDjpmIdaBJ7gSAnYtCY4iab/G6FVrwFau/Y/Sfn2rvq3n4+DcxP12WK\nblTE\r\n=ptI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75deebbef.0","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/shape":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/button":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/typography":"8.0.0-canary.75deebbef.0","@material/icon-button":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.75deebbef.0_1595526497566_0.4990569132323335","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/snackbar","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b88cfd00de5dfa41cecc92da93287f987ea53047","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.95aff33ee.0.tgz","fileCount":40,"integrity":"sha512-a00iM+cSwp8mKv1gySnejmF3cI9tO0xvb0d06TU38rI4LtQy6nTvDErzohyGfBqW20OyIcrCNaK+3rinoKoZuQ==","signatures":[{"sig":"MEYCIQDJ56DIcPDbiJhWzpTII+pPSX6ydkvyPuPm7btBuvkfWAIhAIJBqfTl294F67+xJtfJI560FMq36HXvzZUe2kR7nYVz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdt9CRA9TVsSAnZWagAA6dMQAJDT5m3o6RGk0odrAcXO\n+ZbwE6bVhaHpW1Dz04qg82gRmsmswDV5Bq4dOd6+cCgRG9dpN00YzP9kFucA\nyjXkSCpc12W4c1MLhxH9yLbh6B+tLfHhwLldDtRfiwfe1phmP1AAkxWqo9LA\nB6g7GpZvBcpDwu2Th3cfy5vkbXbVevpiml9iUb5JtoUy/t3yd7yL69BHr5gP\n4VqVAl998LIosiAHgaR8BLIM/5kQ2mykfzr4zqS2+2fKsUmDhDy7drThQOTT\neLjxDTwrAARt+dIDLSgfab7LhosOPnxU6PNCIcglFdk5bBe8nvty4pqXBQI+\nLXP4Wb4q0XmotW66tE82w47/aj0huptm3DALOzHtf5fhumPTqA3fCtQN2tHu\nVZaJY8V22iLkr3VtUEC+vl4jhdN8ltC9UvsG0PBV/HEPeT8qJyvRE6/thYuY\nNGlT6hQCTf8AvivucY+zSJ8x9Va1xzfmt6I4Lk+WsSOhAlbkMmuOdodQBC3o\ndmiPs1OrxgKhNdZRBCsBnkK4xEjroGtslIeYyPq9xJGPFcync5e756YLie/V\nnIdaALi22Jyft0u6qYs1updNFdM7qlLm6et7czpIUg+ghOsmnp7/HoH8F2/d\nNj1NazTCnwSRsf5GIIuX967PcDCtr+DJ1BUQlY0OrYvnWKUNcrAKJLXs1Jkb\nlUpE\r\n=yPyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95aff33ee.0","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/shape":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/button":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/typography":"8.0.0-canary.95aff33ee.0","@material/icon-button":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.95aff33ee.0_1595530109198_0.7340181796128364","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/snackbar","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1797c2aa67444136c2bf23df6d9fc70a1f8bcf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.9d9f47473.0.tgz","fileCount":40,"integrity":"sha512-Mvvzgrc2EKaUQBLMkNB3Tg4brKt1ILaIfmwB6Lkdah9YJ9IGH2y/rjgQm7WgsamBd0PYsIpFUmtlUZDGTe5AuQ==","signatures":[{"sig":"MEYCIQC9xY3f6viuZi7p5Lv7GwQp5U3lhqRrt12WwvKzNf58kQIhAP223Ai9NwLPXmIX+lm+z2zJeafmw2YkBslrCOIMLnIt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGew2CRA9TVsSAnZWagAAXMUP/jQ9CFtpDCZ9/WVQnGJq\nB4+tXrslaPRibi4i+Bm21QIRlm22ycT3NTo2qPuh+OfwHUdGgs7IWkoVd8y4\nQnfIj9L8odsUFDr9BFIEF4l3rXBrbF+/u/R8HPw7qogf0mf+g+MowpLLs8wI\n5QyDEHydXA5yD6ZlnoyQgvkVPmOZK/ykYymF9+PmCWslWw0ZPpRHZzJaRXfh\nk/v5bRwCdfBqNs/FSKxQGjWyQMCFJ0Ndju7IAk5jEQ0fMrPgQb3C6toR5GO2\n388M0OZWMh8OdP5CYMdaKrg9rPRC7nr6f47Q/ytfHSNtMA5xWJah/j959IdN\nFUBqjDXEflFEpuX9Pbn5Ks8nlULIDW96a+8hFUTS2weS8gmBsueCsNUylA67\nyMNPN2e6GkB3Sds3+g05XrXEiWaSXDAFFVe1Rr9OF353TQ8BdOAN5y5Lcz7I\nhwrXc1X7nVetRwA6V3fkmPdPSf+fGQmvTizoqnKWnNwJtXpOWrvSQeSluDnV\nI2QWsmPmhv4gIQ0piaAHki5ZJRGxocAizyzj+oQIhB4MFnlm++dLgzlWE8hI\nVBSQtEHjOG+jOB6l3oi74J98gg5m3e5HLk4qcOnd6WEumc1LrQzc7v/Qxgny\nL/3TYKg1hNjyoJGFSRTS9aqs2gj7GGUd5PLx9/VG31YlzwROrlyigkDgA8ux\nV8wp\r\n=ruKu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9d9f47473.0","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/shape":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/button":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/typography":"8.0.0-canary.9d9f47473.0","@material/icon-button":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.9d9f47473.0_1595534389953_0.8767581352822984","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/snackbar","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fddf4bb7fe85835588744a1338256639359d3e7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.00dfbf6be.0.tgz","fileCount":40,"integrity":"sha512-OLQlFtRxCnN3qawLN9V8jSGn7bOqKcIM0m7qVFnXfgNicLvNYWjl3bLn1qExg3imKpjlNW+766H4rsHQmdob3g==","signatures":[{"sig":"MEUCIFqmv5fcw9TerMbgG/UZ7pcpvD3FuV842P5DFoEkt27uAiEAovD/U4ML96Tj7xgCH15FFbp2YlNZ7uDYc4dgPyyXcL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfqGCRA9TVsSAnZWagAAb90P/2E0Dzblba1DWrd6dn6T\nJu2KEEQr7WyjO6wdYjXxTFxBRqaExJkIOMqVPFS66kPTmFtmKomOmXmH0Qdk\nDjoDOtId4oWKHYKQYQNvu/V0nngX6ON4zVD5hjrHxomSN/BCMdDivYfFTItA\noSjld+lWAgWL4kkfKJztWK1uEHs5Dk6mOlb310bbevqFNfmiKmoUWojDbgh+\nr+s1t39TQDM0xEu7CkAx4RTG+DdAm4TQ9qHJOnJyFjMReCQPCeUTHumEGXgW\n0gUth2xLohB1kzG05pHRL7A9aGss3t/OfL/7JMHB5yzxvPBj+xqMZSwMDB1k\n5c4sj4IGj2QYEDyuENvPJyJ58Adp2U6qN97kUmH2y6msCe0m9+YiWFiWSGbD\nSuw1sC+738v/jubKWm1hTP+mn/z2711SjGeBaiAvnznQwUaLmHngzFm9Tf3L\nhKL6Q7E3KursTplIUWzgNsv9YsouxIEbndh5OL8XXHXn2jKPK4tXqMtsRMyf\nclGG34yrquGMPhVGyTpomnMXkgPE7hY7H9vLkRpbFw05ja3OLYZ9Fncr5EU2\nfmx50lmajoruskqhFUL/tfW+E5yw+KJZBGLjldsdMLXSPfmeurX2q6u/BVbL\nOWkEBao6gJOTjYhDyyTHtR/o2og2MgW8RWuK7wRMoQeV6pzv8GiydWy1bfZR\n+Oz0\r\n=Azkm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.00dfbf6be.0","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/shape":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/button":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/typography":"8.0.0-canary.00dfbf6be.0","@material/icon-button":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.00dfbf6be.0_1595538053664_0.9649686276121823","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/snackbar","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d354d16de4ae75c1cdf88bd373068ac4cacd5f6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b87e522d2.0.tgz","fileCount":40,"integrity":"sha512-Gxgio4Gvn5CwORjnfhjF6upoppEPkkUFQrrDGHv5x5D4rgwjeJFZCeCxTJpLHdruNNpZPhgmz5e4/DMslGglSQ==","signatures":[{"sig":"MEUCIFMaQSzxJFhy8XQ99W7JksQoUrQjjq4aZ+hzCdxSUkP4AiEAx6y010u+rPQc6U/8CtjMuyd+cFsEXZzjbvrzQxNGocs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgAeCRA9TVsSAnZWagAADbIP/0ve51hiDqIZC1YuiYPD\n5heRM+lozgNBwYg8U39kAtvepXWNl7qoQmXSFV6RPc2Oc6sKMsnc6hKw+UHF\np8bMnucxl7Brx9Z0zZY36VDxrX8SVNRlW7opdXF1W5cTGeg2XPJ8u47yusIZ\nRuhhJBKQtSr1jWEyol4i9lKxSpcMmwUwaAMihRVZR/wHAN2A6WjhQoGlpyUQ\nP2WDri2M2hiw5tZgC6E6O3sEtm4/I/kJXtbfEK46kiUbjyrCcfHzqJOVlvUn\nlE/ozfA3dLD26aa+Z8pe2JKTw5ZvgrQe0W40aWKR1k4T+LGn5VZqW787T9b+\nLBxg0XeCCdlRJ2ibGSW302AdmyJMrwQn2D4QBK4owIl/metOVYkUfVhgYB1j\np1+CRBeF80gvRAoaxwJHN3leIaEApyP9vy3GSBjULSGTv9F8XGZYrYaENzbN\nuipZIZbVAmwutEfFZRXJJC1FjvoM0q4XZWiHxmKhEjMlu7MTu5IS0o8jQg4z\nT8R/Ayu4+yWchg5a1a3iuK6aJ5pIWU4GGF92tKuLDrK1lKzaYlqKTqWTgxIW\nXtH6Zpx5yFE6fQHNYLhlhkuEyxf9YwtDDGB5uzG2us88dJEuu3zh7RIttVN4\nIH/Sgs7LYlZ05b9ZpJnb68F3/Ol2OlgMpn6fUllEJ3VnJgmUs+932ypfsSJF\nYV0w\r\n=rN7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b87e522d2.0","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/shape":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/button":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/typography":"8.0.0-canary.b87e522d2.0","@material/icon-button":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b87e522d2.0_1595539486025_0.21017582312728877","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/snackbar","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"238c935ae69a8e9c015188b7ca0febb66a2bb6bc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5b3e150e5.0.tgz","fileCount":40,"integrity":"sha512-3ZI7y0oO4o3mkjX/ydPt++Sx5tsq2kD8nsnqDzqj3jyan4NwbT8ML7reBsR2UTqgb171At42a/+/eSmPK7sCmw==","signatures":[{"sig":"MEUCIC1bNCj93VuhWUMRpsVuu7sRG1C7jA3A42JkGFFv+SdLAiEA3/VHOK46s1siaagcSrY81R3LrCGgOk15Sa3NIMfxLj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhuCRA9TVsSAnZWagAAI+AP/jyuaVA9tYaWG9pyPf+q\nQqkMNMHQnI1iC6+6N3j0VAerFN1huTyPeg+xD7uxKrkSD5Q9di8AXKFrggeT\nCA8F0Zv+yaBfubrTUyX/lWVnIL7B01K4Kp8ERXHNSV49CTa6/GnVc4I3L5zP\nSf+mZ1SqV4d1DIsm/a4ZL0mDGgwZojbHBPdeLW9plKlT3KG5S/BrHgPMpfyr\nc1ggDiAI49DfqRXKUsWNVxD4lX8my1kXTjie38fsITQEx0cYz/mPbeLx/zQy\nG7kzTmgzdqtqe1gNHTJY1YBwwOfTuBGmKuJqMzKr2mmaKEbYuItQcIWZOAaT\nzUm6oW4ogbdAH78fAzbQ2bDp+YVZ8/Cx3Q9IWc1u93LL2IaKcRWZ/QB18atL\nIP0u5ChQdyOsVC12lHa+HN0B+RsMOUOUSj3a1bIfp9UhinX3rbPwhHh5b7sL\nR5krZVizduTAYJn38w4CaRN5xWxUKs4+Yr+WqERIU7bEx37Yl8GVSVW3L+aS\nkQLLyRtScSRe4RqYFzc5uqxH3sA6qg/G/EAdcjCWGhOE45kIuBNgYgPBMn/N\n+BLdQ1CPPbXt6w+pfESHiUOFW4EMPsXPhQTIFKguM98EoS5AO05y+dKC98xT\nwdDZZhxVa2B6M/jt5QlZWhuBItqvtWuet3NuF5HSXL4PKKS5zywYYesVuwio\nVA/9\r\n=vCNU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5b3e150e5.0","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/shape":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/button":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/typography":"8.0.0-canary.5b3e150e5.0","@material/icon-button":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5b3e150e5.0_1595553901980_0.31215996506100097","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/snackbar","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8bb29f7d2d6ff1879ed89cca608e14908ea1550","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.f0ae11786.0.tgz","fileCount":40,"integrity":"sha512-9/vJo0/R6BdfZubZ7bf7lymhjPEtPrKAvEmZzx3arvTgpys2vK5nazpw/JeBiNqsYudhoahW65U+uA8jXrpN/g==","signatures":[{"sig":"MEUCIQCWn0Cu4GlBv3Ucs35GzlRXgYTjKA/1x4RPKTiQWQYxYwIgA22yza2S1bHxRhoZIsd/uPwIW6pzKmxWqjNG41mJNSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGj0RCRA9TVsSAnZWagAAl88P/iITv0al96Jx9AA4JFxI\nDl6yQqTvlgLiGHuvRQgCnK5BgCyNMQuGFc2kL4jit1MaSQeQCZUI1lZRjDVE\nPucIJleNCXQDqZgS7OrMtAT9CEfhWbfVyHAMpHHYCF0zJYKuzU0Dnuh3cI0b\nmi0xGqBJMhgGq4wg0yyt7oG/I2DNTn3IhwtHGK85r89UUkuKUrC9pD/Mlz6t\nlCWKITyPwPNZediGS3qwUHp1UtgLp2T1exHkXtDi2eK1T/LlUVZKhTgxGUq5\nahmb6hmafil2KPBH5DDBt25hV4ETUmiHyCvYpCJadzqUk1vHPsb6VPL2/rv9\nl6g6SmnAO19GrblqTJKTuSkg8q5rgPa60RBwkFXG0xnSFSp5GS3zK+MfAawU\nVswLj6/ZbxsqdmMDf/qdrH1kbfLqXBT4Zw1LxLohni745Vx7AqVryLhfyaqP\npxAp+piuBQ+yBnFo6g0+h7Cb18Od355X+AY4z2AUj6emxkxyd90NBnTAcO11\nOOHxJs5ITPj7MnARuUkNTF582ixcHE/cb2cRft/w6oNP3+lGPbTGIZOaQOi7\nmk0LI+W9a7rlVff1Hpp0EGCUsj9nUmTt1g9MqdwJXs9fTSQ1lX4kWJUqXVpu\nlOFrBYauXUGanfETJEoEw30FHkYL2yGM2IvYjJ/ILACDARE3tOSSWdso+0Pp\ng1ou\r\n=ICV3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f0ae11786.0","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/shape":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/button":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/typography":"8.0.0-canary.f0ae11786.0","@material/icon-button":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.f0ae11786.0_1595555088813_0.690366800056937","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/snackbar","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0863b2f522e38e3965d42e0e3dbedb02482e72f2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":40,"integrity":"sha512-brnDk4X9fM72cRI6w0UbWWXLxRLZVvb48QVOdsF1+BPTvSFnovZNgpyqu541kyi49hgO1FP5Gxz4Qk2EEVRiXQ==","signatures":[{"sig":"MEQCICyBs0p0qyJtEKLP3RjsIvb0w9urOY1EZ3z5DX8uJFSSAiBtG83FtMW+U9rloPEsZOjXu9iqMacG0rafkH7jC9nYBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNkCRA9TVsSAnZWagAAx7sP/2swi/e+ikMktcLqDoCL\nsakDPDskUSvIYIYCYjixUzwtA/RYGDxrhMNhnAEavVCP54wSjfPv0t8JwfIN\nwR/v5GLBbiCa9zJJWWuRQtbcOLFUSu+qT2t2BjCAeZxBQSP/WdrM2LKb+80b\nodRbciD38xpXvO151WOyByOobi57iNNWphOs62FPyJ3i33szdzhWroRk5aU5\nQ1Ew3XHgKCPaYGvxR+blQBje48xhumAWSuNW7WlDBrsXNAQ8SQASx51fAAML\nWMHa43hK0JJXPDC7zQXv1eREdk7TBc3GAtdqL6fLvn2Dlw3cIo7Y0RANNfOB\n2bFaS1MNXVrj3S/RgqKUCpLyDdddqf6CtU7iIRbD+8r+fZB8OLVePlofitxS\ny3kooUB2hmpnrbxOWbDXK54PUuWMWmmUo51ZEcmweP3TwZ6Dlh6EMl3xA1G8\nsGUks8J0DzQ1rLsAYbl0DFIYv8FIfmCc/FdhJpzTlhVcyb5UaV/0KTHgH+wF\nYPpx9hXFAlHvmtH/kHbB5fxOma3gm0bBkKYBfE80+gKXJO9daM5Iw5FEmCmL\nCg8pGMl4WHeE8Sck2S/ZtPpROUQT9fvXueYwyQGBK+/SCbj1Tpv4pske2ioz\nILOyCKg7Omabxb8Rlh5lgeCG+HvvPvIoTHMpG6qXC/6jD1jvOFJECOhzM9KL\nmfOa\r\n=vzkA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/shape":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/button":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/typography":"8.0.0-canary.fb4ee66c0.0","@material/icon-button":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fb4ee66c0.0_1595556708510_0.5353362889145816","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/snackbar","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"730f099076c9b83e68f3f4189328e9a87931834a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5511e0aeb.0.tgz","fileCount":40,"integrity":"sha512-BJNAxaykHphu8tKwXTOcHpeXcoaFa8T/MyKi1o5OQ17cyuZVosGtOaXOZe1vRsIy9Vs4vgDSvXNy+yul/UGRwA==","signatures":[{"sig":"MEYCIQCbMfTWaK4FRHVJJfICBz7Op2l7gtY1HsI99OREewSYhQIhAKj2Ifn6pXgm1fj5wOm1Sba6pWf1/C027Uje6Utxyx9n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxMWCRA9TVsSAnZWagAAiQIP/2y5higG4ZrUkkXZ1Fv1\nmIeqbxh1I2wUPJBY1QTNefpCrODThNWnobvdl/nwXXphzPxUP5oTh/knfoux\nrALrFybvORjs1ebKMuDLCmR5hM2f4Jsao78YycTsAPbQKIzVB21KspqpNdoj\nZbcWSgwTFBgnEIlUhccGNg5jhHD5ywSSjUDWQceSkKuxh9oAgsJsOIQj6VT2\nbERIUGKsgR1wRtepK3xmOuI/IxVd9vvPAoLUsh/xCLAloRRxTbl3gs9OSTTf\nAYk9pr8KGrlLY4Aygvb7SMAyb1BCoxVjFq40iBx+2/V2SGhDsYq74fSSezkB\nnySDG4U3LVXmbfJFu+K2lWt3/y7Z2td2ut+FkCEwsJGVCanpWKjQNrq+oKv4\nGTpu8mmRKNVdmwH5q4PqhM6WRl7dax2iLth3Fv/2qadPIlgx89DhVb83FY53\nIxLQVMfVx+Z0SRXlDNKbvwGnOLFIZzS5jTiqX05zKlq7sEXe6RqJP9gGkffp\nCHI/VCSj5/UNuFZc1UeW3myY3/HyO9qKpzjmI3Rzqre8NgCqFY9opwiqgpqI\nrQ58zmM7kXC952B+OVenlsoklaah4iYtKDXuuhHLYgdn0JX1aILyyglTV9TF\nulfLRIdKniMRpdxUz3sWv7kbRv6zTnokcfS0ezd96rh2NBk0DmZQDFjQZi/b\nzZl4\r\n=G3xt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511e0aeb.0","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/shape":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/button":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/typography":"8.0.0-canary.5511e0aeb.0","@material/icon-button":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5511e0aeb.0_1595609877844_0.5221813029843434","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/snackbar","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b570806cc28d1eb5efde3a5b4a79372fab0157db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.8388a9bf6.0.tgz","fileCount":40,"integrity":"sha512-s1IXnzAyKUAiSxskyYykXSNIekwpvLSirAx6cXA32wr/DHIrwf0cqI3n8vi4x+liL09iQd8g2AggSY00SpFfUA==","signatures":[{"sig":"MEQCIFkYdvvdOi23A4WcFDwUaV6xZXHvs7CujT6UbnP4sjLYAiBxU6POpZnmSQLmFqWQjCEfvTveV2NGW7pueT0pZQFz7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EiCRA9TVsSAnZWagAAjUMP/id9+4uXen/5e5ew/nOF\nRBatItJAmrkVykdZEHR7QE+bdxJhAFopHhiPsEcn2qDwyqnHtGV/9/gsjStI\nEmlU6M+5iXMuz35qqilRRPUgbvx5KsvZ6bjxSKnWhr+41xVjZR5pA0vbxUWM\nx3mXDqYEWngoMatCtXy22+RQ3kviLn5ktsxZIc1+/NmW0nMDI7h2E9JBsyqn\nf7WR6AwsncMWUuG9423DjxI5Wjs5M3lubEnqiU7tZM8Si6/lRGJSIIXdJWmb\nM0mNvC9Wf279O9je6ccsVz8X1r5KpP22GtJff2ub2qNwP8LGwK1KFxphYRhr\n0htwKcFeI9iDZ1/vd9Ejlnho0QM38TUeVxuLnfH0Ozg8P5gpDrrvY3zy71Xo\n048Ht9Who5hJ7Kuccxqa0dQN53T/ZYN2sx2NLR5f07TFrXU4+zxKdjZQoXb/\nJfI4WV6ogqDI1NlkAh3pLsBh/2Om+rKD/dz8ISwhqfyEGG5VsrYgDaVxThNK\neT60ohiR4S/Rb1YpQjrQ2JUkhyAlC/YVyaByO0mkOnh1pn5t0RUlXEqh/qAf\nSCUChUqOvXYPG8r8U1EzGNA/WWOkMHxnCROLsd93lOBZSRSKdewVXS7yCYhX\nTD4OEhB0x+/dpGM/h2DFFkF9Ywya1RZ+/F2FhKWM10HEJ0TLe1zS2NBBSBny\nkiJu\r\n=iIyb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8388a9bf6.0","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/shape":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/button":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/typography":"8.0.0-canary.8388a9bf6.0","@material/icon-button":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.8388a9bf6.0_1595621665997_0.9767137628046625","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/snackbar","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f1ef6cf09731b618518d0759a3b0d904cd17150","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.ac405eae1.0.tgz","fileCount":40,"integrity":"sha512-IMU1qfrTppi8OhzDtH7D1sAtvtqTHe/WdVam6qlTDJw8Hj9hxD3c2SHAgvUMCYe1NualCqGn12f9TUpsL57KXQ==","signatures":[{"sig":"MEUCIQD8jVvLDfOOH25NzlWBliHG219/eZL8ALcTrp75RfS+OwIgHSUbpz72JqA1asJIlzbFF4HESOuwD5/QdzK+6Jh2pVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu3ICRA9TVsSAnZWagAAynIQAJ2XRl6wSzRjZ7FhqIWn\nL2NQU28re6oqhZBIY4trQUZEQkr3apQooOcbVILphUU1Epz0jdAVimfL2L0v\nONELnKUQ5cgeERPOLSMu4CYajJvAQm8nfT93NaUbEWzc4/4ppHuqpKMKoTiC\nEqJRVSdOpZ4Uh/Tov+U24xbqvlGsTWQA4XDfo0BUG4Zns/1ON6b5E/cmOy7j\n9e2tIUT45p4NznL+6+KcLSBOoVXF/zGC94mXHw/wl4CiU5lIQzUQ5Jpp9q7C\nks7QGgXxHL0TchV6YCMzs68e4zM+GOOhKYSECHpO1kTNKelAIQuRHnAgl0p9\nlL15S/c1SUft2LzRuZacve/qxaQxQNxQ8xlMEkeHOvTUHa/SldGla+lVhE/2\n+qE4oEm2yOiO19lrHHoEl9ZJWVIYPM94nrSspleOpait6sYhPbweQpLfrJn8\nm48a4r6GrqlQun57OLbBg357w8UcKO6XUkuwfiGbuM+Ua6+xDvkFrBVa0IAs\nAObpDmfNcRoSQjFyU9RLiCWSF4m4agqImmBZdVnyzJ8zxQPvlKsTbdqQzCPF\nJ4LFXBVxMuaI/niIVGAeyi60371I16KMG53TYKp8cGvGc9W2ibJ3yZjPXzlD\nfJME2RY7D9ipS6lP2jv6lTzhhdMNbELW79aV5KIBtwCzzmJYOYMjuErh2Lyc\nAJPH\r\n=TdG5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ac405eae1.0","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/shape":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/button":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/typography":"8.0.0-canary.ac405eae1.0","@material/icon-button":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.ac405eae1.0_1595862472102_0.8471476522348957","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/snackbar","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee9811f810164241be5ce154a3c152f66887e7af","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.75553837c.0.tgz","fileCount":40,"integrity":"sha512-9z7Z79ynpAxkTvJwYnpdfl5tZ7bGxELSA60NnAd/9CY8GTAlhaupoX7urNBBo1Nvm1GgW4qjwl4LMnd1fxBgDQ==","signatures":[{"sig":"MEQCIDsM0khpE/05jtTNwqZMhY8tWyffsP6ukEevMBYn65qdAiA9pLxzXuCHoKTC1IeCJUZ/wYzssBsD6ehhpkG7P8P5NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8fCRA9TVsSAnZWagAA/2kQAI2HSJ90q6N9v3LejU01\nz/3lz1qp/Fng321Zu2mqXBRHwUl4oz67rTuKFBTgBfEyHDxtbVZF+UfVB131\nnQyTWP8DyJhCmdRGfFnkl2x5tKBiwwHRcrkmP1EunYkyincqEOzpGtvJLn/5\nzqkqtdcIsnbuTEU0UNWhW+0cL47WduxeSKX8XqHMdb/22ObRV4c6sNyNZzJI\nQZaFFkMpREo5HwtStO1NyljLkUTpkwFGz9Kn+1bDQnRPM89Ir5ZKYSsCPGIs\n6UoQMeWzMIDuQ3rq292zuW8LOnLRe3Q8kRHCArSiWDpLjBIel4b9PNtSsnKt\nVN3R/HysAPSXM7PY/4sdH9Ji/gXH8cZYsNedw4S8w4XfkgDZfVGAsiPTTVv4\nW1PAxaiV90JTVjJrx975/giQztgdcxDpmRcsyv1SC5HN8e3DKfhpRH6KtXhW\n6SJUZNvGjnafyo36MOkgBNb1ri5Bdkk9uTzKjkQCRxBXDq1ze3WKBs1KzDBh\nAYE0kA9NgKhzaoE9FaGhFomxsjp7CWwURsflrUqACmgrKUCoBdaPayczCa+H\nadfB5eb/dzwMdeNe/z0UlQLUSqwjydBs2V1hDQAEbKQJv32ocLW14Cgx6vTB\npl+DrJrVnUFubDO+rHJU2RLj9wZEnsMe+zPRlbIkx1GqPUdYyBKCPkVCuH2r\ny/Qd\r\n=x+dg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75553837c.0","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/shape":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/button":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/typography":"8.0.0-canary.75553837c.0","@material/icon-button":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.75553837c.0_1595862815514_0.7027467949870623","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/snackbar","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95d42934efe05cc72fe0b4f6dfe7782258d4263","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":40,"integrity":"sha512-w54C2XCsXuS8a3WI5YaOD6T85eRXRaQjzVSE4F6uDMEK2aCywjhJtsLePnwvnjp4ob9thIEqBQOMDKwmF9VgJQ==","signatures":[{"sig":"MEUCIDjlwV3bUauc1US/yPby7Zn6rrx1dpBUrv8mzn41MFXnAiEAjgipjFxKQ1Kr4FtO8ZsG/UUY2KXijD0J2WKS+OQXiGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvUhCRA9TVsSAnZWagAAwlUP/jMhhEbUtRGOr1k/d2Zc\nmyBGnYLY7RPQ9crfsQ+If5ELrFK22p3TO9NwE4ExGUosBSuoZjG5+kL6S5DS\nt/xdfOVuuZiYPvldFf+uQihioYSqU4WzRgMSDBHbtHqgPcg443mQPh0bSrqF\n9L1faZhsmrjREo+4a+C6k5AASIck4yoFYHVo+Xli88greyW7tvcEuV8DZO7g\nIOEtwW97gYLj4BI3dkJGgBO4wxjxecFpqlP0X+4iVrOklo+TURhGsPHZvViH\n72r9sTGg6bbF9UYUnsKakNVGt8nIfi24Ce3HfK1vpZScuG29oCLGG8x2GrSG\nSCwvFrfFbIjROh+w5ARmyTq/NbwkxXFQ275mIKJ41wgx+4ijhL+B/vzOOZ6s\nQfgA1ki4gpT4ci4EoHL52jMWORG2YyS1VWra3Jj/9dEjzVGlKRXxTuPvOY8M\nS9Sbhpl5NqkwPbHsVL4YPMAibgFU8/YDwQwArfIVaoEF6DaJUBjJop9BnIZc\nOPuyUxwaCzHPABnZxrb8lTfmfa4wke+GCOK2LRa16T4Mccqjq1RHJqyBZiVe\najfE78anbvq6pInWA+TNaz/RuHZKqxfNQwEyWLUxnR0ZSf9Fo5pSGQXCHr3k\nJj7O3VTd1/MfG/S8vm0A8Z4+U2TrnvScjvLDgnYQRjpHLntVRZz0DjIDs2/A\ngQyw\r\n=hoko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/shape":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/button":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/typography":"8.0.0-canary.b96fbfc7a.0","@material/icon-button":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b96fbfc7a.0_1595864353297_0.27944159358131837","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/snackbar","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3f25c47a323401ed7d34154065df43b6918e49e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.61f1a8d85.0.tgz","fileCount":40,"integrity":"sha512-ONxkpuNiO6ZzZmRYGHPE5kZyU4R/fG/iBUBQHGCMpoI3a+zPQShbcojN3XWexGnXgbA9Qq+IVguF8WI/FT7ltw==","signatures":[{"sig":"MEYCIQD16DY+hdS80CFYeC+13BQUL6vGuFBeWrafoQmxLsciCwIhANwVU9gKOkca3xx2lTwnF/J0Tn126P0cT9kahzbXDf+N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvc+CRA9TVsSAnZWagAAoOsP/33h8dhUuPa1zjQJpcBN\nKD9H0xBlFKrnj7ioKls7p+SF4SA1mR55VrkvbqD3GMRlxjWy1IMnsEWXNS/i\nKnRcy2xlxg7GlkUARmZnt9iXooxft15TK3uC6AS1nnyxH6nRMekXUnGV/hZ/\nSWt0Y35mhYrY9bBIIZtyWaoh0JcjzEOIKdJcw0SdRyvIaQOkqzoefWQGkTqD\nydPPmbuV5Co47hIIdDK3MX4+YmkobRybQyBtwsdHRNaxF3wJ99iCA2ta6hft\n2XtXN+N3P4nqFQFoFncQO1yJt5EcKsGk0qnXyvXnhXvq8J+evwFwOLUl2yXU\nxV9kYy5AlLCIoQE8zza0gnYDKwsZY0N1X8RyxJ91w6kIvxDGHPvLXY8RgI05\nFktmdsq1cRBonGdUE2uS6ai4p1p4pcM/K/h6FWp46au+aEMeFJuUdxZFMwK0\nfdetISdtzQFfwrStihWhsUmgtBoKsUqhfQIWYq75Ny4pUtQX+vupplC07x90\n/i+z6Et1knVZu404VfB5GeSOgR5jXnEKPciTGc241DW+Txg0kN43/7D5AFRj\n4jW3hKBnZv0TbeTB7x1+3Xb20C52KZH/0zHdqZrsZd5uLTNhhY/0Sdc20Tvr\nmL61x6u5a/v/wosLZeN0d0wm3eTj+QFOp2Lo2WYwWvwD5ROXYtwg0l9EHIR9\nHG8b\r\n=5zmU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.61f1a8d85.0","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/shape":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/button":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/typography":"8.0.0-canary.61f1a8d85.0","@material/icon-button":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.61f1a8d85.0_1595864893736_0.2326969893973192","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/snackbar","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e1f28ed8f244f85a228c3523ef462df3857d1dd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.81dc33377.0.tgz","fileCount":40,"integrity":"sha512-mFQLzzdFWPlIbnKrymvkVbTXtOvWwFMSmDTNEoaxxD6Lc1P44HqvCwyJNDNM7F67WLELvDTEqNq9TJM6YNEv6g==","signatures":[{"sig":"MEQCIA3+Qx7ZTvb1jOS8i8jysAmmofVRXTxp7nHMDPo0yrt7AiBX4GwjNCJK9iwE4eS9lPm3kLpJWEJKJpzKEAwL5DR0cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvoWCRA9TVsSAnZWagAATOkP/0C32BKENOVT1771Th+5\nOVf01mJudW1f/eigaduxYUmxB4RmEHlsUrXXdBPfaS8BswwXi85UyjFqmgdC\nJS/3jmrqWoUV6KM3eyH8pT2XIsVI8lLvd3T/dJqrZTqzkaEzwu3XnYZhCFe8\njfSxLMvxAhH5v3+MWCy1BF2SthInRhlZvVU8bRKlRtIlTX+6YG0d1n0Bhya2\nXDGKMvTd8az66WLZdt7IO6TPFo9CsDNUum2a7QeDjNAOaoN6e33kp9TJiQWG\nXzGINmf3XjjbeEDVry3eY/v5KsUl9zCF1gNtJB45NBSFCe2z40mIv8hR4Qx+\nP0SwGCmudD/8aRilEWlapu9VB6VtkfbC3mq2JUcb1SLzQ1Ehixi7qq6lX0qF\n7j16nwbsbDhjU295mdsBUJul5uqmgnN6ybO9hsE1n6f5dD+kfnjaQJJP8Acu\neRYwAqIZWoIc7B2OlSGMNU2Jro6uWsdusZHekyT2aebUfZE1zEjISYIhBMVp\nNEKKpNTNLj4CNNU3/HpLvbrzFu75PTL5xdI/nyd+DxmBwmhA4hSXdnn6sSNM\nNMfaKgMdP9YB7pYB4XviPpLLp/8R7H826PfrPmijf3anV3YOLICz2cZQVlPK\nnIgvpiFG2GBRU+1aQHOq4MMHcU8DFvPaX55Sg+hyWttj7SifKz/iRuL8uUl/\nEiqH\r\n=DI8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.81dc33377.0","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/shape":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/button":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/typography":"8.0.0-canary.81dc33377.0","@material/icon-button":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.81dc33377.0_1595865621843_0.2961187837368624","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/snackbar","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45584cc5bf05fabce766d94ccbe20643ad8dd1b6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.ffd9ede58.0.tgz","fileCount":40,"integrity":"sha512-naWVO4pQXZwj+S4xedBNtNyEegoAZ3hHha7qvtLbGzEZk+eCj0bmuR8hwhg4pPKRKImS5NKl4M+PfYY0SLHHZA==","signatures":[{"sig":"MEUCIGtg9nlbD04MBFwI6Q2n6GljGMALoRkJSAYh2GxVHUEGAiEAqEeJf+cGbG0+uSqLxVVGfC0CjRIoTj59yLyUwo6+juU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHmCRA9TVsSAnZWagAALKgP/A5ktjpUJhmEyOCb7OgI\nc233I3VgjECCjcbZVb+g+Veq6xPXvn6abL43Yyfohc2jFLjgPFG9oZcBWw8h\nZciPVt+QiiIL0QCKhiask76gWoFtqcB32OScN2g9zyCF712Y8okWLPPedZa8\nL3q7VQNU3UBfLliaQZBYkb2LouJbNemiRRKdQRYvPUi/TxoBlvYPecZcLDyf\n0/WlPEGQbq9WSqXOglrZ9Hk97O5RnUfl+K2kY54ysLDe1oT0tbwto2lymvSc\nPg3h6xeZS4NFkI8G5TRGfYIS4QerCpxFmWOblzchheILpcvWkC3208xyXfFJ\n2c/DWplsneKgqa1TUwP2hhwSGLiWf93eRMVG7bMX7txFmL73fwMA2jKiRLJf\nRww4DwyD6HIFZNDyTw/RbYNuNAoqxUdw0Ce7/qCDb+7pnTja6G7LDrr9s4L2\nlw2k+Yq3U+Sg793mqxSCyg/78FRu+pqcst7c/Fg+koiwr15IkDxXJT0jX4Q6\n0l2Y6VUlRm3fkjyAugITWxWh6Yu2h7hI3YcWH5pxIaWEmUtBl+7taE/0p40Z\nBnUsGvaApDM/qyAKGwu3XswJCYrqoro8tz/dL+dyknB/dtIGg3FCrIP1zIWt\nirriy6vH49Tyfir2fPKfEnBsDYxqIjnUZ7dq8lMzsetSHOiAONZfSssGPxYZ\nlwG9\r\n=oqqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ffd9ede58.0","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/shape":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/button":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/typography":"8.0.0-canary.ffd9ede58.0","@material/icon-button":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.ffd9ede58.0_1595867621859_0.20446640758122503","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/snackbar","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e77eafca772f65f3b1709dd3a29edc8ccb0e5cfc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.52dc55acf.0.tgz","fileCount":40,"integrity":"sha512-sl1y0zKDwGoRbLpMk+OAWPKN5KABpDRClrxa2nedA0MUZLclqzAhUfUyRLu6UymWbnwgEy7fH6mk98A0yBliBA==","signatures":[{"sig":"MEQCIDz2rRNlopKVJHD3D9DwVO+c3PckuyOxLzrVrgMkPXh+AiBWJJoR4HkVmlZaCHkDCDYeuTZFuyAwtK8lxtPCSnf6iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":410115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwpSCRA9TVsSAnZWagAAea8QAINEzFXpudxaDAY78IDR\nvw1NRmvY911zvxxLQq/ZXwNp2n9hK1sDvH+9fxEBhAuxB8l0sHdw89nHwQGF\nFpoHsLUaKwVhEhw5Ae18JlQv2OFIA2aCwN1rKU+rLXPkHMVeGI4qMkFOHFpC\nB6xXkyz4whojavHXzGhICUkXwRA5MR0FY9SxSnhdcYQiHuVmHeuOhpWfG96n\nQStj6gPrZmb5znIkY3CwfNADnCd940/U7HVnVxtVMHR2j+Q3IIoaGjy0guUJ\n7Ezrxj6dZVM+h9LARet+X+Yqa3MQ2aDuAeeogIMSyH2PoifRAjrnnu5euP1t\n4CB5hv20PGENQWEna2/YQrApuh18Qn/FxLdeQF6B60fAzyMch7bfqhZs7Kxw\nzeUYmbB/NSjTPgkrcwxXlE7tHYrd5CThyKymiaM22vKki0O/+YSG7SDlVlKV\nxpIYhRMUGvDo4OQ3Gu7mZ3ATcXnbgVUSp/HRuSlLZTwiHHV0AeBuqwPprLng\nJFECPhhywd1s/DwV5memgkd4ZcTw1w0fmEc3JtKvuz9avHmeaA4PWDuwAUx7\nT4vg3NxxDhUavSSEHAax62EP0/VO17xzhPbo0UahUjDaFu7qq0XlsU7iG3ZQ\nUJSJd9SJNhIC+rrUVIScvp51zr7zXEFJ8bD5msO160X3LpNRwOu38XF72ViP\naXFt\r\n=yAmm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.52dc55acf.0","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/shape":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/button":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/typography":"8.0.0-canary.52dc55acf.0","@material/icon-button":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.52dc55acf.0_1595869777792_0.9083425966919978","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/snackbar","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"337b2c8ddfec410835509b686f21f0e3731224e4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d4274ff05.0.tgz","fileCount":40,"integrity":"sha512-ZkIJIDTVIsOeSDQkyAFw1Ntn45I979cHm4ZH5zlsOLspkWAbpmE/Ewsace+TM7Y1A+oX9WHOMaoZxp/XAyKZMw==","signatures":[{"sig":"MEYCIQDnfm19Pl0Il+Gjuu+vy931UV/pcC3Co0UTyk39ISQBDQIhAMcQbLNaqcMkSSNAycMXxZSU60ytsthtnSRKLTvIomZi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":410035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzCDCRA9TVsSAnZWagAA8JoP/2H/wy47w0Kvl1B9307t\n5j1AF9obNUvH5ImezKRObx7teWBfg0xX8CRhk+133gBcyc2xFerE9P0oXyD1\n9l4pk/Bwcu71h1Nh/Dv4T3MUcANdE1ivMcEkxFsn1HmtRX1y0TGfj4lPGrtU\nU018FqCocI+01gUkCa0vDSp455ZxmL4akgvPLM2fRqNj3sPnM3PekyDj7Vvy\nOSZjSzrczdG0T0JSTqCMkk7wd0iTM+ty9LDL3iWyWInLYhy3yoiqJjwwQmba\nPRhuRX6z9eyrzLW8I7wTx2Xuz9RgJAr51MlHMvGecgmE6yAIRZhwd7d5lE0R\nMTG8hleiEfjDcn6oNRPh9KPGLps1FGOKvgAgQP/KUT+/dGtAzdAzxZxrvvau\nExThh9Dua41SA8G+7/osWeTkwQ9Ro9IQXGzpgzzj1dX5beaMSWp3T8ogWebQ\nUvmjXX+oGv6iq+D/LFzsqIpe5j71ClWiGaHkNQIBcSY8wwF3wZW1YD2CyXHB\ngd4XDr+cbDXOb+06K14iXhvZnSn+SlsLSe77DP117QpYIn6kND/DtOnhTH4j\nSkNKso8KIy3pr0hXDX+x08YttApWlJy8hOdI+wlGqEz3eMnLJjcYYNCxClUg\nHisHhztPVNhFitgRR2+3Iexq6OjqwSZnRY/WDfNZKmp+qRhxp2Ie80/doRAk\nqMej\r\n=Gw02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4274ff05.0","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/shape":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/button":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/typography":"8.0.0-canary.d4274ff05.0","@material/icon-button":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d4274ff05.0_1595879555248_0.2818811998051869","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/snackbar","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c72e755f593ff497daa8c30255574bfdfa97708a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b82d0696d.0.tgz","fileCount":40,"integrity":"sha512-38zPeysHjWIBFBgS3LFE9y84Ggd4sM0kr3Wrc9IvnuEwNX9ehslgIKbm9wWDzb1m+QEWxvcUeeWW6EsrOZt/7g==","signatures":[{"sig":"MEYCIQDXBRnCakQD4dqL2XkyragBpp4FG+/wgZeZSN/nnCynHAIhAPCaDWks70/YUDfg3PE1WX0rzMYRfsrlc88qcTweJ4lh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":410035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzIUCRA9TVsSAnZWagAAnSoP/jpgu7OCbw1N6gsGmynx\nnszX526DMN8PBTPwVU5UgQ0MB+XtfzYdCnD3BYA6+wTuIaIsc13Q10wP3A/J\nkevbAiClD8WE83ZFV9fK+v35xnr9ciGOI8vosAd74y5zK+6NdzsJNCpwp+/b\nlGcYJw9l8Asro0iCIRiBhxOAfXVTvyyaFHQh22hxjpph6AVokux3G9L5kxcu\nZRVl6a0Si78lS3vceaKmUTJiBHCQvwVDEStWnfhjH8jJ9jrg0QSvM2CAUb4+\ny1KIJHnuBPwbvqa/Ztsog0ADEuMSPxUfoCVaM9bXuFybFmMqdx0Fy5xBcawb\nJgiYGl4yFdug4LDNwojxY2T2vPBnEZBdLCMoKaUglfH/pza1rvaASz1KvORA\naMOv/QbpuHN22xj+3wo4ogGqdygG+t5oEXztW5+rKWA5XU+OwEngZumB33Ku\nYHJc/QmP5YSNmv1wueEuLWV375dB5+VAiGyaQe0atWcCwiISOIpJts7ZKJI5\nyqM/jA0TDza9koFUEkMLbFn0mYFQXWyjd0lPhEFynIutx/zCdoWm3/j0iCwU\ngof3JGDS1tiR1oBAEx4Uz+tkcnP3BuaCweqtg5+bnmVPny9que2j+RQp2PXi\nEOLFZHxkAWcwF22XUXyWMHNs2c9QT6juHxGYh342pjrQU4UU37iA693xaa+m\ncXqV\r\n=Qh5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b82d0696d.0","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/shape":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/button":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/typography":"8.0.0-canary.b82d0696d.0","@material/icon-button":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b82d0696d.0_1595879955493_0.6875156044056199","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/snackbar","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9982093b3fce7610421874f3cee25391e074d961","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.c2852000d.0.tgz","fileCount":40,"integrity":"sha512-6lPWX5JC1a/udE069W2JlPv8ZgfB9IgAbSxThJj+9T9iuZ2ZsZHhNw7hrzC96l9dPhqnIfRSvsAJPG3twy/9XA==","signatures":[{"sig":"MEQCIE+GbKhGTzCxUmE57FZBZBAawKZIeV5WOOK+vLdAr/IMAiBNeQ8WKr5KLLcWYy9VQoHMTUhzh3t/lYDKKJnDg5qmcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":410035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0A8CRA9TVsSAnZWagAA994P/RSB8zIWooxoojijQIMn\n4PRAcNagc9qsd4PUBt/wpHv2xYc5T2IrqMsMQRAGRK9XP/cNTYJP300mJ8cJ\nuyuONiPGCUSZHB+9JcMx/VZXZBig+mE9f77Vhdcle8i3HsIYH/pVWDG5wqmD\n8JIHAwfnhaYMiS1by9enk/9wM5Iir1+ubS/aeIYcMjJWy8B8zZGk+uO4CKel\n6wHmHn4wFrqZyoLuphlEiHHYZTxFvr+e1ZujI9p3hktY4DSGPtf88l0BIpaE\nnP2mCFlJVcx7I01H2fWSTeiDafsQVyQ9XFRr3gWdgk56Z9zIctxEAshKitTc\nQIbSkLmuB9CAB7FqDK+q605t+WwSBn/gOP7pBEFoeDb6M3Cy3uywh7ZOlsmg\nii3SqUS2bTsOMeSRBLpOlaul0DB8YtoIquDVuQ6Q7gDRaa2nCTCtu+EAWZeU\nODiFMu/MWQ8WSq6LRqQTF1XAdZSUDPmnptkppezx5ZCf0JpCqDQoneJn61CH\ncoAHbe3BDxHeKU2cG2/wW+u607YPwLFq58Fm9OrBve7dFuehrIP3gT1IIscG\ncgbu07ND2n1K+fjbg0vgAWJDNZYSGsDge1qI0XTpX5maJ+QVRVewdJ+JETcv\nJql5+36ZoriB3AOAwh9va6sH0d6lLWqEhXKVS3Km5FhTuqVheNjz59ZJfKTC\nY7HJ\r\n=HemX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c2852000d.0","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/shape":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/button":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/typography":"8.0.0-canary.c2852000d.0","@material/icon-button":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.c2852000d.0_1595883579570_0.6489523142514491","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/snackbar","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fef62e07d00840c7438767c879a28d40acd8dd8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.f86f83f54.0.tgz","fileCount":40,"integrity":"sha512-NncK4OloHghI94bOHSZ6wP3le+K2cmmORB3Gg8m8TFZkQFWlWuTZOp8tIoif2PTujKRmlcFIhhWW/82ktKw8tg==","signatures":[{"sig":"MEUCIFOD8WAjdgvcwMqqB2Gdjv5pxDn4CeQID35Q0RxlYaa9AiEAp1nUPehAssTSNYuHUCTP6hO1Jtf504tC0qZevBw70XM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00/CRA9TVsSAnZWagAAu+0QAJbsQXitSnzS2uDOYzmU\nqD1kQ2SJRJh/zV8hQ2YNKI0aAJho9+pGZUe84loS0P7ynaYMI7T47swxM7Ws\n8g9P+PYtcCDGdD1E0kYSZwBMvIE7HLD1E2PIig49sTUuSJI8FzHQXHdv6TzX\noxFA/JPu761lRM3+EEg7hZL5ZZ8d8zPa+SNFSzd19rmUlcXesyLUVBFRZntN\nDpy71+hzUtucMxRWyoQ35x7AlJsqijuIxPRRw+Nb/VHhNR7IP8o2vURy06ff\njgyn75dMdIE1iV16sTSFT0WqdmRHFD7+m+a5Um0mMaVs7OyKhpynGqDv56ia\n09ep8kxiBEYhpg83PURRxUY0BeEyE6FQ8VQskDk0XRwX3HoJ0WQB1z3ofy0F\nx3Sykd2uBMh8sgH8P+Ut5HENE8c+sByjJc2WzGUccFx8J36EDXG9+kkF9djF\nD/XVM69tShp9YI9isYk+f/Iv0SafU5+KGpS4kwxrGGMAyDozvGNVvvpDRhR4\nrjsFIY1WOpEVdZF2HTMNDRzPsOoT5uwKVb2+pTXVJ+5CdLflkFUwvYbpQ1Lv\nuiHxchtQSyz/qDg7L5INzAal9XfSpgPFBuHqO1QrxVA4QwOyHFp792gVDM3F\nGYSurJDKssANQOc+iY66H6oD+sBNYFLB0Wu6WzAzVAs8bZo8yFiXX0JnzK4K\nXPAb\r\n=17nu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f86f83f54.0","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/shape":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/button":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/typography":"8.0.0-canary.f86f83f54.0","@material/icon-button":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.f86f83f54.0_1595886910990_0.33354629235852995","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/snackbar","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd6ab00df7712a7ff7536736d9dde1b4403bcc41","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.41eb1684c.0.tgz","fileCount":40,"integrity":"sha512-xH7XsL0BjcSqZrRGKECPaS+9nsmjm2BI8LeVCsQ+pn9prDv0ecgKPRPDFgGAtLxxmajsh/dgJQsXEF8ZkZkHFQ==","signatures":[{"sig":"MEQCIAo8RluhdSJJ7Mw/nWw8Dk6QVZBsDT/GTXgnD/xkjgpyAiBSNKRXpTulwAVlKBp2eGqmcTuRQhCRTeFSpQ2ikc4OVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGWnCRA9TVsSAnZWagAA1tYP+wf764dtrxvdA7h4LYCF\nrlyFnx7dOx19BVukVN+1RMbWI8CDojELQgIBveBjd/44UY3VJFiQ66XjSBO0\nC8fiz6KYSHSxC2zfNx6CykIEABzkv8YDzIY+y+iGGnaiKf+lMf9WqwAEMQHa\nPV328aaLllgF+Xo+yxVswDfZ9r03YOYR71qaqKyqENNLqmFfnr9PeMehDc1s\n+cnVMhvMaVpdMwCFqSq6CH6VywCcA9KkvZdUimUmjjafviOxeSPYPQIN7gm1\nSCGsY1C4sJg9GZPcE1SbwRK8N8Ap7uq47J6zx6GedYvvq39DEKzzpRU1oCK1\n5a4HKwd/+7ZRVoX+rzC1DcAesUOl/nvJf6HhC0zCjGZL0w0SGLbxX6ypa5Oq\nHD+aTvbimMRS/yoUwMO7vEVAzGPuBJOVaeRAN3ZspRZmfZjqWmVE9X4gjXym\nNPMkLE9zWG8xB0BGfk+N0SVgjl7sfv62Th8+dAah91zIxqgwmzHPXbX5rcTY\nzASx4WBT2fHNRC/YvZTPAWN4C7lUjr4bCWapWii4Xwdz4+E05HlRwylCX6RD\nfzrXVFMUWGvk0x0gyh+/I6jcW4Vc+KzaROqsWXmosaT/dsd1tekChGzYVomi\nNoSsl3kY8Rw9v1hS2ryCxDYEsLjYjpPi3gYm0515waQYULAU9WLjX08ZZGBX\nHFfj\r\n=3ugn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.41eb1684c.0","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/shape":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/button":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/typography":"8.0.0-canary.41eb1684c.0","@material/icon-button":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.41eb1684c.0_1595958695301_0.38816241692393594","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/snackbar","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3439685ea8d303cdb54562cedd584e848b8ad4c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.9e2f6c450.0.tgz","fileCount":40,"integrity":"sha512-qkpT5TzAJVN8eKTU2ZtXgTRKopz/hyIz6qbs9iHSdWRTbMsDSzPoKy+3GznnFYO7EHtjqPEZCwO3D5HYJG+WjQ==","signatures":[{"sig":"MEQCICTTtsKqZyCtDtVIXvBE9MGV5odpQK35JQlNb+ySO96gAiBII2+q550vXK2yFVifIRaEcUYToJPOojyR6+IVbwArTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKlaCRA9TVsSAnZWagAAAO4P/3h+wTji6edMnftOTO/T\n/WRCfznD3MMOHF4KXQiKXh4JBRVE4oMx/B+Ak+2rC54g6kPrt8DeCeki9aaJ\nFZUwvDUzvSjT6bBlZBR7FSm9WH/1sbDRWiF/FfUpZ2ANZW1MHFizFxGkE9EZ\nw/sFLQwH2jCxjsXa4vKjW3K6qT3AXGNDnnxOJUsKpaPCxpsfVTSX0UFraeco\nnQl2Jgn1U72gHsxcdQm6W8dw3L/L3EebV4I+40pMoMyKliGBKMTka42XK8lj\nnbi0/Nr8/ZKb+4zmBvye3UfVj9Mqps+XQRob/PfwYf7hgt11QX7aXymHK0fs\nx8l06t301JOfPoghObo7LP5kvvK8nu4+QMzcx+d4FoE7FRqbrLV0TXpUvTPj\n1vRsIKrhzDpbIgYXrc+nJhFSh45zIFnSTH6GX/xeDYgvDdwnLJQwcYa0yUt9\naPepwh8tbcXz0XC3LTipYDQT2elcjN7lI9/grDRd6AVfdt2Yq/GctwuzEOgw\n0R9mUNm+733caSZwDfZR9+lDsPMJYeoTGud+CsjejRiWeGtvswxtFGdojF+I\nEQMznyvonz0Uq3iPRICXUbUaGEeiltSnxaKgdCom46MI+wAP7zglE276OLNt\nkZ0hEi/V0NfX4z+4jbrglZhAPM/xCbMTFo7sduIamXqLLpuXcghrWZWhFlbx\nGZi8\r\n=Q5U9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9e2f6c450.0","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/shape":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/button":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/typography":"8.0.0-canary.9e2f6c450.0","@material/icon-button":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.9e2f6c450.0_1595976025962_0.16440699438869832","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/snackbar","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5c6775321b2abdc423450118eb95d9a81cf04da","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e6950b55a.0.tgz","fileCount":40,"integrity":"sha512-7urdp8RJC8jB2HjU6gz8U8r/+cvJhc6tki4+kHQEt4k8wTa0iiV1sRalzv94YsvJJrlXJVTgz6fC/sLUKCjdtQ==","signatures":[{"sig":"MEUCIERaVlOxxV9ksVlPDbQccR68NCaRD6OfPLz/5Lm/amqrAiEA54N2INuT9rAXoMe3HBgCihfCAe8AC532atpMhk5zrOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKyCCRA9TVsSAnZWagAAMQkQAJoVvLjQ8M4CAKIg7uFi\napV/iqGuGKJRCwjW6RRJLaYo1oMkqu2yKmoZWbDAM5yM52jgape8ANbYVQ0D\nIILMK3iFGevekIWE+mM53nxzm6TOtpXpc6JMD2Cx6+v8HiV1D+4uJZtv8hFn\nh5owhIq9kte8uQ3deDPKLyI0x8CkB18lOgy+l0Y+Q8iJsJqHThmaUjY8YbOs\nqVcjHRe4gI6KiGmYQy5vneLDKVT9TA0IvSrzxnf1Ux04YTLQEyP0YSi2OFr+\n+v6QOcne1MsXx0EzLG3Wn9F6V55Q3Bvi2gt0SOxFvzVm6s1upCpqNUKrg9k2\nlCUz+IJS5Ki6uu7pj52LgAvkOqU+FR3vcV7Qbn44k0yRbPfxvobmGcwCCIsH\nXgpELWDpvb8aYg1e0ELHtbIIq+OKmgr74RNsi8RQXnZ75YfeP7mcCtXXboFY\nNxyO45n7hx0aWST0WeE/g+doawXNQb7X9bXCmKYu6MfGShvJ8QYXw2NdJUmc\nAYB5Vz9hj6oX5gzOS2MvILxJUAVuJwwEXB1loi8GmhIPZxaxXQ5gonoc0StT\n6vz/Nt1oHYcc+AY5cg4+Iq3NtYo2RncRE1Om1fie15HyPgpJPHXpnl50AZaX\n98PwWQeo+7XAcmJhBOxoOO4dmjYSFIniqg9rsyW2LDxm0RA2D3zg412oS/2S\nuhNe\r\n=MGKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6950b55a.0","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/shape":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/button":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/typography":"8.0.0-canary.e6950b55a.0","@material/icon-button":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e6950b55a.0_1595976834252_0.366442624782334","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/snackbar","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"135794a8d800909a8b1bb8a0b7b2787862e8d371","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5e51ee38e.0.tgz","fileCount":40,"integrity":"sha512-uhMLpZUyNWma2vAu6q5mySw6yOMfifS2eJ1M0fSQyGNzt0mSU8cSkSu7zKvzifwHP+bSv8UYw2ChO8tiAY6ABw==","signatures":[{"sig":"MEQCIDyLtj74LHVKuNiiqzHR6xppeN29WNpkQ7Ogbz26QGP0AiADbN1+ICodtS4dYX/+243DM6utESFlLbqIks5aVsYCuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHzCRA9TVsSAnZWagAAmfIP/iNhXH9rhuQYBL0i1aZe\nx5XupulRFxLKOYCsePTw7C+9HD3K98nxGsmPUeap50ccxiV3FCtSpU20qw6k\nRQtDGIegGIKvcRydmPHQhVzoTgbJjLWATToXTOYXYN61pnP3fAJyR/62UQaJ\nTlU4gkTDgE0ua06osHRaZKGnQJzCfl6bma+VduNPt3R80h9mpcJvjSucktlj\nGlF4HQHhkZXsknhxC9vITEEWbxWLV/aG3IR0xglgE8S2GTYS0ccz8n0sUjVM\n7ZwlZhSA1ZJ1hw26VaGgwaEcd+yUQaWcWxhAgpPzkqBAs40ZvbecJEIu174/\nqb/J7LtnuUuA4y6rYVohFunbDpJYv5GqBn0sgUyz+hDIxlKikW9J7bEXZtjX\n61QkOJRlqcTb1FRQjh6zprlfHFCnKNI2pSZka9pxz4RN9bFR3Cj2tt+rde0R\n3S+JYoHsEqwT2yQg4oDz4OEtLbcJKyju33/xw6Q+hzERuIGviGRY0polCDJg\nCsn9d1mKitKURXQbe8b6q0iO8W3J/GcY1iPT4qVki4vVmEuD3B7V7X6hnT7p\nVZTrEVuyYN2pWOjpUxC51/aQnZvROw13gD7oO0gc2vUQXLP0bDmoiHVKswGS\nPA2BXr9jrF038VtoszxeVQ1RHxszmOcAMnFrtcwzjVgOCN6THQ0N3skEjkjj\nwwlt\r\n=CPd8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5e51ee38e.0","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/shape":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/button":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/typography":"8.0.0-canary.5e51ee38e.0","@material/icon-button":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5e51ee38e.0_1595978226691_0.35290056895655786","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/snackbar","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7568ee19f073fb60432faec0f176188719614462","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a3898ffcf.0.tgz","fileCount":40,"integrity":"sha512-TKcKM83UKZsCaWmDQFsaBQXLASo8DJIylsCnusNd9XQ7GpErvjZUgwEDOx67qoY9Rl2QWlbUYlRYa/CnNFD1Yw==","signatures":[{"sig":"MEQCIAF9PZ1azVflS9Obr1r91DgNDdoOWJeAlOCJ95vW53RrAiAdOsgV9RiUJahEhCK2P8cv8LqTpnCtQWSdtEdCIta4RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMTLCRA9TVsSAnZWagAAM+cQAIvbXuUPh21MUm5AMuTb\nSI2mGfZBPb9CT2xJX3KximkMO+CA3DLpnb9t9aRx5tqKjQiHgyNIg8kcMlb+\n55nd1nYvOj9TBtJ9RCQ9A2AZ6DLF1nUnaik/hFYaPDHSz8ISmjMUTFaeg86Y\n4kpyHUX+N2diyqBJC1FaUCDanD3T5GDdweE5Z2SjMo+Zr+m8Y/UR6u+0HT7Y\nITm9k1ae5YGAI1YP1Ww2//aFre1/YWsqkHDAqMf5KZ61tpeFKxxoeV7leBDH\nPAi+WUyptQSN6xlW4Bg6gSHWNjzI4xfsUyt/UaHBOi5c2GolMmuUsdmhwJgA\n64+CrRGcJgOKGw0ga8oUV+QbRtL31WXviUc3Aw2dZ8LbWYz2+9DTAB/ukAp+\nBGW6/mXcAZrhdm9r+pyPtZkmq4Rk1ZpYKn58wvtlFgInChfkiwNDOXr+MWqF\n3ItId6PH0O8SNuqxJTu1UcNX7v4bZuGqXWiLo+umUUVABvmuy1F1maRl9lQS\n0v/rL5toblpU88qFB2SqpoqnJj2zlkj4FtZEgZ/8ZWLreRnbE3ginNvQaFtY\ntZkSnwrtKuPThZyh/5ny/VHjBhtoEaZnDjIcFAgW7VBxvHXbINhbfyqb38w5\nq+Sq038k4j6D0gkT2G2ZIIvIilCd5s8KxIoPbQ8EUnh7gKu0IovQKEHOdbU4\nc1+v\r\n=EpdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3898ffcf.0","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/shape":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/button":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/typography":"8.0.0-canary.a3898ffcf.0","@material/icon-button":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a3898ffcf.0_1595983051045_0.8943108418833228","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/snackbar","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eb341fb1d51c7a01a8277b7bcbaf43d5b528c20","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":40,"integrity":"sha512-P2WedDIpNnFKQPjlOK4EoXuWO/Z4k4Aog4ndVSbQ693zW4WIxxnrHLUCyGtAF1t40uh1wLDz77Pn1KdfwiSXOA==","signatures":[{"sig":"MEYCIQDCR9h48SGseBB3w5FAgn7ySQ4mGxlBZ+cbJxUlSPtE1QIhAN4w09mfiEnMFqrvoa9M2DlwGwdB1nAzLHsA5bBMhb5K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMfOCRA9TVsSAnZWagAAdOYP/RXHC520cVfn8NphRR8k\nKVs/Jp6SyuJKSbYUO9ZqlIHIUPIsyo/+E6VP9i6U0V4MJEYqTfnOVec+O2Kt\n4PgEw7WMH0WjmTJjTvwAZGb2kOKn/LWQEPMqE9GFQGtCAeSA799M0hFw8qDV\nkwDvcdnBisuM+EiwoCu1PWk2y34mVKaOLbq/9lyZJLAo1jK7TFX2mp6ZZxA+\nWeevcJSKQZpPKGAb/BcOfdTDvfJBRTwRIzjVxomSiU1of9TU85MrofmAyprp\nPB7Gtx9LyWo/rHPqhdua0RwjFlN1rqrQdrxL+EO5TPn1cFYNmz4jWeDCm7Ho\nULQBvB3zhZPuN47pI0Zoc5pqQd/Pks1MFyHgoLeys1axGMz1j2PEbS/x8tsV\nXxiVrcWfXDEYs/0XJXNBVznutDfj+DXkSSxc3w6fePi6IcBIkzpuAyY+95gT\nNb8tNp7OIzchgbwJOFweu7hJ4AUEr5V37ylJOY8oF8tQXOWZiOD3ANfBZ+aS\nssM5gAUBfAy00sYmJvMKk/YjBYGaSpq69BSRczpVuGo/xA/VtOl9XzOLUA6V\n1+jVurW8MuLsKAbeNDvaxcrzWB/RVrbg77C1Cy8CFqLbQgDTF7prejB/1BqJ\nLQPfj56Wa65vPavpquWk7ryORccwkd9iXSVEvis4xI964xUrDj67LS9r2A9t\nR8Rm\r\n=ZEhq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/shape":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/button":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/typography":"8.0.0-canary.bc5cc6c96.0","@material/icon-button":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.bc5cc6c96.0_1595983822508_0.12070448196196781","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/snackbar","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aecdf2d60666fffe312fa6fcc767aa581c6d92ee","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.9bdeaf928.0.tgz","fileCount":40,"integrity":"sha512-WtXYRfjCwb1cJnVp0lZFuNkpXHz/gcNIxetS18USNSd3fvXQ4NIwcBKMROMf4Y2uLA5I0d99q2DNvGMKQF5jaQ==","signatures":[{"sig":"MEQCIA2tZahNpn83qaUgwWyMbqgVYIyT/qqRUhe4v9M57FSJAiBn8UmbSE9cOnJtfwWPox6STWXLwfdVb/sHhgrW3BKFjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM80CRA9TVsSAnZWagAAQuwP/2wFybHgBdjFDbmUvLiC\nVEHTt6M5QJa+kn4eWBS+f3WmFrZVlHINAvyXPf6tQ5JXotFDw6fC1GgqmLVj\nEmtmqyaTHOIaKkVYVb9EbuoMEc1hWVU6leOsHxMwgkoKAqzNw7GvN9rY+43F\nsKsJ63mJxUFeT44YS67EKEzH13f929mcvtZzOMBfrUQzTnnay1QKvL2OhNqI\n9lhHYiCWHZlUGWqKB2lRfmj+feDi9cXeVzPZWI6Gddb0ZHFOTCWzbOOj4/LK\n9HrMMmu35PDNrblORN1EWL2JNaSZKZd3wbn0jgO3N47HcCnhPq6h0BpI64FB\nPI/7LxPCXdbvlXlga0k0TZNXntP7M7eSuCnW6JbJfOGWwTcM0N8wNrtVWYvb\n1laCM4DvB8xzATudZ86VlojQn8cJmz5nLc0ISbSVL/Z3AXoGOHZfv4nASb9p\ny62QlJUFqvCa+OYIyPGjKUS/Wnnb8gN0I+9j2oPRm/xxsxxo+4JtGPUXgEzS\n23SyQp6IPxlY8CY/14pmw//uzTLK1iWHJ91xkblLcpUGn/oEvp8MgrX7IBwg\nSqobladRiGpy3L/z0yiKp+6FmubdrLeXoeiS9Mpm9iu0xGWfRUY9dAHgW3Ot\nZOFjirqkN8md7IsGrKyInK4NaipuGUfaCMSOl/IKeemvrwRbFYGdY9/OvRW7\nECF1\r\n=lZzz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9bdeaf928.0","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/shape":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/button":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/typography":"8.0.0-canary.9bdeaf928.0","@material/icon-button":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.9bdeaf928.0_1595985715764_0.6405313557447561","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/snackbar","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6084bd004a41e9061deb03138292e43f46dbfeaa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":40,"integrity":"sha512-a2jh8xSC35mi+zITtkC0NbC4vXWoJG1Ft3t2p6F7+2AAzjXqEnmIB9RF8foNWh7iwWruNnPX9CJkXcZx1k8iQQ==","signatures":[{"sig":"MEYCIQCqzDlRRYLAFjGBoxghoYcnyxYGgExfOUBcXYNSK2EJZgIhAPixVudjao8bIBox6r4V95yEZ1yNOYw5v4c91qIdmyCb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINKLCRA9TVsSAnZWagAAGToP+gIY+2kPGiidZg6JCF2/\nQCRbz13cBdm9tSyl8W2sOM0V5gGLSy9mTIaezTNRi9Py6nzokPFGSU3bLM10\nHErupkhf2oc9gnREn1DGpFXV1G7/LydkLhkJ4D/5rM7GLjb2ESbkzwIFIpHJ\n3gSdMz+TmrM+x1gd+YnhcaA0bAaVQtYHtuGXLsEk0BHttAg4ZDxSI103eEYX\n+C1i1FPgbqhe2qyiMdDw140l8g0PGRmRhoyCJEhjXN+EYZlJLhOA6fV2rGkc\nVIF8AizbtAOgly4J3SLRiHiI9az1NpeRuPiMlrrYmlNZAjoDCv/cRydkNe+b\n8+8tl24Et3BkGP4SHVEt/FO2W4UgodJ53Tl+/rf3qQujZ8Bh9rLq//9VsCvI\nq7nHF7x/GwBEs2s1VwJUbAr5w63FuDiq47mdYU48G/z8OZo9H0wTKeOVW2wB\n01rMFIoy6gMKnaNyxXvhNSL6u3PtcSH5s6uxgBzEjz9XaFgmicDO0gYagBKC\naFSEXarcZnuzM1SFpZQHq71PkOrzvHcwdTnRrP4kmNzzgST4/Omu5t7NX1R0\nt0427+XVVeH6cS1dCYG+7luwpk4UBZfJbPsHKl3hDBGMvrzJFWHDqAevoiIZ\nSFQTkE0lxjRGD/972J9M4VzaV7idUiElkSRkVLt/B7yXR532G3TJnnRvccWu\nhosf\r\n=0qq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/shape":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/button":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/typography":"8.0.0-canary.fde2c1f9d.0","@material/icon-button":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fde2c1f9d.0_1595986571419_0.6343677192219608","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/snackbar","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13fb7c53318b54647aaaae229422e88f44b2bd4a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.6b3876d5d.0.tgz","fileCount":40,"integrity":"sha512-fJahpgakVbCJALJoRDjsujFk81b27L6CI200TEHTwwLq17zbMaOwgcW1akoq2bV884KzHlSu4yX9HwUp7fkSew==","signatures":[{"sig":"MEUCIEV5yPkYS7zxiEtVzcOzqitt+g3GBTz0/C516p0erA8cAiEAoGT2x75znB8vRuhIR9nvpXZWcYimwQylPIkfqERwIvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNuCRA9TVsSAnZWagAArqIP/2hJwQZfDqyHw8u65tKT\nSgWrPv9lryM/JUpsV3vqpYUAv4WyokyuQ1BMMnWip6uN3pbIbP5lqGr23Xdh\nBmQXe7U9gPbwDJ6lKGRetV/dv7nnPCKToCCziTuikHwe4LbjNuRnHrrhDiCE\nFaxOasE59xDgvTWZl6cgixBSQ4vts4AzLcoENh/J14W7Hu7eONScYxNOhe0I\nzMqqiX1IKR+I1QtsIZ0RIdtopoa6j3j6BkjkhMh9x7Rt46tATfzm+Wy8Ms2p\nCbdKWAQjBxRBDg/dZzX4Mpx0XqtLL8NExMPO2NzOh6NOtmWnT0pg3fRmAsHE\ntq4vqtrdiVatgEOlyPQsA3bWsR23Nw/9o7/Yhs6pJgTyz1+UUhVCbt0GLZ5M\nPWG5qDshmQEb/BGST4Ocd7zIPMtCuhNi2B/fPY+/BRIlbeHmXWg7DOv6t1Ly\naZy5oVYQHIRcaEmQXcNeWkIg0/+8Bhh5FdQUoa6SArt8DYGCTvlNpelPV5hE\nXG5/zAbUUID6g15ACsBiF5igelFtIrzGMKx+NqIcUdU35I7ObVcmEa+R6dEY\nEFyQAIo1Q+60eEOaLZ3bU2bzqCHS6etY4ySohF4dNMWES7VKv9nUOzasLrld\nB6Vpr5Qreh8/SBVU/DjCSw27Z5yNRQlYjNNGvh3+NaxL1KgiH1gj51N3S1KT\npsMl\r\n=yxYm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6b3876d5d.0","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/shape":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/button":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/typography":"8.0.0-canary.6b3876d5d.0","@material/icon-button":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.6b3876d5d.0_1595986798316_0.5690755967790824","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/snackbar","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb1a60078e27ebcc36a32076258593aab8795af6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.30ce17873.0.tgz","fileCount":40,"integrity":"sha512-BLMvRM3SjT+YoY4F5SmDXEClTzosE6gadDJiDBZhZbtzRLtYhb9U4bx37rDYJKum6UfZBo4aZIrVCrC8miKDrQ==","signatures":[{"sig":"MEYCIQDrQFmQpyQrPXvk9Cjo5fFTFSw+LKgp4R1tqgXcV8KBuQIhAKvLQfTVonwhiymyYvLDn9AlJRjmlHoSmi6kO/krmumO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7eCRA9TVsSAnZWagAA4nAP/jYkX2W2fS+0nWOY8cgO\nTfjP/0W4PVZYazWRp9sv0m+85Jxe+TS3o5V/Ty/OfS9sSUM20JflW0JQ6a4m\nWHLS69oVnvp3O1SGalkpePbo2b1YdOSZg89OmC0lmgEzRQJAmAFtckTaqxeO\n2nmPV8pZok8bvuDnvIF5QtTBEnWqbmfx6LOREQ9MAkBQ0WNMmAnIm6d3HwJR\n67+LkP6L4ZhvDXHiY9Ut/a3EEJSwLRrNpjHgmWsY46PK6mXh++jvBRF9Byf7\nkNK9iyduU37fjePVldI87lijmCvVDzJ22eJ9GPc6xsv52rx+bjAYgkZiOqR9\nBMeMIcc1OGeinvNUA3wbIf1S3m4klFUhOo2NEZyPVtziZT6JWV8Rq6Bq5rIa\nd+MJ2ywo4Loo3jWwPQNgucFDDQm1mvQ8Qc205HyaExXMjW8nKs5P09xWqVvs\nt0n8Cd4BFZppwiDbSKtKcnWuNLeK9RMCNzS4V51KUSQLkXq2K9+6LJJ4zxSt\n28SoDZbZRELNcNa67IAJRKVO2m+LBt9pU9jJ3dbUsxNyzbW6n2hvo04BIeTi\nDak6Fjv+IaH8oAUM2AcM0BknOrSzEkrMLb3MJ+nEfKGX4XHiF7FDUjSINzJR\na5Y/tMendOLZeEXG0U9lM3qpMfIlsT8mCy9/vCKIo6Kg2cb/yxpD9SIU4AFp\npR+X\r\n=dg/3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.30ce17873.0","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/shape":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/button":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/typography":"8.0.0-canary.30ce17873.0","@material/icon-button":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.30ce17873.0_1596042973596_0.68450009348118","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/snackbar","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41e3d980adab94cd1438070e9a85222ebc882ece","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":40,"integrity":"sha512-GMk2VslRkvITHGGcmjs6gc0wshvsbPv3d0NrrCGPwyfTX0hby4S3qUsNP0Hyq3SaX972wzI+nX9zWmj/iEAL2w==","signatures":[{"sig":"MEUCIQDUf2UGfj+ykPH87uubwrr5E6hTjcmCsfCLAH9jxzYwvQIgATjDVBIJxyUPR8KiMMQbY/h6dm/riNUV7/zTTl6N4Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb9eCRA9TVsSAnZWagAARrUP/2g4mmWqzoPLaXoYKAdC\nnYqO5wZq5bI8z39F8vCSkSEFVmcdYFxuIggcnhXki8Q7BKm5BelNmdKU0cRv\nZ4D7V2h/OLp6hGH9//OfsHKinwXNyPXoZZnpfkjZfZm493csfR3T0BUlZljG\nr6YOajac3y1+LOCfjf8H4j3MGjKYqm0EpxyDXzvxVnvugfNJt8Tv2K1H+L+Q\n5LwXsZulecY64aWXBshR4Y3PpO1h4aQWgdB0TTrHWUb091n+1kMS4xnGMG5g\nxFE5gpKXnWfaLRZ/0a4Mcy/WnT0hywLJYJxqMclv5Vlerg9qH5lxl1IGFYDC\nerG0t5MIAv1GXcy3R1nkQ7STgXdb/q7OTMSPKt/MxUzspKVqHY8Q7zxjFHNx\neldi03RXvqQVL1YDrWYHB2dAwOg+jKq21L0POm54h8NEIiQT6YQuh7XKQ6KH\nNAV4An3bHC4XxlGpci9om40UuUxnM/QqlaggIdzs9hgN1ZA7ehUKvHvvnN0J\ncUM4E0V94KvVYwZcpqek/IdudcdmadfoUk2rh+5PMbaJfNa6UFmzJNWVLZWC\n9KpTRxpX8TwIMTa0EVT+78RIaQATnXlcSZROi6qA+UwYlvPIC6zcPN0ICNXU\nX65Jws0Dm5fFYxQbkHw40PSjDLoNI/wYChqeLaCrbGaMWbqp5KCoUeXIvjBU\nDEH0\r\n=PJCJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/shape":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/button":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/typography":"8.0.0-canary.f6bb43bf0.0","@material/icon-button":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.f6bb43bf0.0_1596047197933_0.36054671311993625","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/snackbar","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"800c9c93c3591f8c477624e35dc1f9250dc5222b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.6af75f6ab.0.tgz","fileCount":40,"integrity":"sha512-tEfvREja1UhqBHgIZrLnJQwdipPa/s217lsZb3BS3ATeuYjzMGPtW4u8h71rwRDEsVWDt//QoeN0ZgIMHV55Yg==","signatures":[{"sig":"MEUCIQDrjYBpNDYrRkeTm4ubYozmgiww0oDtlg/zpIfhkuqF/AIgPKCagZuyUGsV7E9gj+rOAswzoyRbVq4moxGLFNOq0wQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg4cCRA9TVsSAnZWagAAAroQAIQe3WfDK8GpTwTHVUff\niPedRnXd+ha4WJDCNieYRgZUnCRa3eKbKerPtNxoaK59DPF33ttQpJ0slH9P\nRoXYRtizDPKn3Lt53G4CBXgFMYxfrB8KYKNdYogjM/AlhxxflshTZ2Ilf4HQ\nO+tDb+Aabmgn2BhG+uJWl+TWMyb4QwqhHXlWH8cjvfC70WbVEdP800WHK5lF\nqBEscZkDr21QyXvel/9t7eaiEzOlV63xlYzKhyCAI5QzAY/2GwTJYhUI9u6R\nzWUB4+r9V/d7yD0MWxp0a8HsIjCJCs2H01UfdOTI0+XOR8rHft4rw84ukyNs\naAOOxpYehSBMzOl5e5O05BmtIK23XATSLwFfN0HRgEHEiJQkG3Jy66d9w0ez\nM3t3sE0BhOgJKQ4fejdFkYDPStbKxv2lKtK0wT3X8KIgajLRVyHb7aQgObVS\n23HUcSiJh9cNIGY6Io74x/29wVfudwylnKrHEz+CqsBPqvFNT+9W6CkY5ejo\nYzBMV5yvJDaCTZDquop/F+jcTFlSBLrZ8+0DhW9lVfvmBSv3cSQshEx5C6Vv\nAJqsN8ZwBawX2wy9h38ny/CZyssv1SfCAbP43V9FCRG6nIKCoho/RKYWId1g\nREHAVUJehSOw/Uq2zjsJb1RFDBGeoXHuSQBRXAN94dwsK0QK5vPaG85yvYu6\nl8Pk\r\n=7PD7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6af75f6ab.0","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/shape":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/button":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/typography":"8.0.0-canary.6af75f6ab.0","@material/icon-button":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.6af75f6ab.0_1596067355928_0.9328112972633074","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/snackbar","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9efb62ef2e86965e3b8d0b904858ea13a80b25a2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.42d7a65aa.0.tgz","fileCount":40,"integrity":"sha512-vefAqHZsN+sJjBMZTyNym4nJ5pSF1Pbl0ewSJiiswD9RO095/j6EVe9oiBaPnXjXn5R/8GqLYM8sh9Jw67/hdQ==","signatures":[{"sig":"MEUCIQDl/mwsWW2J2ZhcRdOAHEBGrHV4zDyuyD8QAwwIjlYG8AIgN9euhArKaTeYNEt2ofC0thRqYsND+qYwhS7eeUuhXec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhBFCRA9TVsSAnZWagAABmUP/iZNDfiyPt3cf2US6jTP\nmUt4tfqLWh6np+ePOzUvmB3Ou/T4bGgq2qRDJbXp1MKOIb/fILUhb9MnEJ/p\nhtBW+DzK+QtniVsSEdMrDyDv5cizWJ8xaG7bAPPQV0HfzWvmilX3ZQEfSbfX\nxbCs/VTChfEpXCFnr17RtwbJVE/jW8Azr6n4dXPVCSP2V/cRlY3FxLnqWkTY\nGrECt5jBIRjg4ZWUJutePjGX+v/KdAjQcPhcioZlHtIjVyNrIFGjTllajDvS\n4rT60Gx9YwKbM2jJSa6hy5wEkEylgo1rL3TpPs8H+rCLsz5f2LSrR8OUhnCi\nHp7PPxNzbM3re53CZlQcTINxzcJf6pEhAyVVjTlaPcRoMPhJYIxu8VfyWCvk\nF0juItUOb9LKULxUBS8U/tV+sXfwVt/3UXS1X/6//Z1FyBQVrQVLktd2mRYx\nS2pgTzf1ZOgowwT5iPZ6EJGeVbIuBC8yGdqje4zqC7baqfZ1SnjJz4gBIaxk\n7NddE8lVv0gWdJPhHy3QQBiAWIi1bSVKcafj0i/pJ5KWiinvfjkChjOmFs3m\n5IND08jnSPhcBRkkZa7ufEFbP6PpC09WP7EKf9hn9HTSCeDXdfPVfuqpRhn5\n9s5k8IEk6E1Cd5667Y2N81HHbyNaJqQZM0YhTkwadtxTh4Vx+Sj//+sCJxxY\nmq1s\r\n=ki6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.42d7a65aa.0","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/shape":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/button":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/typography":"8.0.0-canary.42d7a65aa.0","@material/icon-button":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.42d7a65aa.0_1596067909172_0.892028420900717","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/snackbar","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bfeaa875443ac23da4966b3ed6561f7d2e83b7b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.85abdabb7.0.tgz","fileCount":40,"integrity":"sha512-lKrjHF8MMWb9BqnN2kn6hm6X1S3lPCQyEP2PVtMWyo7H4TL4+XZ4sgt/pK3Jt6ES9suymeFMxZs/pSvIi+I6wA==","signatures":[{"sig":"MEYCIQC49027Ux5QcE7LRy8X6Z+betvJOOMspMjooQtPdLxt4AIhAK3n5feo0AVX/BnmUNy9uKhSBknaphEMUelrP2x4Q6I3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFZCRA9TVsSAnZWagAAjr8P/0lzbRQ596ko54onHBCt\nZpompyLjb3z9IuxilAzDHGEFefGWDLloSRZUTq+7xb5NOTwCe2pzd7PVtEra\nN+PD0+ZkTSbJoLKBSJ6oYMC7etmm9xyxL/foS9VO+7IAeChue8z/D7r0tLps\nKdBrEqdoSR5ooZFfmqE34uLXdViY9P3phuSsrQA7czLct32IljCbpcxyaCkz\nRuasxzb8pD1pJDNUiiBQ1+WCK+LsXXw0XtmVHT/HXSGeNoK8rMGBIx5AHzYh\nLvn+xNm3UwmIRDtS/H0mehvSa/iP/EZPSANsADs0Wj/G9RE45Mo+k66Ajyty\n0214x5ImlmR4C+SiSbe4Xr11bjMSwmWpouSwRlenUEHAnegp2YSEpO+Fyd2z\nVmOz7isMVXqa8UPG03kVP4V1AdSDoTgmLT8/6MW+qPbcjG1a6TjxYyb0FBgI\np8r65V5nGjn4AlTISLJE44fvUMngTZjaqJz16W2r9ytrI6eeTpAvqAOKuzKP\nFCr46yWGNohCHRCWAzizGPUiuvJxjEzeGiQvCJXuMSB1Z2s4gh74DIWQswYJ\nlfsEnN4sx4Kvpl+ZuIAhDrCbr2EJsIA6hqh2ffS0VT9nxQZx5re4ARFLjg91\nKl94jvJ2L9MdSTehNXm6KeI9Yi3/t9X3Zs2JNQuGo3pYEYgUV6cHeRedlOyp\nUUOF\r\n=FcZ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85abdabb7.0","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/shape":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/button":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/typography":"8.0.0-canary.85abdabb7.0","@material/icon-button":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.85abdabb7.0_1596068185169_0.0006283809874381152","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/snackbar","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"126c76584cc11ac08fbb64f46b0b6d714ee39679","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.49fb20ca3.0.tgz","fileCount":40,"integrity":"sha512-G/dFwpyq2almVmSiuS/EjhGOJ2S2hx2yCYyfqlhqhHUaDh2N1W8Z74hdVoepyYgZsYpmOAQvX6jqBdFdVbDUjw==","signatures":[{"sig":"MEQCIA7TNQrWhTLv9CUjXXFZP+R49rZokqwK3O22fFy9I99ZAiB0q3yXM3BbCFQ/TtF+Lvb16/nQXESntf0gYqhlkOF2vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiJOCRA9TVsSAnZWagAAJm0P/Aw9O1r18vaLyCKy/d34\nV1BHKF04loMSd2j+XWdVwU7iconfxv3Ln1UpOpyK3XcitHJr6qyVIrCpVbTf\npMmTqOw/2bu5n+HYmDrNZ1La9vvi7dV4uaTDG/1HhBQBs1B9eetggrzQxeC7\nW2mRuCwfnkHL4cv2hzH5sRVhh3goWdNutQj3DsaHtRHTaq+etihsI7rGzq9D\nO7dbvOTqLBXPUHovgyED4D4X3xQsThfwc24qA9nGyslmQMlk0P+7BtiZec4r\n5N3MZZqun/Wxq5/xi6iB/N7eKZGoObL1jQB2QfbwQIOTTZP1rpR6f5CM+28M\ncmEIM7DCtQ2Ea8WoPRpynZTn2nVnHgc0ViV2MlbT3MI/uEGIUeJX3kOZt0aC\nlRV7NyfafNdvJUoIGrnO33xyT/xpGZpmkUkumk6sCgSaBs60dWhqpEYyOp6s\naYVH8sR/qHdjIZDG+DknOU3ksZaV3xajoafnafgl306wSL0f2nReHInKgEp6\n4H8xjzJ3z1ixnQkEi/hrPDB3UipT9rCC3uJYPH4MNL1XPStjs5bksPRS62F8\nVFliO/6wHEIwa5rcHMLgPakISuMz3rLlXpx23ZOxaHvjSTWD/qpueaOKxH35\n2LzT+hPiBU3d/BVjG3at5Gj4BrYRtU7iFcnPyamjMHsTtERKXgC4NaJznoSs\nNjBI\r\n=zavf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.49fb20ca3.0","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/shape":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/button":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/typography":"8.0.0-canary.49fb20ca3.0","@material/icon-button":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.49fb20ca3.0_1596072526149_0.7056346708542081","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/snackbar","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fded39929baf8a925f78a1b263ff099772da02cd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.962d4abbb.0.tgz","fileCount":40,"integrity":"sha512-4WgyGWc0UqcRQCzjTP5+ROBgoz2LFtLfK42hJNq4xi3lUaLxwutGl2qrvJnoNpETmZ7usdzMZex3u/7ow/e9YQ==","signatures":[{"sig":"MEQCIFRvo2Nb80f0TBBBDnZC+fNwk2U5TyuAw4ylDn763EYDAiB2iM70QyTvvo00OL1WBnTnWiFhMNYKuBSgjIh8dk//xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEqCRA9TVsSAnZWagAA3UAP/22wmTi/sMU2i7VXELIA\nuONMV0kGh5Mn4+iJFn0pZsGG5DNp32i9wqYk59XL/36FIcCqUhRhQ8nnZ0Ky\nPHbtsf2ahazIyExIpYY6DZ8XbCRnno80S/Fwma5JlbEE0UeXThiNmuWypyfo\nG2KqFBF969nR6w3mK1ZFAYFjLvjl1RY+U6gNK1bBMNiFINEjnnMCWfSB09A3\nc6Z2FLP+9/jOMJ38YaIH5GrA5FmzGIy7PpG6j3N7pqAhGTDc9WNCeY9SDBpa\nVb0MRuiUgNhHmPeXCy0ruSfCkQsDatVw/OvVu1N93XWkEeyOZjdbSZj81wFI\nIVmKokeLIkZq5Nh+GgN8kIBi5acIwOPQbrv7+MWNhyIY5VDS3B9cFR+YJYFQ\nBRDoJmyoFsHAqgEZCGhEeWsK2GrHfxp5OnBcHwSaTelxu4Jaoj/tLT4V3xTn\nNtniLfEyex8PcBsQ9dMYTmyeP5RFxQpNFcTCGu4yBQq4nZV95hrTfiLoXcNB\neRTPTOUkdbfA/0D2Zs8xB89ypsv/v+QhG3rZqSprFoZkfZAc0KI1QDgp67G4\nWVyfUm8X2LW234AsFJ3iLgN2ow5FwVPdEw7pFuhJ38BJXrabUjB1pRfjMJZX\ndzDJ3W7Xp16VSAGJmZbMz/Z2e6i+a+ViwClC/zSx93WYOq/2hvDtSOR3t+k+\nIiNv\r\n=RvKJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.962d4abbb.0","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/shape":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/button":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/typography":"8.0.0-canary.962d4abbb.0","@material/icon-button":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.962d4abbb.0_1596125481884_0.5849959289099809","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/snackbar","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db07ddac582aea34706d7e28a4f4f55a4cda4f34","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2fcee40cb.0.tgz","fileCount":40,"integrity":"sha512-jPXMXmAx5nFrSv9Xluw7d3debDFlaGnNwjCdQW02FzWokkdsMLVDRZES/5Gz65Ar05PZdNOcYknP1CCTmjENFQ==","signatures":[{"sig":"MEUCIFEvMoeDHxCY6R2l4WtZTRSUwzEt8lNXiPmn1Ave5LkOAiEAlZYifF405a7Cd6FgvS7qNyl9L5kNNP8fbJjBELPGXXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHZCRA9TVsSAnZWagAAU2kP/A10qR8vcidaYpCoHEhY\ngNKNBj0yGK3vcjYIoGPzbgmrQuwdwaOE9erg5hW2HZ3Wkg01Wkzl3Ea62hJz\nIEq64oIBhytCgNWjFHR9231bKngjOh5iOrKC1vDKopYVzzUTJQFutcoc1IE7\nH4LTtZmqCQDv6rkBOS9wCHJTroI5EBhVcRiWb4yrYCYZNrEs9VVkeNSBYLhi\npUSicM2BYjW9ijK/79t4VIZunubuoQKnLTHTeuZmZoRlvjdq+XhZFBDb103l\nh/EbnMAeLxaJtEZDigScvEZjYMAS9DIHXt4Hv4H0ZYCrR+qk3iGMGqF7e7UJ\nCc6DM6z4svwfUFw1ImXqqtIDex7Od7NGLAF9QSlMKu1qpE0XQNXiYwa9wwMP\noYacTmm6tU0e0pqgReUYwHjHvYTzNZNtfnra6ZLUy/Eq2/SjLb4OXunLBxUZ\nJcsxeX+NcUprZFk/mf3AMpc1tIMPfMiicwLJSQ8TkXHrLlP7a9JwxHS244M5\nm5ifqUpHvrvOunR+RtqYjUZXKKNmLXB1QhgAtAwllpXAMMDNmVZXcyd3To20\nqbBGgLxElhN23LaPnmculokWRBsyFl9Q057nSGLJqsl1qqfitcrqPc3IcB0Z\n7qSNdv+b/imJvQ/1aJteM9uDSVIJo1JqTxhhJGuMWheAqARq9Z5i2RxUtEAg\nUrK5\r\n=Tlo/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fcee40cb.0","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/shape":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/button":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/typography":"8.0.0-canary.2fcee40cb.0","@material/icon-button":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2fcee40cb.0_1596129753125_0.2508354430320856","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/snackbar","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40c132b93d52d9172e88a50f496361979bd8e1ff","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.bd5987f5a.0.tgz","fileCount":40,"integrity":"sha512-4uUVOoQ09iLIogpGXhDsoJpq4JpoB4W2Ir4ZLp2kdtVhysdSmqDoBC7gP6XDSPswz3I3Y6YOOM6Oy4ZgcSMh0A==","signatures":[{"sig":"MEQCICaNWEcf6gSoXgnIeCZy1/V8j1sbu8r/aPFU5PrVitfSAiBWTi8Iwl+yY/GN0iLYv/9HSFyNkKM1zSDBzxxpaNdZ+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwetCRA9TVsSAnZWagAAN+8QAJLsMTnzRSRRKkOf6a6G\ncbP4xNaDQ4CkO14TxnSChAZUdfDReSIQwOfRG2Oyzv4n5hH7P6PUURI3rnWy\nYiSnoOmzGF+mf2R0FKTnP+K1WnlbuuF0wo2O7I42HyGgv6nxofKmWoq4Wy6M\nHbgZGJnf0URtHi2AM5+yGt4ZfEUbwVWVHtUdco1CSXxJSshj6Qkvfuup4HEP\nGqnahaikTrFUu2wkVPMVO/0dtwZ+GMeApQtSmnE+axwyShWkS67wJ5Tf1XWz\nsxiltcEg3HQZWkENtRZN3zHnUpUYG5iq6FF7qc7LgRxFjNNcFl4q6MH2IRkI\nJkcHsJW7cNdpPEzz07P46Sk/vX0SMSIJNE9/tHLjogi3rspSVjYByvXslUaL\nZpkXyfhch3wdEh49AdzETLEVRfwYpYV7PI/zUq7CPHbFbho89NfRQhWHLaw+\nsj6s0m0Iqvk80L/UpMaAe2hOs8H3E4u7DeOKMEM1r8u1RCI6yQnYhqTm+hee\n2aeDw2JmUa9iZAtHpxpnkC50ZsfF2SVyisxbvTXsCR5Rw5RYxfhMFfo4os4j\nLGA3JZAeWWh7OjKXjywG7HSunGVend4hJvsksfCISeNZPWfIP+zDDsHAe72z\n6lPLTf7yKpTwC1SBLK6alyiF7hWfP3rm/Iu7RBI0AVkhw+lOgNVphKZYF9gS\nivBa\r\n=THSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd5987f5a.0","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/shape":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/button":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/typography":"8.0.0-canary.bd5987f5a.0","@material/icon-button":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.bd5987f5a.0_1596131244738_0.1907011404269101","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/snackbar","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1f3ad0f35601144637fe1c487b5b058099250db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.005e86a9b.0.tgz","fileCount":40,"integrity":"sha512-FqOtIwY4JARjJmBPL/ibfEzfX4ZfsdKngyh8giCfLm3chriz8rpBZTJYR1d5I383a4BHwPzv2zBTrxUnBH7ijg==","signatures":[{"sig":"MEYCIQD9oHbOrJjndhI9Ro7y4obP8FysBumayWfb8asy3gNlQgIhANYSrJ9b+Aur1gzSylz7Za4xMnU+Y/7rU4/vSLTjTQis","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwrsCRA9TVsSAnZWagAAvFcP/iMGny1AHepemsqmg6eR\nHRY7wWC6MBHCny/LVzx3dzhq9/uOswK4/vGQSO2EHegQF+PW33Hql7U92BOv\n3JDSh7KxeUhWX4CeBawIrjUNbtfRBml0/r+enLT0mHd0nr8ifI7nKcfF3jxx\nxtUssdHHHQ1ezt0aI/JCKlTmHSfI4OowEMmcQ7pEx41CHskAdMDzikIB7OIY\noNTzcDWuXVC+ZjrCOSDvhPnkKnpNmg2gMcXhSl2puh9scpZz8qfQHpXj2ZB2\n6bi8bvPSNjAgIKqSs/AZfkDUTC3Kp4kk38ZsNqdYs5xM2/hESIlLwK6xchaT\nq4Ho0RUQISN3pPSjOoFI85RLAqnc+FZcCvEVrSNMBx0ewdmGeW2esU2lNZTF\nHtR0kzksZZDnSkyxOLXxn7cKTeBICR+57bpqJJhfkZ/61n/e1SvdtQNdSjnX\n9xDcH240J8s4Jp/w4c3bsKNgQtLZG5wY26UR/deXcY+UWbQ39rlQtseqxMxo\ngl1NysD2p4bAlN9GDx7pYHA6OiUZOrsPUMTvppfF+zixpH6ZCtUm2im+OqeJ\nn8eSQiPEZlhl/01k0fVMTiPBCP7Sc2sW0+bN2LVBX51/73SHpPgcAp9RmusP\n5Gm7qa9InuiJwvOI5qG8SsqQKnJ710ubDAbuuHtNTXh+8FwfTJ8+kaheJ3S3\n8oiF\r\n=aTD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.005e86a9b.0","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/shape":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/button":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/typography":"8.0.0-canary.005e86a9b.0","@material/icon-button":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.005e86a9b.0_1596132075781_0.43358383142743384","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/snackbar","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea2b3aaf81d20bc7b730de609f0505419e4bea6b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e309c7c68.0.tgz","fileCount":40,"integrity":"sha512-aMej/uSL/njJoVTr8yNW7iPmEj1ze72oEbNY7ihmd2RN+zVy2eY0atq9kbChRlGY5jvXrnydN8blrMwmHWslqw==","signatures":[{"sig":"MEYCIQD0Lwupt/h2xSL6L/G0mvNuecOKOv7Vv6OU3Bt7jlFQQAIhAKz57CO97IGc+xUCcQ15+P7psDRNIOSA3EDPO2QbbAy8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwzrCRA9TVsSAnZWagAAXgIP/2XcBhih15vmpmIhiSrQ\ne8CErqfzhAMYHVp5JX4rtJWCHI1FyqFOciwZ3C+TIQL27r7d/7uuYDUMypCR\nRwSTTJFtwIEBxM40fz3pXPAq5hc29k13DEIRpElWoPLYYLHckfEdCrdNHXnE\nCZSDIqxm4+Qu0vQynMSghZuwLf2lTTnbh6Y/AtR8qmiVgK/0S0/5YqTrKtaz\nmaCefMNWIRA2LoQRZgl/l8hnbF25k74avHRB8IcGVbvEagf/f7JuM4P0PHdU\nAtIOxG7l6SZMsPnLrA2yKenOxRv3tsHSA+6iPrYC2EFARkoUAvNoz7GiwVF+\nHOTtIFlHJlL/z0edCFHyVHLgw8l4uKLyqk8cPimAmi/timSuJSpErrvH7LhU\n2pYqvUhJ+w0AnC8pbUbqplOv4qstamdAjRffjpIJTj+T3GqHodEGq1ZYZqJm\nZY65Wkp/SKG71tZJDX+JJQ+Ugx/GDQ3GfrZOkoJhFWX/oRwNeznkLDVUNqqO\n+n36SLJJnSsg0YN6bBwquyIV6sf3v8r4ekUt6XBYz9HKFY6NT3E7klN3/vFH\nsHfbH7StEaWybJjBNntNQrz3gjN9a2ahNTGaDiCBgP7C84mKgyHeFy2jKUSf\nTtSsXnnaM1blxE/hVyTUEfl+XD8/79Y8BsDPK7wA7IBZTBYCgC1EcM1w42GR\neExU\r\n=Z2Fs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e309c7c68.0","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/shape":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/button":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/typography":"8.0.0-canary.e309c7c68.0","@material/icon-button":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e309c7c68.0_1596132587039_0.7447219572578658","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/snackbar","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4ec9001c8f07c2853217074868dc764325a2c57","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.935a51cc0.0.tgz","fileCount":40,"integrity":"sha512-vK+hYMCEw/P4UhsIvN9EJfAacNeBAZaDwNytXWNIzcVWRZGK5LaIIFaSYMa3EtjZG5FnuTSkVGEq/K0gstCnsQ==","signatures":[{"sig":"MEUCIQDw0SqNQcS7nhOEaRG+SNN+a35T+rVnm6R+r2wxDojRbQIgIMUqoE83OxfoUSBOngp2m/Kep0bJxsMRicu96r9vvXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+sCRA9TVsSAnZWagAALOAP/2eXFZ4wUUlenGU1Ni0S\ndXQWf/fho8+uJRjQlJkIq0nKlIvrSLx454gnt0IScZ+oOlkBeE16L1+g+klL\nl57vqiDvZ9Y4XkH9Fm3N+DZXshlF7V6Lfr6BmvQKmi7knyTGJoxlTkDG++QR\nxm4DudiCzDWncCsqJbAVTrTZTNXR4VyuL2Mgvxmv/z1ZtYPkEEBLNfEARtXd\nkqGFSujH2KQYEV1uQapFmfS4Rkf3BXiisOs+w3Y3eUYQqUQer/aZHiXzs2WI\nr2pj96smKU19USm3VdY4cC+SI1Re8wgXwXlwXPcH4rk5oEhbK49MdklSagVX\n7A9r1yVJEtF4kdPoptablYcVyJS2r2Db+TPbgrIbDLznFd4ZngYQAqSsspfA\n6gtkTv0IHNYWp0Zd3yE/STLtdrRDtpaPi2BTidJNrlYvkr1VaT9JyjEoWfnn\nryd4wJwOHWu/W1pvreW1TrwQrPxwTgk3prm0uH7iEY26Crg8flnjYVt8Tm6E\nishxUFyVjr7L6BpKkowGagpRwqlHLVaKXyzYIREeQ8okP6AeyWDy4ZLSmJDK\naRD41KC+Vk1IYMfAIV/i26mkSG4Wy3hH4zNaneeReTghhBfhxieBLEbtEdZb\nXA+pIfbYGdRD4kAcF59QIvXhtzmc0e8fKc3iS29Q64mq3HEjcyLkWdtShplm\nBqij\r\n=2DC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.935a51cc0.0","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/shape":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/button":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/typography":"8.0.0-canary.935a51cc0.0","@material/icon-button":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.935a51cc0.0_1596133291383_0.800404425672397","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/snackbar","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0a707e51e6bfd7fdb5b117390e4bf620be354c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.74839da7b.0.tgz","fileCount":40,"integrity":"sha512-0cDpTG85wioMIDOCeb0+ddpZSuywcTEFpdLRmHoEndGy0IYrEtNEeiLzSN0Vs4R60m2SXhEcq0dFeT6eg4a0cQ==","signatures":[{"sig":"MEYCIQCd8/Hiar6T3uOZxeSttaNqHrsYOLk1QYNeLkV2/b2FAQIhAO8ylZclKy67qWhfMy3E5PYDsSBVPd0q3NCxFjZisBDB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxJHCRA9TVsSAnZWagAAIdIP/RgdP3HXLy5HqPFzt2YF\nE7HbIzLKJbAoQWePeUvbTMz167MlUduBzIJnWZ8DpYjs9CIByo3qbvPgzDIF\njnMuzYMeAOfWztIurCalUZ/NSJig2vDapY085WyIFyOhM1gKhziwvJAZ5xcG\n328abq9Em3rBG38IdxUoG5ge1OnR3KI2c/nQFJPwP/CRGyGt+c2s/YhF8/lW\nxd3YJq40HkZWbGePN4dPQ8zABV+zI5zeenysiIUa7AjVGBVOilq56sOCsF8a\nESfL259QoiYvmMVvVnGaRFhZmn8Hg8GyWb0CLgRCYcx7fUYousZBiWHa02nz\nAs9gC1rmRuS0aZnJgJYM6HOQktoGRXb2nWyW+YglVWQynP176i6NtI0ahIRN\n+9QTawo2wftoOqEQVRwecl5FxBuohiPch7JlDsQUs7SeHTihoMp1HdYNGX1O\n6fySesa6lJDYVZM2VxgB2S6be3Wr7gJPH0jhz7aLm0rVq1gKF5D4VylqZQ8R\nbGcmNtrGSZ8Hv+ca2kkjoYjwGEiNJ6FXc83cWTkOVntaKjN/oYfE3q2yWN3H\ncZnwZsSGAeNxVo360hJcIAffYWXMy2xS5yxWuhBzcgmFfFBVrHepqwqytjBK\nah33D+BDIDMrbmFOyccuPGGx5BGA0+z/xnbKfHDjMmhGSs6JizWm5jpvrcNM\n8fCo\r\n=tbU6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.74839da7b.0","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/shape":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/button":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/typography":"8.0.0-canary.74839da7b.0","@material/icon-button":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.74839da7b.0_1596133958447_0.8516093631497197","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/snackbar","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b2bd9831748df1ee0b12a4315197e6583e6233","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.f041a48c9.0.tgz","fileCount":40,"integrity":"sha512-Ezk+3oEISZGM85VH6Vn1peRtzH3Zpk6H+sdSZxmLADaLrYyynNOUUoDoO+g2nw3Qo5/ijYpu75pCnYVIJrRZ2Q==","signatures":[{"sig":"MEUCIQCksLAmLdNwEBf4DRt4mQ+lqP7d8CsZTiTsgaoWt5IG0AIgX0miHarq5+4kPHX80sEmvKzbJD+ajYSNkUPyzMgbvRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EoCRA9TVsSAnZWagAAegQP/3jD1MNZRcaXGSTr2Tgs\nOLO6vVZiTc5tL/o4ZA8RlIXgimXXM5Wlq7hWFn7ZJA8Gs75dG27tApDqosB8\nwhrS3zX23E+MBAKaiArdJFCZyS7App3Jrr8jHSuTCk63HhTM+b7csaBl1upc\nPA1cbF2ZEJT2ic1OeovULZawpY6XLX9hl6JEuMCdBfeTaIIZHZO9PX/XXv1G\n6N6Umin68h+a+dFO8WU+6RrlhywSw3pDBvadz1sZkYuYhsG53bx2tVgOv+Kw\nbfP6Mtt82eTSENWHOGV3Z1R+oYwmJOLH+XYcotX2vpiAwbQuFimJhLwxt6kQ\n/oe9FjuUv5QlRo3Y8Cb1MvKXQ7mvNuQ9MYjbtfP5jGuAVxxYNl8PSBaZW6uI\nrqMlRtohZABByBWj7D8p8gtLEWB9/VxIi7ZinB3Y5SfJmuakEOL4j+VSTx+9\nVEhzWVOL0EzXFJNKAkxB3HAozt+KSsPO43V+nTQ2UNC+2pQ0aAWb+P3d1neT\nPoTBOqTxG/7J+fKT/ENN0xVY9fBae5rqAgWFO95N3c5GskmIjvRWG64Nc7Dm\nZyziH2/Q6rpC4bQ879kvU3ilk4IgQ9iW1k1sMsti01gqUouJUEazGCZXHOt3\nNWzltugCp6IrKOncNhFYe1gQPafLNcKFNKSQvoOeC4s9MpOJMcAnH3mYF2YV\nmhA4\r\n=g+tL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f041a48c9.0","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/shape":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/button":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/typography":"8.0.0-canary.f041a48c9.0","@material/icon-button":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.f041a48c9.0_1596150055732_0.2410505178145428","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/snackbar","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bed9c61e6131a06e26acda33abdeefa8ac4b9dec","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fbb1381e1.0.tgz","fileCount":40,"integrity":"sha512-HdDyq+wPxpKe5J3uYWqq9tXZz2DkAVNTuKmMgA36k2/ayYG1uGGIe+lthpM0Twc7rXIRaCl7Jot9heUEAFovNg==","signatures":[{"sig":"MEYCIQCEgqFXqSITMZt4ZilzL39Cs4qzI8dvGdWrtMrs9L7mlAIhAJ6y1YDbQplhD9dLygwT1ivoioxu5+NE77x3O8P3JFV1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD4ECRA9TVsSAnZWagAAZZ0P/0ilecwcm5FDWoFWRdXK\nvfd9CECt8L7QcJxQ2M200mu9iNMKumj/6j/p1gQ5Lg3ywwfmG8OMzUtCfy6R\nLFyV1bdyiCdyUJQvcBJSqATliqHcLTB/QnMd7XmRrXHpOL+mE+56xKDVIpEq\nSe3h8V/5vR4XMsM8PkK/4CUU+n0XIYjHBbtjyfQGza1T8fldSmCuRLJz1Wue\nUxmpzs+8UOlh/AzWTsZ7MEaDob4D5IRBrWA6l64Sw/yHRjyS0eGJUg4TSR8Q\nyDYPBUjiwU6beoDfPS+ZlxMDwtFiwqG740mRKCkvXm2fYID/H9PCq1kn7Jih\nq3SUqLObNgatb7Qe4GhKrF5/q+ybSdN6oIkROd6D7q6yw4er2tfQ8uSBylFB\nMdWj/Iv7+x8gaKJ2Q8DkS39OPjZL59nUh6h5mJ+6d2urMqu2xLIQcZUdZ0+7\nb7KlfNlKPjVLUsGosIYVnzu2g6FyALcXrJbhciP97bui3wS+Kz3ZzU0oB/te\nAPkDKvZAd5ds7x2HsrDX7Abq7R4j3pNTSKQJjrNYskpYk1gzRfxwY+Rug+7k\nKINa2DcJpui1vtZW5ITFn2A4lq4iqw2q2RTH6lft/+G4evydfD10zvohjYT5\nOZmCJE6KMmCCW54CioBCw/Nb8wqJ+InbF4LdCBPCU0aBiwRcm4fRyY+SsnK4\nMbMv\r\n=o82U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbb1381e1.0","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/shape":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/button":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/typography":"8.0.0-canary.fbb1381e1.0","@material/icon-button":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fbb1381e1.0_1596210691810_0.3256254320373242","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/snackbar","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9f0c18259973e9b7ff63669604d745f955d125c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.7f61d5785.0.tgz","fileCount":40,"integrity":"sha512-P/3R4IC8Do6Ni8SGY6o+7/oE4A9M5LtlkX62tyWW9A0wTCFm64ioBbOAgcSMUZ+Si3T3fY0V/x3oaBu0UOPJYA==","signatures":[{"sig":"MEYCIQCF2F30FjJgku5+y6RP8qooINPGmR93Yyl7A4h61QZM4wIhAOUmfurrruKTlm/rQLhQ0I3iDZEALsCHJVjnZYhsziQF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFO2CRA9TVsSAnZWagAAp4YP/ijOSApiQe701tFgq4S/\nrkGSaL/jPDhpv9gyMV48ZXn/zhLCaXl5ZH6TbQZGnTIXrnnl5ZT6dQB64Ea5\nSyFRTwNB7AqNnPsTaCrGZEiv87Mi1ODH18vU4UxT2Y1flSO/WubLaTGIBQeX\nlOOvz3L+GzwcZZDd92aZ+nwu7iIlB2Zak42lzdCcmXaHM34vDTHvgSFfR7Rd\nTT4Js4oI9whqBdId2reVN9GrYnVYXDCsNAixPA1Pl3QAauPjhGoeyojUe4Us\nhXT0JhCA6KH4fAKNaUdQkQI4joteHb4tH1EvcHdR8JHyS6ZIXVc97x74pNkx\np+wfMhviZ7y+3EOU1hLmVNHwufB0XhVUxxJbIJif1t3hgARx7cU1iKlc/GnB\nu0ymytDcCc0LWkjlqmANyrhRChf+yaXwOwNjdzf/NrJHtq4lFF61dlI8GRzx\ncbE+gZ4NcXfy1NMB0vSkP7gA+2wfgoiC+ekaQDAX2iI9uTQ7Wjs/di9c/N3B\ncz1SsrQ1Lqzf9iuISOMBMWeA38xXqECh4FbLxwerix3D49nwu4roWX42+Ba1\n/80XHp4LQBe14b7AD1ZvAHEeJqmKkWutUy+JvIj/+rSBovcck2jnbvU1LQjA\nCZLiEjOK3FrUcK1L9jO2yHouCnky68PppzZ1of/PNoQ5bRIpYGvAJVRK933M\nErDw\r\n=i75j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7f61d5785.0","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/shape":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/button":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/typography":"8.0.0-canary.7f61d5785.0","@material/icon-button":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.7f61d5785.0_1596216245511_0.2220205481155446","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/snackbar","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fa044f1887090c33686a96dc93d34f6694e307b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e1bc84d10.0.tgz","fileCount":40,"integrity":"sha512-jWLiFsYbB/xAh0p8mb7+xMpb21pOGhGaarT3Vhq2Z0uJ0DfPi9SRur8mRruFuVGOHvOW+/9PiDTEBKsbrpa9Mw==","signatures":[{"sig":"MEYCIQCFF4DiszzxZPXZRwJlcVKKnsfvT0AeQ361XtTzW6yEoQIhAJdwVACX2jjmnZJ2i2Cc5E6e5EkY1FBj9qB03E54CAQK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE66CRA9TVsSAnZWagAAfewP/jWGAY3qyQwvu669Hfje\njsFx3rh/5IoZSpzl+anKv7pZHoiU+FczgEXTDwwnNjzbqhZ1f3f6G87QY4iJ\n3AqxO/iBTcc+/uwNg2q0hITt/tQmtnIO7oTDnZ/xBbv5wV88tizfmBAOeg1+\nRsK4+1ev4HE449Mk5xIgDSdOR2TRZZUaaYdQ/97JrOtHj4ogwOfVqtgX2o3Q\nbD+61lv1oT7JeDN0uU9ppkqcXAXJsjCxUi/6e/ULz+JMTI/WPvobaGKH87Er\nbqRWn/PF2LfU6z3963DXrm1YbIjNxB8T/iM1nWFbC9byLPNC53hW4Z5MdmOH\n4RL8IhuF3IQLrHdo6GynCfSlpeyxX22lpkPLuJ5lZL+F7e5VZBm7JHp2zZh9\n+eYS+iaylYBLfqUxjtPZGGt3ZEnUIcw/SQqwOOMmyii98Lv9w+Mgnva5yjYn\nyBLCk8A8oOnSQkppNtUlq4e/VBaVrVFNSOUVJogIRFiDVH0Sl2OFE/4F7VSg\nkhz3PvFmM8RQzG+uqqm5FbRG2BdN8l/7BPPo7XidgYtoSPzqwZTtg0BhpUQ0\nDc9yqLgFwBh+6ULCHKThNHsGIW3Hc+w/UVv87Gh3M2lwvNqvJ8HvQS6jqXbX\nP7MiP9ePGtT0wrGpgcvoCY7IKSWSL1jbk0VY5+sE8O8s9e9tYtdC5SMYaSaJ\nlp1b\r\n=c7Me\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/shape":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/button":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/typography":"8.0.0-canary.e1bc84d10.0","@material/icon-button":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e1bc84d10.0_1596477113947_0.6296047379211804","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/snackbar","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f65602cdfb088fd390d4c3d8125c2b6a142a212","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.096a7a066.0.tgz","fileCount":40,"integrity":"sha512-cSPzR9TsdWJ7tvxWAryeUYB1TyxnvpsDjmsGzNTLa3I/xPWM5opseqruJzbPmEJsXQ+GCQdJ73yMfpKYY+IfRw==","signatures":[{"sig":"MEUCICh3pfgwgyF/3WiGQSWJAUlq0IMvfssqBBJhkJEqYdf7AiEA2iR/4xbC1JUVkj5o87LEj7AEXkG9CjgpAh1hlu3NudU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE96CRA9TVsSAnZWagAAIPcP/ilCH8uc4F9qNpbgBsfZ\n5oahOvNGCSpm+LsDWFow0CHDbwHdD/qGJcrRGEnwswXB5RjX6lwdxS9IEFau\nBe1I1q8kgoCFCXw1j+geZ+t25KRTXwn+ZdMCz8Iqsk4tyfHqHmoBfYpxfKip\nykwTsTN8mIoVI/N/Y7XdbPxpkSqN3ntq5lIQF7SZwpRK+GHfRxqe+fqJd5uT\nR1QiiMpzxlWYALUxnOGkT30cU/VrwOuB+R4f9X2H1lNCxmEnbZub4N/4EhIp\n7pEiM3a1gDNSst6KJf5QuPGRWejR4pn61mgqwpgtV7sGCQC0NiLPqxu4zsdP\nF72gmQEvAdDCD2pmXD3zwoqNfw6jOq4zHTCDsjgeoo+mURXBb6bnRsq20K0Y\nbMVfh/+ncgMl33CqYuGAtGcVnAXP1zdBuNiyblwGDbKhjoI1si5xBpg3lOEW\niIWxLjDeq4RuiJXK8XZyt27ZHJiQbGAI0CpcADgnMTLLL0eHGpvs+c8gTQI4\np5kETlQvOO5SqLgANUZCIc2eu4hW9Q1lN9jw9fhAyYarjzxPNLBJVxlrhXrm\nSl09KF4SoAL2DG9jaNmVC2pOxRqMXSCBwjYyS19N/FKlhz/oQvA501zqjAHk\npCSHRuVIbCTaaZp/G0wY/p0Q/ZL3iSJshzohAvhXTiONJ+RcNV3T7GVZPYGB\nVBRd\r\n=atRj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/shape":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/button":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/typography":"8.0.0-canary.096a7a066.0","@material/icon-button":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.096a7a066.0_1596477305885_0.672009223387253","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/snackbar","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc82e4d70c842bf1f718dbb35da9dea1eb2a4543","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":40,"integrity":"sha512-m/gH0HmkpD1rFjK8GUv1gCf9fET82/k/yj0oXin2NMeYlLnq7JfVNYq0sLVKLAw0EHRkIR/L2rhyV/jgI1Es1w==","signatures":[{"sig":"MEUCIQDAPZjZqqZvvjj+AZNkWLkh9yRsm/EaXG2+ilO9TjhPBAIgMLsM39elaENFkuk56LhMe0JNqeU3hcMhfRdqPcTOT8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+gCRA9TVsSAnZWagAArO8P/1fpkvADZFGKhSyMB+3X\nJqldM7ptIt97AoioPuZb4vuXsK/ARCw4irciCudhipb/+sOjhys97uI/+xYx\n4eOQzTFC3GMdCCX7q5d/uZnmeYarRHZDZdsc+F488rZf2HqaKe24cZfHF1L6\nESodqG4arUTTKfdEVVPG5/0XiYQzbC9tCuphEIU3sJLjISMbTIOXAacqHkv/\n+UeJRLaRCdgnZlmcZ3+9BGTGeTF1WvS8swFLN3S34WZ/dvOx8y48zwcfUh0f\n1f8vqU17LRbijwXunZxTRFXj59eASXe5qtQdo6tUAKbM3VPml4siYuAzpsUk\nQ6k804W+TFGAkhIImalQa/qa+KqbRzNWQCEGC6pMs4jjSbZTe/VsFNwrC4C/\n7EJNy6oNyD2eC1K4nFV7p6Xmudh283qfFnljWL8TUMt2y2Ll0Eh95paW7jO6\nz0tFZOwa9uXIKu1CR7igdtxYSlDwWgGOq9qUDMn1W4juY277DBKzb6bTB4nj\nml4EqPq9B49EyozKy5klAZWD+ykJ/V+dXIJTXz9sbgFUBpy1zRFzCpf5FgOA\nphwXLMAscdCeBBXPAryD/yrx2+FCzukpRuBLMuZ7IxJA1ss3uyx+06gVrQuc\nwD+YiKD3khlEXEptTS5jI0JZwaUjM6lxTBiYLZn56xeQOPUyNBxOrmyCWqT3\nTmd6\r\n=aD6d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/shape":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/button":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/typography":"8.0.0-canary.aa3a3e5a4.0","@material/icon-button":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.aa3a3e5a4.0_1596477343634_0.9988277921790032","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/snackbar","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5de7abfb69a11ead137a588d48eeaa575701190","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5903d39af.0.tgz","fileCount":40,"integrity":"sha512-U1rgQvD9dFofYQm/XgMpxiz48LPk84Ydn56xTULhXNaM1M1LY9xlWqzqqXbuCROp9E0c01uVbOvdh3GBlW7eAA==","signatures":[{"sig":"MEQCIG4k2cT7A2Tt+/yjpB2Ifq7BaS2Gvid8dhz6YNIycAErAiAivbO2Zke9jvlSPx7bQ/bYYDMau4wfDnrTB0qWZlKcKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+0CRA9TVsSAnZWagAAGOgP/iHKqmm66LIESZ+leQWj\nCWhJhEytwei6kSUDIEx/RWRGACy4F64p56Q4Pbzikebpz4ZpKD7dDNuWGac0\nUCWA7EZNnIDxwook/IyI4Sfr77WxKcefvhqzOEufaR5Y4dvdK3kLcUeeSfxh\ncJHVmpkLmMbXDxXq6LtFx/fiZ3uxg3CIwePXi5HjwA+8lf2v5Tc0jWWVhT89\n+ZRMimQLbREJ/mUNzjtiBIZXZSYwOyas1IpoeamYvcTmNtz7qYbWJ9zHaXBh\n9zZUsDp+4gFGfq/8K0uEeV3uqh7ol6oKr0aGYy4KEMlMGDyoQWptC6E1AOgd\nDnqQZWJIFq+/MOfjk2GY3+z5+8pyfD6eg8gQaOt/HEYlibkgQCDwwgElsPYI\nWhUYD6nuKmoLGFRVvv8uSqr6MwLaxk5Q60S0N0elI99hx47PJQyrX+iCl1Ot\nq5FjNus8HlHxWKcL8LU0OH0xcvBSoZgzdYyXlBu1ymstNtCT6irojOLvTaOG\nTxopUDF9t+lnlJeaEGdlI2AHHLc7xkV0+Fc4HqolJC2mYn7xiBz0R917+yto\n1ic/n5b1y8ETp8DAt6wZ56n4RjcVxaT61qW58ZY/4fLSIs1h8T6cSTQx6Agu\nBjpgK60vflLHqY0nfYkEaAaSlVOCcErqQmpPENSmhHq5h4MAgyR5snpXDLXY\nhfPg\r\n=7IwM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/shape":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/button":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/typography":"8.0.0-canary.5903d39af.0","@material/icon-button":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5903d39af.0_1596477363521_0.7947118577059642","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/snackbar","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"729fa0c9f5f237c05f6891be40af413d0d9bb9c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.72258f898.0.tgz","fileCount":40,"integrity":"sha512-7Z0LpH4aWZlCDn8F3pcKTBtzKg6MNWQQwBB9jiBQPH7DgWXqU1YiTytH3RI0jA6sCk3WN7ITskMiZF1nj6DidQ==","signatures":[{"sig":"MEYCIQDQAoeFnGs5G22pVHhfa7LY+DPmvgS1U7eo8x2w5WmzQgIhAJgZhjk9FY1+LZxRCt7JU1qHE9Hz9Do7HMHdFADRh/9E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdpCRA9TVsSAnZWagAA458P/RVXfoWtauNqW28EWCKP\nUkZlRni+RgiG8RHnysuuL++rZjerJA781IyNpq3wc4KGtzcZaQuQX7KbHFVR\nlOHMBUkbeGzf4aPyN6HzREossAXiq40izTKgJkkyJCa7eBY4vyP97wB66MUi\ncHYpd0+s7ACt+YSua6RXdz+HhOLTNSlaCv9RwOV9LldtOlRU0k1VoTowjP5W\n6F8d1uH862eW37o2l6gFEXr6R7zAJBxeKEFVo9+Usphb7wd+UFb2P/P1Yqih\nWoFtdvbC9UbNQxgUQkm+JMBb+gAxhg0xplKDbQxCkLwFlJUjNX5BbsGmUI5B\ns4smwtTiTwWULCJfFuvjTBgu6XsW4vshts+nNXe4zNPwku278XWg+nfHgwnd\n5FSbjjjmxN0OOkv3AtBdJzOo28Bs4wMVNUVw1DLfDATQY5V22Kg0d5vWrT8I\nQJMAT7kwVg6tKN8Xg86xtTPRu4GFgPTIyNK9tmiRE6atuFCdBwbf6WuBsCqo\nlDkdQoLo4MJ0+Q8m+ZP03vpkQqEts+EB708k2F0MGQLqdXR3SGEJhetJESkI\nPhUJ14FsIbPEyzq+bSO5CYrrShVm4ufqPwVhKJmGGQcv1GzzbGQZEMo00RbH\njVn+q8a0RRZYBEyp65rlqTIBg47stNZySIrRWsavAAoNnqMopf9s5LvT/b0x\nQbQZ\r\n=gIgG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/shape":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/button":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/typography":"8.0.0-canary.72258f898.0","@material/icon-button":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.72258f898.0_1596503913022_0.18138746418699414","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/snackbar","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf0e727f6fa520437ef5ec5035c668bbd91befab","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.1b44b43c8.0.tgz","fileCount":40,"integrity":"sha512-dvYk/k6CdvlSpTk07wkNXlkDsG1OsRXhb8FfpU90VP+TN2KGC7IffWQ06mrgzOliGY918ls6bl2T12UsT6DSHA==","signatures":[{"sig":"MEYCIQCZe2zgfqHz+K3y+z7lEG7ioYJjB9Eadi5TgoN+sCH0mQIhAI4f5NptjcMtmgchMsqUyem6nx7VKDUd1OTE7vHG3CJx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZGnCRA9TVsSAnZWagAAMF4P/1WtHSW9fOdG2liZJZ4e\nHZNxh+d1qypLULUY/4YDkFNVjcnx7ZQrkN7WwIGgUxLreUhuzwGqEd8qfMT/\nHrZIdWM6iTbc42aYwvLoS9Iy7FENP4lpR7Wdpt7ks9XYyLvKg0qfUpS6fSdI\nQfI4z8X1QYyLk4dqgCvFYCz0pnn2WG6fVRnXy2tkGnm+y8H8p6eCtbpQX/JT\nRM0EW+J0etmwWl/czq+y8DjscpOf47pJj9A/mjon6i+YuJAFpckFfdx5AcJl\nrBllQtpEqJ4ylfz3AvjVzGGSNK1rd7sAfHh5hK+8o1zcTltH6uynLw9wELmW\nNHHR5XuKNio7C1BNM+STWVA6F1U+HiKjEi8+rSpLu4G2/GNmGNDzIMZlXnCE\nIlrz3TgNrkkeInLZajRHELDApRkg2zlrocG9FGubOj2czVvs4gTjZhNma2NX\n1Dc68SArH8M8amreBdivNyMo6ydSKZWCu+dkYWoX346QQ8qAJbW9PLYMinW9\nwDpIWkz4ANzTJNvNYWLZx/oPlgnOAQblmHGNILW31cGOiV6NpXnH8N14l8sG\ne7mhjAXJZurjNvAGbW3Vrifv8dW/dLB7HAuLw6+CjPqfDYiXkYQRH2i+STb3\nP3UWlwpOp/ZmYbdTE3otMitDXJSnlx2jq9kV1HZ6VpYFmOetGrqJGp02sBL2\nT0Os\r\n=opcQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/shape":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/button":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/typography":"8.0.0-canary.1b44b43c8.0","@material/icon-button":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.1b44b43c8.0_1596559782745_0.7338707146672263","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/snackbar","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1550932cc6307552e1e5e9bdaa61078d08048313","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":40,"integrity":"sha512-fO2cPPIm4OeTRExih7DdWKdeB1l8ITAPizg5Q0dfINPDP9eyjwt2qAGqcsDgM09B8k9MWWAMkztxaCYgUx4LVg==","signatures":[{"sig":"MEUCIGQX5tRaqDziaUTkF/Qe3pRbnam3jw5+hVmH5bvCUEZHAiEA73Vm+hjCl2ZgR8mJWpPcrFD7WCHS8Dc/t+N68J3qpvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQ0CRA9TVsSAnZWagAAscMP/jpgeejKi/RMJGhMYqPl\nPxm1jSjgxezSA5QPDrzO1U7NHSaww0XvielJhHPysiDRtWBHckFuyU1w3NGn\nxuIvGYwfZzyinedzHSZHfJIKBRAPI7AwBWmnHt5Dl8XjprhopAx/nfwk4Dju\no8Hw2oGaA/AE9nVcKZeaN57hWqSWqPbBIkwd/HViWqaq837S1AcieNCpSRUs\nnPY8zGoTu3/r9FZu192vxDUVMO/P6tK+JTYrirzvmTQVvd9PLQs5MyvOVjtC\nTUaiGswi/9dQBvT8zt+83zM5GszBk0T+9lWbrCyMC5atCc+PpZoLRZ0SRxYV\nvfpM6z4s089vUZuSb8EDWdlH0lkIYrktIevGsj9eysqjcwN1aT4MhknMMFyW\nKARprv5hgZfcU/WkWp0cJaB7GE/7zmzd9KG3pO8tl5H+X4f8uIC5dsQiVxPs\nbxt3PWGrtdbpDcc5uiEbXa+bti+KV0QS+8mxCkY5Wwzw+R4UK/IUUCSec7og\nQ3uKg3WMHnXC2axAHtSORdK4FiJZIgBpnmsfkMxYMY3m8xamkssTCLDwi4dR\nBHMmO13KIcJ6MJVEd5zQIGC5kg/6F3DlRgLM53+ZohJ81+toDQOIWpHxrc3r\nxIJLdOgIO5Q0wEUdMQQzsZs4T3OSX78cs8oio4GgFtqlUnqTHGeigKKZpJbw\nWz9I\r\n=oS8P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/shape":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/button":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/typography":"8.0.0-canary.e9d2e2f96.0","@material/icon-button":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e9d2e2f96.0_1596572723710_0.0067906480690442805","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/snackbar","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e093ad4533a1210a39f08612773eebd4ada8d8c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b9dff0a19.0.tgz","fileCount":40,"integrity":"sha512-HBsf3X1FD5WL9kmelDo2bXbE1dZiZQ3ehmyjuN8efUvpOUbl+R5zE73jpHUpfxtZGj2rlnKgEXamsXx6VBJqKQ==","signatures":[{"sig":"MEYCIQC9GLgbxZiCbToiOYaja50PH/mK+V7mQ8q608iKK9ugnAIhALzF6enEX4HkMRrrJkOnFHDJUOMPui4mmJ8iAua/gpTq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKixuCRA9TVsSAnZWagAA8FsQAJqufdBEw5B6ixzPA4n3\nrpERQMnLIcdFK+bB+WIWPr9jK0HFKf1HXDybxhyH/vsCvpaW5YSex9tufczl\ntTu5E9gqPFyz9W/boxlF8hON+IWYW3AV5ms12KGeVBvm1g0PAP+rfIHhsIjX\nVuhLy3Gfi67n6TijirNR8Dx3j0milceGcpFNQQ4EEj6lL5Y5oakav8HZwNfC\nG3C+wHvDin8Lu6cyk1vzxsgYUVQ8yWnHOoMyeyZUvdkuT2NSCnWbf0ltUZQF\nKLHniXUAOlfU+dlhAOIpuIMebydplMDWrhanYpUYhJUTXgUz27UNAFS6rowe\nY0F8TzTew1HDcbraudrrsCpCQqO/6nzavw9Xh9CcUTy5WafzSgQDp7/RsUcn\nMyPsLmOdM+QAzKTMYClAqHF0ZG7yVXmk0FfbBPuh0ofgabjvl5zFbLuKYvSa\nGsoIpKEeotH36++ObUszKShLTbDyOqGikFhMiC1qZKS5+n7AY7pV0gD/i8y0\np2Bo27uvqfgb50K9cVx+M0N0DatmgK5QFwRgwchFXnHBeKjH+13bHClIbafd\nIIAygT1aUOX3kqiBp2INmlciapVdBB3FQzmv9rAXlhcSNsRcS8NOMvQzMHs0\nszo/1ll3WymtXAse2PF3n8zrG/Xh8XISDZQOhmo043qkKkNx/9poy8qinh4E\nker1\r\n=xv1K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/shape":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/button":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/typography":"8.0.0-canary.b9dff0a19.0","@material/icon-button":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b9dff0a19.0_1596599405788_0.38947553222999276","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/snackbar","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cd7e270b4e709b12c15da0c6f0aba68519d49a5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2bd09a706.0.tgz","fileCount":40,"integrity":"sha512-YA2eX5iD7FtTMlRzBPD+Ejh8Yg3vs4o6qqJILp/RYtnFDfGIfYdHyWPCo+ePJ23EnSL5smCuSMDyI91+x1YLFg==","signatures":[{"sig":"MEQCICYGy4C9hPVHOsS+QlfsRe1q26ftV/qA3pXEL2ayNkSeAiB53nE+jCNkkJ0sVfjj1KsZ3w30wI2Zx4aHV1kKio3PSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2nCRA9TVsSAnZWagAA+vAQAKLo17plEwZovI0uTse9\nkCxqWiZeOsJcjMUjfvC0kznQKr7KENtNbuOPbjXnQHEIxArIetZCf0lixKYt\nsyr0dWLcaAWx/5xvwPEviY/pEsgf6m/T9MtzBwRFDxED/Rz9DFt9Ylu4685x\nws/XcemQ2T6gUcFWfMzQhHZaymkX8wS+Nx20aRJ9vAL1PhDdJV9qTd2SwfPI\noL1aIAIxJ9L6VrT29lbmvbcfYyufHMijZtKV9PP4A9E2cusygVBPofnKMdm/\nbaxbH4P47nihen9bbCXpBx9wmPiUK2gxYL4rJ7mFgEPIhHC5YbQNMPjsJtZy\nTIxCM9ewYAaTTtzJn7fr5xdpUn4d+G4FIbnvZ0pfXDNFU8sr1lzxVY09ypeL\nNPOwdu9sVYK+roZ4YPGiZWjAjdlhzrwb0PHm40XM+SyjGfTsuOveEnnKz6gI\nS4MaoiEM/IHQ4idOL7gqpv3r4DhZHahCUo2bVOgjO315sFH4IEh4hsAa8NXd\nD9FFzaGn44oBMYex8Hrgv/iiPrIj6fDtlOqhkUq8WnrVSJdujkWPyTf4ofL8\nOOMPYLPb7xr2vfjo8NiPUIt/nYsEQFDIyEVxNlpTDABCfyjFOiC5PXmimf75\n3X0aHypHI3OKu8BM+AFdLukR58g/chT2qR5h4fE6SRyRvBjltPz1qFJ3ntBG\nne/z\r\n=idZf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/shape":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/button":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/typography":"8.0.0-canary.2bd09a706.0","@material/icon-button":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2bd09a706.0_1596599719170_0.6758114163304674","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/snackbar","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9490d68ba2130a7f5bb22ba65ea84ce010a0cd4f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e0560522f.0.tgz","fileCount":40,"integrity":"sha512-P1LP/TMQSp/4Yler4TslSnMZbcuosSDzs3c2DhTpYgWSqub75I3kyXGjmTu+LrzCjeZ7D8wv5Dx1yPernhhoqw==","signatures":[{"sig":"MEYCIQCspXip5dkDE8s9Uds5t6vIfggoiLCkeQk23dcergc1agIhAJVU0iXlL481SzQcDJybEzXIys4zaJDdL0KACklabew1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuqLCRA9TVsSAnZWagAAyFIP/Ak/Af6WKs0AFjwiZz41\nw89EigAUrFtOwLiow/pNBZ84N9rq32514cgVvBJc1BINSx5LMNeBR2zt9A3i\ncU61hxqbeCYE1nj9m5O5bFzcVUiwsUX1In0ElkNfU20l63hWi1wFu75EgTu+\nqzcI5d1r+JOHh1CmvUIGY3UiYg1yuw8wPcaKl4eqOmFOHWFi2F/AjpxxO4Fi\nIAuZTZB9sfvT9U19iZ3+NG2EGtLB8WbHohVpgBq89PJSL+B627seY61KwWw3\naDhRnT1+Lm65eTGLf+rYqJgED3D/Pj4x9rB7vRTU5mW1T0NLAZuJMuVf/jXu\nMX9CsCaSYFMpdYaqQvNrw1WWIPEqapCmS/gn/LTksS5bFAunUWwd7y0byYKT\nbF1dBDih3ZyX/T5iBInbS38PIlHcnFXtygIAZlHsH58bOBumFwVzkwVv2+HK\nyiEEOQz2B1SYQVaX8EOogSOCdg3x5RZdHsD5sz8SWKJ8sPRfMdIyYHNq/IMY\nXzoLv8a2MJRuwlNYoxxPEkiCZjjMzSzAOi/d8GsE7t79TlkxJqeMyXUfuXSM\nv0cFcrNbhaBiIOyOoVCJ077+J0OBqWT7bX6g8iWydOAY1z2qbE1cJXVJTeyV\nIroElXEVV3VpdH17ZEA8YZMhIKayNEZ4JknsGYS3CEDsCVTFP1uD7dZFcw+Z\n9KBM\r\n=hvmz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/shape":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/button":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/typography":"8.0.0-canary.e0560522f.0","@material/icon-button":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e0560522f.0_1596648075241_0.2006569967273939","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/snackbar","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3283b9a7df001a4b683ee4bfbd6017ecee258402","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":40,"integrity":"sha512-gwRf9zm0QxVd5iK9lbT1DyjS+gVvecAiHKgKE8skZ10hQ+XbRCdqbWapz3AgCQFGKVxEhg6+jfxOKaE2Hv6bmQ==","signatures":[{"sig":"MEYCIQDdsdDhUNrcgwFBXbwcRK28TddCuerDBpEYDgEyObUh5wIhAI5CF0xiOrPEXthCnNp4qfE8ZDtEJ711JLosJrw5gUKc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu8NCRA9TVsSAnZWagAArr8QAJ9Eos0pTeESNcr5EN9E\n+kGwHqJ2VRkY37L3C2sf2Z2dhDOxReDvHz3bN+XEr/i6qfvXr5eRHVDFVtdM\nZCcb92/QgBYFOAnxjkbf8WRf4aIGQtFFkK0G9hWwHhKbnd0Z/D/2qF6pP27c\nUHyT6PDdfrtkx/0yTb0LTnz1pR+UCnJj9k4bLPvQq2wo7RDd0dzwdTEmw96U\nG1fLnn7c10T9KSHajNn7U6rcHxZqirjiLyuCbaQvlnkVT2Mt+fRBdFBcceOH\nEfr2GMt4PeSCsj8kNsjjaj3kkAHmVjVpgDQvw1REoMxHBuol1sxvwmJz7sLC\n/W5BTNr3KmLxDywyaEMFkpVTQZ/gWou3n3LPRnFiHZS2FDWpBJnXujK3J5NH\nCDZ1Zm45JyytZ4pWo4CQ/QVbgA7RuKcbtFhxMgyVDZbahPlGU8hElgdoHIWU\nTXOoWf5h1PRuc/E6peXnrr+/rUZUFdgRVLnv1+rtGwRqI9Pn4d8k1GPNawfW\nU0G5H0k6nJlyH9cCNNetiA5dd0zM4N67RWpDrrykmAG+Oc07mRMNZGUsDp6s\nnh37Z9+9WIc3hHcMOOxe6BxCHahZ6/MkxmjgdBXGXu5RMXQebFLhEv71EX75\nm4XK0CTtj3anUOIHG/+A9qfbx1nnX+zuXpsbJAqExJZefF6aMckcML8oi3BA\ncXd2\r\n=1/i0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/shape":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/button":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/typography":"8.0.0-canary.08ca4d0ec.0","@material/icon-button":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.08ca4d0ec.0_1596649229403_0.5437317121860072","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/snackbar","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d4479e90dddc3b0d577e89db3fdf2b29719f65","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.08090126b.0.tgz","fileCount":40,"integrity":"sha512-sYqAX69ZwPER8UFK+prQ09wvUHcliA7q5fz4FulGkcI69b1bo1R23dR2gcyQyN2kVP0z202Ye0xprVjXwMbSIA==","signatures":[{"sig":"MEYCIQD1yzmBtmaMx/3C74OwX6ymi0Vr5PVBqk0PQ7eb/SPaHwIhANltFzcgyYQX2pOx64CuGJvVik71MeA37LpwB9y7LbI5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFsaCRA9TVsSAnZWagAAH9AP/2C70HEkm7iW5xs/HHRQ\nrOx6miVP7YgLSbJK4EQA/PCtPH3r+6wa7tg6+Z2iiymqgmP5+iQp7gcbQXTa\nMSZEoiUG3osRZp+2fqMXru4KVL/IkCT2zxWIKzeS71LlAGjpLyesffkMHp7c\nh0wye8ARLFQQJAp75JnekaU7hUOOtPBkP0jKag0hpEozs1IlsAtjzGmRXZZL\nBL+Dw9XBaSgMWkG3VgdreKNLoY1ITADobWrbEsvVYHPe/PGuT4XzNwv+95Q2\nklj8hAaRq0nnphphwY9KVkYJ2FcMnuEUzKtp/U1faLv6CJPdN2HJEZvqimd9\nD995/iizSnvrsBQf+cXNCYa3+nziCx77WqGUmkWzuncOC0IpqajJYwlATvCS\nCMG4RDqPDM89WediGW81SAoAymz14JOnefdEzOZV4DwI/VABXUF+d+WSftSu\nxUJkMqykajYmNOpisARbjQk1ytrYthyv+lh/2avH6mSXsj+aYmQd4+Huv+kU\nm2AZ1bTLG6UNpeah4A9ADMaLm4xDLripEdsBGZakagpqKZP1rcqZN+35DYDK\nSgEs7U8xxIgMUFASD0xHNDkmObZEJ4oGFvVOL4pcoi5HUL5sExy+EQZ1Tg6C\nsDZDEfvddzRqwJrMIGmytRPrrEB5antpWNxi3P7a8yfqGf9iyXyEs7LgaWr+\nu9Kw\r\n=QCxM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/shape":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/button":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/typography":"8.0.0-canary.08090126b.0","@material/icon-button":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.08090126b.0_1596742425920_0.03163306183585157","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/snackbar","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1509b46f5ee04e16ad262087525a2b7ad4431e43","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":40,"integrity":"sha512-aZxmFHf0MUMmR3cHh5Zjw2XfcqltwuroR0ujkkWp+2p5xVem6jNWvaAUUDA0dxHOKkLrDdPkMWL2ULW+ZJ+PNQ==","signatures":[{"sig":"MEYCIQCxOunI9JUpUiCIV1GcvU3GeuhzPUd11NWxjN0c/WonfQIhANIZDTtP9gAq/o8pUjAbDrVDJwT/P8Z5SSphb9Qxzi61","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHtPCRA9TVsSAnZWagAAQFAP/ikU8IuloU43A/PXWV+e\n5yIOHmAlTszdGU8NI0ycOJhNvr5Oec4mDkmp9m3RDLa4csrd4c+rKzxYS5h2\n6URjzlK5QWJtni0TU2+SHcUWPGixgRhtud6YAZCHvF+q0+88x3oPdJOVnroe\nfzUyAo8/B/oDHSQiVoSHBQofhJBMwLlEADGN70HVXOpXkX9P06lebCc85mfi\n3vGk/2O9lTo6ApyFe/F2rf9vdA8T8uFi8snyP1cv9Czkm9eBg7emgMikulbb\n77hNbzHIbow5oeUta2+VuM9fujSFmJOgTgUz9W/btEx5rjQrAYMwQQUvHHFX\nWgbz1Jg+7SHTCq8gzkeWsjTGbtIFzcWmgo2ZORpL7KEYlZYCu1JBAQqO2Pr2\nT5D++1dRB3sdLmzP+PkFZRPPJHFMrsP4vUbE7XuHOhzrkXTB9bIwE4ACciC/\n60BN+tdqOUpWnVMoQYbHWyilfdffC0yAlD2/BoozjlaXdgbV3RfPm0ykWCBq\n/rcR0obKN1NcmHkMwd0XNGJEAl5FHOwUsMyi1cWNbvZPYseVseTpr5Jteu5H\n4Vf00pIYHWKXFeGkc2MR5rlhhgoTvioUq7j9yLtwCx8CwLP8aGsxBHe+DtJs\n5veyFsWSNfI3piJCCe/CXVbap2G0tPZSH/trhIdxDDkk7Cn+fM6nTsIHJQ2H\nV5TD\r\n=MkRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/shape":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/button":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/typography":"8.0.0-canary.e8bf5b2ac.0","@material/icon-button":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e8bf5b2ac.0_1596750671137_0.9195968285574283","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/snackbar","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e429d951fde360d7b2f7c01b4caf7cf2fafdc1f4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e3b746208.0.tgz","fileCount":40,"integrity":"sha512-Fr8hAuVYeWZnbNaiRbQe2pQJFEnpmsgcIXn+N6rTIadM1IUeSOJcrjvFN982pAVIxOLa/OBuQLfUuv9cPlIHFw==","signatures":[{"sig":"MEYCIQD4l7P29UrHoKqcE/n02z3iVjxn5GRQteTcYxqdM/+4twIhAOeip0tUZi5hcAAhh5pOyDzPkNYIwJLxEWmEPCkvu0RB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPsCRA9TVsSAnZWagAAlSgP/2LpgXgybuoEecGTbldi\nqvUhQgcw16odVkPvvuAl5x3swh5+6FnscFRaQqW3s3s/vKT9kY2i2nfSTem6\ntVgwZGLnbXRRkCZN3E4bgCKW1c1housPsGhw1mF02N/VAmoWc5Mqvodi4Cq8\nwtRF5GOASmB4plSmhQe4CB2RW04mnvdrmDjW8vEdAXac7GItAW4MBvAJLhSa\npCj75UP9rKQ6fNz4RpL6Dhjr5d6TRKLfanTfGmQxortXUHRyb2TBPfVFf01X\nIwHalpBkOj3cQ/6rMQtBwaFNNT8KQxqpxOLYK+bfbJg+LoNt5PD73Jw7ukLK\nUiBn5fWqikb+uuc/582PsBW+Uo0Z5tAP4qKGrxWcnay5LHVzclZhHfNJ3x41\nhTfODAB0BjwvUXGVbUfi/pPu2T9h6KDDildz6UZtwg8FdVFL8qjHYSffpfBV\n9W26G5XhJgffjWqVka3bE425GbAr++no/NxXgq4XNvM6eK9hK/20jbRk/5Fn\nLFO6HPMYqrFumXe4XUNTP7UUqKkumzWXy5pT0upszPdNNIYbNv2FOR3uhGR8\n7fVwFA43DJrfxIE2a0bWWv2bO0m9R/JIcqfXqccOQHhhPt+wG5VRaq93amYW\nPM47uwGEQe+2j8UsURQPkYxakIiHPODHsG81BT4Ma/bnSg0gYTToNZnWKHRh\nFAfJ\r\n=W3f9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/shape":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/button":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/typography":"8.0.0-canary.e3b746208.0","@material/icon-button":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e3b746208.0_1596752875594_0.5566045511931035","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/snackbar","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6e2f1a08abfeb5f26003c5042ac14005ddfc591","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.96a640534.0.tgz","fileCount":40,"integrity":"sha512-CwWfbAxMEXbMRH+fOsEgwIwIofsOM9ISH38EMAgMpnkruhjtLPu7TLmJxp6pO6JsVFlIKJGsqKXALW+vz/DVoA==","signatures":[{"sig":"MEQCIFgKZWFPZRBL6bnvr55SZTHR2Tg8FPhfNB9aMR4b3HWaAiAmxF+8h2mfuMoyRU441yGRaiNpPaHuaBTqNpqRXzVQIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdgCRA9TVsSAnZWagAANGMP/2KUWuCD92TngNhgVP3B\nafIfPEyDO/dhog3kejCpOMdFQkFlOYXpHShEohgSa/Wsa+jEhGxMtCHqs4j3\nvOcAl8I3b8TGkpXzZC6vflDJKbhqMtMxAUJFh/TkGOxCyOyrNlmPIcBB1ySX\nICATKZyfXtYfgzCcmisqF0CTZLuqiqTqfqLxC7y8EiaR2jx4UY8NmgMfNc8K\nOaRlvo9DV481Hbf5HFWRw1XTCB3HTk2WUYcLvep8tjiQDhF2iwPVhZv5qlzk\nJJj0WJDhxxr+8Xu+dTbuwnsNHJ2+lYu8a38+bBzUGtS+g2t4wSC8C2kKMKRS\nDOvFragJRDzWNGpT6TeZTUXfXlf3iM03Gh9T7GxESDZg1hj+MP2mi3WslMML\nGCoFFS9bPvmZtog6cgC3cGS9cu5ohbnz4bEmN0Qkp8asCDV0w8qK7n2We81p\n0bAKkhO3RHbnI7/l+4A0UTRJMxYC5NSs8ZFXp24S2+eawaXgZEgDnXnL7x3c\nsqfMcEl8SBugkSP2oIpGkqjYIilRyE3swgQCNMDDARlTmJmOKZjWG/av4UfR\n/p3ryvSQrJr43sUcsbXyagaVP7HgTWM4L/Fx1xVocg8PK1CsrW8oO1Jnatr0\nXW70GN6JAdn22hZ681DCqG/ZBw7SJFSPFy6oiwl4LwRwyMGBOfxiHZqjuiSI\nJ2Ji\r\n=+kKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/shape":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/button":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/typography":"8.0.0-canary.96a640534.0","@material/icon-button":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.96a640534.0_1596753759988_0.5066250485697021","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/snackbar","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3edae6389b403e0a7a61969a3f4443c7cbdd5068","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.9f9aac825.0.tgz","fileCount":40,"integrity":"sha512-qbCFCQ4LGC6FbQqgsKxaIuop/elBbKKRX6KRmSwiUQQbl90dTNPjBoR7rQ3vfgftsGYAIBotQZQupwxTWUIBaw==","signatures":[{"sig":"MEYCIQC7lJ8K1ytMw61l4THLlh11TIErO03h8ktDaTFmxf1HKgIhANEFvPgqWB3nSW03Ok8bGytjOBAPrexBGqbhTlZGU+NJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8OCRA9TVsSAnZWagAAFDoP/jKY0owzyCcdKuNBqwlv\nOzrLBUUldAs+8rFU9+kKNTyGsZ/yDdc82spIODGW6id7PAQoCvsdE96Fhg/2\nCeUDqUKsAtgPw40hqU92/dCDGVqnBoPlu/Hk77jjcNH/GwyWPx35FoHVRFqF\n+p/bqhYGNLbPb2v4Q/E13BQRene7qPiJw3PDpS0iO5vGnVy2IKl7NCQhbUSb\nJakbXhbPwwOSRdAhpAmmYeeS01+PbGHyObdWEeudF7of8Dx1Ddq6cjECC4K+\n+n41qxNCESr9fJaLkC7zlUJdOfLCYWFU+oUk7kuYDw5Pyde//i+PODCqbh+s\n+hIYNnpcGchn9YPyGAJWFmUl/TIemvoejBLCkZhagBR5I2tZhK+kz/HAuM4S\nYiy/n5MDGqWSie2yzqARGounuzUODhslHGsvB2e0RPbHvJvDc//iL1JF/RMJ\nlI5OAOBSzbLy6I8C29D5pOl69wUjN1jtQRDBNEV+ASGK0KHdM1n/IOGtnz3C\nDbOP6sZkygxEau68pZ2AOGIAo1++grO+XttOMDkCHG2sYf4mIdHwA/vUy7F7\n9w6UEsfWPDJYBVAe9AbMQ8FnWqFf1AMJtpMI35hCqp8FI9FNbIZPVJF216lb\nAxiMv2293qNa5wKfP8gf6PUoEmhJvTbK7Vzt+iIplusRhSwSL12/Z3DqLm+t\nr/MW\r\n=NWt5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/shape":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/button":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/typography":"8.0.0-canary.9f9aac825.0","@material/icon-button":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.9f9aac825.0_1596833549611_0.52733063562174","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/snackbar","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86e6648df6eeaa7130abcb1643d5a9dbd25896ee","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fc65fd00b.0.tgz","fileCount":40,"integrity":"sha512-Dac3zOhZipbdtl37IFFsGr1swRGJPzVr1h0S7xF2y6lghqbgduAXgcVJshZqsOlglbkDnsDoSv/v0y3XrIKA6Q==","signatures":[{"sig":"MEYCIQCNlwlSRTsfcsdZCnUOmZna0eEHRRI76e+nYQAe7SKG7QIhAPEXsnDGqKTJ+k92krzPGPGPn50jER30yusp5dAJbHlk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWYnCRA9TVsSAnZWagAAn48P/2e/Cwq41YxR2c0nbk6M\ncAz+MKMtY79mY2GFS6if/yO/4iGvgE4eSN/B3BupOPMkVcgnCybVuQ2hy3Uu\nDhOnG91qLT6f1mildXorrhR4Av0UiD/QCPDAdCFjyO3NyQVcNsiy5QsWSDVR\nwdj3CxSg4wJ7Cx4QB+iBI89gG5CXMDXpAyQcMYEUb6Bv6AUxDF95shR/XSSI\nlZw4HZlCDAeem0Kq+BS71eH1hf+/e/AcYONu3J2gupFjAQM/5toyfKEm6/dF\nFux8IAHuLhvc85Jyi8hKWb3+HMZ19Akmg6MnRJiGkh/VhblHR3d6B39IJZ1/\nCZnIiUo5WgDsLHD5mC7kXkoUqicX9RteBjc/W3SNbJ551K2LLCLIiMgg1ZuP\nIzTKsdW/Fe73U7eD/zG8XAhcECg40mrvGf+tr7wTCwLY9exm0F5AshjKKWJx\nD+2OXYvpBBSqZ1p9zPmv6jOiegTMdJm8KAPkQZFz1E7f62E8mb2GCMHiQpg4\nkHa37rLI2zkofhNTV0ouNEYOoIiojRgrcwa7eDHl63vS1VAdJEEbkzbUZCxt\nN1imWsdWON0ZWxZfuOBEgrHWYUa2Mn61O/1AEg0tF/sThMR0XcKzwFkFwrOo\n2zn5IL2hxM67gytt+M6utxmDRVtuVDxridfuvKcqU4DsjvncgsoxBpXMJXpU\nyMXL\r\n=61/m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/shape":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/button":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/typography":"8.0.0-canary.fc65fd00b.0","@material/icon-button":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fc65fd00b.0_1597072935338_0.6913459254583652","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/snackbar","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc8a2fcd6ccd7d401c02a67a6456a8252393dc1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.02e372c5f.0.tgz","fileCount":40,"integrity":"sha512-a20fdJFLMEHJ12wOn18mGYcCatZGf/Iwe8C08tR5ulun7cuqADoM9BcbKC3C7Xirxr0lZ+g/XHdXYhC/gwx+CA==","signatures":[{"sig":"MEQCIDcf5VCA+1TwQMs7uKGBfWVUf5rpJd5T7ju/1RWRnMHcAiAu6Tl4SZVQJV51uuTIXU6kZ5o43+z6rfT9zxI3Q0MJJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWyfCRA9TVsSAnZWagAAGwcP/RZVDxLEerP2lFRzOFbU\nwHcAX4qW3gk3bzd0m4nXzO1SkihBSuvG11Mi7KTAiZ8maE7FlyR/3ZrIHZdO\n39REL3c0PgigQH/VwL4rH1a1mICPzdt1O2GJQhG0eW7A6E83QjJC9tiOSjmA\nobTqOz6u+WCA7cMs4LfS8AleHES8DGyfL8j5cNGERv1G99/f3LtS9QDXyj88\nrV+l9t70WGwMn6c/kPyqkk3TT5o8ZQpG51Z/n68Oq6+Jnq/UAQaGm1hTsXOW\nPaNW+XzMdrxJsJLvU4ull5rnTuYp0w9BobGxI1Z2QNxMuScpMtvWhfocp15X\nfOiNTqSnHEhFt8TAE0wkQrygpoI2w60JTOp6q+cp1RiALK9ujXJX42t1ubhV\nxOzu79jSLM9Z+vvgKhrkBc4lgi+l696bFbsGzz9Subr9YjGBvOREoCEM/R47\npIF24uTb4g+D4HiyDZvX/ELlTut7e29AcH6Ge4uW2hJ+700JDew9S7XSQp+Z\n7DFe/mph7ey7LvOjNg/TqNRePRsHHit1eelVag4rFoS3SIpOxujBZgRt/zro\ntpfMfinMCevgRjll8hpKXBBnsWrpyrSau4y7QTEeZNzNXVcP9GOFZKNuZR2X\nWdM7EwNDX42EDBi8c8jF7thtuI1dqTqw1h/G09h+tcOHH1+9xdQIEoSA38UF\nLbY8\r\n=FayL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/shape":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/button":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/typography":"8.0.0-canary.02e372c5f.0","@material/icon-button":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.02e372c5f.0_1597074591133_0.39123156143058013","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/snackbar","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91ba27433f82138a834e98f6bf8f593f452b3be2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.66669e3b6.0.tgz","fileCount":40,"integrity":"sha512-UYxAcstqym6fsi60Hs7SNkZ7fc7Pm53IiqZ3RMumo+1i9iTkGQfmXT6vhHyOzfX/ukxyVZHfEnp47mMOwyUiuA==","signatures":[{"sig":"MEUCIDtkPA0/nc1O7W+CCXCr2JasrTajgVYSy+qLh0G6z3Y4AiEAtyu6w00H+841XlPTOEKuHEbffoAeQnUbTkMuFbwtAao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW2QCRA9TVsSAnZWagAAAMoP+wcbfPRsayYCrJlhDh6v\n21ImeT8A3fcMPoxIQ/Xb3GxiGy/i4aPAFj1L0ahsqK0ZS8jD4hSfn2uzedYI\n6LgACzyE+Z4NU2xVE1WNTiFB4OraGM/zdhvOsx5mIZBP6BCYRxHIwwt022PD\nr3k4ht3SPM+qxJabK4oiORdZYt3TBV6zfJmvA9vxTV8HjPeLRK9vVXeTwTCj\n9CKrb8d1z7E+0q5EvnLwVomCgjVJvLV3R34fBKjTGBgX8Y+reHkNWKqu2gk8\nrKe5zFsAUA54QyYYar8USyy9HfOc1w6tSNc/BexiaI/Sq5mtxqWTkYoulqUz\nfUZf7k9KRaAglwxalBTSwC6V79TdOdPf0ZMLqEBX7oaHE2hJUaMRzMx2XkiG\nbx8+TsfvacTFjqqZgOCCk4H1p4U2jeOSOQX3bpO3O1oLMKWE7WD0P7yyRQqw\nYBChp63vXzgUrJHi8CmaOjopKRYCWEdaiedGePgzAvg+ccP8uR3ThmSPj4tI\n9CGQTQ8U5j1aAHc3SEgSVXUB8US598Fq7wVXKl2dKkOX9m7j1ZpwtsKkKY6A\nKaoRzZ04+QLrX6xf4i9ZSGxaC5DIfXvH0yZFYSiP5JFMDdc12jCqiWkXYJZ+\naFpFgUCkIhq8+INxh87U5WoQG6fpG1MkDAgifbFsTbuVAIBRXF7wXnD117Uw\n1gUe\r\n=VtYE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/shape":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/button":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/typography":"8.0.0-canary.66669e3b6.0","@material/icon-button":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.66669e3b6.0_1597074831610_0.8739983388359651","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/snackbar","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30b93ece696d90fe07c38774d7885eb8328746ea","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.6d1ea9761.0.tgz","fileCount":40,"integrity":"sha512-x9GQdggQLnWdzoZyN6CpLK2zYK5iDSCqdcQbgmIm/VZz581+fVUIvkpMxN8C12/jWUS/wcW6oL8u8+UOpIJpWw==","signatures":[{"sig":"MEYCIQCUuYSafU4OMv53/0Zq5cQVMGIcMgIXZ6No0o6l2I/QXgIhAK/cqxVortKvXxAX6O77Clo5R1HB4GINEX5F/Dk1/U0E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqveCRA9TVsSAnZWagAAP5wQAIuDbhLD5JGehUrqUASp\nrVJyFWLSHw1zZeClHz8w1IqbhifTRDtnkZ5fD4Ejnx6e9sTYIvSrvVabIkEd\ntqbWQx1d50M7F9EahlbrEfAjeiSkJeg/KGEjxvYZGQTvzHUloxy7XEoAz34Y\nLUkZurueFjflalR0SgbjQHg5VT2dzwCc/7mZpPQu2h1j0KSKhGdLZKgojT6F\nb0ncIIExmRI86YsPb8x9tPytAlRdteAJjfxTMudilprB5ZlhUZr397vUK5Y5\n/vyHfOb8dpSnhFdQJWEUYeHcxG10cbdV0nCxuHqadV5IFAZX34ofe2qNMIOt\nb6bQKGAZwRDs6tgVTXZM72MpiCHHMTqDXj9bTcdEgDmM0La0oCH1Lki6Nvdy\noDcWmzMU/UrChwTs6TkqJ9cYwhU31IdwxhfeHTDTikQhi+4TbqPExDTDP2Dq\nsa4epycaMW3UUrvn6LBUiVcfo+Gx6tWBZJY49j5/ydTmYEoRovz8q/U6YRLc\nO2ZADjGofQWO6qt8vLyLL6K6GVlqVrPhCsND+JfyWaUE2hxTM1Yd2pxVM2Qg\nG823PA/TMmK7sjSyJ8JMS2hlE20xlxTg8+S1Kk/71C6gUVGqBmS0dcreZq85\nissP99NGXjLWcfBunEJHpVIuwVfiBlgIyzlT4lEWEi5mEeQYgzIjMSnEpRhB\nOsIA\r\n=lu91\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/shape":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/button":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/typography":"8.0.0-canary.6d1ea9761.0","@material/icon-button":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.6d1ea9761.0_1597156318481_0.24101282678285552","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/snackbar","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4102c10ff41a664b4fe71a8038fc3afdf59ba162","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.79414bf9f.0.tgz","fileCount":40,"integrity":"sha512-0pH3jjSshFzWhZqMrW+80iha+mJuio1UZGGg6lGrc4mxT7o4CFNTIsMUDFGhWPvcazNlOQIt0PEfy3MWFE8iBQ==","signatures":[{"sig":"MEQCIEERaTH5QojdC80XVDoQ0Bd2xo+7UBJu6LdVE6+kZ/kwAiAbOwByGnzB1yW6q/hir8TmDuJA7PwUrpWTrvmnOHvMpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutuCRA9TVsSAnZWagAAS/cP/0he4dt7oSq8IVIa5EPX\n8LPLKnMrlMjGSNYDTT/EOzlM/TGHNpykMnH2PX/PmcONbDJRHFDCik4+3igq\nReG/wDLZBseMld7bQkIPZlWOXjZMmRA5H3FLrDHu4qxr7iBVUxFioFQhjs8w\nqkezuxYFTKFrDRZqC4SchYtH9df+uWqAkWrg2V8mEYykQFfPLsZ5NNyy5t99\nWusmo9c5zvDQzJat5rmSMHLAf2zh5A/phCNeDEr6nDEVU+bt+N66RLTTsuSG\nsxPVyUsK0bDb8WzEw2BRmeJQkKxsOGJm4NVbaeVtfcGwP0KxP46KCZi0ym16\nt6pyEmxMtk0qC/PNCIduwa8Jw1QAHSPSnABhl/cdz3G1mC91QGnvTZVe3xgk\nmaPHEEk3k3GT9C6+EHmii5cqhuU3fesw3YEBfNzNsDXwn0QjJ6Pxm86ybrLB\nFtuslVjXnS12uu5IiQvOllR3bv1xG88KiA2TdPVfdQudqztK78sg30xDCTFB\nL6RZB3uFVB9uPfHK8jQ8cV7SqxHQj0AhbfhS9codRGLBSsqOZ8qC6dt9W/GQ\nlsiVhFkOF6GoF9z6azOsm6i0kug8NFBFFU6tlA5+paAWDbIoJ+ab4Y4EyPhV\nKoAUH04KH/ijFQ+dN3iR/jZQSLnHDk2JP9OF3xSD0oqjRWA86w43T/BybOCj\n20ET\r\n=e40/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/shape":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/button":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/typography":"8.0.0-canary.79414bf9f.0","@material/icon-button":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.79414bf9f.0_1597172590405_0.013848940505184926","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/snackbar","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5731f33afebbba3324ba6030052e7a4b7bd963b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.85a5272df.0.tgz","fileCount":40,"integrity":"sha512-vgv9ICxfKn0pH5qXzSc1JaONhegahiJWayVh2APlqNaJCi6rpHnVGV1wTf34Fn6uKm5PNp7pweI5iskk47zYNw==","signatures":[{"sig":"MEYCIQCUSm7G4Z+mX3K1rXXrbIpqnm3rFRS1ZkQ3GdzwoDyZhQIhAP7/hIoNyv9XC89CSCA4j+AGidqeNg3OT5imy2GYeshD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrzCRA9TVsSAnZWagAAZxcP/3PhWt//3Qqlbu2e1YVX\nCAIC0D2/wpyZH8shLRvXreyxueSR2VCBtzxwNmEju2obilIocokZ5dvqNnrk\n3+Tcs98P7ylBuRWM+taPGpzq9VyZK93VyX+XYyYe7wGZCDgFy9xKHik8PRC8\nyObBcevk4xP0EB1MuiL7KEmAlZu82L1TzjqjQZVv05rQjDuRdgMAyY91dB0G\nHojUiyN527fy3Hn65s1vUGtHXap5LPz2ntCQTOvoWy+uGpu171e15ZipfDEH\nGJk1Hi+FgvJ91d4AWhgHYjzF0lbleT/I3ZE7IVyxuAnw/S8VnBCW6Z+2pvxK\nEiq8Wgi0UJ3tAwIRO0b5dNMoK9/xoY4v75Ky71iK3FqB5rhv33rrVFHAyPp+\nJ+rpCWzKN/InkI30SAMFHN0tPpnZ/aal25HZC0GF4r78LgecwycLKg/opyRT\nDoUlZUJC5dOo8v6bMdWrAS+iPNFx5j+3sF5RkaSaeQss/4jE6x5iBvq/WF4M\nOFjYE8U6oHw4qc38jtMzB4QGRUIs8qpcLUbDJSg4a/YEHP1uEvJTnE+9y2ko\nTyDf1VNwdMqJ2PyFVQIfBIKjpQFKrPKbpW7LJO83RNXGVmXlzwERBw9yPD3w\nz+LUoTPlv4cqwgXB9A9FuTqLItT36B8HfAXrAQNaTwluMEeV3AP6jecm01jF\nxqS3\r\n=EyAq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/shape":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/button":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/typography":"8.0.0-canary.85a5272df.0","@material/icon-button":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.85a5272df.0_1597176562954_0.6761171197867724","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/snackbar","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a6b949cb911c533be3cab72abe3909137544ad4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fda053eb8.0.tgz","fileCount":40,"integrity":"sha512-qbMcWRyNRkjpnESittdb6z1S2A37Rs2e8jY2xERhE2lGaBfqEJe/B9iwOJvQ+dZ2MW0zppApr2i4SDHruXPnYA==","signatures":[{"sig":"MEUCIHhEP5wzVXz3fcO/j1MAfXrpjh0619AEm11egH//v7LUAiEAjvbSKBbLV+keDOw6Zbri2IxA8m1/WgvJ9wAVGQ1Vbng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEuBCRA9TVsSAnZWagAAaF0QAKC0Cf0uwIvDJsXcC51P\n5nXhHXeCw4+Y5omHQG9vOA3C/+t9bH1Bkiw56EW5Xp8kjJT0kP89WC5M5D1K\nw79cq++ZpPv5txBM8I22SHr3Ys5784Q2x+9C/u9fjH2dSYcnZZ2ONrp1U7o2\nLgn0RbyGd//UtQ27IEFjPB9gJLaeXxNyMjqZE1jR+PwIL3VxC/Wrqs5UcwLA\n7HCU1CBUCMkHRWFTtsCgeqymtkvWxQbsQ0od8JiE8XcM+T3MulAKNwvPrMv2\nG4Xtr5g/2Wt2E5KLlyZ50UVROBZavkU5SDXcmrq3y0H1XRSBIcEfcfshb0g6\nhk//Cwx2GRNhDpRiTdiNtyC2w+zyIGV44burgB0nJrpiq6GBYN2rDc928/g3\ntAYs7sjwBQxjdHj3PWHbsJV5llGaphwEghOMXcWwLRrDVfSE1cpUYF1aeiWN\nTN7ZKwv9lv18kkchpptXy+pVYGiNJOMKlqMuESQmFdMyF5+aCUrXYC15JSP3\n6+t3BofglxhBNbflyn26REpVs/dAx0NKpckG4pm7uA9jM6qJSVP2VbFzh3qd\nekmVfcg33GykL9saWWLpRNDH2hpXVdM98RQKGqwDjxFZ3pTWD8YQmHu6NdrC\nSYxnPNr+4q9d3xvijFV9cDARUEs/nAygvG8xgAIw2TjoCM80+Ry6PYpYxA6S\nomOF\r\n=L1HJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/shape":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/button":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/typography":"8.0.0-canary.fda053eb8.0","@material/icon-button":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fda053eb8.0_1597262720440_0.1844604913610055","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/snackbar","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ceb56b6b7c63b6d6510300a39a5370dc332a15","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.760873445.0.tgz","fileCount":40,"integrity":"sha512-THe9E+ta+DOXj1jk+F5c36Dy1w3WkrWOWVo79EZ7nhYvnlmFc41Ej6kwN+r1754kaqYLzNt25PDoG7ULsEr1GQ==","signatures":[{"sig":"MEUCIQCCTDJlF+Fuxdz9MF8x5MBz3qeltrUNO+EidIDc6ZuY6AIgTkacwpu0e1tScIcl0jh90sbxt/sXDn65BKHn5nDTeDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGK3CRA9TVsSAnZWagAAot8P/iMVl2+ISUi9Qg+oOiFl\nwDp+oGvDFl22o8ZoB00hveng87dxOu4+7YxUw5d67CGKMrDWn58qz49HsdkC\nNcaDE3yuTdVgUyccgWmy4vt643EfgGvyg3wRGp0JVDLLt/kPnWm/3qeH7XvF\nKr+Cp54ALWsuzqNIH94CzgDQzeAHxZ4vn7a8xoUy19xYV6A7mlkGR0FIou4M\nKxNvBpkS0PWBBn33RI4kmDTycAFYm5cgEMp9vzcSGvy97ax24Gs11u7/8+7o\naW1cexEN32snQFlNrrX5zb/XPcQtTeCwHVZGOEx3YhVM+p1mzc4DIE8lY7Gs\nroteQ6cZvn6ebYDOrtQqIX6Y2t9t72+swbrCk+fqILb+0FoLwyCvneyiWi1d\nF4i6gh1h31XH1D8lu+pp58KN1A94VvVlmgn+qC3S4jKXSJhDX27PMTbZ4A6g\nwPYhAg+jUyU1WJBwiZ7ldwd34YScsXALf37ch2OHzmFZrfAgiV5YC2R2NdFt\n3GLIBrZqt3NsD0sgTLCVdYvWcesA+B7/40w1G/hUsvJe0ky56ie9SC8lQaKy\nuNPiKoB2CTxn6SHXmL6O3kwrYzTABT11BnzN1jQkCqt+vH3MCT5UO/J5XQ1z\nIPi3qc0jLiWznkOF3uwA4zDL4XfMK4r+hd+wnPvZfMZ01F9cZMLSC3nsD22v\ntAEm\r\n=nOM+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/shape":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/button":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/typography":"8.0.0-canary.760873445.0","@material/icon-button":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.760873445.0_1597268662912_0.21208480438178157","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/snackbar","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fe34341fd3a646b6e495f77bc5115cf62f404d5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2f4711a30.0.tgz","fileCount":40,"integrity":"sha512-U32cbdrdMN166HMPpywv6efn7/Cxm47Gh+SI8JuY7+eAEXEd7oufJGYIozmivjibBfW9rXEe56YHTyDQE7osew==","signatures":[{"sig":"MEQCIA6fpuC6ZUdk+AE9s906gUA9lwAPV947nN7vMdmN8CGBAiANuWyhyRf5BRHUpkmKqydhV8/FyJHlLCD4Abx/dxuhEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUQCRA9TVsSAnZWagAAcwYP/AngVKsb6jku4KkWb7zw\nbYSZiZ1NHwJC1iVJiVJ4syz7sR6Dp/DWmVpey2kx2AEOnrIG54Ccy3zhFFRf\n7HQJ9R93P6d8HEQiLbr2wkT+q6aqz2kEFCDFx8V2AqlU5K6+Sx3xz3EvKdGG\nGXQRZcbIjiXizA3nwO63ytVC0QPEuKiOTJV2tYA3hONNMiTjB78209WTFcib\nQRogqj19xvZNSJja3y+7UwmpOtFUJMXJAMu5mBcmz0Com9fzCWIbah3XUmzh\nuFl74yU38o9jgyduzglDP0dKdrI4sPwMwiyrizdztmboF4i+WcxHH8KiNgbX\nFDE2Ww9Q442uy8sRxEe58ZHkRIEJHTjKoc0fOXb+F68dKWptfreicLfbJjCi\nBm/OpjYeww8VKpZVdZuOGKyykUb3YNiPkJKirKjFlAkvzKQeTnoGxUv/1v+Z\nx95t7mD+SDWiEpaT2AlumtnK4qBO0NDfZSgkKoIm9nZibYYSb8hTsoEAQtgq\nRPYl5yEWDWmNVNtGWjjWLeO28AOGgWa9r12Ahyv3/CM4yXDb01pvLwCsOvkb\ndApzq/Ut7H7i45eCLq2vs5bmi8EkMTg+0/yaluQk1hF4cOK8uHkyZikha/ey\npUggjrEhSbEtZNupOoegeClOaZoH1TOB+LZ4TkAL9WzN+hih+TyXPeNGPo17\nL+cc\r\n=7+ZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/shape":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/button":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/typography":"8.0.0-canary.2f4711a30.0","@material/icon-button":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2f4711a30.0_1597269264455_0.06183496247987619","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/snackbar","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30b42911f322f872144b6f124d6d36455462d270","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2d72f3659.0.tgz","fileCount":40,"integrity":"sha512-96UajnUOde4gLrytl2TS96PM9U4nXj8UyFb4F1GaTAzoy3h9B8AzOHXQixMB7F4Uw3BqxxiNVZl+o0E8gTEJTg==","signatures":[{"sig":"MEYCIQCYqVWhOBzndobmtulUIvbo+nsQ8014YOu60sIG/miGcQIhALr8fa4DHvUT9Q1AesCcZGZ9TYjsJZMWBbQPn+ACu1LR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGbVCRA9TVsSAnZWagAAqn8P/2FOA8wsp41Pd0EH9819\nwqjTrKfD1NgRmqlhEo2Zk07TfYf00ktadmZXil5HGO2VzI8o5+J8mMXrigse\nEIKH7jTAmPD42KXGDiUmg+2AlpS0lwq4w+T+pDSDpgCJFkD4Bf7jYWGbtlHO\neDHmKqWCz7/p8yxIeYWd9AcVE/YX93MTA8UxGDXw0I5Pq21yKRCFP+a9QSQu\nfvna2Q8Y+9QGDTbUZPHZwVEZou2J3gQwjRAnM8FULuCIm3+eRkwvMtQcRcTL\nEzQ6HY7F1iV7Aemx3/0KFHtXkUb0Rm1j+SnY+XJEde64QkUvstmKB0d+gZlp\nHEtyHpPdM1NLhxtlulbSolEKylZWCxCxp8n+OZF9K0aZ1KDizsIztd4QEh+i\no6q1pZty74zNMGY4Mpz1h1436OLLPXArPW+MTwqnDNjad6oTknhxgJoIH7bO\nHtzRdm15Ki9hOx5xQkzNg+3EDI7iIf+03FnBW0LIW++G6OKDGlujnw0IXjmt\nIiIuZZVpqMNlZtMo4AWhvxK+/D/CwjFyb+Jfg9jfwtcVaQr/ipmF2PxqwsBx\nQEReZl0/StJEyNa+ucJ/+zYIbq0jjPD0yAb0+xfCNM2YxV70KvM1YOpoqYbn\nnaog/0DnGzxhZXxBgAkOTwcj07xRxmCQmylYvEx8IEOiKoL89bPz4BjJO1e3\nxY6C\r\n=GhwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/shape":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/button":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/typography":"8.0.0-canary.2d72f3659.0","@material/icon-button":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2d72f3659.0_1597269716932_0.6851386624693254","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/snackbar","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19bba3ff89a14ea1d28227fc97c86feed4e02018","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.1fee70a5e.0.tgz","fileCount":40,"integrity":"sha512-Yf1cifm9eXq1wQqWO5JtFRbpUw4PkrqfN+CdTymYCaTDGiO0Rt8fl76nV+MrP88c0xrs8IGFCCMiA22ecftQBg==","signatures":[{"sig":"MEYCIQCXWusKOhpEBy60EnVCRrXgYfDzOFUoMaZsRfo6WuhlVgIhAPFMBoPM56vaU3lLpR7rld2YGSS0A/KK4me7ZtFPWVA7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtzCRA9TVsSAnZWagAAWXsQAJTDQrx22Yt3z2WsUHtf\n6wO0FxAWXbkE2OxqEwuJiAxAP8PTjRgjY573kUdeTO4okyOtoDR8AgZOsX98\nXVWX8jrtvDbI3PFqH4Tk1h4tEiSTAJCxCPADclRhd7RRl+TTvMSXtiO7YaMo\nvbbeJuf+CBnJNYVYEqSIUWaQEd3lLj96LXNpO+G9D5JmhNWqTw9wGt50oWDD\nSaLQ18qEtr7uh31fhiYQOuLbK7fMTP0b3ra72FLQLArFd/Op8CEpk21T1xsT\ncuIc/buy4N0TLQwZhBwKsS1G1H46F3ztPEATsfxNHUH4cXErD8lxlfMj1JmB\nBrNVn/yVvYKrVMED9lZ39/cf2OfB5XflCm2Z2/iY2/yBUPjoU8ylqc0QXU1g\nqRoTqkvAOcuus42NG4sp/0LhkvInHH9/GvcfhIPKbisZLV+CTizfa2gltc94\n7E8P0AkgJ63jA2sywrwv7uvKww2fgwJ7IZ/PlAE1sHdydI4waIDiWr6VmPAY\ncFRnMmlyD0KrGf3qPqLHhrbDGJtPd9MqQUoA8yyhiqtpGTEWwKspFZXQnzRy\nKpo/dpF1KtY56ajZH9cRa3zHipo7Jm/eQjmg9I6KK9UaAfDfBTA4+tWhq22m\nLyh9Aj8YCYKby6fNAnLmpf0LZouN8iBC0RlJ5/jHo2iyPJsy1himdmNYmCaM\neAS3\r\n=aTaU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/shape":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/button":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/typography":"8.0.0-canary.1fee70a5e.0","@material/icon-button":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.1fee70a5e.0_1597274993703_0.7006836426132099","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/snackbar","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e0aa3191ee5a2881189046811c911c3efe4a1a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.023f3fa34.0.tgz","fileCount":40,"integrity":"sha512-Pfa42wTYnSI3nkviRA0n+vLgd0wAD85JOWvNNq3vVig77aSKEd4+xd6euWBCjHoB2KfncppjUkENlAbrA9FhQw==","signatures":[{"sig":"MEYCIQCjDDm46sjSjDZLCD9dJhWtF5cRelf95VWmhx6sXj9OIwIhAM3x/ha7tu0PR8phI/AsgXqIgHY9JKaZw4iJonZu9vwZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJO8CRA9TVsSAnZWagAAOUMP/jK1X0aMPu7+185LP723\n6YpQ/cCmsJFPR38M4s2quY9JIkDwT3HQNfPlVYET3r3Ty/oSqXx9Ip53mWGr\no7putzmr0rNm76Gcy5zhUxQawvqVPc8jpL4rr8a8UwdKKqVy5fSRt8RM58YT\necj3RUA6Xr9ftgqFN4vfr4xwPsv7Vbj/oKlF40PFJGP0zBDQ0gUHkZwlGm8t\nV059PzGANYWwCiCcSlH5F16pp1Va36ZP3BaLxZibfm+cjhuoD2CdMTK3xq8R\nGPI86VVEiyItNgJ9fLySMoqYSKoO4T2yU/wLFrpWt19WhUTTyPLT8CCjZ4nY\n4+xF01h6UBw828wJYD93kvPHdY3fGwuol7TGu/VgR4LRf5/5e6pDrCSz6yoB\njEgULkGbYMZod9bezc8CdYmZkXg0TSgn43xM/0SOnfldmzVkikYXWLRVIbZT\n6OSzR8/cP50U3Jl3KpHy1INEIPRXOH/k5sWKDuB8Pi3Go0vSu1s9bCpaqTw3\nudS1gbwm5R8FubO4RSbrwLJRSOsOC0fnVPKfglJErw14FU1dh4MZMxJ1f3w+\nMpqh4oK0U4arJD+qnrUbqaLuhoSufzldWXJDxEYtLAiMeY1mBUw8kdz9Uxn7\nh4aKsEJwo/QjiXvomIo5BCkKWHBb3ObgytjIXbpo0rqN+LW2pB2C9EBuQ9Ah\nl4bG\r\n=bI/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/shape":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/button":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/typography":"8.0.0-canary.023f3fa34.0","@material/icon-button":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.023f3fa34.0_1597281212171_0.001219702816355639","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/snackbar","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9782cb4ad6c3b82bd7552e858ce16f9dcdfa1b15","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":40,"integrity":"sha512-xFs1AVAZGqh71X8Wg/ER3wsvdGZ072LXW7zNmaptC8ORNZzW4yqHejPiMfQegmgCq9Ga9LgXJ8dA14p/VqM6sA==","signatures":[{"sig":"MEUCIFvAqft6vQWG8p8HicqSGTPfN3CBX0YPuqLAclhbj/7mAiEAj9h2nU0R+eYvt61PyioUj5V5+tGND6DRSSEqSqqRb9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJelCRA9TVsSAnZWagAAra0P/jTsoVaPLlDXImriSDBx\nZBeNSflVKCHBzUWHT8mTq7C/lhq8x3cWqr5dODPr6fK07vb4ZCnXnogBtqPI\nEuO23YYRILeUIfoHg6ajuGlpUnpo9lU3jxKFnf/k2IXc4z3P+tKJINxVBdfj\nAYRulmgQCNRu1e13I4DXLy1i4PB8SY4VI7sWI9oe9yxK3TfnbKCHXifoJcvH\npAFI35ZyOPlkeopXD9ydyAhO/aqdgsYTfzRTvHgyadr0CoXyBz3P7mR3/w10\nNn2z9Rjvkb1ktoyHC74gTyeCKgHDX+CAJyBxb9DFXl/1tv//VOrbOJpDwHP6\nLWwVcxP773PWwPFtVV2KdVsa36P1WRq/55/enKdafSwIZcAn5+JXqjAQqu2m\nZaST4eTPXce4/ZwXM3JkQRT3V0NpjyvXD/wmLF0ZAl70kKNXCTvkeguX2JMX\nVMQBaExjA63sWxApM7iNlCg0hJz8znflcZlwtDT+ki+fRHo6tssha6/b0tG/\nXOR1/GHMKULnlMVcmxdgTQYAcpFSfPFF5fT0fz2SjVAl2Rb3nvmh3DM4eLp6\nmjEU0av9mEny39Ul2qAS67unLmqjUSs98i5rdR4Svi7nKD2OX/qTiAot/emK\nRYRSTjDmd0wpRxSvunuvLcICQqREbGTX+Q9sUOrwZSvDzIVCXloHRTOFs4Ww\nug7P\r\n=nncQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/shape":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/button":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/typography":"8.0.0-canary.80f3a9e5d.0","@material/icon-button":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.80f3a9e5d.0_1597282212771_0.2856059454726223","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/snackbar","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f445fd9c1b08b89b1f1fa21c305a749cbc5bd823","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":40,"integrity":"sha512-J7fim73IpkdgTstsMLgz8h4gNvA7rjTHQgIcFQ4F0LTtxTqKRwTBCCzfyPVvQCvWBi84JI7hoCWpeSeADtce/Q==","signatures":[{"sig":"MEUCIQDENpO0D7TyUzDmMzAb9v3n7svpImTmagfKybhvF3WtKwIgDau2U7ADgAokGKI4swWgEjxrxnsgplVBct8F1SdR1gY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP8hCRA9TVsSAnZWagAALFEQAJ7HDbmWI3X5EEL2Ih3f\nEG8BPEzKdO86Q6QHRqNgHma1rUFq5mEXBHFser1GHpW/uu0fpC2jR8Jpu6lA\nX+u1E2TPvf+7q/xw1N5PwOesvrCrIOvqsvSb2bzFXEkqZamg5fR0wUmE3DzB\nsiYNU+UuS2omzcjX4AXBRkk8lIVIgLx+5q3M9BWM2x6FlhYe+B0G36/ogmxa\nuM4hITonDYlzAeUFMw0Ny9xNil4r1fU7cuy9kb8/4C3vpd6NgbEsyQRv3Cpu\np7r5tvlFNs9Nrz5fMFL8TgFj0yHkizukDDCncHitBEUTY0jQrdGP0goP4qKs\nta2LgOdBtgHQvHJEE2Dl70RfREypYylQZ3O8HHFzjoppQDAyPPYQxOATg0AQ\nwlY9QN0ST3z98+HFbyR/sauR9TpDVW2abl6O4SgakDqqdi1G/ieDBYvg7y15\nJg67QSxp+PORry70WzN3nppvjXNHswz+bTX6MsHJFbtrPWyIxp4ZkqZaScOz\nXIaJBV/EBukAzRL39xMxGwPBQ9/A69B7REVEgs5n96X5npcGCyU4p05cIMOa\nmvVhm7Ljt1f99eNngkDBIba4yvL7qi7m7fRU2pg4QVRTcjDirUKq/ZMcnhpl\nHhMCROAIK//gqf34ftYo3L99ydVPvnu3sbJ/hzArlwyTMpCcLEp+gvcH11Va\n0Lmo\r\n=kHqV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/shape":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/button":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/typography":"8.0.0-canary.a1dcfe97c.0","@material/icon-button":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a1dcfe97c.0_1597308705332_0.5618106408649686","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/snackbar","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cefa8b40809a5f3b2f75c2e027a12e88c64cb893","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.af332d5be.0.tgz","fileCount":40,"integrity":"sha512-0aVFx30bPKglNytWYXsgwQSd+8NPWUDiaHPIjZKgKXDYYojsRQo4tuUXfBd1ntXQTKSxuJr2suwXOUflbrwGhQ==","signatures":[{"sig":"MEQCIH/QohrYanoV2v1vCOBXehT/jR6wKtgiOhShKRlButcuAiBOGnFeHO6/95c2oQ7NQE9lmF717GoQQPROtUJFqxdyrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa5BCRA9TVsSAnZWagAAufgP/2vYzNAzsv1+PzkaseE8\n6Ctob3cqaAEXIGdWgjGlAQpvz6uRClJsjg0kTL5tUYsgiJG9dsBP91ammIXl\n1NF0gAGkTl08rtz6D3jnB5M4LkYQSiVFNVBDWEs6rCnDSkZe8It7ry6fnP5u\nu+2GICyJPR8nXBdKoZIg6XwWOsepR1ONzSfYnmXoevmRzmJGcjhI2yAqOdzZ\nRmXtXMzPXfT0B8G9vcv+Mw7OyVfQKuZhAilPc6DEkRzcVSUfs8IR2x2QJep3\nta0CLjx1t8pAOiZonCkjiFR+vAqbycYGtTC7yq3TbOhueCWuNsbVsaVWUoAU\nPXoMeJJ8DwAIeQB3HLARHg/gT1XzjGmOus+5MnBNoC6zbP3folugbq/nXTZ4\nHXow+soTRqUF5vusm5cq7zZZYUplz7xApuNjHwnubxp0lQcYGNq1W5eUsDYk\nl3MDgxMukDJP4m4U1HzQzSLOOAcniRTIr0bDMrV+1UztneTekl1D0nxOFTRm\nTkRRGH9rtZb9CtrODJcBbHQmio0GlP3kbPIKLNj0DF2nW5rQhuK2kIWLvw0r\nPS/Tshq1+eRUnp89TJILjNxkamM/ItPgyMxVlP55YxmlcR3u43vGe8LKj5mX\nnz1sKf72t3XbPRITGTGv342uGltbf2mxp6KKlpJ9xei7uwKrr7EeCqnV2tkA\n5Lsz\r\n=h5jS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/shape":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/button":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/typography":"8.0.0-canary.af332d5be.0","@material/icon-button":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.af332d5be.0_1597353536826_0.6543472124883305","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/snackbar","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a3b3db2e693ff9a6b58e5a9d35e7abdc190400","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.7dd4567c4.0.tgz","fileCount":40,"integrity":"sha512-UcjpQ6XLR+gWcmpc8r0GTQqlXHtdhKlKwHy12Nsol7fHpNoSDjUubTu0lhpznsFpAHlo1EL3OUx15EBmE9jwbw==","signatures":[{"sig":"MEUCIQC2uAsK0qPbCZk5Kns0XOQNMqmQ/dPCTrV+Xc9q2zH9xQIgJe0mVU+KXSKoPpzzRxeNxf7ptqzY6FZNpv9EQtEUot4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeBACRA9TVsSAnZWagAA7wAP/i7Sp8LEs+wjqBQiWTTF\nBXvy0N0J4/t2jLw6gTmxhpN8x+anBostSxjfSDYJhOJjs6Rq3dnK1pBaSnm4\n5k+N614T+aO5a+CIT4LsQPXhW3OBUHmHFpF0b/6qt/EzZm7gtSNuFw/R7CD7\nIfUHCwXUuDLLvKXwvA/BuE87yt1LqVGMqRcOrA/YbfdaCjk0gJyQuWUEmBkd\nni/OsuWpin1zGRysU1PXDzXNptr5mgjAjTDUPRL8g4YwyjLgm/8G5rUJ3H54\ngu87A/79Pehm4D1Ng8RD1k1Exl+yDVLn2Z6vMom57mmanD5WFTWv5oPwej3w\n3TDRQscPwSNfuIigo0NUpFKagOrJ09JXmcicQmOh36nHM7r0R2ao71D3Afyc\nsN9QyHSDSix8zVxnyiRlgunjc/idza9L8cqWkAU0kxq56rbxS3XrT4eWayqB\n7ieYtWMLbIopzemnv4aEQGklB94tNDm7IX7wByCnHAOVei8FL1jUx2OL8bpI\nCeUKsBGnt3ckC3wqeEckWoJqPJE6yHw1cDqlP1RAMdXwo2N7S976grKTyhJ5\n56VcVwvCT7mCiGhKdUmCaQOk/9RCz9bJsx0+EZCG8i68WhE51eijMrz9vzX1\ndCdos7UGRRvkilaXIP9Xf1c7+3Ces6ErzeeR4+qnZwsSyYAWchuHeWE3Auk4\n7Uz5\r\n=nedW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/shape":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/button":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/typography":"8.0.0-canary.7dd4567c4.0","@material/icon-button":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.7dd4567c4.0_1597366335455_0.04566994509502331","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/snackbar","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f645ed3b5fbef5a4dbd92ce2402b24d9fbba405","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.ff870005a.0.tgz","fileCount":40,"integrity":"sha512-cXkFrEYDLvtXj0aT2V2Bp+g8arAm5q19qQxrx5DpyD9NWNCNPNgqiggTKsIKttZglb6nOLDtXvkpJDLY0LllIg==","signatures":[{"sig":"MEUCIQD62kkrBPKBWf95QADSnBFfcJqNKUqOoiX2Ybd3WX+TQwIgRW112tMASBMG+fcGewzICgakj41a5d06+DOPnAIgMY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYgCRA9TVsSAnZWagAAW/MQAJ+lxWwVD880hIG1t6cT\nmKUYZW0s9RChI7Mzav5AiOHn4uKgYhsHm4ZiAnES1n92ZRslHQezgDWon6J/\nF/Hpd91meeHUhSvhbhgnMTnxNkIlln61wwl+VADBWAEUR3djnnSl5vi/wsws\nLUGG4kB/+ZdQesJcPE5qnYVoLQ8oOKMoLMZncdxparw9DCXSx5F4nLSu1/WZ\nk26Dkvzv/CIjmAwCL863jMAPSmL/jGro2HOKsr1JBeb7i6e/75KA+wdPb0uG\nWwojzsKNcITxysySaxWwMj2N+1sg8R8WgbZHn1MNXTBsCkhNQO3gPJWTNDmM\ntKOhD9bshujelonW8kjDgTO0+MumvCuasGFpWS2yF1VwFF8DbZzACfrrFJas\nos7s2l7LphnuQ8fpL/wvs6pSv5QceFEmkv8P28q4Fqwhy4eawB+G2fy1rT/W\nJXwRtZml+88cmu6jp0QHhCQDIFk7F/zl4okmI4Midaiv8ND3+D3CtZzy1s4X\nD4kh/JyatiKOx/YldowZo6qllZA6wcJ1cWN94h98kBC5RpEJNKf8zd4LczWv\nr15i5WySNteYJgDl9rS9ahzB1p5/sI8pLtwelR2CwnjQ8f1YYEB5yLBx7Wcn\naOhfTcJI9gIh+BQkAzbqG5ZgX1KTOkI/7Ba1IB3cYTwrSgG3G7mJxlGXU26Q\nzLDs\r\n=m8iV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/shape":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/button":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/typography":"8.0.0-canary.ff870005a.0","@material/icon-button":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.ff870005a.0_1597367839796_0.4688659105078321","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/snackbar","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7dd0ea9d37b1b4cbacede6ced525b208a7d5473","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.150f427a0.0.tgz","fileCount":40,"integrity":"sha512-8Q2NyW/MqX6+N38ZKHeHjN8zuDSiJHSjs3yTJ9FXWweWLcfrcrqf2++AfVs0JTl2jRMjEM+eIlbHrzzKfeGDrg==","signatures":[{"sig":"MEYCIQDUGhLAZEVWg4vipqTp0s6jD+Yk1/jgJUDVdUXcu9gNyAIhALpnOmjrhRY9FpP89VWB2uLpnwEPbmu+KGojXUJ3Hp6g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpIlCRA9TVsSAnZWagAA6hIP/2LzWk6w5uQh2qMsXBKZ\n5ie20BcTdHMJV+G1u6JVDU6vqwYNRoWSBYW4FAoZddPhybcYwFss5ldkd6Iu\noiPon3eXJeU6kXQHaUd9rg+/Oty3u/luMJEZYf2Ja4z5qhlek/9FEmAyGHWJ\nHeV+yokMeIoszvRhKIIr+TK/w6vzxMJEH4+Hb/KoBh8G0LQ6d4pKjsZ95QOt\n2mnMb1QRdCqKv0g0YOmlt+Ny5e+IeAZUf3oiI/n7qhd946Eg1hfVoj75IcVz\nQpUlaeW4eFpZwe9AzMOMY0roRXNC0CsKqH6sBlGg01pqJ9eL/dGh16BqMg/O\ni53xWoHWhHSjN/B1s9v9UQkc3kLTX5y8Fkz5pNVfh+S7O18Xae3QXA79VQU0\nNQIubdzrFHI1YPBlKog0USo3XBdMplZZnCZ6KEyWnY1AuNBTJGuZz9e5P/82\nyR1EazWgSlkS+quWTlnd7MMwjknWuJVYip51a8K4uLfvFBicmY7O2ODgP9dL\nA4d7aX8vY6+RhXuCVZRONhC1cRMFj6ekh+Q0gcrINj9YHXpWNJ0Az3Xg4VAc\nmOWGp6fq/wjQADt03iw2utmfHQJoDLB7onPcOPL8wMewiZXOmNSXOQt9Dy6m\nwWMThMf22DCVS4kMOoXhv4hGXtC9liCpqDlyZ+PRi6cN6x6zAE3IEptGRH9o\nU4nJ\r\n=X85W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/shape":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/button":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/typography":"8.0.0-canary.150f427a0.0","@material/icon-button":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.150f427a0.0_1597411876575_0.9274220236058748","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/snackbar","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcd2ff9e984e7968a658511462d8539a3157514c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.bcc58290a.0.tgz","fileCount":40,"integrity":"sha512-gY2jIdTptraFBxwdKOyfmciUZt5BFBFmY+1DTzzA3cgLVPkv6iukv8/81d+1vaDC3FsCXoiwbnj5afqakBci0w==","signatures":[{"sig":"MEYCIQCb2+rluXRr9xz+hGtopJxKwoQ2bkGDdWkbR1SchQRLkgIhAKbUYTPGbhE/rgyf1i6vd9r/0IzC1rxIU77oQTLZ8hKf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxz5CRA9TVsSAnZWagAAM5MP+wafgEe/VLJQ1zgueLxL\nbHOTog5uXJJuBnDGouPhRae3HNra3Cgh6pWTCIzNPH8rmjlkH+x9mEe11GiZ\nxDHRX5H7UmbPWBjG9OJlALx6t7aRrT5sTKWMNCCvbldlNZcBAs7SJoW8LxTZ\nORKf2IOsdgAIiZN+hIAWueFZNHEJs0Re6By4LHBt0T4KRGtvJPpxAIS9Impi\numNVwJFre9Ofu7jul+CUHsWsMml5fmEU76hziPzg/yC/BOV/ENKVlOxRNJ2A\nhzsZTEToBLN6xWHZkiP4Awzr3FjPYd2WHzaXGRtnMGoFa5dXRZLh6SlahrWe\nVBPn/Ui8oUQkFONf7g+ta/3IfU03t31kjsU5Pkmp5QdRBMfTFOCf24BP7Ate\nJnl0pr3FSFgHINMfpamyQdzFvB20k/brVmN0m6IjP9VH5ITDtKWJYKyvUwXR\n+TlU/5zfBVpnDGuw6An1Lf4y3qHY1uLhrXMV6CzgXtcCqSU67qheeBs1cRk4\nRlTfD5By9TjePlyReId5pMWteVwKmzsz1ZNslOlMM3Ta4TzO9i6KpvjFZHS2\nzDT7onA/AZ3JApejIjz25AyUMvDbOkqbRMjPlwO1vbfe5AP+iuYThS0GBHHZ\nPPSjcKElhc8EHE9XWCQOAy9dKvJ8SZZfY22zC6MQoxXmOnkNhmmSEuchQw3b\nBZkT\r\n=XRgo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/shape":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/button":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/typography":"8.0.0-canary.bcc58290a.0","@material/icon-button":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.bcc58290a.0_1597447416898_0.7270944863441782","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/snackbar","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5015b281a9c0e476d08b5e5ecccc6a8455043970","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.4f55400bb.0.tgz","fileCount":40,"integrity":"sha512-LFfnBxMwbFYDdJJNNkzBcKg9t2jDwkonRzM3LuBIgzs1EgIngy/PinLapwcp/DC9EvBbZzIVWECDFWRsUSZY6g==","signatures":[{"sig":"MEUCIAUPrIlB/GVDFTkH/El/j27B6JDQUY2KlX6b5MFqJ5nyAiEA6gB3gctDeix3JoZwKHhjF22lMM+knCO+yoI5CFFsqJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrLMCRA9TVsSAnZWagAAKnQP/jpKF7UzOMm7mcvbFbWx\npXAaRiEH5dTVhDWHJQOwMufnM9WYZiUlNnhqkC4TL2H22qqfWswDr74TTqvm\nC/RFV3JPJeZB4/SjLy7RtyP4J6HzH+UsaVAH1xhpJxLq6QRlwpkmP691FWVb\nFZYrXgITN5ntytb8POVeY1tt/UBT9s2iw5S4IjXMlC+5Yjs/IDxL0ahhtFwC\n90MOvEw3w5Btew0EsPxpT+IYwAVMK4j0KeFAz/bVrF38oDODSUduP1nU/Soq\nRzDnJF3uyOhR0i3DEO/FfrChE7J1oOba1l0H0Yzo5WKYesif+wv37gcmFhY4\nQMVMytC5/pJPAI7Pevi96eHscd/HtpFmcnvSx44Fs9DE6Kpv2WnLhPMmnIiZ\nNDAe+jV5eYi8ORZ8Th4KusHTms0Qq1iWIwnFfiTviuugXntIasyVkP0DSTx5\nYNwNyaoTxV2Wo4mTGaGfpGrZI71o+vC5wnxF9La9LwG3+soxrN53EO9aJOWe\nTV1WP8tdDCB1CYql2VEqNU8NLTJ636EwXtSNG00ApF6NoWLWDxD9xFF6PIAr\nOupIC/E/tovDbwfFP+1tR7j9vq3AUYZzSH4cPfRmMRcwhifjezBDSL2dp/JC\nVHU95Vnz23xTvnaDDh2ollDflVU1YfOFNU7ZcrF9JKlfc20ZqSw5bOqK4OSN\nbApF\r\n=Leu0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/shape":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/button":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/typography":"8.0.0-canary.4f55400bb.0","@material/icon-button":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.4f55400bb.0_1597682379844_0.3309991837151296","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/snackbar","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc1ba1288fdb1505736fbde93f430d5488c446d2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.000d64815.0.tgz","fileCount":40,"integrity":"sha512-N8aLYpVO8DeWDXZe0EI6+dhCSNHaNoK04jHwOEXvfp86lUO/V5C3SF1TO4DOaOu+lm/C69AFck+mWj7/0w0kXg==","signatures":[{"sig":"MEUCIDFaabMRYfrqXndbOPaaMqii+b3y9k3eNB+tB6W/JEdMAiEA3CWscIA0gDRM3/twxlOSg1lQwUHjbW56z4277OJ4arM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjZCRA9TVsSAnZWagAA1IMP/1U0OgNql+dOoWqF45qS\nSqFr9vnBouN3UzYV3kB5neQY4M5BOdmNeklkM6OouFUyLqwgM9XOXe0hcwJE\nRoSfpTRWV4+ZVQP/k6723RwjYTGbZYa6Gd1Glf+qs3aCdpYmMyJQ3TvNNSBJ\nBkLtlM4n2rs/uqgDgqwSrcwJiPN579aC9on1lgvIxcrJc+I4b07Z4csO1xXi\nTWJlftWHGusq77/A+InJpvS5/PhCmciI3kN7V5OtHfzAyru6kY+qV+Idjpdw\nzTGAHyLsQ/BAvxf4R1gmn7sWd3m7B/k0Kr4IMMzGWZB7pUZkYsUaVGKIkZ9n\n/KE6z5I6B5jZVIeULdawzbte8moGEValoY/Qvl6z8DhiFF611eKom6V6xdtH\nmj7WwAiqt+V6yome+3eKTfK96p0obhw2Oced4I84UGBseH9DIEIxlsEbp9F5\nNW5TeHvH0EK073hucl/BqBpZ9uIdYZpw0PQMC8g9N35dOvMzAj8lxsdczTVL\nhbNg6o6M92oyaRE/7rWyCpGl3caJeQ88JcwLQqKKWrkfrfv9vO28MhNDo5Cp\nOzxNYN4Kp6RbAIuFEAqpWe3iwnqnuKVoM5olC+9uL8WpfWZSjlmbGXTKdc1s\nYKLnaKfaS9D0HNeHL39sB9BNDheLRqpyDDZUCiu/8dUKjoHXZ+A4Rh1sIFd7\nMcwt\r\n=pzc4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/shape":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/button":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/typography":"8.0.0-canary.000d64815.0","@material/icon-button":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.000d64815.0_1597683928440_0.6570450164833568","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/snackbar","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9dcd88636bcf61c12a4023f3d05db90d0fadfb2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.defa599a8.0.tgz","fileCount":40,"integrity":"sha512-cDgNWxWoI08P3DQXj0JI6VA3/mf8n+FVeDxLFAWLBAksR7/3lg6i/vUQaMz3+x/NKTl+KMSHexoW9oJ6bGpl9Q==","signatures":[{"sig":"MEUCIB29EH4s1skWlu+4kfunDs9i7F1/0F6ExKNrMoiJFuw3AiEA4OmDBEuDO9NjSffTaUMilPDuKh/Bpdtb7IgZ9u/jGm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOumDCRA9TVsSAnZWagAAXE8P/1uitYrhUvXcFPhhN1S9\n9oYH8GkaYBbbdZ/WQFyDbUzoXe5x82frgBGja92dr5IARbT5ftxBYqbfxOKP\ndd1JjA2tx51QSmpV2vWTXfZjnL18m0MVLMQaPdheVadpNejIYL+bLxNRKMKj\nQLE0LBhBZy2EDBnXe2yjqbFXpLzoPcVfka7ufDOANVy+l0IdMIh7Wba+bbZW\nz1xQT3iPFLjwGKhDanQu256kud8UV+k/tQqR3RxxlXjkYUmQEOF15CIvXsmT\nsmVXR25BpG5+cmAQmo8QspIJJER7L251hM9Q6xk/72NnFFOKvqSt19ZRbMxc\n+oBJDxdv2HeZ0Gn+aOreNxCuv8eJ1pHCrbr8gyEwKC6TRA7VypWsxRZcNvtA\nAGlN3iU9Ke+aYZoFzJp6oikLZ+QbvQZb/1/J1MldHCJXgccTrTKUSG1GairT\n7KxpsrsE2cPLE/yA6h5MZSrIjn0oub7HXpQi15FNZO9cerGlsB1McPGWPgGf\n+C1k7ZEFiBWjQq0+HDKagl3U7CY3AkbOz4eVbXZH1NLpOmYg1us9TGgapZoJ\nPXFpz0euYwK1uUUr+ZObGECYnGZBlfU9BccKepMSDN38joR67n+Zib4MQFLD\niziqIizcOaRfKNQdO57kVF8IDU0Xo/9LlUOmNJPTYLQua+9IX1YligHUdl/P\n1KwM\r\n=MpQB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/shape":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/button":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/typography":"8.0.0-canary.defa599a8.0","@material/icon-button":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.defa599a8.0_1597696387334_0.8425319838250054","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/snackbar","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"846498a9a43dd9b460fc426b7254321f430b7afb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":40,"integrity":"sha512-gLKAUGLJVSbN3pIsDjS+vYZ0esAxnQxK+ijqqw0wnozOnueKvtmtwBvlkBL7qiwANUjoAdGsi5KF8QhLaGG42g==","signatures":[{"sig":"MEUCIQCuQ49mMIYc6bkn1wXXSgAERAzPBqj4jKOV00aHne/7+AIgScg8zCHKoCyVtfKAIlDBa5eNHUfuWfznu6hRVfsVobg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPCAJCRA9TVsSAnZWagAALBAP/Rh2pE9ozr6URgDV0jZb\nrQ/Tux1BfmQudc+UrhBjGboTIPne99Bb7JE5MOICj77suPMYSSw5aMQrs/Zz\nP7rlUeuvMWHeYDx1l12209CgwfxpiU2Q772feGS0mEXDWc32hIc9nwHUEYnM\nR+3UgwNuVT2ofLad+BMnIwu3RkB5i/PC32a4yzl9tkprLN8hDo5c3RckG1U3\npeeb/azjp1hE2dj+uGss1SNoPREvp7yBGdaePYT9t8DbdXLl2a/a3+v+jNRH\n88/QqMTPJithlQgxUdbSpydCNWLBjIZeeochht2DRFaiXX8TtzC9d0WpjZeT\ni52NG3+zJZe5Yfq+c/2G6OhSp3N8z1eBMmkIdBS42L7v+fzK0uQ8wt92BvEt\ni/5D1WyyCGUK50csa9Z52laTBhx7xq/MQBu6g1YwpAeFZ8kE5+b7s6fBmoPO\nlQy9OmHDXbVh4kUqf9iYfwiaZQh5XFr5xUAw5DVZ5ItzCxkW1m7lyvK+my5W\nz7w0SH/5nZl7TcKXmgkgc479b4SPvnhm0M3QMgjMAECdQJlN3ICmZ5db8QVb\nkuy04/km7idR/HjiPtDUcBBpaBHD6Fx4j2ELVZblshbt3Alla8jjpzVANVYb\n4qZCBBhkYhQ/F+53vEsc2IsWMgCk8SOUOoI23GgxhYQgG6gkGPfJ4R8SldaQ\nDAoS\r\n=9XUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/shape":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/button":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/typography":"8.0.0-canary.66b8ed7e6.0","@material/icon-button":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.66b8ed7e6.0_1597775880252_0.9254368551743695","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/snackbar","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fdf166346bddc66371c50c9e34cff977cac4a64","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e2b1033df.0.tgz","fileCount":40,"integrity":"sha512-bLK1nmMptMdzdBFN6W9mY82Av+VSAtIjIdeHtqipqNJ6/P2oSTX4QcY9xjkmcPsPkFmQoA1hm5YL2MupdDDxwA==","signatures":[{"sig":"MEQCIHjdAuNralicYxsLOLyZyAjF0ZiTsvEKXXH9dtcZE1YpAiB+AkXe52sQf3zS6aj+2QyfyjK59s5t47TVdlQFdTs7gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXLFCRA9TVsSAnZWagAAQUsQAJhfu6KY2/bvv1g99pL8\nNV9OA2L1dMsxjXuJ0G29T+idv1xcuZMgstILzR8OHSXor0+4l8gPtSQE8zkW\nk8lLZGiBZpJLMkvHDR1Q7wOdbyHaM8DtFTy41EORdgUf5pt/CJcdP2+R9pgi\nsVK/C9sHWbsctqZRLKdtM9TdcIbUL6OL9k03FYVwBdOtK0oKzbmLI2GPPaQ8\nrhZ2sJieLaq/23734CpVR7KKrPg0NQtaGu79ssTV5AghiEp67GFg80a2AJjc\n5gEXjNmyPGg2ij30r2uH9Pidzsv+AxeUEk8dIGadZbFU34g3QiJf+5r9L3sI\nhgJgTscPdFNauyQa2WMoAgTGfTRrYdQ8PEIDlYF/LzoWLuSl3UyNaCFd9yHx\nmtH5llL4GKA5jlFsh4L8gJaXe2RrfiFomx8EpsOMZpMKsYjgTkL2FKk1maN4\nvQ0SOJX7pTI8JfGRyWYmHRB5xaA32uAQdUm11/omION5Gk+Zryf9fSkeXEGt\nGLdpyFUkALzORe3OJ47junYG1rlwJaNDOqMCdByP61tSMfFO/96Ae/VuzwLC\nuA+x78+/uvO7AgKuHlAJwyjUJP0SN/dbHfE4Bxmz4H23Ni/iFpuOJBp4hcnM\nCbYbYTAPg8oixVw2hO+/vLfajagmUVvayyxICcFpAgnqvDL/GCZSR4LXYmZP\nBg1u\r\n=K0f9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/shape":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/button":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/typography":"8.0.0-canary.e2b1033df.0","@material/icon-button":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e2b1033df.0_1597862597013_0.8069784922987777","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/snackbar","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aefe81f5425a6bcac054c327f798939160e31eb4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":40,"integrity":"sha512-P2wUQt33NKV7BXV/G7KqnRK10Msh/tooMVCj3r36wG0pNIM5+d2MIIU0xvqFP/hK/VvU58TYZoZMoi75dC3q4g==","signatures":[{"sig":"MEYCIQDCMJdiIqpQsDi2fqffbb+UTe/XAY5jBtxagK2M5cTYcAIhANyKhuX2/KLnxSZr79wGqlx5IUAGHV4aZu4X+t6VvgYa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXyWCRA9TVsSAnZWagAAsE4QAJXKhRwp2hH4cgHwibpS\n0YcUq1uB8iH2EO/TMl7HMkojKl5Hbdhmt9F3eAzx/WFwLic+tjysTlx1jvNK\nm5tpdSrraVBHnkEJ16Dp6/f/dITK2x6MsED/oFEMHJWgA73mGk1tIjQrmQlj\nIODS95WZhti3rKBNT67KICN5bEh7uB0VyVpDNCccgDM3sUvib+oH7R/5Y9t6\na7/M2KXSsAp4nkuvpR7FyfRGLk5yzJ2i3P/tkV0cvdKUq5MRa5o0xJoaghaN\nE5WQDTA7c9+0s4X/k7eOY3NMlwPUz8VmyujuI075rpaa2mNShDsRCWjWFp6l\nD0zWP2+mZdcyE8YYOnOOyuO4mpShKMR3601P1b83f2iseGPPmjPJ1wbpyI19\nas02uaxMixganSDrIRVbJiXMVPJjgzGJHF3vahTBqdzmv8IBWxDWI10P49NQ\nW5Q1zzGXfhwOKAtG5Gkkkxz0XV7vnAzp5Qwjd51uYqUwxNB+MN4CrSOAWjFs\nLVbjrUGWhFeXwf7XdB5ooV3HGLygzLJf0iAuQPpPb0Zy6BDUn4xytaKdvFP/\nRqkST675FwsN0q4RUMTflgCPDjksuZd62UkAzeN3vE8+fFSquYWQBNY1+Eg8\nSobknavpXJ4eGp9gLV0DVVN2CmXiJmhyevChgPTqGibXWU0nUBDasCiLNaVf\nWiqI\r\n=Q6hk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/shape":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/button":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/typography":"8.0.0-canary.2e8c3dd2e.0","@material/icon-button":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2e8c3dd2e.0_1597865109369_0.076226158392386","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/snackbar","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8179e7001b1dd491972e63d4837262c95e648af1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":40,"integrity":"sha512-ACw6/zYIZOAYovx1eNdESdPWNqq91gU4aP9uivLEfwUPg4nEv0WB7C65Kl4P1m23LiGU3WxU++pp9t1UnFf32A==","signatures":[{"sig":"MEYCIQC/YQqRP0XcqWeiwN0FLNjfquNs6SjI1xvI7jsMhLMCEgIhAKL4D0mDSZeaHYG42SL5cZtBlDll0gidL/GeVolyCtfE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYUCRA9TVsSAnZWagAAUlMP/RBVsnhranymWoSeIQT7\n8doFaymVU+6ElXfYt+4Xbi1E/U1q6079vDb2Mn4Yqa27xCub4j5Bc5y54anr\nHnl+48sn959uAG3zG3T11k0//NOuktlQN7aANl5WG8A1QnGzkhYcsOfhBG5C\n1aI/+Y3LvDF46K0z0MD6Ee+p5HwCmKJ0FP2x4TydOvvocakCQCnsYm79APvG\nzFgS3C66SX1bbe5oloqeNIlm4eBoDXJ2kJwp3lDBxDxsUfSgZVsKmhJviQF3\nOixKtrR1G/45xyS3cjPTrgW1vpA4KUwmfSSn871QYWu1AIbmZHQTg/15/Slk\n7PEh/uo1TCeSHaZYUsvCIguzStF9VPykIRcxYXY/oYNgHike0iInOv3rZtMu\nNrvGhDuQsgkI9piinDAtNhkYdRJA6yTWgqJpQhansNaSkDGCpA6pZLVWYsGt\n7RoyIuVVJlOhKIF/O40dR2cwmM+C5TInUP/Tjm+8aYt7yocQa8Xv06iEs5Qh\nNdjE6bgsB3dSp2WU2PKLfGqn/z4pHyp5mQcnqfiUKDnVkk4KdORA2NaMpK63\nlHOjbDiJLEn5LSmoDO9GUAD+125o3JTEXXXL8EHnwD/+Nf4uXDodyYk9DOfd\n0GL5glKv70g+TS++ff5Jky2DrJFMj7f5DPMFoGq5pC3oP+/g9NAQvnfDgU86\nrC46\r\n=Fhj5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/shape":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/button":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/typography":"8.0.0-canary.b2e80a5d9.0","@material/icon-button":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b2e80a5d9.0_1597875731457_0.5792722774023826","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/snackbar","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"453496f83a92c8b249922149586088850b19da1e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.ff88df637.0.tgz","fileCount":40,"integrity":"sha512-wWSC5ydrzYuO13iqeSd/r2+BKy7QsLSI/VzAnyfRE0jdNQcMMFtCovvre6Ak4QZmtvMZnq8rQP/tHnXB+OYlIw==","signatures":[{"sig":"MEMCH2QfztHXTkCNC6IOP18d7G1zYrwpLP9xfBoiEmAyuUkCIDp9s03EtowPeSaG4Wzt/vNzA7XoJfae4LDDY6EiUvTU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajmCRA9TVsSAnZWagAAqtwQAIHcGQsav9LP1whie3om\nilxVCXl2R4FQPgbsqd0z+QKTflHlcib2qTtQYn4t6Lxf8s5S/Mrci4MUjlOL\nuYhlPPpsaFJfADsVHTkP2DbkPZDGIXnTrsQ/RYiVpZ/Cdwvxj48gv4/h9qeP\nA4TJWvgzCOfX7ZohtLLNJhKhzqYOFA+OXND7HjGAEBGOjw1shUkxXgsg3hIv\nNTNaifRjsX8x6EELi1jGQVlc25V+XThmIIhw0hpqeaqr5LRQEOxveHD+vFnD\nU/WCzjtRC8wkHn3z+YmO52YQYj0pWpqsVck/nzZ/PcCpD+PmVNvGwdlGv6rv\nhW4NWPlEfAOxXJxg1izsP58HnUj7aVOkacoCjhBxmKjW/Iq/ng8JFjGhMcXB\nRgkbJ/OIGpY2hXO1FnTmaC6sbtHwt+eYDNVTph+M/XZCNrlYVB9tPosHU3OR\nds4Zaa34l4obKgnhrSWfVuTFDSvv1pXEw1ZG7lGLy2EBNMaaG+n8eXGI+a9S\n3HkOHu0SSZcuSqBWotI9MPefGS63jml3isZmcr4bARymn7X+nUK9NTlN21Yb\n0TdoAPSgJ8lzNusoj5QejCEiYTixreVK14EsnCDtFUN1kheT/DgFkHNKvbHE\nPerWZ24Ugi1SJYD4Xx49ADlGUcJ39MTMq1LUtbitfrKCJMPQY1Bk3MIN2uO3\n7dwI\r\n=/NIg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/shape":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/button":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/typography":"8.0.0-canary.ff88df637.0","@material/icon-button":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.ff88df637.0_1597876454333_0.04126669869901467","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/snackbar","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6d09d71598ccd395b79c0901983292ae51d553a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.32fb314cd.0.tgz","fileCount":40,"integrity":"sha512-eGaSfPwk04GJxoW82ANOwg9IfOM2OaBoexs4GcuFKLSCciXvOqtSDorUwSe3htibRiVQo2doEnI8+yiJ5VY6Uw==","signatures":[{"sig":"MEQCIB1bqG/lxHhZc2aUIKow08cdOPBuyR7bwJ5H7lWSiIqJAiA6HkmtQiTMLuJqoCYBYnUspUHDJIFIxqxnWBbDRUYS/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlK/CRA9TVsSAnZWagAA/pcP/j15KM/R8K/N322WATpF\neMirW0GDBWf5XdIpsldgxOwURoTesXUY34rqI1s+lZ48pfTkuv8kcF0EkXs+\nV5y3NJacilTRAuTmrtr1MLMmloBuib95NV1Zf6j0hckAmPqy5+ubK1vigacv\nKy8GEEi93Mu0czShx5l2MI83GuNSE0i1qXRis+ERzwPv0d/sR8a4ZIQrFT65\nu6Zvtw6X7f+8VdoG1SEgOpxm5oNgEZAPqDDzX3tu8b/jinPVLz3WaWp+RWcZ\nybYWQ8w1wW6fsdTbhZUX6JhGQ2/Gls52fthVyhupWo0j+G728SosLkINFkPW\nYmFcljj4fv+RuD8ZPX2oUg6JwXgqFqUadp8cc2A/8K0MkQT+HZLXXKTYZqUv\nqMxosU+wUjTh4/T7kvSOWfoVdWYzxZQ3N/yPeaFrgITlVFruBPp9kv6cc9JY\nwbPDp6GHy+vX9CVT0EZGpCRJ2AGMCqvu8DZZjE8TMq5JLXmeu9xjhhvJugsZ\nqnjjhonbP7RWd0I+pPgOvMFsbbK3Zms6d7kom4Q2mP0JxhoOlEbgCJ4nPtwu\nhiTVx0GaV6qJT2h5J1hKjnYH2Xa9CKLk4A6BW3sw2mA/uXniPIKsTbuQT0xJ\n4vjsgT6a1NoooaQXQPBItSf/NiUujNNjRHnzSVDScHcoMKI3jlmJNbBPf6hu\nxRYo\r\n=xEMh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/shape":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/button":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/typography":"8.0.0-canary.32fb314cd.0","@material/icon-button":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.32fb314cd.0_1597919934843_0.9226649693972429","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/snackbar","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed22481005de7940f84a1a16072bccc8c1499f26","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.546277d32.0.tgz","fileCount":40,"integrity":"sha512-YWatXbnxMEq/r8ZfZ6QkQxzSz1LLx9BwCy+kbcvdrdDZaGcU++bKd4LC4z2LsgxQGW+5YTYsptyJoPFQKcqj2g==","signatures":[{"sig":"MEYCIQDjWqkBaEh38G7rwRouXTJ/DIRpIcz11i3JbqOAfTJ4BAIhAOUFPMuMHQ8dkvthlwQipCnUYHSj80hgajBGbjkFBGHy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqipCRA9TVsSAnZWagAAe3sP/0kXQZBJ1srI8ia540+n\nXHMPICbbzCzoCZQwll3ZZDpCAvVF5qyrN61KIkwDQJbTeTLdRMSnv1xwvK4w\nv9mQC+wa6mxpZSgkEcR3wmhbATU3pGW/ITC8GAIoMNDbv6uqYB4vyJj0EHJC\ne2gNfMaZKd9k3r/0dxeKJq8iL06t1aBp4XgcAEkHEZyQW4ux2RdsUqivdQD3\na9MvNTbAAyc8jPOQCgytPIZDdlxkPgX8jz/zk7B/Z834ajtOTB860/ig/yu+\n7A2kn9RNm0WsE7soWGSXhZh4cQSC/zwzH2DVwGqf7lQLL8D3dVfi/Iz8OBT2\naX597GwosCCbt3Qewg2Udme4+SnGmc3jgk6CToIaPfu08GP/89f4/LQ76Z3y\n6Z30uPxVuDch8+ZP5OE5toAVS2aUv079UKbAdZYTGrSrqhBRks8JKoeDyMS3\noxUzFZ1RJafsLUnw0ZP9ufbb6Z3b2txdz3lO08yZTOaekDsAONp53e1bcNWB\nb47J1S7WM4vdz4r0BW1WOS16ogROZhPgRkByqK7RGjHtYmdoDKOxRMFQLWJu\n17USNX3+hKTbM2z3DiZgjMtPcOjpDHL/CcTK9CpsJhiFg4KHTzzLol6z8kit\n0Dj0WT+XE0aNKkDQmp8SCKze7ShQoF0x/x1WM/lfMlajV0w03wVjdOsp8z20\n+JEi\r\n=vz/d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/shape":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/button":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/typography":"8.0.0-canary.546277d32.0","@material/icon-button":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.546277d32.0_1597941928253_0.3082379512335143","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/snackbar","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7c7b691987fb6376c09fb9bd209b69ea73e0c52","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.da72839f4.0.tgz","fileCount":40,"integrity":"sha512-hKHzNVafMZV0d+krvSx/MA8rUOj+HVhxWaw2a8iEzUKxHFe5ugeSIvCqulWYm4gW3Ld0Pe8OmA0GfkkYdngN0Q==","signatures":[{"sig":"MEUCIG+RgIiC0QgJ/AbtSqeXOpGW30tXfEFV8lUwF+lPIDMKAiEAmCsoSfOzWCqNfftPWaIuk0JUU/z9QRbAfqnvxI663tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrpuCRA9TVsSAnZWagAAtSMP/0Eg3QrJicw3tSDYmA+C\nULJuYxZI/a/2mKZWsD+HRUaSc6BGQWjwxsZIoA/Yr+5otfptFgCLB6FJH2rm\n1Pukerakh0UbZ81M83phAhTdTVap18qjn5sCcLX4N6O2li8q4YKQg3ukHU78\nM/XnWftwbYq7JqILaFS1E7Q17/h8NR8I6/cxXnOEFJmEcRs/YuHPLPSpzbyC\nMfe6bT9INQuezn5mbEzlaXyX+bvgrSPGIYfFTmw4rhJDPT++x1uLXwKHW2P1\neQcAeMLM6DkMbRq/o4QGpl88Ur2kH0XUkOLxvO6IWUWXiDlne2d0dS22Luv7\n7opN8QAgPzKr91m6PMZHyevctZbTP48rQHeZJq62g0KCPGXhnVBMXhvXflNa\n7M3AvruuC7EDX+D1H16nad9fRDR54uGk4zKwKeUmq+gC5e0rWR5pt6A4lT7v\n50DlaVMlOfUqmf66CH+0jaPyJN/IZZZi/am9K7tJscPUt/kIiw24o/yBwplf\neCZvD0rBKLo5k0Z7RR7KZcE/wUKNowy/1lcgB7AYzSOh1eCba3dwYsY7iOLC\nHt79uz6tlElucGbWF6ovJrPh5x7JScNV2jsS9UjgSw1syxuYC/tOoK8WNGTs\n+eYWwAA6Pi7C0mVGQdXUMcRdrF+F7M8djK3Q1si2Ci7ezmM9J8Eg7Gx9KOnb\ntj6v\r\n=dS/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/shape":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/button":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/typography":"8.0.0-canary.da72839f4.0","@material/icon-button":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.da72839f4.0_1597946477585_0.798098837551946","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/snackbar","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1259bcb2cf8709968ab0d79e8c5923a2391af807","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.346069ccb.0.tgz","fileCount":40,"integrity":"sha512-Oka335QRwcKSl3QZr+ymeXih45/bTHTx7Gq+CwsdN/IkIyUW6/9r/10vj2cbMpeOhSByIXBimoWkzmQew2fYeA==","signatures":[{"sig":"MEQCIDreWmVM/aIGGfPAx0o8t6fcWNVAH4n+4CxxZpHrbMhQAiAN0QzE9Obv7+ySHv4RW9G0b0OMbSrgs3tlftMh3E2ZvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6+CRA9TVsSAnZWagAA9C4P/1o6ZnqpaiLlqFhFurF8\nktajIFUDQcGyLLo7clHI6FLCi6gbmqgr6/RzBfdznZ6ojWnsNL9fYf1I6Zum\nKjMtkyBLIGS0Nh48j59amk/Vc/ZcL9hOD7+Nklj3tY7nOiPA9jZMdLu8haQm\nMhnOr0J8Qr4oMH11RDFbqT7baq99uJHB37MkgjfxQCHUK4o5LzFj0yA3tkMX\np0hg7NAaBPKHgLcw3Zf1hZKkMeYhYJJIsT4u+maGrz/g8/dcZd87Y3d416Yk\nFmaL4YrPSrkXYGmFe9/bW9yHzEIIZ8quLsdEQlh3mrDeOFEm/oCqWMERID5A\n+zZH1s/OkNNKV/0RLI2HlfE34qBPVsnDf2k4XIZTUheYuC8LULOBQm7n9kxz\njjSkohWawpLFQYT9yunHeDaS/yj+BX0Tqg9johQMjrLnMUn7getNlma/xjGB\n+dsAFYoHvWQHASk7ghMVVbHw1B8l+kHEag9NJpCzilw7TGX3ZxhnLFN1+gQM\n1okXQp26VMZOm8nr1JPCXFb1AX9QHiz/rcWbvY/ns3L3U0LL3WE4n0kndChG\nU0H1qgwEt8yBq5W3leZn8op+ZxU2q3pxvQ3MDZRL1JL0issBtc8MxRqEPfDp\ndY5qyi4iP+MdVEvbbyNgwclFq711zVu63gH3/Fsr6TchO0gpJCU/A+X2ZL+Q\nOtCE\r\n=DBYY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/button":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/typography":"8.0.0-canary.346069ccb.0","@material/icon-button":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.346069ccb.0_1597947581705_0.41198982460148437","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/snackbar","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c32d9b4328890b253f5b24f20f834fe4f0eb686","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e27c5802f.0.tgz","fileCount":40,"integrity":"sha512-P0uwEQVPQ59rv8Rk3QItxAnKQbwqeac/Y9Sr0fZE6znqogRjKGYNblhmruf/eu0MrKhBbxIS5dwiX6y1Qg5u3g==","signatures":[{"sig":"MEUCIFBpdF9wR+aGf/bLP8bPPBIKghSfk++RCmaZwkuULVCsAiEAkyTikb2ZdguPQklBhWe6G29Qtdxu7ebPvqwYaonJUlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPswJCRA9TVsSAnZWagAAVFUQAITQaVi9aQWmv/467cp9\ndFPH9eG3xiRtVTiWcB0F33Vkn1arACVXYqAnKb5rejF2jBYQAeh4cHZhL1ef\nEE3UVkuX0bD/dhbiAlfY3eoBkIEFl05Y1zwwS32O4reP8ImMucxvLX1tuVc6\nw9fdSjHwqDhc6x8JjT3LWXDFfk0GRd7zi94WyMRTul7Yiq1ZIsSxV2QdbrPA\n29E6kKfik3TQ1wCxyCpEuNl6P9jTRcMvmbfeiQ3SQJFFo3K+r+t206Eq1RMY\nb68CdHy5/aafNkbe4jtFsQxlv8ClntNdz/vz+EOD5+f0/4e2yZqVuX5EDEP9\nbpwmAxBpJ6jw7DO6MK9tqDcBHTGdVT83ewV2KxV0UgbFx1YT7TEzmhyHmM9a\nopoCRUNusH70EA367syA34XgmTlOiB961g5iP6433LDSBOWcbNJiYtKqZcS3\nBX+dF/cIHuTNgqFYiDSxsIjxTPox2D3bC89NpNuSCJZuetJQlvnBYWAo7oIP\nNq5IQKAJ8BlYsTVXZ38v54yPthHMa5fcjJWNEG43oaVyS+YusVv/cyk8O8hb\nBpIM7lQE9gxtwoY9IQ2Rm7U221LEyBr27GN1LUv20iRuKpVX26u5CKCcmvJs\nB/vbbX/LYA6Pgo7N1SaVLsh1fppe2dMPB3N5t2sVttDglPqBlP2hyuHxCWnn\nV/6x\r\n=83cI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/button":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/typography":"8.0.0-canary.e27c5802f.0","@material/icon-button":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e27c5802f.0_1597950984572_0.5507470469104316","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/snackbar","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1819602908a6ee88152094dd03f1c86344f4a81a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.f4532b9c8.0.tgz","fileCount":40,"integrity":"sha512-kYnhmXybkBT9FT/O9Wy4duclkOesXkPqYUBjEUmGxwgL951uMy+nhNArIUG0Qjm3PNy5c06esgcWn5Of+L0dcQ==","signatures":[{"sig":"MEUCIQDEgFwVl8Q0XVqSKEOoQA88g9ZARXkCuycTfrH03iYcmgIgSHtyDdEH2opxrh6afbxXtiKsbnYXLjkZMtNNNOJbR/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtX6CRA9TVsSAnZWagAAPPMP/1OMsjVfgxBZvhNkd0Ph\n/FelW+VDfAL9NZHNInQiQuwrLYfPtEtSBP+JSFzgB0R2JUfICM+6DI+0gVR/\nz1xdo1oLliF8bW5cvnOYlB9Kr4aSFxm7BDBSM6xz5QVXHxcAR6gwzHsYpuAD\niwPbWyyR1mC238ZE8UHVdRu3tS6qmv2dnAAeNjlHkYPB6oroetzT5lxnYy3t\nFzX6U7BAYUcCgRd0Qqxl7YLWk/7aGi4d/NclU0dO44ZZ12jBpBaIL//4i2rd\nHfyZg1r9sSIO7P7Ic9Zszg2rQtFiAhUIiP11nBCGOlj90+P5wHy7Zc4xiNVJ\nc990+w8NsrdXbPw1s6q69sL8yXroPAMi4X8wuolmlb/I2blAGCrhdUGRBKwx\nsndPNUZtNwessY538IwmelQpBgrz47RuJGyXYHUw07CXnRTSW0jG6ZiMrIXf\nQoXRn87wJgaeekQwPKSKjVROSodUK4ql+erjSMUX1Wif5lAJLdJ7e/M/Sy68\nOp7rzqRpFuuqVrLRN8J0BxmV1yj4vemjs3dvCPrBMdv36qZ8O+Jltu3Lj++e\nxE3FpB0cNm54mN+DNb28iJgGBqeo+P9aHAWOzEy0dR9W30dM+Z7lqwlgPTZf\nc1jM17tbHNAgPWYap58+R50FcuN5TWXeMU2nlhd0iB+QLbhYkgZrL2UvEcZ0\nbQq0\r\n=oCzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/button":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/typography":"8.0.0-canary.f4532b9c8.0","@material/icon-button":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.f4532b9c8.0_1597953530030_0.09217503570483143","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/snackbar","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a6102a976244b229b345a7f53b8984099484459","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":40,"integrity":"sha512-w6g/5/gjI73sj+2QxbDsviA2nl3EFgEblgWPlWMq466zrUnneR80hHMWiC5W+DFgqi/DqtPlzZX0P1QUvUE86A==","signatures":[{"sig":"MEYCIQCIG7LLsoVOM6vzUTnAuGnU7KSBcDdSfV13r+8Fw5PY9AIhAOt8w9j7iX70HLMRR1JmutC1UFc+53cc6r2H5UJbyyc0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYZCRA9TVsSAnZWagAAgg0P/RvS1in3BxOq7tx9N2AF\n2AtnEpkjp6iD5lZCkGMIN1SwNyEjDMznHm3juZe0GicpeYkddz8iFmBzzxP6\nVtg0sq2kLFCxJ8RDOv7JivQD5jQMvqM48/dKo+fQ6NuOVpKBA2gSjgEXjRB2\n4etQ6oWWamCRFdCjjDoMAnAH7EBr8JeKKlt6YyX5yRsUx+8D+POFGKPUaFJw\nblEklUPM4kQsJTfhNUM3HC70Sy+G6ISgGYpGcDed127haxbZi/tRePeFkwHo\nBwYuCepDqP9curNIyhN4/QrtFLMpqWwpwnzFmYW/1X5TjveHcDdVgI3ACFUm\ndozhB/YcqWZMi3x5T8e3JKBoAnEs59ifB0/CuJO2XjvmAGj8vaMHRlvuMCd5\ntHChBiT4Jps74Z4e7XcokAGTlz35umzTkoCIg6IuTdM8lqQpKCFJPgdRzc0N\n7QP9oiXkvS4qX4DQCtkUCyPo78P/t5UehGqYgEKQjWZN8M8ez2X1h1h1+umP\nQRt1vOuiDElfJ4C+JLcstu9zNFmXObaGqrO5y5jUnb1nwtyPyO7O7jRcVVLl\n2qN+DVNMfTYgyQP7QdM/TLs0n7ctL5l5k/Jx3mTA4Epard1RbxL69dTrn9yi\nStmgx2hUP5yCTrtziIiHyEml0lbcMog+P/6HxvbjJZkLO3I05rFXFmpeZ11H\n6+c8\r\n=FatY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/button":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/typography":"8.0.0-canary.fbf73c2a6.0","@material/icon-button":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fbf73c2a6.0_1597957657558_0.4174611804546777","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/snackbar","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58498b742ea8e2ed24f90a281a88fc2adb829f51","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.cf800124f.0.tgz","fileCount":40,"integrity":"sha512-PqHF4eUeNpt5pzpm1bscxiMx//px9tI3cdHJxT3n8QIe2512Lh9Khu1OVyTB1+JDCcEtzfeykg2j7TckfdXz8g==","signatures":[{"sig":"MEQCIE4eWCEph/ZmcOeaKOxj8ZgB1mAyO+DNn5G82X3m9UduAiBZLeXcjBUf8KzF1z7GkAlF/txmkTw5fO5Hm0hDZ5f8CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDyCRA9TVsSAnZWagAA6IIP/i+CpiOiHpEgh/jYA/Ru\ngUieeEIx6621iLwPTljBvQoxtaEWO7m47AeGk+3URgmvff82cGx4o0XYHHDb\nioGULKqEQYM4WyxyT1rPALTil5eJC+GfSJ7wxkGCx1zG4+TFmFo6sirIFZLg\n84pj8ti8tGXPbuyJgJoYRMerF8cU5wigYkjhWxgXNeTV1F+gzWSP3/ds9U1o\ngUmMx8gp1ajcFnxLt/Qw2DB+wZnn7upe2+3JhgxZye6GT6NEhNc5qfRgisJB\ny5mIkbiw1D2OeyaZAvARmnstVbtLFSyvlSed4vis6CDDZ0T+3kcE/hyHRezE\nNQDP8n9D/a1ydJk7SEXbmwyLc7IUHAnSfYF+EDA5Rz9+6HSz+w7Rb00fsiif\nCHjDvDZ+A3Y89hPBxBvIwwE3pbPqyD8fUTECOgrNZYS8JZkTyb6zeTZwFUjU\n29CddULGgOeUx0tdkKgPomsKMl1hlhYA7v/FioNmjbXSEAtNITzf/DazJFTu\nkkirH36xCT/ScL+hIp0S2b0bNM/WkfHUGO6DjbIBkOlQof0ew9NoNiAnAzB/\n/+2LgWlb/Mig/wUtRDsEdaV3rkuH1o97+h+hAbMxUXCSBhQ2R6cSckv+E1XZ\nWjXMLANTG5M1RRXkZtOgDO1QbRGHgmxI/F9ao73hpD14D19+MvRWmOVmxtzX\n46CO\r\n=OF96\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/button":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/typography":"8.0.0-canary.cf800124f.0","@material/icon-button":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.cf800124f.0_1597960434285_0.6034715416899206","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/snackbar","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936d0ab79a15d707d398a6aa24532eecb2192952","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.95e4eeea7.0.tgz","fileCount":40,"integrity":"sha512-NAy8lalrSK82tzP7EUdVv6z8JDVJJuPTATHtxuZXXs7IWCBsU20txgwOYoDcxPE8NWW7kSldHSKqNhP0q4S19w==","signatures":[{"sig":"MEYCIQClfWA8MFRTdWTSw3naB9ol9Z2DPlzHQZADnXRZbuMcTQIhAI+5aoC7sGlkFSd7Q9jMncRE/KUKu7CTx8sfumIYOVGc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwd3CRA9TVsSAnZWagAATqAP/Aoo3y+HOdActW1r9rY1\nl1otvjF+urguzDT9V9OrUtrhQKVqnOIeFZzw8WJDFS87n4G5zs6ubFWkqa/0\n+n1lrQEygrxyBAEYjNuh6fPhDcoFHlvlImcAnx4pc870DUYURUmXj1FYX4qc\nnZaRlvkwA97Dd0x7vxQykbr/vue5biNLxXB2s+p6yM8gUOmpZ//4X/uqkpEp\nsA+qW7HhOBJ4/fz+LU011t6kaZWWRp0497KyIlQI2eDAPtFMgc8Qe3GS1RGH\nrwrqZwKQ8ZStwN3tMHwjPgwyg2cjFa8+Hb/C1k9RX6LS9/7CRv1G5EEAadWB\nI+3caQl4qqGmgeiuOnCqrE28PQlpGB2LsIKvST4kBLGY6n66qt7yS6qESk06\nJxbIJYuQWzckMzr11HuvWZ7AdBFhriZaOWL1FgFR368cGBMn9M7MNQnOHrAu\nnVyYJYiQY+XIgYhBgsWnMJUcQfD/Y2bxnIJunfNM8FbNYw2+Uj+B3rkH9bB3\nR7eBlHEQ0SYHSXZxzABSvNdCYGpulC+DeK0eEJkQBjeDvMSLNSR7dx6g/n8W\nGfH1qATxa4gjCg0LhFQvMwBpIOYYz+S7j1kc7uKzjgyn9UnjUlYER5jtwpL1\n+uE5Li4KyJOHZqCtiyvikNWoXpfEdKKBzDbTiPwvoe1QacTkZeu7QLJEVEp/\nyNRw\r\n=9iuU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/shape":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/button":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/typography":"8.0.0-canary.95e4eeea7.0","@material/icon-button":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.95e4eeea7.0_1597966199315_0.5776347594982618","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/snackbar","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52512b7318c24b5e087f741a977d30f031234dee","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.91ab1c62a.0.tgz","fileCount":40,"integrity":"sha512-rINGZHoZn4Jl6OO9VEjJin3wIhgNhIzELRhIju9B/HAX1zRYT0LEWtT99SxyRIVj+iSUeSMkTlnu0UXLhWIOxQ==","signatures":[{"sig":"MEQCID2/F2RBHpogTPTuMlDdjDvITAwFpL5K8UK97LJt0dNyAiAPjSmHzwRbxf2wdbx72pfYVafnC5eZFZoPMGKysPfTXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+R+CRA9TVsSAnZWagAAFokQAJw+RktPZRPfk44G2f79\nsBn1V6uP+UPoMWl6a7ZlDPoE9UwLiorHR12fBYAHj34CJmiPUOaGFLimGS29\noz0bWxo9FO9NC/r6G/KpP8TdlmKxv8ouGvRXqPgE3TzI5riQge/FH+GOUHBR\nY7xeodtiNm8Fvpz1yc9I5EUZWsJ1rISdRf+NZyCG5nHJV27vp3lxVecBnK8W\niNB7jEyBNQfTj1GsIt0Fr3UXH9XUJ91bmtLeHQtx7zl4rIXaMwYjDuaZ55nG\nLEUHP2qBqlrRWih+ZzEww7KLXjjUmKrttLi1ijs72XLLRdyNftWkXs6aivUk\ncQhwWkOKKcfraursbUKqDOSojAjpFFarBrBjc/rul17gGL7xPPHtNtJp6Ul1\n1K9ktB7yK5a0r2/Tn0fVXMNReTXC1r1Z/ZVQNBJpssB1vXImlRe/GsReN8yt\nILogqQHk3RMMh2mQ2IELSrhFkK6goS1aGgwC0Gdfk2RNyWhOKjxhApmgWy24\nf9AMcWjeJOZqRgVu2sUxh0KbpBmTSLwMP7ZVraqiqsjXXX6bWceGtvfPKAjk\nQ1N7WIw5wiQzYIr1HB4FQkY0KyiMNBDhoZs7pNHF9g09e2ylyRvj9mAuVILu\nQd3T3SAbVKdOzahDaIyPZM2RrvHea1RFz09F3WVmJDxI1qFAY2MvKLEE99Nm\nf5TM\r\n=X+HP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/button":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/typography":"8.0.0-canary.91ab1c62a.0","@material/icon-button":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.91ab1c62a.0_1598022782431_0.9902975088607171","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/snackbar","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d08cfd9935ac2eef7662b2b22821aa2df1cbf2b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.58eaa9f02.0.tgz","fileCount":40,"integrity":"sha512-Ot5k/I58NvUOjVqZw6cuJdUipAOJBHGyDT0ghxzeHkrgGr9W5uWgiGgsVHIJdznl8o+VXxCuC3F1GRGWBw6D8g==","signatures":[{"sig":"MEQCIGwBwlSEVe9ePUXWq5TS3K6IkN6O0G56YQkaKc0mgjZiAiBhsovUQJJ2TBABJ3C3nj0wLiNoLtFa5XbfivjJuYiejw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCghCRA9TVsSAnZWagAAwMMP/071XvwY7yVbZJPf5mZ9\n5jDIDyvYLa5BwaLcYLY1NrpjYI7+oRhfNY0av2NhSMlgKICK/UfpN+u9QQLs\niZqImdV/V08hCBXIgb9rwPyQoVvEWFClndiLviZl8oUz4ebu+UhRbjm9SGtU\ntB3OaRJKnEPJ8kHwFlkQrbFl0Pnj9mrKURXFQiGCAPpj0GnIJjwMXKo/vG9/\nZKRcvmVTUJkVd7Oi7PuH1bfo8X/27Nl4LGoiU07H0i2uKL9+zsjPAj122v8p\nP2D9Qho/V/AnTBYulBQb8bxddNQF1EvbmLAi9PwybjVp3ms1I+UU2n4KgBl4\n6XWO3mcItHciX9JuIS3yHvRKwFbtOuGfCtHeK8+ghUGLiLM8le0WS2hzIzYu\nnkCnjCyqppMIpPFiQD0UKz+0yysxRy3s4ZDlXWkJe3JtNvBFLy3bUEZ99yPL\noKZ2RPx8eCAZJeqpLOS0/XmFCJXg7kNwtJi77F3b88HdUFehcQC2XT9qDA1Z\nZhqfHib4UiScVgbAO8qIYlu1zgdEhXtA4KvIO8CvHCKrO/VOqETa2MNqeGsO\nXCvwxRIxinyax2ZDJt+FienEgDJ09NzJAxQ0se5d4y1sk617TQThdpAJThqO\nxtPl71PjF1PKmWZkASXz1gkb8sSRoQV8sfWPl83PFOOBYs/81F/R7/h2D4X7\ndpNF\r\n=0t3H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/button":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/typography":"8.0.0-canary.58eaa9f02.0","@material/icon-button":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.58eaa9f02.0_1598040097277_0.11687433893476062","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/snackbar","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9f460d56081316128eeded406cb47cbb17f4688","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.238216fc4.0.tgz","fileCount":40,"integrity":"sha512-R7D1Jt5TQTwkVWFrLt/9bDmQkd26hPLuCVJ6NjkKHHWRHKpbgo9MneuHLPPfgUv9n1bmV33tt1a4Htf7YsrUdA==","signatures":[{"sig":"MEQCIAlInRtrz/C3WtBtts99gZDoBbniz7ligLGTj0Dt4yrNAiAPLPcoV/B6lZAVWqtDWF6VH3BFFyz22g1kjqKpCJhbOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9/ICRA9TVsSAnZWagAAcpkP/2N+MyHflyPug8qsqIt1\n1WTApxVC8H/RpexlKhhWiXzrYuIfYAH/7qp2I8adD8eLp5Z6l2PTKblKXrNt\nHrx/uzeW0CzqEsELfB2Q3ZfmYF5QhAhGOcl2CKRJeh/PJiYjHFhlJHDVOuBY\nTNk5wYzGCeiKeGKwf1D23qm4q8PuNm80k84kXb8F2f8AqF/VddmuN/fWR42J\nqsbzbxxDiag0RDqjizKYlmwk+/0yZIrIasZQoVW3ct+Fvu+WFWeZVSD/wq4S\nGNofTO+X/aS99Ve5rAK6ja7CZzLJEzpVaGXMOmwgh6RfPCWjL3AlhcgJjJNk\n8hEK23xBeb1HvOk2Tu1c611uJ9Lx7j/aNhxIjlJRT8JGLP2zzDwtJwNQQi9j\n9n3vqXfrEXNiAXW2dFU04oqX+THG+b16p0PKHimrffhDAj5Y/a5dPvi+A/R+\nBqYbsC3ejN3DWx/5N8h8K+4VSsXYDhDb+xuuN006AxNB9XWdNLRPX+Cu7RL+\n8gT5n3LZd8v1HubQ/pAAosqTar3qy4upJF5i1jWzePPyHZGRhdc8RFjbl2ff\nX4/YTD9KPhaRLgHNTLnj4ve1LwMdqQrw8bnmc8dBGgHMLEEIx+w3DJWkdcUH\nk4Jkmn3ItapSzgcEg5P75A2+3D4b9iQcTs1/uAXMu8J7c3/Ot5q6FH78GsH+\nM2SQ\r\n=vymM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/shape":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/button":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/typography":"8.0.0-canary.238216fc4.0","@material/icon-button":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.238216fc4.0_1598283719353_0.11661668166738393","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/snackbar","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80c9d71b2dedc119a4089f1b611ec42ccd158fea","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a1c65593d.0.tgz","fileCount":40,"integrity":"sha512-s3g/l2N6J93pxxqkf++MSrIKM4JVzmLP8JDAWJOq1SnkixadXLI2Q8IGZ/B3dWYooYgwb+67fi9F5Uu+C5aCrA==","signatures":[{"sig":"MEUCIQDh7puuq6E27rZSDMj+4WLXqcFstg0xZSlaH6+9UbhvNAIgd56FLNO5jy+NnhINx+wPnuOMeArYm1Zah1SV/U0rUd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/bCRA9TVsSAnZWagAAApcP/Rx0FvZy41VgSHEMJfqb\nCAyp41oFs6H5/XemuGMLpiaOttn13zQpF+A+o/AjEJaumTfTzjBzTmNidenu\nexVC0aeL7RgcgVoDEZNuOxmBWrrjQDox+MaYOJGRZN/s8fgVRcDVXz+oljTx\nnFr5DQap9BDCMbGBA4Yfbs2Wn3IgIZl7dXsw8M06nPfrjdw3bvnbkDtZxpu0\nV40gwkNUXQfOvYQjQFe18npgyEATnIpNaA5zItapoEFc8wuav7u+7MgKiwkA\nII7EmrfSPY+0c54rZjrrmNNzldSepqSmI7IMEisG+pKEMUVT/NGt5eZ4DD7i\nAvo5Ofc6iAFKMt4nXtASuw4P9hNw8jCxmTjNiUsdEX5lWYwkloVnoItXMafG\nc0pLFTFSEde7oocNYlAjXmrdq6sMG0lW54WXGAwMhFGPdjnWrkBHb++W3MRj\nu6lbgyQGLz6YB14celn4+d4o9vZg5Kzwgyk/2D6oALTO3AxH5keL0j8MApvr\nYo7kvCRJTeAP54LHNtkj+LdrdC5C58ZlWXdfx7BCo/D5BmiBYhGTM61w/agG\nd+u/jZJy4ufjiUxuDTW+OeeAlrD5mCXmqJF1gasyjuG8dlBnZnbLoXe/IIs0\nFWG4lHmv9A6W3VSzk27nCAnVu6w24kdYRj8+qIblO8SZV0b7G08D9zITSP2g\nZZoa\r\n=5Yr7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/shape":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/button":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/typography":"8.0.0-canary.a1c65593d.0","@material/icon-button":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a1c65593d.0_1598324698696_0.6167951631266932","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/snackbar","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d371e6d1857edc0e350b6c0fa4190527457426b7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.708cc09c4.0.tgz","fileCount":40,"integrity":"sha512-lXgdTyk7RIeBWHqrdDdiKQ0E145wnUtJjCLI5FmZZm6T2df7BtgBY//8QTMB+rInDNU9AaAhfgD87XoMgVDv/g==","signatures":[{"sig":"MEYCIQDx/izUUMmCCEEIKxIx7S2CBWc/CYmJDIhNGZX49tUVpwIhALlWMx960dOiMo8XsTLxnUV/3r2MlkqU6g+YD+YrZka+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTuCRA9TVsSAnZWagAA/PgP/ReUdiPr8KKosID6zJlx\nJDInH6TlRiRREsZUpBPRQzEdkON/zzeY993v/1wvx0ebhVTFfl0G1LbjQnpz\nT44EOSHaiES5ZBi4O0kN1ur8pBUiMhGTHT+29Y6+OPxmKZcR7LyvvTeeF0iK\npznh0b0eCem8W16B2ZBdiHJdgvRsMfe1P/Z6nAK/dzEy5hCNp9SDJAAU7L0J\nly8z+clrrVdQrMqGmIds21yF98Y8GNspZRTDQssECIMhbPneU5fKcS0kIHip\n7TBkdLAaKy+4ei/niO+hcM4mRZKbY/sD21et61BZ0+jHmFE7TRZUfYh+UsyZ\n66JtrXs14fdG1ZqqwDEjppM2m/tdKKwWMGy++qY9ks5b6fvzyfbHifAUUA4z\nyKE7j/OASOPSX6QD1uq7553JzsKwPVYEJHuyLryID1gPEp7M2KWbxn9XIVTw\nQ4zs9odB3SxOo08PIXly4/bGm5UGk0Y0TgFCt1owsTUdjHzxzzQDBuEAIX0+\nzFNhLnMWRMl+VvuZPUtzXCOzemqCBD+/SqI4GM6wJXHDEy+fbfMw3XU37il6\ne5ZpIhrs0wpifpGqtGMgv2Z5s9J8e52aOWq5xuRsR4wxta8ioBKyYfVeALz1\nrS5m0y5+ccMm61B6UcwycFR9htQxsRp2kVjFbcctFCW0HSenHCbVuv2b1tYc\n6dn1\r\n=jcoe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/button":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/typography":"8.0.0-canary.708cc09c4.0","@material/icon-button":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.708cc09c4.0_1598371054011_0.40231120300633716","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/snackbar","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7435379487f168f35e50e183429231ed2d5253aa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.19bea2ad3.0.tgz","fileCount":40,"integrity":"sha512-cf3ewfkX8O9lTresqOKw60p/+yWSb+FckUoiLkNCuB99XdHyTfzZ1FDT+Pu3YZKI7vBy5ng+Wa919R7MjFK5Fg==","signatures":[{"sig":"MEYCIQCjMrdBG8t7qA18w6MgEuWBB+WhAFzu/CNaJXOYoIF22gIhAOisAcZvux2jBa3H42+hJX/nk+Onb8lmfWdVMgeOZT8u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq76CRA9TVsSAnZWagAAGuMP/Rkh9dOmzfSkQtPOOnah\nzUAyM6MfAj87r8z8UAGEli6ocRPA7tjO3aI4j3dJwMdkaT52h73mw3lCWF9v\n+d40ivBDtv+NKzy4N+nydVRQ8MoJDIxQcFvZiMioHSyAAvDdDwjYBx01QBxm\ny/hTcZ6fsHCmmji2yDwctkbi20EosWgOP8buR1hp35/DOb4QL++/FISEZB8W\n+Uda5T0RxOk4Y7hFWgQGTIhz/jpmnBoPAMjgKnGQLqhlKGUKLwKAbuMd+idX\nK+2m95TjW1cnU84JHV23axMiadNqOYZ06MrnQwaz3MJO0KB09pANE2bnmEIg\n8nwTzUSQyeX81lejYv3gschKH1oK9owqtj3FegmgjPc+Z2TGvfFmct/3h1Ip\n4c34KZm3KpNCfZmBumPzZq9J+vnxbNZNpRoyfz7iMp3iQTKpw9h5/gaUmjgF\n2SdqOA1HOBb+Nnj7wfk0adGiav5j4PBB4JEzulbsi/EzxBgMIU2FsHK7xVHO\nhfSLJ4ajynVIXhiX1dfYEBUg3WUiaiD3YsE3uSPYZfsV6X3Fc61pnDM8MbSs\n3tkFcfvnE8wHj6wDViQ5oDyZAV52fJ5nI5BMmuiXwkawxxZZjOdIKRjbUbFV\nYk5fn3zcyIIUM+oSJF8XJJzFHmYfXcIK3UKVg/SLFKg19RPa6McbHKPi5kwb\nsGHb\r\n=ruKK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/button":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/typography":"8.0.0-canary.19bea2ad3.0","@material/icon-button":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.19bea2ad3.0_1598467833804_0.9411487395654263","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/snackbar","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ea20b831da9c1cbcb7cce5f297c58cd127cd0f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.911014711.0.tgz","fileCount":40,"integrity":"sha512-g5iBUWMonY8xv/PVHfWkJ+OCf6c3lbjmNELHeqNV+J6bMIC/FF8Hm4Jec+iwVAYyhYbpaRRycAMyTaRedXFSdg==","signatures":[{"sig":"MEQCIEOvWdciE0Mz0gR8NGjHQHDLvmWTPdEZclD0US0Psg/NAiBmtzHIPoEHyjypCerpy7M4TXBjOe1zyoESafKq7kHl7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9qxCRA9TVsSAnZWagAAl6AP/34l6DVJYxU32Ze3T7IJ\nn1LCz4qEwIPtV+kA9A4EGo7pwx/WJQzvNOsrFVKFZbFJJZUYRtNJ+1ClkezH\nTfblWmO+TL75I7mHnxt5TyOfjfuf6qBXqiTmyVQcuPYLOw59AkbQhaXCdJPf\nbkC7uJrQCM1A/kowN7tVbjumMxallLt1bNKftI126SZTfNqM8XHWGnGI6KoH\n8MPcmGA8hiejScBM6C2hZ19LpqwsZczXGgg83cgV1kW92mxer3VQA38Hr+qn\nYNT1CTYZY/uRUQJOch75h2cCp/hHNnc+rnqwO9zPLX8846hwc0DmsgDjmtZ9\nqk1Uhel6evGny2Sv0WCMvTnYlA9D9/c3yxmNf5j80dDWcYhedyPlPiT3+Aw6\nn/HFfwbsyNh/9ou2Tyv0wsDeoA0e7dQoSzZteiXEkmJLcOu2/gVBaS51slSe\nar5omcuWVqiuKtHI081Xur+pLO8AMGnzNwvDYR9yYKkCNCyvPpmsSzlZrAQ6\nU1E01yZfnOL4HS2NkO9sqN/crHkCu3/fbj47lBhN9sCVtX6jccC4BG+OwCet\npT9q3K4A105cVN2vkbAJpRa5IPIR9VEoK/8Ty55NTQgVVX1H/OgELyvhwnLm\nW/s3ZYMkgjiPJC+ezFQYKl8Q+QbEsuxJju0URPH7W1l/AbMXv0kv+0v9yBIB\nqg+X\r\n=a3/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/shape":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/button":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/typography":"8.0.0-canary.911014711.0","@material/icon-button":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.911014711.0_1598544561115_0.4838529252493513","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/snackbar","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"058072acc28d52be33e1c53e632014d5a3a2aea5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d3387f54c.0.tgz","fileCount":40,"integrity":"sha512-9foP9vE0qwg9wsdgO9S+bSWEukLVWbN4teOIT98FRYOVd0W5yCVU7iH3wKL/D+sVKTY5pAO7vM/VPHFDtpfGVQ==","signatures":[{"sig":"MEUCIG+aGlwL57Vo853uD3WWftXjqD8omZZq5p418PWo1zDFAiEAyyVWKEJyJ+kbLVKbVJKEDv0d5DZA9ZWD0zH3gCJEaZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViqCRA9TVsSAnZWagAAEjQP/2Q+MYurj3iFmBffuzqf\nHRrEZ/AVNEJBmM42SjUzf2Mo/MXS7NZrbGWz1BZ9A2TjKtLGdyAaaOy6VKIp\nKl3Q3E+PHKuUa/TuMiPkXx32O4qFroJYT3NjdpydJmKV6wTZxxziWc+YmU/G\nlXmnbDaohjaEmz1EERhx73EcROAEMoPIy4KZbR/S5vE89UNNkx0VSsmQeMDx\nin5KPyeLLi/k2HrQj4iXzjW/HdarMSJ8n+z/ndoVbmUvtyoWzniqhPypY8mA\nBWL/wnyZOXPUA2ECPotMX/cqCAnFJAV5TF/s/Zt8ldQsmFUhL3BfQRXYT91J\ncjpV9ieIOzk5HKjwMv2eaxeCoxAyXqJ97PKqR+fqWz3qkXvPa+4orIq1V76v\nZ8uqt4KwrspfFxzCuhDHGgLu/OU/oAv06c5Kp/gtnkBSHXmVbn8qtw0CSVg+\nkjKESAYA2Tl5mhMg1IZNTHdIOwt0EoydfERW6bzh1GN54iPCodiC1yFoy8Y1\nDMLHTsquGFvPeDEktfqtw2v2tgi4saBVDY7kr8v2DAbFbvb8uKPWK09RtL4T\nsFCMOFYFQ0myEAg50IF2YMPMXHysCwbF7iRAESd2QKthZdmHSHSSn5cVs5sa\nVebOxHn55VhTo5C3cVOrGNyc0wlaGcMM8p1XZeQrQgNy9Al93Ph12y6vyi88\nZB/k\r\n=FnYu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/button":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/typography":"8.0.0-canary.d3387f54c.0","@material/icon-button":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d3387f54c.0_1599166634108_0.7935002661107022","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/snackbar","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80355c0fa22b20c653c6234d67622364e111f4b6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2ccf996cc.0.tgz","fileCount":40,"integrity":"sha512-oZKFrSTE0DbKfeyDBLMRAv3XK8o415tUfQVi4VdLHkW2Qr6ntpwkG8qUySBUMQLgZVWusfr2ibvhG6Ef3bhjnQ==","signatures":[{"sig":"MEYCIQDkSYIKh7q+Xm00q8dXjzN0oe0SBI3tc0s0lf7v8LK0fgIhAJqYxV9p18B9+nBhN4hC0bwngYx1NT13sd4aO12dn9sf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjOCRA9TVsSAnZWagAAHQAP/0vwKnlnVqQNpwxCaqYL\nbN1UWCFRey360k/kyprxUxLS5bIQAypLSy1DCTWk5ccbGWnxy7SrLYbejdtq\niChCo9AsOrGznqp0+p23pDvyMlmq0mEjJmx7ixxwnOHzepl98DsyVh034eZf\nTzTsUq+6l99fvmH73nkZqaCGZOjgovwDsBc5xgU0sTAw60i8GeOOnKEIgsm6\nmYyWU+57W7PmELxL3NO6xvzYgwkxYsqESUyaqn2wbEP4jNEVNRjxTeIfLdsO\nF1hF1iBC979N4SRWJ9GZQW8mZl+paQuoSysjb50ZSdsSOrCPsvVyMXX7qX+F\nlCpO0/n7f+lafDxDvHmjMS1LdixZmwd3sJKiEe03UfiyXISsLd2rs6L9ZU49\ni7Q8qpQuhJPsa9AGL+6cbCXjX7KIQGU0tbO5clFS1pkJW1lgJSk3XflM/9HW\nQnOHZ/QGqGeQ9qn0wmbNMDS3kmt0lnyTD7Io8FqVfCftdVaAdbBopc4+c54k\n3aUJeOdAbdvcySl2oE8+q0GijczVgH65oOpYXhe0CyEQGPsbpTkuOXi6Tkmo\nsm+tXTjO6PWmSRvNxbHZ/XMAxfPsQMCHsSOnsfTAx9Mpm+0T4rqvJ1+x9ACj\nc7xZJmyotkGTr8Kf7I8/FIOABz1z84IRN58TTgkJ1iwWBijREVUWR9pKsMir\nQVc7\r\n=iQFB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/button":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/typography":"8.0.0-canary.2ccf996cc.0","@material/icon-button":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2ccf996cc.0_1599166669752_0.5152322536941476","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/snackbar","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38da75b6296e9b5cdeaf2835a25452c0f244873a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.744bfe5d8.0.tgz","fileCount":40,"integrity":"sha512-/OOdwzQRcDdmlBEht66Ex8wuB9nkqe+7/kCeyKePd8YVeXYgD4YWL3KI8L92ValNPFzRPoVa73AKopesdB3Maw==","signatures":[{"sig":"MEUCIQCpOl1bRlQS1qhSYQciTjpMRNs3BzteXPnC0OeQ+iXecwIgY3UVnmypM2LY2RL7TBkSg7pMPunK4/cIfokHw64O6bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVj1CRA9TVsSAnZWagAAJpIQAIso+efkufW9+9/xPP/Q\nIxX4klsTwgHV1vnCmbGhYFDWobWKqqDrDEOYa57jLZ8KdeTOxPA7f9Q7mxoD\nKYJYEAmgYayCqjLSqUp/LN9qlh8VM4Xs4czWv1TIdDJFCxe17FMf/UqBNdXV\nZjMjc91bpUM5exxsY3NAu+XRF57goyP3x1dAKZbN7SMdT7zNv4EBsTKoZ3dy\n6A4WryeCvcL8i/ldm/3/xZY9ae6uXsN0EnUhMymXt9WP+8cuRSePRNV0sJLM\nxEzLl2kU9ttcKTgFbEc3/39HqOK3tgw1gMlEHWe+GdT9eLO8Y/4YWricGhXq\nQSGk3fxnXeLpKTJ7gVhcsTGMP9OW4wyEzBA/3IWSLhXDO6sP/wEbHAG0m4CP\nqPZN9loFBzfCVDcNJWSVcJnlFFJ9W2AGCvqIU2cf5Y4yFmyHztSSGg41o2oh\nysLJ2IpSutp7uvyPcade9nkXTsd9dj9rMXGLtQhAWg0dmTERklwuXy2W0bkl\no6Py56Zu4VctxdTB/ybUz86TGOQhG8ZNs5uGjHYDiTHHLO6qYd4YrWR2V6wy\nD+2jov6Mut7t9V7dNzoc3D1gjWK69U3bMFIB/EtmiOAaRBDsImpiDRQIPi+B\nEqsgePUglw1O4fYDT4lvFB1cDmQYBePkD/B0hztoJ5A2Gm+nIUTn9M26iTH5\njqxu\r\n=MRgz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/shape":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/button":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/typography":"8.0.0-canary.744bfe5d8.0","@material/icon-button":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.744bfe5d8.0_1599166709098_0.5601641211726702","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/snackbar","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4156301b0a62cbd3a2944023b3d623dfbf34cbfe","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.78da96eaf.0.tgz","fileCount":40,"integrity":"sha512-5RSUimrwubbTPRDcgANqFaetCX+ZoVE5T67Kp0GgCI62Hjw5e1GN+lCFWW95pLFXjYKenOOZdb/DSYnlJ6mWmA==","signatures":[{"sig":"MEUCIQD5sY/kVsgL9utOSrJqtw73lmZHioquVz/nkcGUff2bnQIgZZdgjl0DYIQLcmsioCmx6eXBbsH5slJpAXXpCrfAdbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9f7CRA9TVsSAnZWagAAhJkP/3h5HP9RT9wOzFNh+Aw1\nCt42lJPpOWuzkjEPHiaahNrflGGDTSdn4hqti03aFQOYCPxI1qOiMM+66hhh\n3kdDosu/2FXvYSU5WQpsUngJP6DK5sQO13c3mIPY4t8ynr8fvV4AIAbYTKjX\nB9cYkg5VdqTxIJ4ZMyzCe2ITnZMwLPHT5hfdb61YPycREwRrZ9JwK8+pCZik\nUEKfQ/Vg2LLiNnBP35Wg+j70DeAFKNYpWp8yb8oliHs14/eCld0piLpHZ1jB\nrBwMS7YBqlAIzpkosUIRF9zkzCH0mRqh+hefzvz+dZSMTPGpvdIyRDKn/400\nW16QEjjRN9lq6xHnvtUAQye4t2MJ2aBAuSJBybEUyRRAUJT2AA19/WYpWcJa\nQ4lVy0LirrQfpEFfj7NJGEn/LmpiuVVtRaWP3ecZ5FQQjjCp0Pq/xUXpgBNZ\n+ZZJRPR01/+XR9/JG9j4PcIL9gE2TQn0ykXhPBReYSzmSJos3Z0KAGah2jqP\nfwFSG7QTPXCqeeqMDlKlssK2QmTj/4AMTDjrCAM6DYdNDtlHlfBOQWgPDtgI\n6Re9G1I+RTGUvjs3OqnROn+xDljpXti8NJbHr3hCkzWQYL2uksJ1jc8RNLNa\nAJfVN2Mc8vk/VA1XJNkhqFqsZ4AWS0aALLyquCkOWuMpC0ZmJgCi3h4bDWZV\n/6WJ\r\n=kYD2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/button":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/typography":"8.0.0-canary.78da96eaf.0","@material/icon-button":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.78da96eaf.0_1599592443356_0.918578944212266","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/snackbar","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a45b366f8c1b89c6bfa9db55b593717bf9fcbf56","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.b0ed593cc.0.tgz","fileCount":40,"integrity":"sha512-AOYPQr2cN5F0WJyZJ6cS8naX/26lzyRDvqXDbx07WNF4z1PgsTuvsvqsLoQ5XjhoX+wrH5WPS/i7arvIl8C2Vg==","signatures":[{"sig":"MEQCIHBkzqj7lrzXdh0YmMCtc0YYfY+ekNntEfTkBCp3C9D/AiAp+vlYUA3f8KXlQE00v816eASRXhplXWsWV47TWhcRrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNoCRA9TVsSAnZWagAA/EAP/1+ihrY1DAULniYYaBk/\n5yRNTnF3SLGGxBJkKRBXbCbAinAzs0e6YsQ40WJBNajNnKbdJg+Ad56jmXt3\n2eXjZHVV1H14caPAnUikFPcN881ds2RrI6zgfriV5R8kywJ6z8T7xqIUAcoJ\n7PiOCaQ4NUamPEOQRjBycnzPf82Tc6w0UFc1mDfCrKy1anEL7kU7s3RBNGKA\n+5HDzd4QY8e/PHtjHfYdgOQNBMuAUXW3myOuRDW5vYCN1QEWqEPMjO9pixiZ\n/F1rfIxKVscL2iCk6wqZQL/guNG8byfyE9Eo3ixYUjLLOLgLnYd6nV9+3JvW\n/FanRk9lm7ZQ3Pb6BRL4Y5xjgPMOvPc8EAQHG2bTu/cL2RP7H+xVuDns0nRU\nHF0/tRogBTK4byPcxyJ+eNrXq99u9ITPXQY/mECko5xG/bA5rA4ktogLsQBB\n9bXUMGc0Ja5YJ9NEEQbakTBbB4bYeZVoyGw50/1bsoKZAg/GJoMXhnyIEKiM\nrWoAItCLH76Tg7eFUwMKkFOCxdEXr+Br2B0H2FprfoIaKvcjb9mgga9PMGFP\nhIW07efs+9EGdZziy/gFpyUVoeejv9xR0sGFTF67wOj98JWM4SU4mWBHFgJA\nwJbzKQEaFb6tgOrykD0Axq4M0OFYdODM34STd9D7iWRZTlNIPpTDzjGM0D0p\nAfnV\r\n=P4TW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/button":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/typography":"8.0.0-canary.b0ed593cc.0","@material/icon-button":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.b0ed593cc.0_1599632232507_0.9768673177100351","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/snackbar","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd032a553a3526a8ee72e3944ba7ad9f69c1ebe5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":40,"integrity":"sha512-paIuWXGfSXRGE8gqLwhfowpRN212m8WFU7DfB6ll7awzFC5ojPSO2achM4W+Ekut7RP1yspXlPH40CaZ51u8aQ==","signatures":[{"sig":"MEUCIQCX05tboSTrBODb4rG5SHtQYPYGjIH0AnwgM6GSQulJywIgHwRzkFXxBzXdI/kn8C3NiL/xHpVHhNn9BgNKe+IfC2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpaVCRA9TVsSAnZWagAAn1sP+gOyHbzoO0jQ38x9SRTF\ndtkc5v3YA5xQk8PJjVK4CttMeKgdbvUNwOAKT/LrIF/0/QEFwr32DWpMjyN8\ndYvowkoNs6wiuSDX0sKMB8fVa4WAVGt2vXdK0S93/NiPyl0KUqJ6EV6FB36V\nSbsv6zcqZcS70ksIcp0R+Qp2zLIcHClD9T176LUg1jp4tVF4qYtv/nPjy/BR\nX3ok9xi4RZD0/5okg/+l1MGW8JGvDxKz69qoHXmLlPL/BYN33rL3gJmm8hvg\ncoYWFNQ4tEwwZz52RtAGnqfOuhvjh0cgN+hXBYer4xT6FAA5L7joJZJjobA6\n/8GSFC8u49ffZg3MUIyjSaYfdhlndqMqKhFw2/EN/SpURY7012D5fT6du0dz\njL2HeEisXG55yoHAmCOMQzDxy2L8cDeV6uGiQuracb+b33Xi+f+4RaabuGUB\npRf3LDS+Sqoc4goMSpFjI/pvbYjg0aly3zaOLawF+L+IS7N3/gWOpQ2DtKnD\n1FBea/wL1Ooryhwwk4nRw72EigmdANNjdzhd4ooc8L0sP2XOh5oNf7aaKqZT\nNYL1KrmbL/VyfYcryJTrovODOCysx03cx0yFCC3qjv+QEfzrO8or7Wh5oM69\nnn4eUrf23qKUg04oyiosU0UM+IzduF4KRw2im93h9oFastIW1vfji5cuAwfD\nm8D5\r\n=nJIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/button":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/typography":"8.0.0-canary.85a1fa9ea.0","@material/icon-button":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.85a1fa9ea.0_1599772309351_0.0663927324900615","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/snackbar","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f53926ee9dccdb117953444fc34d4eec63e77c2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":40,"integrity":"sha512-ShD5I2CULh6aZTgmwDWZOovk+eAbnLgebl0A+h8VA/DGkj/Jnjk/PYVU0pXQXhgiJHdg4YDeFD+eVTCRLhWt0w==","signatures":[{"sig":"MEQCIFQJSCkgO+wE+vQNVPnfRd4d4l3+xN4e7agXE80eBEPWAiBP9kJSg9MiIm3Wrsmm+ILE5UTqRBThZi1NXbOIMK6PWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7kGCRA9TVsSAnZWagAAj9YQAJWJMG/pSTAPcXO+QVUy\nI1z+kMT80f7ho/6NwZ7xLMtycJAuxB+5G2FDyLeSMg0LM2IAnfazU6MBQdd0\nBMGTgvzn2BgVwIV1Mf+8uI1FSOp7ZijnI2v4zFADQba1p9YzFDvyIL4R3s/E\ny45EbZ3UnQoFeTfqIsCHmTn3VwMLU+OEq+0hyONlook+EXuy8X7oWv+KRkJs\ne9iv2mIdX88sz/i10RPQaovk4ovavzx3dbRHRmOMSFXHcUYp1F/PZG4IQ3mb\nxOjcwX69VlNOdPXtX7Fyssa7VcdjhCb5XAz2JTk3wwkWRabugqRyXM4sn8ad\nIg7VAG2B3ezpc+D3XjJP8hVNrl5Ky3relAFj8eerQPdXHrkACxnwv8QUEgKB\nYS1GsAeuRBLr3MQqI0ZpD/YdHG++di8nz7JsH9tOta3TUv7Y/isxwW83qKKS\nzOhNYnTJgpwRYy9tZ8EUzPwDf8iCSTUK32tSQqB7OQdIkvvCfcrMVOVdb0Xl\nKPQHyHC0Sf75TWq32v7wbWVr/NwYhR+t9Ev7rLITX3Jf2CWPCC8Y3OEf3L3/\ndDIhQy16TTrEOoKxdA2aMyxtAU+6WrErzN9u+kMBP3jB+5AiQ2aXWCPnQyK0\nOj3XTAoNqU/RlO+Jgk91+QG824Ro1a+klcpu4h1avNiDZoLk7jHpeegCVILq\nSkdl\r\n=clDF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/button":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/typography":"8.0.0-canary.0bc41a9c7.0","@material/icon-button":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.0bc41a9c7.0_1599846662221_0.4212811685186879","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/snackbar","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45a9f28ebc5c6e260161cd8df355578ac711ea8f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fc0eb5013.0.tgz","fileCount":40,"integrity":"sha512-NqjtcYu+yA0vU+D6K7JGVBwzaQNO9hY+6oGaw9iUDV/6gS8JVYSxYCs7abRQ00RuX69s1wqMSMPGnMdNokjfeQ==","signatures":[{"sig":"MEQCIGJIdj6pNn9U+68FQuntRJz5hpWQ0MazoduV2++KssyyAiAw5PAr+U5K0sdz2pWSRfWXai0AV3zgTkXqHYAWzTrd+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9aBCRA9TVsSAnZWagAAF1wQAJ88B29CMp661lqpiRJ8\nFXZ99LooxEPn0w7lUGQhKuZM6VxPp6iRt1yM5nzJ53gQByxjwdHXaZct91GP\n3p3jZZBMStekBJCrjiqALo7u9BFi/h4Dwill+ebVsDzpL3tZWBXNjSm2IzW7\nNHPoluKKWa0ZDFrq7OPa+Pm2RFZs9m1cOr6o3sXmjcQ/u87NuNjgiZMkG64c\npVUQyIBrMG7sr/9LPAle+e2/FrS3gJrMSAC7CNSNK7nsIFKoS2GAikx3Me/k\niJ6vmFwoSt38K76mGddqT4qKJjWI95E4zlOL2vfTgCOoAH5i+705KzkuQ+50\n15qdpClhgP/MYa5/b4li6U/YpC5Ms3VAobirLICShQ3CBXlz46mC3KRtQHN3\nSD+7jvJYZzbQg7NzS1FL61IyRANsNyAEbeHAYG1iwxpHrscmAwZnFaIY3q5a\nxSR/PN9UkXJ1WZxAP6/o6PkCzCp/Lam2YDthgO6nsLIs7BigeWHVOEhMdyOI\nf+Tmke4hJgIQYLkk1lmi1WqF8SF/RkUZqui4Ve0ZQeGXIhEQ6Mrse2twf7UV\nfPudUopxLXSs1M3J1baXvmoDoks+Q8+6HMppSeeI7fMUon6soA1WjkRnKD0g\nOGPVq3LeDhZWHOj+iKgyjmOkpZUcGI43NRGp2nVw+6fQlOCc8HVPPV0fXlQy\nB8zk\r\n=8t2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/button":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/typography":"8.0.0-canary.fc0eb5013.0","@material/icon-button":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fc0eb5013.0_1599854209271_0.9506962903637222","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/snackbar","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2028c4860324411957ddf1c05434f5603998d7ce","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.319bf66de.0.tgz","fileCount":40,"integrity":"sha512-BEkjT7bX6yCFOiMn+x/vAyAZIdp2OrCXeAjeqGZS73xDUF/gqu0uYqpiwKjYB3qkdMlm8Qa27ZMvicJbz58q4w==","signatures":[{"sig":"MEQCIDLLacSMQTFW6c5S54HWUrKmgCLWz9YDZDLx3a6ssWkEAiB61+LgEl0EJ5aSqscLxNJW7KsgwbRwxkra9syxMiwfvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQoCRA9TVsSAnZWagAA7RwQAIwvkdbowwBjUO+UqUWj\nJvpDYL8ZAng9ZLeJimaN8VDmT78vue3531m4DXGQB3RmukGGv9Sqd8WOz+gJ\nCw1gWp+Wkh/9CZpqS/6XP0gT54QH3xIs4dUHBIb1GB/6d2gUOIgTtTc1OTjW\nuSD0QV0r78rEeu4rxq3XxrLDdE6dA4VWdrU6d371Zx8VbGLAP2AZ/EUKfmbP\nFMF+DdUM4YM/C9SXe2BY0dozbZc/bChxvV9Hn67jJNBuynBqU+AvtlCslvfz\nXO8wOGrfVCwmAF63BXQ18clFr+X6HGGgKpFL8XPsU9HIT1Wn3I6+MJQ0Mp04\n6V8Yd/nUh+asRmqXR74wXEG8EA5QiLVpJ08kVaPJXbrAKlr1sUzh8aFFkGyG\nqmC//gf2bUH/cwcUCR0Q2CkfeBZSHqvmjflQn/ctXhn2C3PtRnuMODyw6Px5\n2W6oOnejEfxu6GEPyOSMH71rDPBmtJdCWDZzDmY7qx/6vruPa8gExVLKk4GA\nCXGgMJlx1Vz0jxiUoxOpUDfdIo5MI8tAy1jLIDsCZEyNfiDOx1RfSPPMWNtZ\nIVKT2d8QfmmgScMONvPzHbY2qa4rsKTIx81kR16Ha+X62GVekGukMR8P/3Cv\n8K1uIamPUCgG+nr/YgmRxGjtuQmYaCliAtPqHeulUQOBJm8vD6Gv+ea8Akuk\noObS\r\n=fIQ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/shape":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/button":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/typography":"8.0.0-canary.319bf66de.0","@material/icon-button":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.319bf66de.0_1599865895931_0.9845116113288692","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/snackbar","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e08b55d29fb0fb8c604c31e89b234680cd38b372","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5bfc305ec.0.tgz","fileCount":40,"integrity":"sha512-Ua6/iBVx13TJZ6czMf0aTL/ZlbqFMdH+QglsDoXln2+sQjlUME7B2Q6wEiUxYvvMowZzkN7HyFQNvYfLc4fqXQ==","signatures":[{"sig":"MEUCIQDiM5HRCApxCEsE8mGDMmqvaozcLV/sSuy06sMGQNENmQIgCc5XyYs/gJiUXlkaUx20F/3r+wl1YLayFgaoDO7tZgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqTFCRA9TVsSAnZWagAAX7QP/3FzChMusMxfVoXKb0k5\nUkHQ26KLQEqJR12eyZWqgUKFZCgiKfD0KqQ00FyzEbEqiGh72vzjP4MfBY9f\n7WvHW2u7AqLUM6W//UKktqgB4aHtjakIrASYPwrcbXa6yfAIDRANWZa/qGm+\n77XqheRcke46ZvOA39vvqy6bkQgiZTfr5hri4QeBRAESeMrokGoXmMv6jHrz\nSlMOYd619rZfdhah6i87gCJ9PodLI3lBq/thCi90rYk5xHqCEuNTwPoWuMeh\nwACnGCjVq+rTQVQkhcTzm8Q4VKpwO+YtwM1VdRY5cntLFGexD+yxfKWodJGP\nFnpz0cPOymjgo/JQrCy2Effuik5A1eelv3wFDeRyU5tIc15a29DBL3mQGcfB\npVCohtTVw1GhE69YLtjmU6OUZNVrBlXrmstmny5UEpSVJiFZsHPVrKVuVejQ\nE0dcpINUOe/0MJQo+0gVSnVQtSINIeoB+TO0Y38jwMqV7oNncoejtMTtc1F6\nqlWlNuYFtWcGXgGgaunhNJLPbaWm3TTj79pWsBFfGJY6FKNdfTAz3on5BcyT\n32iSxoYiWdVqbCCG1rkvzGt9obJlxIt2+HehezcSl9iSM2B+VZT11yvDl+hw\nwhPeQG3B4BMbjENX8qc+NcGB+J/DbmjmJElDAgUm84ZIBz2y2WSK5ofA7ZFg\nlJhG\r\n=A6xA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/button":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/typography":"8.0.0-canary.5bfc305ec.0","@material/icon-button":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5bfc305ec.0_1600038084760_0.30740696683463065","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/snackbar","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c2ad536de961af1b0273eb35676a07f342d824","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.83d83f131.0.tgz","fileCount":40,"integrity":"sha512-9R1JvYaZLNYrSp2gtD1yVSmKuGo09JDL2NZk9scz8wVxKtKKTq4BMTeGrLkEzQbcE7meDDyCqKxmpJQF1xUe9Q==","signatures":[{"sig":"MEUCIQCLkugMAHtCPqij27pL8VQMQ55JGUWaZA/EFrpxE+C4yQIgdgrfdcSPwkKxeBYIi9THGCBpsOOmiH6y8bgcE2yPbtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrp2CRA9TVsSAnZWagAAWAoQAJbjb76o6kmieLJEsNZi\nx2JjyQthxgReJU0Q/oauQDT4OkTv58avDJZQfMEeCLt9pqdVpJyksoF762m2\nokRMNT+faBxq19nS2uYr/+8Txo+OxMEWZzQXJorAKXk0+4uxJ1Bw9riPDXyO\nZqIe5OLhBogbKVZPUOf/3ys82gCZwfgkudsmxX0vB+GbY8D251OACvCkyvAD\nR98ikGXlrSxLBLrrY1Az7rTaqHpenM8JH+j5yi/9eftwKRwbHaBtga1KrVzH\nwIRkZPisI/Sbx9C5ExxiEqS6gS7RlzOLLPKzf19pTC+raeUU4QqV0knWqB9H\nr06l2dFZMTMISdH44mbmOTBSrXATbPrOLDchrw4/bEiuUatv6+lyxLjj5IqR\nxH8Lzey9PsOCsjtUHI1S7qg0BvDNiPWiUTMadeXNPnU+vooS+iliVbodNLzJ\n8GIHJlNI8DgtrWcOJX/5uz5fHqx4Ajzuj9iishpxEYiBhmzIkn2hgDGKE9hU\n+fotAkGyM2tbMQM9c7Kk9k5LQqCLBUPKLFDl2NfWEu+8aYdjuYc0/HI2MAcz\nZJzQWTB9WnFnfRr8CR4H1unOJgdyjisnGJsy/ABZ5JBd3Hvgn3D/7V8KT5cQ\nDdSJjA9baTiBBNJVj4R+PghqfK7iGaSLNsthDpMYVi3/tbIrrLBr3PEpwP4k\nlw5N\r\n=uUfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/button":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/typography":"8.0.0-canary.83d83f131.0","@material/icon-button":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.83d83f131.0_1600043637746_0.9229128578173487","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/snackbar","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8d6db19131ff8528465d010381cc415b0bb1060","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d52b165b5.0.tgz","fileCount":40,"integrity":"sha512-EgG5vNVCrwSGflqZE+8MD91WKsXicvvQFSbRN0iqpH7Fuch6SyF/wU65/yd9iVyF3E3ov4PRzv4C9YdQrPbegw==","signatures":[{"sig":"MEQCIFdYC3LBaXiI/izgSrqzTVrMTYu+HVLnqLNHM26+bqf+AiBie3JOqT0VrGhXoQ4Ze1OVzOms/jMQ1FTrHNrNlqRanA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNXrCRA9TVsSAnZWagAAzY8P/34AcJNA1N5fLSdMYZpI\nTbvyGkKR5EJYZO6RzJQcCPHLcTbptxynSTd+OP5sULBmJ4KyO9DZZFZaD37I\nmECHUI3QCpEzCyE4xwnj0/I1RLt3D4+Pq4IGmdBZxtMvGOPLtMNZykQXAxRO\n1VQq7XzXzdbfpeJkhZTJ+or4I03vLBLP2qnsM+Ut2b7Uf8CSYGsUkvLwIzBb\nGPxA8qy9TyiXegL38+Yc+uVvYTgBkbHL9c1DAKSgZNemRP3qn8csCSaT+ABH\ne2oBKQoNJIVd1agcAIvHUsqjUKVc2DmmU/Eq/twMwbY1mWuKIMymo4PzsIYL\nOEWYCTXOwoWTy6bwX2MK9KGYMsZx58+eBMWyUBXvP+b5tg+QcHkdcsHxpEVC\n7PytTreGvLo1cQJUHVFp0gZnAPAYGmVxLBOm3+zyg8S0eSpkL+psiLNdzii6\njQPhogDcG9MKtrTjIdmzTFyyxOBnFKU8N3HimYNQRfkxPIlJrH+3prxkuq4W\nPmngKVPIHIsFMJPp7tvz383GeA00v7hDIt5MhNeq59KEjk39BpAFbXjpLe+1\nlbt2XPx2q8kD8qX6WpV5/H3ZM/q0r2mCANpLZBuyFWmYrXE5lrjJeazHAS50\n7onqUsloDG+AxRmjpgD+MKJq5IVBdczS3NJER11E0B17NxWj8Yhlf5Mdnk6b\nAMKF\r\n=YLFJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/button":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/typography":"8.0.0-canary.d52b165b5.0","@material/icon-button":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d52b165b5.0_1600181739187_0.8815574436072913","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/snackbar","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed41d802a0fbf9bf8b5e3fd1203da737131478c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a831d4799.0.tgz","fileCount":40,"integrity":"sha512-zFQrCUpoBXU8TjcCPNbwBNkqs3nPx3Xh25iu5xu3YVY4gB5NOq91mRIiYtqlt12EPUNowwH3l6yXxoYSxTl9lw==","signatures":[{"sig":"MEUCIQDOIfTn7PvtbQsZKsC1srb1ZREk6u789uRcJSiEwA6tCQIgTM3sqZs0UAAMzFq7l+3MMNsrRxDfx2Z+8Qx3OVtQ4GU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP+CCRA9TVsSAnZWagAAZ4EP/jT6ibsqk21eiiJkTMSe\nZguIU/AbcJu1sDoO7hMEiLeALAevR8/RJok9/yoVT7dUhmJLV5g13FGWL0BS\nZyw+5fXSCOmlKxWg4Pzdx9bFtcuzIuTsKqV3zPwE5uVP5Sf+dJvO4SquDTvM\nXtw3KP+9RGdpZZAcVyYiBAW7NsteRunTbfEC+eUn4Nz2+FgQKBWKzfq9Jpqi\ngm3ScTbetpDcxgJ60tfObeOonBdNDUNbuVM6ybhOX8obAH7aP1TviqcDJH8U\nFjQxtj/xlQo2ZNUnW+El4BY/f2orgGh/pmRPuc2yN1aHa1it02+epTgcQ8R0\nQ1nWev+DsIlF0+DsWJwzQbWItFUQsmfAftnGBQVWy6x/Hq6/V7C9H8EXITiS\n5XFuZFcNHpGZTqXOcpyves+IvWBn6b9cFqw1hd+DUW4qT5CyoLaYG0xcjgCp\nFuYXrMVuClhg/nLfwHzFQL/9q73i8U5FnZNmmb4PgLUtyIlZx8tfWcAMEgSS\ncP5H/DcFchTHo0UazB5FXgZJJe0Ai5qgcBEtO2iD38Fi3XWcAaU/qKUPCGss\np6Fd3o/O1atiWUrqGTfnXhphfpmHm2tgD/3UWFKE0dZcMtEuk9hvdDSVKG3x\nDGIollha/a4Ri4faIKdw5P2Pr24nqMEx+arBqQ/XG7s6qGvaMq2yXTEJp1D3\nltqq\r\n=QxTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/shape":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/button":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/typography":"8.0.0-canary.a831d4799.0","@material/icon-button":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a831d4799.0_1600192386352_0.915625283434002","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/snackbar","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce1df9914d745ea9e57d00d86e4d032b2e8499e2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a306aa488.0.tgz","fileCount":40,"integrity":"sha512-Jv5H4qebz4cHyUA+7HIqxjh15jIuBlTY+DwnCWTAeprSVAM5wMqDA/GqdGQNV3i4hX65fOwQGMOOw/MR7g8oDQ==","signatures":[{"sig":"MEUCIDo6T3NA2B0A+m/0zDSCN74sE4WdtXrLj5kg3H4JwyxcAiEA/VclxU3DQPUSuUlBicvHzU+VoCWaLE20m7Dfdxiaiis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUWCRA9TVsSAnZWagAASccQAIzVd77cK21zDLC4ogtN\nISodCy/R6QL1zJvyId27YXHWnlxEX4nxpmLTyCU8IZ723Vy1/7ohir3h2LGM\nePedNYay9FPKPzRJb3xFFx0RN5oEfyRtPX6rMDXmReVOhwhoCs1dWdlKwRRw\nerOfLwJYwrp4WMpNC9o3+khChUkn5S3EkG9fLfg6Zl4qR+jGrfMqUJ2Ya8sJ\nXZeyRqr/+U7wWXiJHX7rWcmCIKXePqP6YhSRH4p7CmzDm9UzRi9Jhd4RQPN8\nw7zDEANsQh0dczX+F29+UWSQF9FNsTz7TqyQ97gyO20iLhu+uNveZGJHrNp/\naLlE7P296L7t1NsgCR59gXY1FGTj3+wLuwJN8UMdA3CG+k1iSmYjRd5QYRGs\nd/Z6gBZEOHRXGboLgliDXOvKw9KyJU4366eJ8szJZ2qIsyRhu9iCkqfpxZhE\n2IGPgEtwRb84AlESGzHV6MJa4WVvcVJvK4U12KsWNXe7YGuaoDONHpd4iSkv\nQDVHWDREdFvnujCxRicy6GVsAxferKL4TjtmZB71w7uQElO3utVDWaYwRv4Q\nmuncjVA7HFNpBB5J2XxQkuvOhloENNSrMjhedHp1381aR4VIqZtY5wMfVWCM\nxJeLyvHYKd4kzGqJhLxmIipa+q+xn3JnssrAYjwyMPseAkMEtlDBwI1n7BGP\nt3xz\r\n=dDwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/button":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/typography":"8.0.0-canary.a306aa488.0","@material/icon-button":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a306aa488.0_1600304406218_0.8929133923291761","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/snackbar","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8fd5f7450d061323207714b9f65a6e39fc32a9e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fd608ff66.0.tgz","fileCount":40,"integrity":"sha512-LvNiaF5Zz9pYfWL1su9hd7SYdXTgDCgitBUXI1J5mi6rqhP3DgJ918R23SKPEyyzKiRIP5ib0BJ2nnha9m7Mzw==","signatures":[{"sig":"MEUCIC+ZRWClRWYPRBKwnWspa+GAHCruEV9POh17kTq2E/cNAiEAmTrYLuqvNGzEoGrzgqg4Ke1yckVW42YBLRyiVgWYcwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3I8CRA9TVsSAnZWagAAz78P/0OwLxogHhkoZO15tCMH\n3benXNvZpLFJfuRwLP4S07XCMhfXt2GonKPJmM5V1RHDMd9hu+xPPdSqw7LR\nF07sGEc8xtOo38ICBPMYRMPdSD6wE63jw61PKPMwfa6QFvtP2cviosOZTxrL\nDchf/uMOhuO0Q8lkXEYQUaNhpX+fklVyW62dYEgln5StwzvMQ5e3yLBp4Xot\nXjNg/mUw6bGC0bvQ15utQaUeIZUOvXDFWpWvSc6YbIHFgw3/WgZJ2TYjFu/K\noCbgJTMiXRZ4SqUJ/5mu7AFhfnvlgM9uuSfVFA4sT8SadUdDUrLTh0QYGDZi\nJWaYKz4DxDG598UM2LPALcpFc94NxhguufYlz/EceNaLPlXCBxmbNA49FecB\nG/Tj1eLokG4F3p2S9qe+QatzsytthYkwlE4jmJ3O973blC7Sx9Hg0IMB0rYT\ni2sINoKH2FDj2FwaEl3gwmMdytCLqUa581DVmYAj9ldC+2hd0iihU7FkKGL/\npwGMrV6+aI1/F/XgyTM9+wGm90p7iL7x+K37hg/jlV0dXBJOsbWAUIocz4Jw\nDBC3YL3jFPaBAnUq7GalxP3JV+ZRNook5uXEosj7MPUe34A+Bhk8fCV+GH/l\n7tRtTL3/FG+NZHorQffTZA8+74ExgPd1jAbMj9UM1rvQ3BXIit6Jq7HJIIPR\nu1KV\r\n=s8Ek\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/button":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/typography":"8.0.0-canary.fd608ff66.0","@material/icon-button":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fd608ff66.0_1600352827749_0.899679389500613","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/snackbar","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d55cc11b96a9b0ac14b2e8e89ad4909951102e2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.3e435ba57.0.tgz","fileCount":40,"integrity":"sha512-FeZonbw62FgQzuKRtPHRAWR+CxhdFMQ6HNYq9DK9dJchR547geExsmmrd1Qa/IAq/MEB8sbl71y3E8oujkoBmQ==","signatures":[{"sig":"MEUCIQC281CI/WYTXtEeqmIMVp+ZunaZaNh0pzFWsyM4L727RAIgdQGUEqcsufohFvo0y6ph8rsPM21GkpwfwtbqLuC/Gm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ZPCRA9TVsSAnZWagAA/DMP/iJG81IukHXkHQfVc8BT\np7Pf08THTc10uDIjYl0hnZ387V7Vm/zbs/1umKrzSbHHT8pjah8ropeYEKWF\n9gMc6Dz/sVBU3AV6GAXfrBOf9lH8NW4AqteG3Q0OfmDPBhRwJ60O2SrlGvfy\nRiFDgA5GPmpVkVCeXT3J8mThJY0TlwCBrRWt8iaceCTRB3L8jEbDqI1JxMT4\n5CFyBjvi4L48BV1IOvr7dh9cujbYIeO5D2S95fzdha+DdClmQ6v5JGF0uAxT\nxUxp0CEghgahf3Nwg1d6S/dGfELGEjN6RRlTgQzkw7Qo6TiGtBKjmbu4Kdfe\ncpHhYqSg9gp/IsM2Q5Pz3NWLaeof3kcGS/QuzP2scahII9rl1ukRx5v0/if7\nMN5VKZKYugdcqN2kd6FXzkC45fr1nBGDWQK4bfzIIFm96Ad0titYBoUxuyCq\nwoYk/G/vi88eflgUmZ6Ai30fHlYD+RsQIO+192oDW6/Zrfcj3u6EC92AK7DA\nEiK+JU49R7NYXnvJ+CtkGzukOmSTRagYi1g9w4bPzZ1fNaCJp1o0Y+gI2XfI\nqCFLhRfO6reOB2WfClDkhQIKQlocUk2g8VMy6CJ75fNxDzLwtFOLJsX9PRUp\nYigHH30xH+l9NBEK628JJiN0/t0wh6jKHHLcTANBFvVBhaRHXoGMJwKhnYHa\nQ+Fn\r\n=wvGV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/button":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/typography":"8.0.0-canary.3e435ba57.0","@material/icon-button":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.3e435ba57.0_1600353870351_0.3414275917710232","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/snackbar","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eeb3790fededf4fded0a94e27373bb5fcd912c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.c250ec52a.0.tgz","fileCount":40,"integrity":"sha512-Fa6u+BUCTjwFR4SJg0SKwaryhW3ObyjXZENTFyYmJd2LxVz8eiHMUHUUZX5/r76rbEraymBzlaf6PwKBy7mofQ==","signatures":[{"sig":"MEUCIQC4O6Jecur7MYMNeVPnaZXGLs1c1MJgagsWX+HligP42QIgKS0i/9Gv+s8uCh4p8awBocfAV6vqUATJmdSOe48VxwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8MBCRA9TVsSAnZWagAAekkP/A7g/ymV4lXNIVphiMRT\nF8DX7flOFJSRk4h+jp+yQLfMwEsrvhfp4K2Gq6SNEaalCJ+uRnk7PLxrCW1W\nZmkQog05n+NZ10fC8UmAUDA8cZJQlLvKp/JRzpktsJ2GcQvKwp/zG5yQ2Zd3\nRa5Q1eOrBR3eeqZaZdmRSQJAGNvCgN8FpmZndvSlpZm2ra/WPlzUxX5XJilO\nmcOXfzFsXDJDKajuaekGCXDDp4Xxo4c/vZosciQHAI8ekDE0ZNpypHLFAeiZ\nl4qw19IW0cXe4k47pP9u3E9GiF7XptaVV5ghz+etIneB+g/g3IlU1xap+TGL\nFhkRagjRRTeQ44frbGGjPTNaD+DB94Oc4kdihgmujkHwRzZncveWup//17rb\npCJC1ZDeuHdfCJSK8i+eKUVI+OC2ApIt07hge+iMW2tQN853t1cy0xsS6uop\nmL3BRYAUiX9+esZsbhxzemEbxhF/+D8hG4vrknc6gbxilYFSu7PValFXG3i9\n5sURNrjhMUSjKRw4wtdsxyphPfrj4ewwCtu++YOio85pRQ9PcnG4179X7i6O\nwU1/ArG/dIf1ci8yhXzbopl8ANJU2u+4X8mdD4E6/e/J+xa0DQ6zDTWwRkKJ\nFLDXBW9Qd8ZhWUS4NPsjJ5Ho3qWYZIDSd4VV5JULeDuCFAtJ3tWt/tGjmUh6\nXrCF\r\n=4FKY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/button":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/typography":"8.0.0-canary.c250ec52a.0","@material/icon-button":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.c250ec52a.0_1600373504707_0.7062297838285336","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/snackbar","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ecdfc2f0b3971086c7c2a797c4bfa3e3103833e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.e34e411b1.0.tgz","fileCount":40,"integrity":"sha512-RfZ4B74ZsXpxiLf8Du4mf5aYxmVc8xY7+om9ZoP5IB7MqJe6rfmuz7gFr/Z+dtFhj8Llf1ezj+QyiFemiovEXQ==","signatures":[{"sig":"MEYCIQDc+9hZWNUuRwMmYTFeshilNPEhbOZA+cOj4JhP5EfG7AIhAPP2A6d1CumSKiELaEl+9kRwwJC9OP3Jc/U6N0V0ZwCb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8S6CRA9TVsSAnZWagAAOo4P/1deyWM7UWBlR06CutV6\nlKj1ZSDtVVtZW3ujimXu+i4J07x+x09ZcsGUb156bC/4jhukWl8LBOYDY4E+\n6S7c8TTxo2TBCaK3RYL2JCwPZMU3zFeMz0VZa/T6n/SXR4QAAQUAu/UI+/mf\n0BI/Yway+UBhfFWzibIBUl4y+5qjAIURGpVDnsmjy2IHY0WElFX64oVibqaE\n5aI8/lkIdmm21tekVYy3yn9YJVimPmhOWm0XmTCaOhjULYNG1Cgp4Iv0c5fv\n7ihPje2hr7xx17krRW2VGhHWPumjGyEIL6E4Wh1EkRfJxQupW7m1i02i8LBm\nawbnRSx0F7x0Y8elINtWkczbVYY457xhvNAr7P/uU8EmzuHLk/JFFz9FRIe5\ndNVZOQ6HodsX7a9MTOsn7ZXJKnGEb7ckOdQjcotqtFHe8AUITByqNnVM+Jhk\nV+T/pOl7KGAdYkfPtP0zGZgzjvV+TvGsxOnbh2w4ukQj2YNgRnHPHCtuCf+e\nyDdPjg4Fnqxs0gqegKH2L2/MhG+PVbb2ZQD6SZYrvYR59rJ27jDRof+m/Tm/\ngvhrPqqeSAOa+l2NDGJJt/MP01XvRMj3enjyVzQtwyRxVRA83r2yTSZKALot\nHkNnpDuHAs7e8kxzX8A/Xio/H1ChJed12obhiRg7XLo5pmfVUpFxjVvedLSY\n3HRk\r\n=dD4s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/button":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/typography":"8.0.0-canary.e34e411b1.0","@material/icon-button":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.e34e411b1.0_1600373945623_0.8902401783942275","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/snackbar","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37aa73c1ed62409c860e9abdd470e0b29d57457f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.4e9343929.0.tgz","fileCount":40,"integrity":"sha512-Ya9NQZ6IAaWQ8hbPd8dW3SGKZtHb9yeU59q5vUXJDvu8Kw8aKtgkPyNoB8200kqBJAKHXDAXU6i1Evzs8W1ugQ==","signatures":[{"sig":"MEQCIHYb2axsRQMtO17AqvaTLhva2wNWel1VupFnteOsgE3BAiAA0xiRLFIo+qE0J3miqrnEmta6rE9BXRnvKlQfqPo2HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qlCRA9TVsSAnZWagAAyrsQAJLW5gELr52CSIwHHkmc\nzSeenmqA5lZja37OJGClET0qbpJf0uLONjuy+Qojz6SsQ3Nmhuzr/NNOGM+F\nGXCtzJ1Oh8NA1+kCPV5lYkaE+1sKzZg5NABbfxbIY8YKd6IhJZpnRe3tb8+C\n2ZTLNtJNH0UT4EAlE8MbAo6yQpWSf81Ghyo4YQuoDnT1JuBV4vILJxUTaiEV\n6UbfsUVOLg//XEYQRm5tuLMHdax4A0GSr089JF+Ky8Ch74Av4shyDt6EF+KP\n81TFxcDOmysbzsF03/fVqsDREmWHvmG8fuHeYL/gR9a9Qi/0iFEQUf5rVh43\n587ubHWs3/eyCFafrM8w1VmrZW8g7XNX/Mw46v5+nxu52wSXHSwitTai48UB\n9IXEi6uwPgX3lCdWeBLa5jeyCWy4W1E/NJyLbrmtFxn2LpIcfGNKkddgSM1b\n/4yWf0+64Qe6LYjpTlnrmBleAzk7H8AH+J1oi2t/C9iAemcbF7kcWe845jpH\n2hguaBnVEhLi3y5+BVQx9lJZyddiuQvJzZufS9CcFxlBVEYVvPE1fvVXaNue\nVyM/O5Fug11PHHR/nxkEd6/8VwvZQVEsjG44+VHVlofifyKoGORN4YLvNXVI\nKPn5awseNEcyrOY56htc++9sfYJoQGTBLotQAPEyPKK/5TjM/Yv/WLcnSvPV\nFoLB\r\n=SpwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/button":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/typography":"8.0.0-canary.4e9343929.0","@material/icon-button":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.4e9343929.0_1600375461305_0.7120716028802041","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/snackbar","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb5ee81624e872f89e742bf8c11c8d3cbe3d5537","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.4e5c350c2.0.tgz","fileCount":40,"integrity":"sha512-IomgrP4uMzjj34UpHEUPId+An4yOvc1qUqH207/n03zUhFs7pSpOTEnUsEzqmh2Nf1uJ3oXGj/cqWBvFPfPc5g==","signatures":[{"sig":"MEUCIQDMmZWHIgBL0UtA6eBYwJCHRUfaDWajQxmEmN3Rt27HqAIgMYPUrGOJb0gAE8oVWTgTGH1Au8eS2HNLXzRiv/O8OQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRfyCRA9TVsSAnZWagAAyksP/0EWB+rOl9W3fmLg/Y3v\nn+SJpEpU+wjC/ERZa+MlFYG/VBGrPxjJUVB3poLfhC3AX8L09E1YRVtt88/1\nAw4FLtXhG5IQhylOTtFJbsFZRBT/rQz65dXg5HLiFRCW5eSughKF9CbfgeP4\nsOfQg2KELt7gny/OBdE61FjbU449YyrKz4OuDr1BlWsUGYSFvVpvZb53BL1L\nDwpzcmXDWI16lvUjpJoKypjqLGfqHV40/gjfZZ3nJ59udfytStYqwjoy4ds2\nbKX+1ex384tmFF3MBiY0olmNgWrgf+nzY31E09gheeEHgsbF8MP+S0sBWgEk\nlAVI3ypGvOj9kzGBQWlRRXViwa0OVM72oFW0yD1v4g7HNsnPZlxZojR8GIpD\n2i/YeBWRBr8PySNYwprMVobs26mMU9k/UBQgrSX88qc4vCQztz2i+qQL1+g+\ngkT1B85ILcKmlXWPpfaaCcgJ/Ockl95Zcd+PEF4PaxJQ/3x63FS8Xwfw+ztl\nfJTu/bfQiOIeZtFIrhpJTgtOcAFGNltIZTn49TdtjsXpqe9fjah2+4HAPLM9\n/UGH3pQ5iDX1VhEit/NUeI84XIHzMqp/30G1Fbdx7Akb0Vdo2hc+71FlJQm4\n+GeKT9KSBrjwoRL9E9z/Eho95yUO9n2FO9hDCChhtaFMWhwreLIbsVMZQ5Y/\nnWjn\r\n=LI/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/shape":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/button":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/typography":"8.0.0-canary.4e5c350c2.0","@material/icon-button":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.4e5c350c2.0_1600722929774_0.9532467140536982","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/snackbar","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae0ac8cd5f25328304914ed13fa323bfdc0c62d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.16c563ef7.0.tgz","fileCount":40,"integrity":"sha512-otLh0payu3eaRdBgcvxyC7aCXYFhRZOyu5Kd27rCjD/WZsaRS1vi0KMCzMGrx7+hBVmVwfJBZnWou8g/0HBD8A==","signatures":[{"sig":"MEQCIBq8HYUJ0JWMufUR8Z3Ql1TTo+mcwobDDmoTHcUFYqW+AiAGOzWZkUNE6mcCxGR1wabWw3jCDRJPLTXk2Hm9ClMNcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTWCRA9TVsSAnZWagAAsZIP/16WqJHZqC/hcx6JqRgY\n1G/PoMHhK9cLsa1Ek7s95PpkVV8ezBgvBr7wFU8lcX+fSGUObXxfN9ItpBBx\nE/ii/N9ycZwMMcje68AqnJBqu9LvTHJEwYIg6uoQopHqU03T+qsqT6sFrKAZ\nhydtcBOUN6Bpl8WnIrvmU29GxZLTAMoIDVfXIOa/F+kAVYp4zbepULOYs/S7\nKCMY3gwPQY+w/oRqJcLQ9TuGMk0r+sinqERxVoeqf4G0hqW+DoDZllYmAvCn\nlGEdecEtUol/p8UzoyFKU6COV+fFLLN1I/9w2MZlTTOuUDufbCeYh3margJU\nP7xm+nuH9AvphFNNWVhsKeW1Ix/u6V77eTHlRDCQbmd2eVHXkO4FSjcmx7N9\nWqUdtBAhSW3OWfgEzqVlK9seqfTgOTgO0RChRlfbur0OHZm5NV6qj0ZD6/LE\nM5ZBpMSVoP0354Cl/CzIMitoLRion6foGE/I8WCFMetaa6/Sveq4cVK2U4ri\nDhLXggnNnmB4i6fTST64xIpvIKly8LXFUN99/6OPLhJ7ZHDbx3HWbCXEuEN+\nulLffcWBixAy0ObkFtzCWuzMbwrm6/q+RDtLLfaF45gu4Et82nYdGA36g/u6\nsEak4HamZcEqdVolA5Lqfr0i6PC8Nxa5Zr838+jORN1F1Lbb4qas/9s50LGj\naSDT\r\n=AgzL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/shape":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/button":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/typography":"8.0.0-canary.16c563ef7.0","@material/icon-button":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.16c563ef7.0_1600804054128_0.7974070057531188","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/snackbar","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86b2b527a59ff5089d5ea68c00be342b6b1260f2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.fd8af3d43.0.tgz","fileCount":40,"integrity":"sha512-O5ss02pEEsKuo4xxDn2gIUblTbt9KWNzhrybFAWX84V3SuDkt0mTbPpvrZdGzSerLeG/YVigzlyfqw/OfK+loA==","signatures":[{"sig":"MEYCIQDlWWqTfmrTir2BPmIGMbBrRW+r1PiuViCwmfDTpaRmEgIhAOb7OfqV8aOLfqJg65pIR1GjrLRxhbBx18tnmoB2KQ0S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MWCRA9TVsSAnZWagAArDsP/0Vr2AtoPM7s1Twi+VB/\nCyfUpmzjqfJe1Wq7yoQQAVHZSQeNDjfV6bLJbpId8CkP1RvA9ss3hUTck+o5\nQ6aj2jOecrbc3TV49WT8EeP5dTeARNS4CQtMddV14Bi8saI2fZ6pDIVzaFl6\notJ2djWUB76kgDyGL3J9tMEE5Cant4V6gmZlG9wf4Mho5EP86B5jPgj3h07c\nAlFro+BdBkWXSvFX9LybVt0xOwhz80dH5GE4Z9RwCQB9BgCJ+PRdsyNtQ7sR\nMTYfuFBMy+56lIP0pE0EQXwVh3PeEgA0aLbFpPmIF9sH5Bnp4EX6vnwfE134\nqOQ7Zbv6+w8EX7mFQUmFBGo9acqhO2VMwNWcOYiUMZCy2P9l2z2nLIWgremU\nkj2hF8oTRtZXuxwju1X7MqLfNrAUGsjGfD/4WUaoL1eXXWiL7hSl/1V4eWBk\nR07IhWelA4qPnZc538Rq2MpAbPpSE8XDRXcRo74AZUvWg3KQvar4fLX7QqRg\nC5YkMz2zbmzAJlWyZ/KjWIo5NoDFYRcOo22Q/MZvIUnUB9vSczpEqSkpT60J\nZjqiR4cJB2o6CgCIIG720ieAE952X6ToGk2EiiLEwruyDrNduy0RVaRaTh1+\n35au1z8UwNZ4yX/VXBSkXq265zYX/rW3L9SxB9Dbhoqgoy9qwW3AotrhPBGh\nZnyE\r\n=X1NS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/button":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/typography":"8.0.0-canary.fd8af3d43.0","@material/icon-button":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.fd8af3d43.0_1600889621546_0.017939040986077348","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/snackbar","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40dfef14d233049ce570fed5b60ae2d7e855708d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d4cd83a85.0.tgz","fileCount":40,"integrity":"sha512-hgfnBR6rSml9GHmIf7S/alpcTxXhGoE5PkLuUG75KfZsh8FzpuCqsQ4X3l5iOkyqB5pSi9HaTQl1fXZz1FRizA==","signatures":[{"sig":"MEUCID9SOoxYPBfVj+fygGDsL35DuV8XqGjY0hTtQQ2JKe/AAiEAy0rIVZJsudoU21Qmx/C1C+WYDJys1uCSwyO+kbn54pA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTu+CRA9TVsSAnZWagAAZ2MP/0kvH77UCFnEIFmFIbLj\nTt1xtoF55Hs34CFhuDa6+CQpq6nzfecIkV7G/X+cBI3/KQhyIEHYklTkWzMN\n55T+79+MgK9+KLytn2qYk5gzjpntzXXQKuhzGoXPVQm9IuGh4PnoB0MPHToe\nw+MeXBPKFW5E5GVDRv/EdtpQjR4wDg/gjfUi2mwoXaMGK9ODjzm+9KqWH6bC\n45vHIr1D1FxIgkupNWl0mC9tH/2aPGj675WptkB5ukRxDelnUxPFbEESaNo5\nyydlrvyCSiXAJ2Q+h3UwA1qEySSwy4sDgJuQOt5e6TeYV56UZhvw9ljMiYdD\nybM5tsDmhJDTjmaKX/dQub4Yk/N9ksmPYfYahhfJ5NcBtoaqjvrArCALEcB9\nZkjGScEM6mYNsPglMLUigBprUO35f8KYLgiaI/Gw0kcR5fHAYSHlAmiYNLmc\n0OFwOnf/O9yZMgG3S1b7KeaO5pvpFQ5UAK8gm71WJJ89tbstkuPirBtnkEno\nIAwJNeK0jZNMmocIflrfzWNOihLk/tUX5auJFbAgaEoqYhpmbN8kPucCE0GN\nItqmgOE6Fh9MOit6Weuz9l7jKEeW2Dfa01COXFQThBsV43wFH7xoa0jtZOIf\n9ukJb3SUCOKXVyfxlfkGAEYJPxvUjjvEkNL/r19QU021wc23bLtHUn7VPLhY\nh2ic\r\n=JI/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/shape":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/button":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/typography":"8.0.0-canary.d4cd83a85.0","@material/icon-button":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d4cd83a85.0_1600994238484_0.06922840554446297","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/snackbar","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd36f34a44d374dbc0206c10dd364b727ea216c2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.199aecdfb.0.tgz","fileCount":40,"integrity":"sha512-l6wOle1IPoyNcY9QauSRb8ioMCBZwdg0/zhm5VkbvwXCzQXBt1ClbuJehdIw/AI5zpGlmmz/6Lm+YhnArXmYag==","signatures":[{"sig":"MEUCIAt1ZtIlplmmfys4xj1z8MNwA3trKY3XB2041oI02cP+AiEAmz5VABhzTLmOwt5sFCMkN4ste21lk6D8ZeYP4iV7nZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhJKCRA9TVsSAnZWagAAFKEP/2SCcTYPvN7r84G2ew0Z\nIARscZDsbxOXeEelMX3MbhpLvgZqQ+nEfQZtlFyApKrWo8v+9iVjACAaft1X\nprbu6NFSqeCErQdzLJjO1ME/YCrL69mwd1NGJjs8mlrKdRHBCa6eOK3TWrb6\n8mO6MFAn/wF7n007VrDNEHVsOpp/XPX6Lh4jBzLo9jGbvymAp5WY+xUYBsyw\nJw1eO+P2vS5gCucmXif00NTkAS/FWUbnqrcOCZUH36TWuwHUQES0nyhmqCfm\n+VVyahOwS+B4ikPP0+UIO2j6Ip2qK+rRiaFVqZzKMCnNQx29hc51f9b5plcI\n5j29GDYLdtWTxRQWqxlGYAbQKlbsgY4WAx6HrDWGOtgekW1Hr2Gk+SPePq8q\nKPoqqSriNFfp67gYTZalk+jP287Ei7Ea6unMD446hW5nidjGpaD4vTwUHXb5\ny1YDLt1zemfEFqBZuPXda/JUWqUqBwEU2HhoBP2uzAbaEXaNcJP5zuB3j9+m\ndPdOfXd80wQcCkN28prsYTE73+WOspdOoAmo/JN5jsPMnd7zLFDI7f9zBv3s\nWdDaefvwSQyTT4SW9pmsb69mMQymyAbTahT72HyEO6bH0s/NpuNe/jakzEoD\n/5hCTeO8TZRO3b3TbU2ijqOTUmmA5oQ6MlNhP9jsLQ9nsJhQz/tBpjahjN7/\nhyGD\r\n=QqJd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/button":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/typography":"8.0.0-canary.199aecdfb.0","@material/icon-button":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.199aecdfb.0_1601049162135_0.7946427960647349","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/snackbar","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26e284ccd2db6f8c7d5a426a2436ebf6c5c14953","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.38ef4501f.0.tgz","fileCount":40,"integrity":"sha512-mequWMvEXzPB3V0QwyV1wwchVLW1vnlDLvzBYX11crjuTSO8m5Vt+f1EEzAPtZa/jhnuCPBbmQt15Ux56hy8hA==","signatures":[{"sig":"MEUCIBiA8qLLv2qdEwO90gtcJsZEFmAoVdCCjPeKoSJuYq16AiEA4KSnJ3Cg1CoKHk9v2CpUcokwm/2+72vnxfzMyaycyB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM24CRA9TVsSAnZWagAAXFgP/iiG6WDkdC13xysVkSeE\nFmCGzdenAV5Exl9wJaaBDbuCzw6TxVNxMxF9gBYG+K3xOLJfHXfJ27y2SWTO\nLizNVAmuwtphczNz0cPi+EcT1yUzG03K1AdQ3HvKc4Qyfc5oLDER+DLCzPRR\n7fYIcDfsae9lrnTOBH5pVF+XMn374euzw1oHQTxS1jy7u620ivbZD8d8zbcv\no+Nj5ebS1ErukO/3KKbqfNj/p+aqAXaTG9ilyTJummx7MgQKRFg6WGOzcS83\no+5If4Fr8D+F5zi4iGZa9dmCWp5tnGO6iftYZTBfPAk9hfPND6MYt0UZx1b5\nqagetq71zlEmthuqbmME12kHxuvMwcpPU3Ir1nb4yktkFuF6LvbJBv0McYnQ\n51xiBEN25Zl5KMUC/XukIggPiXzqeeB2nhs02FS7gw7AZSyq4S/mj8Sopk/1\nGnsfZbn2Q6gzRdzISGJXxe2ALa6K5EPgARI8IlfFvUURstfKB4jgxCzM86Pg\n301/sH431Fe7ZXE1zxaaP9jVj0Gg9kJBuaerAmL04uUtdvopmEoDuw6QeoA8\nVxlgNAZPOUgyNYvH/L9IvSzqWvUTgi4ZgBYUZtUb67UrbDw+jfkMkjuty6kR\nEYh55Zt/lYkoQ4JfWdoO56bmLxJdKxmVvlMvWkGngQEnQveAn5w2+tkY4uGN\nxtbC\r\n=NyRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/shape":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/button":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/typography":"8.0.0-canary.38ef4501f.0","@material/icon-button":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.38ef4501f.0_1601490360275_0.8017320789575841","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/snackbar","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec89ed528ddc2da5706b772edbea5c7802c0373d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.774dcfc8e.0.tgz","fileCount":40,"integrity":"sha512-IkE8Or1v3l27rCajVDUjKmIIFSB1b0K13wfEPfTCy+Vstr/DjlqikM+t/3JKFKHnxmirW+AaDQFG9fVgUWoIrA==","signatures":[{"sig":"MEUCICU1GpqxLKfMRICsbv91UI48olHXzelqKqwbSdoSVsUOAiEA5dwCVKdrbxu9gzRCHvYtHvXjLd9NOy6HbIN8GErq52c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaeZCRA9TVsSAnZWagAASxsP/1rfRo8QUf2f0ACw+EoF\ng3lAfWSoPOeo7I32kMOzcr8aRXagDs6VZxKCfWKg5t8UIQWA2Q+jiJTB7BsF\nbhI4d691DDZs6ArX3vTkc4DYqtlhufjpgiP+aBBTxn4mgJ0mmNXrA1ncxKGX\nH8Sv/JdH31k92POEUVgjLFYZ/yVX2B3V4w2/cYg8aS5If0BM0Nwu+PEqm1xd\ncJUYDhXPcuNVLeQoIZ78GPu/VmKqyOpcym0Zv9ilqlg1Be4EbbRx9FA8XhOG\ncNi5V40nO+hSv+Z307D69E4hezi4txblj82y7eIrqEHaDXcHaVY2br0bBGM0\nCuCwCSgvdCol9GK6BgdasW7qZ1GIL7sXta3c9cJhkCkMKaKZvFYB7b5azGPL\nLRLe7HTvhpT1Y8X7PII5uN3SZgyAvEhK4/2x64S6e7qyORsMoJJy4FKEWlbj\njC34DKgl8BJ/Su5EwyqePKS5nnIWTP1uIYfnO1XaltF2Jq89dM72NfTxXIvs\nD+vOL74ViSkDGktzc+dzMfaxPw5uK9Af8eZVhqDwO3nMOeVxoVPMnoQi/x8Z\nOxOnjUfeYpmXDK8meDuNplRK+Hi58QV50+k62OTRfHoDapDR9+OFV69Sd8te\ntfMQtXG9jFLIXD8lDfEtAOipWlAlblZaLbVSf7W/idwUgTsyxKEgncRXx0E6\n5I2U\r\n=Ud4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/shape":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/button":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/typography":"8.0.0-canary.774dcfc8e.0","@material/icon-button":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.774dcfc8e.0_1601546137236_0.8559584466447823","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/snackbar","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5586c121deffb51a35b073aa64c591cc50f4765","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.0f60323a8.0.tgz","fileCount":40,"integrity":"sha512-eWDs0ARjXNJLEk9f/U6UeLED0LPXKJlDX9EHUc1SSy6q6oghq8x7YfosDAnmq/lQVdfpKZZL3du4co7sSoWyxA==","signatures":[{"sig":"MEUCIQDvNnjEZ22jUEGEBLAxCDlj7wRcilSGXpT6TMDy+KZjOQIgP5VKUDuXhFs1qtXhDwimgaNJOQL/jO8hg5kZXycA2f4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4CACRA9TVsSAnZWagAADbcQAIiOZsSXgNVwsavlahkt\nwBg+tYnDJX2FEp58UbGvv5zvU/NKinVeb2iIrGXf4KRvAWJKuR1lJyG53qMz\nknZGjo/bnMGJAkdR5plRApErXmXx4KfzBHuufaP2bEqBHna+DGugIBubSdjD\nwI1cZ8GXV582n0AYwqyC4OpxI+ZlgWo/Qg1U/HvzZUprSmVtpAJ0YACZg4tp\nfIy2mIkw2A3lvYVXyuae6nu9bcDHET10J9ZC6qCSEEBoF1hpXMqnxY5n7xht\ndfP8q4XIHQB71CEzVY1pBSl2kGSY2weRKShwDptW2ymmgO4SJJlhSpLISs2h\nWMKV2XOUHyeCpjXPvrh9RKPAnczhG23g2x35YVZ9sGGW1EsRj14/RJBzJbNJ\nImNl5XdeGUYa0lFgQ9jv5QPfJnOjPAnMdmaNTPZ5MEa1g25juTISd2Gi20z5\n4SAcabItOFLzdW2fx3xwRbA0suB15Uo3I1Oud+wPov8+yQQwkzLG/KCYTB03\nTgah6NYt1ncbHa7nXVMbtJT2DJkwBRxhWW9RkJvzAmz/NQEuTmWs/+5Rk4BO\ntGj8JOYVYva799e3iopo4+jO1n67hPG9I8bpxUmQ7uMXyXID5DlEDfIearH2\nCKKKGC01AuhEbL7SAXzaEzkNapBkGGKHFs+eFscV2J3cpN4bsoIpztqZF+mw\nulga\r\n=jRyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/button":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/typography":"8.0.0-canary.0f60323a8.0","@material/icon-button":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.0f60323a8.0_1602191488141_0.6949818506327767","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/snackbar","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"798b293146184cf4eae9cec6ff9e84142cadd3a4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.d71622574.0.tgz","fileCount":40,"integrity":"sha512-wxvPkBQ3+iehVYhxgC8kqqwIKzEAVRCYJtKFb1vT13EFDMAABATKegivmng/V+DdnPvCKXm/oq3lHQF9WKFu8A==","signatures":[{"sig":"MEQCIGXJ2sxa2UzyjvXvZ5CnYFjJqS+QALA0WRZ2e30zVuAuAiBrbR0PbFyhiVp/eqRNm7CBW+m2gFaq8jdR32RWhxbEEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJDGCRA9TVsSAnZWagAAKesQAJzJTMug2BcmzPfk71wp\nTQgWGrnfHZXF7uZT3ahVUPk9GML8StWBrvLL8JVGSCAcb0+bbI1aBn7TxC4d\nsEfyTjOtnD9nsoFy/Zj97HvyBr1WWZenBRJhepY/+UWWqFDk9ujMgnrep72W\n6/qA205y50kQX5GUVQvNBq+jfDm7hVT4Vr/EiCaxnKTIKpZgXZnPVcfjmlem\nWTNn37tQ7VT30Izj5bNfrnisQvh0SDSXkqrPThTkQyH9TCRsAI6dAoPA4IWp\nEACb2ob3/szsDYSbmFkdcHuW9FzfGeGFh2Xp2NrNz6OBEONdceJW1PrYvvt3\ny2FGXW9oNUjQPF1gIsYIQgt7l/hKYUwb2RN35n/8H0zFUeETBaYBmNhq91KC\nkot/bViN+DjdU37DnvE+aqsGL6ASEbv/ehKyaqIeia2ML+XdKr8kL1aJNWgK\nG4RI2SHv8DHxttbh4YsVl2PRXDprbriePcwKe8/QE77yl5iB2IgPpsiYiQvq\nhifBpOK6CewpsDhkvqCjIxS+J1R6g/zsj9phpMfzd1u4uwWoSfSvcURO0ca2\nrX51nut4BsCTsHNKdJDMxE6T0CxqqJedwXFRj1HgM5mCib+UKC0SGn4GqDzF\ndisk0/fp4gpgJopImKyvrH+5RTBDL87PIWu+HpsP4ODqjWmc+tsWQEVqAN+N\nGUjj\r\n=DyUp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/button":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/typography":"8.0.0-canary.d71622574.0","@material/icon-button":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.d71622574.0_1602261190198_0.5387684833324864","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/snackbar","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db26db8e544730c860dd2a783f2ec01d4b41e5f6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":40,"integrity":"sha512-1JJ9f6nGdip4xVMSWixehisj3yyJ2yx+ALVEbfWSBIRQyQM1S9r5fd6mJiroNwDdthnil1FmbsuhunZvahUsGA==","signatures":[{"sig":"MEUCICTJ51nPoejpMCgR1sKaofH/2sutxzExz6EXYhFxpl7XAiEAqMhbNcOZ7AudTR/O/J41BDrvPvtfqyyQ0Hmd3EfM544=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOpWCRA9TVsSAnZWagAAr94P/3YRofa1Q1bqYqKpL5gj\nRqKrhHSNBEJJDX9ZxMctXhBdekd9w70i8ib1PCAzef2r0lQIWa6C+5nLWsO4\nRhXiNel5mHqWJ0htRbAm41SXZ8AXqnFplm3BcTvlDjyextbSuzPquszp/Znh\nX8COv/mdjPLv1IFpB07QP3QYnJO251rR8/IkWQRimDBJrf4NWAcGTUyFXB7A\nNCo70KYj5+cXJ1ZEvWsm1yt0Ucg8HQDJy6DG6UDCorERMvqtFRlhgc5K7eZS\nyD546thrdsNA74n7VMUDhhosyISOjfCYvaGnA1ubjyFYiimkLEvvnC3DfklS\njDgmVhrQLrE/x80lCLd2qs5TPzAWbOz/B3p2svhx+MkoYYcqKrX1H677GhsF\n3MG/9OvpRJFh2J81YUmme31kKqRO5B3TTJmepu5A9XUgKg165WKkrtn/p81U\npkSIovH9HqsrlV/0lHYWYO2Q1KPdIGVvSk2v0oC46bNCPldgxpQbf+udbCbP\ns6IQsP56mcV+tAVUOZJow/+gLoesj6b2TRC4GzL5Dkh2UNot/EUVQnhqxrAj\nGdbFaar/VGQz1vP+s955jrw8w1uz73/3yV86lVxMA7gDNWsrOd8SsvYZv2j6\nmhJFmllOElUzuqJGz9DHdSfurIUXcWzSl73f38Qm10zCWUZqlXAJq1mlyX0F\n9DAz\r\n=Z7T2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/button":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/typography":"8.0.0-canary.7a9afaf4b.0","@material/icon-button":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.7a9afaf4b.0_1602284118076_0.538235848072703","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/snackbar","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81ebeb857aa4114c51d0546f18f7333664624687","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.8a39352c8.0.tgz","fileCount":40,"integrity":"sha512-CciJ+YVHX1Cks0cW4uxSo+8TxcJhNgg2Z0RV6qeHNZQ+Z1q6w2JJlJaoPMtvir+DeWuSpWOvOjoAU3oiaJrpoA==","signatures":[{"sig":"MEUCICVQHGqVFWJtpm3QqsyFteHD2w3okvEzo21/gHSqDyzaAiEAyMyz+scuawWyYStPLkgyRsdGQdqjFPAX/Sldyxu3YjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJbSCRA9TVsSAnZWagAAujQQAIrLs4udO6ybFPzDmudd\nqBFeKYp5zC1mtYkfAwqT8HI+530LU0aa3PxD5Bx/qAlgWS2iZt01eB/MCwxW\nYhbXuLPbzlXeGzcI/dkAcvnAuoa544pD/LId1yXoRPAsW5qsiNxc6QyFF6VO\nrj/twZvB4dyakCNcX98lsNPHa0S0grgPAw2ac34EhnuzWnQPR2wM4mQ/9Jwo\n+I/1QEtE/CgS9qgAh0n8KyIP+YN9x986vpoVa0ik+3zIUO1E7e3omjymahHD\nzWdz3XK1L+MNkTePTio6/9DLfaTCKB9jPGmVBDugNFdBzSYemPFSIXWAOhPo\nWuIxi5iuuPP5AFhJZjpotQfVU4970jVCLVGcW4WsFGgWSt2Yws8IgcIdC09+\nOOIubk0l5/jxfbw3eVQDIvBCv3YnIdwkuxX07rQX5Wq+oiU7EsjdzYoHH+Z0\nxaXeUqowgck6ASuHg4gHQtTmOgWg7rzcyR1/iHn0DT5P0ZNrqbtxDqKl5mqR\nCjZkR+wmJ8cbkyLYKtoDqX6rMgM21YOx69UgkWIMlsJ73kDGFI5toRdgdNAY\nBTRyke/oX16fmdC01fXkpE4UaTvDBMSUWMHTzGLVAyAIS1eqPzpKuqpwNy/U\n/R0AjfsYzhh0jMn+De/KnDDnCKlPyRt5Cqxk1g2mumGfDPIzeqgVl8uZlGmW\nwcI9\r\n=Bbym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/shape":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/button":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/typography":"8.0.0-canary.8a39352c8.0","@material/icon-button":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.8a39352c8.0_1602524882270_0.4795675695613073","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/snackbar","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30cec64da56981b0b05dbe18a5eb01cfc6885f85","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.790ca85fd.0.tgz","fileCount":40,"integrity":"sha512-bHkDvODLlEHYY17DGW1nez60nevFWZnSoc8M+vQiD4s0W/QRLnM9Uswvs4zmnM/VUF4PbYG2MXxZUDjXs1xAuQ==","signatures":[{"sig":"MEUCIQCZTRn20pDmfIOQR7JzvZJdRBt9X7ZKn32cJJ35OPU29wIgOAS73lY1WGIsTQP67Y3uQoT52x7iaF1mvAK+xTniUM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFrCRA9TVsSAnZWagAAxZEQAJYZKXn1j9zMmmREQP6z\nziIspKYsk7jRuic23ITt6C0bWombeEy2lDFIamok9iWso+y2L/GA82WTjl54\nDrsv/L6XJArXP74ud9Wg/CTl0KIUqdu9zNnJylPcZt+4AAZfW2j6IDOiE+Sx\nuSG3E+RcSwvhR61Ug4m5Y4vOnBBxbTkrae1GgNyfc50dIi+RRzRA8RbiHxJD\n0WLFF3bzt/htSQZAYxVH4UEYbw5bdm3SVvrjyKWQO8TAulqUGSRc9WjNnTru\nGf425xhl4RAqlw/GxSWQCG8pbCrNNobIiPIug3ZjvEWO/ycZruJ4NIlHgeS5\nrg+FZRNVwCq7qzsSwXm/N8d2Zo3JCDqdRREpN6L5EiSprY8eReOASSCTJifv\n5cZ+cQ8x1w4ighqgXG391t0EpmQZgok8uuZH0g4V4a9tBfLQQ/+hqOxyqyHU\naNav3Qo1eblzEnFh0RFae9jOiW0jeWk1pwN8zPsiLAfJMBtFKa8uo6q/KyZ1\nNFSwbhLz1PG0FmFpR4CYfJFHeJ4QDHj21U0i+T5WArS4Hxrx8Te/OY4LWUUn\n7fZXc1wyQAPMsw5AOnAOWbRZhVXj8oaXIj3aRWlwELb4Rg8dDL9u6MCsr+Jf\nWX+cnxEiOm61tOmLQ8+3US7E2j5VmKiT88+eTf3rUDrV0zwit5fP32rVaNv3\nrvx6\r\n=83p7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/shape":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/button":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/typography":"8.0.0-canary.790ca85fd.0","@material/icon-button":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.790ca85fd.0_1602539883060_0.19251438108555008","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/snackbar","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"059dcbb365baef640345a6374c77296fbdade2b1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.174c0becf.0.tgz","fileCount":40,"integrity":"sha512-2ssFxaEUTu9giVi+fMf10s716lvihbXkqbRw6ZK1SyNRNpOE25F2vtspW2Zh2hTj9vHxfGIAmOKSZOPi6dI4BQ==","signatures":[{"sig":"MEQCIFIkIoW608/B4pFs6ZFnRjDbJVg7TP/vyNwnuApdDdXMAiBeYqub2sEUrcDES2iPvYcm+oNaqeFHGAjbpAESeKmqKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+fCRA9TVsSAnZWagAAWOEP+QEjaAX5icUufH9oAydU\nz9kjyE/PFcJI2isjYbhzoAqE7oCsQOM81mzoYq3UdIG/sK9tdcP5Nb9fq4Cd\neWKkXXsxhn7oVY1Mpscy/BOTeJG5tkcGb4Cbo1Ru9YRzJzILyGbrW5sI/E7E\nH/JB/8tWNjNQMzlxbTa78y3ocsXTMz7+hYiNZtwJfHEpOgGTH+1je3F6n23S\nIH3u7yV+FSzHuUI1LAn35O3zwN6c4pukycDMzZ5cFtC5JcZIwTjDPHf5RY5p\nPI569GDMxn3JbNQ64DzTbx5SnBZb/KdgNJOryUDDhn/SshO4m4GH5T28a2iw\nTekhMdjUtkYJNa5rYezsAG3rfKBDf7FD6g+6FqyYNJ/fDGdcVkJX9ZUaR1zm\nhFcRoMQolIXQtBkn0TOR1YG8mNbXrQInX73BdWY8BM8P+X9+kcho7DPjKhiS\n47fr1wFwJmaRKjAj6SX3seTG3R221XejvlXafh63FYZMjwERvO9RTym+8AAh\neVeTNSoLz3hQqPb5mcspLq6hFVBevT9Y6Axm2dMJuK7b11aMA/gT+qYBiw7Z\nPv8CWhVN4HpEN5chyc3X4TjymkxNomVfFvOKez1+T7lKihQz9sobUFXjZLCU\nGR1836NuIMmX7unbI3kOrnttPc4oDPhgRJCoXq4MCOv4sShAmWUOlVheE1Tr\nNTz7\r\n=oIk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/button":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/typography":"8.0.0-canary.174c0becf.0","@material/icon-button":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.174c0becf.0_1602641822862_0.9597302107106049","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/snackbar","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e85dde698577f55d356399aa7e76305b15942d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.c71ebfa02.0.tgz","fileCount":40,"integrity":"sha512-Timf2GzWFgUBnaEtof/w5J1LMiWOaBwjmY8vgDWtzuA36StETbDnVlL1+IuEYJwjAy5kHv8za8T2pInKd6nM/w==","signatures":[{"sig":"MEUCIQD99VBcFV54gL1wBJi0ZHbSFARAQ0pjk8eI0DChgyzz+QIgTGECcDVgm404Pl5eY/2ElmDWJfVNMcz7T3sw+7rb4pI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwyCRA9TVsSAnZWagAAfLgP/1UKPtAIzkVEsqsH6U+E\noe736SCc8fAz6u19znchutgZpHcJSXajsiGY+7SiFPygDYwVx+E0LuwbEVKB\nFAbE1D00esUtZ2Qln0PovkSnvI8tKuAmMBS+vfxPgGKI3mqTNkQgP//7X0/8\nL65NMvkPNLYKQzkfyEz/dYolaX8G9BlU1/ZQGXT1vZBOFFfM1hSR1HDY5F8z\nKlOAfdZOiwFCLyKHLqr9oqDLbnkBZDJmKnSSBwLgb5aIy9BSlEzwKyIFTahL\nl+qilrAH9N2V2EWhaSNinLVH+pKAfLCwX8PwCYmqH7TzHMevMU07eAMF6N0q\nuugG7kTpnusamYUjD3LJwz+gbP1vxA7YqVUpgX7C50iie+m+PWtHmJjfnkKP\nQ9RI9xyo9ieCcZinZaPGFAECMLmsB7GFOW9bSz1YvlVBRJEELIVeLNMcr8sL\n0IHGo6ogZC3BEoC5EaxFTH9WfBhoMrXCpsmSDFmvMzhqJ4yrTqpU6RxuGytd\nRoH8ZObl2hv0p4Pq9l9na4n1DdGBrLf4zzgyzukmLP65K/ivUZVRx7++gEM/\nnjhBlInNqKmNjdvWahtyMp7iW6OHwlrzmF2UlW7rFhIOBnPUEffQn3d95gOx\n6wk0Qa+axtAzAd/+5CZH1O7KcOLIKiJioyKXpkVXysG7O242yRb8IAJ7PQY0\ntSi2\r\n=KJ1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/shape":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/button":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/typography":"8.0.0-canary.c71ebfa02.0","@material/icon-button":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.c71ebfa02.0_1602649137762_0.05936007826626244","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/snackbar","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94968da6c82003fb7b4849957b417d1f331f6032","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.2ab716cbd.0.tgz","fileCount":40,"integrity":"sha512-CdK5fmPx7PRNdlznlbQmETM+sf233KCA8589/83ST41YWqVfMImHnjpC9abQiTo550+KZgaTYc3SIBwpH0lgrQ==","signatures":[{"sig":"MEUCIQCkcrhLvlTyYbQmhfNet435If8J7GGEMhDLPLYQNrMDpAIgPSjEhZvnRaLnkOPhahJksvT4Y4QdXQX3aFAPbIdkkjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPUCRA9TVsSAnZWagAA9yMP/jEoQl+S+2raJRscnNj8\nuVmN/8mnFf4U/y1+egooAur2y9RrIJI1jAyn68cus6W9LVCe62iXG8B7FiVy\nedsFvQ0cnc6VTc/Z1YlpT+pKHUGJn7w8hQzHU8DrAwyeUmZpZqq2BB3KP7Sy\nMQbrjEISvBJ3ZP7a58inNUJurcRzXe8omVN7DDHIWJd9RMpn2fTj4fY2yZ7s\nu0DZxvMSt0ghR76SMAQj+lkwvbZK996xmHrd7na+JGu+OqxVZRpryo2tHvGv\nBqhbUMrK3GbyAxZhvjvr8rMaBb09Zw+yKKoHaeZzvAh41ZwLDsSj0Tr86jd/\n7loaZZ2IY5+yfXmt+SqCPK3RZRB2PZHc5499yh4NmXojTPWUlBsd0DIiUHX8\nnzW1f6TOOarbnEpQysB/Uxj7TdRuD3tfM/wxqqcleDHy/EBw4ddlC09DLnV+\nxpo+kVHi/YnwK7PtIGdhPO/F929vtaVB8XM4atPih2qDiu66jA2dJuxWBa6x\nVymxmhjzxa981XDLn9V+EeAZN2EjUEY5Gj7ak/YwNtaBaH1VGDdJIN+fGkZq\naB02kWEh2/o0hijI4GK2QjOJJmFpY97gHxxY/4mzAsFEhs3uGIsoW6L3eNzl\nT9jK2iO5AJOgfl5Qf4zm+1GAqH3c2NxgM8q1cpats8B/jb0gqWQIDksG1R6T\n9FLR\r\n=GrjR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/shape":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/button":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/typography":"8.0.0-canary.2ab716cbd.0","@material/icon-button":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.2ab716cbd.0_1602806740328_0.16401706549511252","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/snackbar","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"753710f67c3767e724ca69122439eb923567a5a7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":40,"integrity":"sha512-b+8SQFRothCh0KGrcVrndLcyDTYvphJmETA54d3JbcOqN2+WEsYYbc6oDdF9Cc27l2N88FmNQ1jRthOjH5hZfw==","signatures":[{"sig":"MEYCIQDhsNSz93md1oLvVxt7BO2n2ycQ13reKzAW2s4zvzgFfQIhAIxBG2XIp/K8Ddfrg3autrEDgL4/dlvKfGV3RGOkyGTO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4qCRA9TVsSAnZWagAAT/gP/AiYAOLPccjqOaXgA/BX\neJ8QegQxO1dLlgpigFfeuFXOwtUr7nard9K0lzErhnKfi4nxcR/EnUi5QMWh\n5v+i6NBRNcFq2kOQy4PaCZ53lRMAg6f38rzNc8oi7iOIn6XQNmxcTjRSg0jj\n2c8sova8Qx/t+zwtWB2jmE3oN8ToAqgxqn5r3+heLk2D76u5uVXmeNGscb9J\noSyLHAPk7brAxls+H2Fz7C4hQ5FA1w/CRnqZ2Agt+Q664wDXpoBVKKU6FedA\nis9vdyBKzbUtWj30w6RgOc9VEdJslegk32Gds8IJU0JCJ52k8MQ7MZ/tF3wo\nL4qhsmM9BOQzlmjwINCKWLjSaaJg+xj35JxgiDnOQzA8iLuFaPIUYPGGuaHF\nKJPNvTjSI+tY2CgK8vBBGZLoZ2IYYV2yHPu2P4qAE5TPoEi3IIyp7LaijTw0\noJp2rN5mqtAp85B4x+NmCUMwT7sYHldHUIGG8OHwCFT8s/QJJSHakKFjYNJQ\n5MGxqMD3wrrR3pL1Jet++bp7kqxELOOskhKaL6GKmmMqoirmBAyZshIXjseW\n2QJ0IX4IPddqsbG0+IO/5kWmKRlSv4/hKrUzkxkjFBOohzd/UWNKiBBptfvh\nnmqbWmY83hcZZdm7l9Hw5ei0NEL/RlPsg12v7dCUReDFj3kimx3OMIzjB5Ts\nDmmL\r\n=p20E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/shape":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/button":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/typography":"8.0.0-canary.43c1c5e2f.0","@material/icon-button":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.43c1c5e2f.0_1603116585543_0.27774357319131826","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/snackbar","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcf818a7586fc6ce0235ce85579574cc514112b1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.ccc64eea3.0.tgz","fileCount":40,"integrity":"sha512-q5h7S05h36I3ThYG6R6Ldk0nhPDV0rpO4S/lGYBv/EokunkBMjpMEPLcPaFb7iz3YHWJgV4r2ZLUmwGoZlOBSA==","signatures":[{"sig":"MEYCIQD3eCHbH5Z1RAZVgFdmHgu79vHu9WBkagvIZ8KIdGRV9QIhAJJflmhQLoa+DRLsNJBWAIIipUkCsRxv2yBOqg/d/XH1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1NKCRA9TVsSAnZWagAAUckP/A+sogFAhTD7GSDEUKvr\nCcp1bUxnFFRiIY5FQA4l233vtgkAA5bPLu+GXy7QT3dxy1V0hvise0V/QAn+\nplOpwe08Ljq7xqKOpLQbbBGz/rO7m+EqxefqXkiMxXAhUTFr+JlEv1oYk4HR\nc7zN5jb/FyLiicJb1sawqi9Y4w6KGozskA0lHZYpHUtNoJdYLclAbDhsjX7C\nipWNVwfO8NVj0VD5xT97Vj+WFO2WQEw7MRjXwluM9lcxNEF/1TMOg441n7OY\n1VIVriZBVrb6MzJIDNTVzZwhsjxbLZuQniaN3bxGQ52949Pt7+tDt5Viiw/+\nzl4XlKdGv1E9U+BjNzRcOZkJU6wtirBYakYnUxgHUTetXNWR4BUOz7MASEUj\naT8ehdAfc3WMKsXW0YcvtJHfOlJ7qDjlr8sZqrXPn854DpnV2VKfzS7DH8kv\nevd3eXBKYxy337lUdp91XRUFdV/Txdo2uu4CVIFPmp5JlAjNe+4JGDfzLYvg\nNpJ4cUNlK3pypmJtJFvhLt1y2N3gaSIgyLk+6UXfXXZ8hm6qSN0tDWYGFzIU\nOeINcy3ZektCbLEbvo6uZwqq+nI56gzc/+hvoaqi+gWtrt+DvhvzAAEJz5vm\n8kfe3w+I5Gg95+3VA2sjETNXBhL2bnQozEAR+mjX/G2/rpboYHavkLGlaQdj\nKFi7\r\n=agBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/shape":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/button":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/typography":"8.0.0-canary.ccc64eea3.0","@material/icon-button":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.ccc64eea3.0_1603752778078_0.334353950368911","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/snackbar","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ba169ed3787e5f27764909956d97d56dcb0c3bb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.a79cdd019.0.tgz","fileCount":40,"integrity":"sha512-tJXtFVn3gWNTlS9E9Q1cbJHOysC8YojWoNGLgei7+DklUthOORlD+6PzIHV+VcJxItjEf34UoOso0z9uRLm7Gg==","signatures":[{"sig":"MEQCIBwJi6G6qNfc0WogQwfyzA7ZQSz3J74tsTJQdLkpds4uAiAPQZRHYKS+1qaYLJoo8wnCVrjvbGYTeylRaSLpKAlMAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEvHCRA9TVsSAnZWagAAESgP/RzrW5Qcg4HwSklsM3uB\nnrZSlh1rp0lyLLNNxuvBKJbcEz010cQsDQivTqywL8lhwUhbuQp3F6P6Vpt/\nkgwKCbugz2YqQUfzXDva8Ve3I4w+q//PafgVomCAJMTSl7ajSZQBpSaKxTve\nrFIObS9IFHxVd9sumn9Srq36H99PRlTvJNj8ILtLb6kaqjixtW6ztt6erEkC\nLI2stY0I8BhqddBGMRV96gqChG79FqSe63nRP9tbjAG0u0btKWD7or58xOW/\no8Dg08B66c0JDtxTcSW00hmkoZcwvWxwMa+YnJP7hLSiWz98USI9LMlAq5X5\nQsSigRNXdhcIPa4Ul5aw4LkbUoU8FizSIztw/FA5RNqlPOVsS0i9yyH7azr2\nuXuCWbW62h+Ca5vsNjT6S2lwK5gCkwq1Fb5igZinyBk6rx69clOfKKMLGjFa\nkAfx4X5plnXEm525ymp08XEcrDPJHTUlNGvfiy7GyEJcfohlvN2LEdsPk0j2\nExk+dk4O4syi9N13bwNWD3kUtit49pbA2QeQk06tjpQZ4YMIBFkInKy0AIak\njDcSp5+qTQW9u1HNghXy53UGTIuLEi40tQBMnU1jmt6Qq/Hf0ZjK+/lerMVN\n3Wa7kWMt/o9b8daOorEYEM02CwnesE4FmGrmreg66A7jW9va2KfWU9YFR9Nu\nFtJE\r\n=3DLE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/shape":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/button":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/typography":"8.0.0-canary.a79cdd019.0","@material/icon-button":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.a79cdd019.0_1603816391322_0.07853788488327784","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/snackbar","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a406dff963798c6361925312fa3b74c25f14f3fa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.596e98424.0.tgz","fileCount":40,"integrity":"sha512-8p/NiejUYLsTvGnF8pntTCtxQKeueGWEg3WZZXNwc/op33QwBqu2ywqPSOQmJhAUD1CAWU3d6Q7x6T5UDTKBwA==","signatures":[{"sig":"MEUCIQDI2rGkLV2EVC/MyX5k248Obuxc76NXrJK0lH/OZooFzwIgYnBE5aJXeN9Wi4/4BLMCUGlXKW0Rppzumn2Ty9vL9qg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZa6CRA9TVsSAnZWagAAjk4P/2qYsEHweM3Q37I8AbKF\nJr9Gp5SBGf6klA6METKZsxfqT1km52/7z61m29HrZLpvDFYYItNNODJTdvaU\n3P2t0jwOpPKQxWt2GqNSeFs0iWd5VeY8XQAeW0Av7HOu3/tcqOo43JFr8Yvr\nw0id3Nr5H8s1BTOx4GHQ6H9otzw6o9IaOveOX0l2xfxrXAd/zCnxED6qzak5\nlZgEm1oqwFHfUv98w1i9MnuTX2uYnF8nxLxp1tDQOm19/lcdoi+Q2JENLOWr\ngwpwR/9YacisXx5p7kKAkra+j5qFTtOtqBiitcH5LIHf4hBZLG3lB4LNcfJJ\nG7II6naGWOagrA/bSsLAUwNeQQD3bFBrLAbUR75w+B7/GEv9ZIBjNPCo/z/k\nzN1+u+RIPkYEHKRAZ9cdGf7tzEY9HbvjOhl5QyzNdUOBbVKFAkvUKge1jdqE\ntxcSZasahSRTWeTns904DUUkOjj5b6w/i/eSGTZwqT/FMfxEkotoC5spZ01l\nNjxHTNSPBjYcZ5PUum+3ZpEoLYZ5YEBk3TGjEHfsdOF5LuElZpNa3rZKGwvY\n04Y9HblKwl6jGpYCPqkuUv14JYV+p88s7owJWujWllXFZQgj+qBK6OQHtZcD\nkXJW1wDER9l8NAwfMzCmjYqDdATbJ8H4vVTeUcAfDGGs4BQwfKBwrq9/Hdpl\nPZmI\r\n=5opd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/button":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/typography":"8.0.0-canary.596e98424.0","@material/icon-button":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.596e98424.0_1603901113932_0.8168789819565176","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/snackbar","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0d80d9556c602d48814a65811568d92c70b1926","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.05d5facc2.0.tgz","fileCount":40,"integrity":"sha512-5aIS1K8kiYdC+2Qn2fovrcqug7BHoVVYKQJ8ah2rZREJ5L/qtfPxGvx6xsy9XLh6XeLanEa/GuQ5YmsVdBOdhw==","signatures":[{"sig":"MEUCIQCjxUSlw6Uz7fs1JNysb6RTUMWYRq9Zaa+Gb0+6FNmjOwIgSd0Us7roiEgXclyEl1ZNSyZPRoirFM/LV6lQgOigxzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZi4CRA9TVsSAnZWagAAEUYP/3UrhmmgvuVHpIo83oCm\nmbQTN3zi5pp7XiuqcW0W5R3R0vUlAN0DJEUukyWghDGzo5QLfpoe4z33Qkkc\neX3936bdSvsR5EZo9VH8m1+qdVQqVzHFCxDSY/k173xLRDOGrIIMr+QqqY0b\n8D5xH1o41OXHLuMIcgW0Ipvx22jG/CgXdDHoRaG0sHHcZ8K6pCAv8W1Nf7XB\nMKm+cmhTT6IkGKOKSv256z5KonPqG0IDOtWmwRAUDslKUMCmAWLF/OLgN5qD\naiGSTsc/rH0Q89WqORMMjNduu1boEvNa4sA+UE8N4RnMC3WyQ6Or6qPkwBIu\n6N91tifSZmxB2wylzsNlLeDX+1btCTrIUAdmghDmUGnsrVPmTAH8ycHbbF/j\n40f1sXvO80OZ5tg4Il/QlVbxcPQ3d1kRDyXui8RyH5CDw4hKFUb9wXJfDOm7\nURngsLkRH+APrAmbqsB4nopG/m3O6aStHS4flQpkizvGsuu4AsGGE3sM2bhg\nr47JG6mLJFi/sTqRkQKf6yXac1STZzGOQKYUtqV2QEs64DiKD0DeCkh2cwJi\nrZBb0ccNCl50KwJTPoXZvU4m396rEL6VGI+JMXar4kNnnsxnHJibHvwuYRiI\n55UPkYaMeEu+zeaRMe+2npDVVVMN5sRiE7+RyrQf+e4seIAdUkr1WsE6Ysny\ngzOE\r\n=pwNN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/button":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/typography":"8.0.0-canary.05d5facc2.0","@material/icon-button":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.05d5facc2.0_1603901624092_0.3308322799524772","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/snackbar","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f7d8695811b2aabfc5efd70927be7caf6ff0dbd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.291b3553d.0.tgz","fileCount":40,"integrity":"sha512-sAJcxBF2ea98lW1Ak62b/fAf0tnc2zy4IKKPi5q4LLo0cEOf8NM5GLqbR3UYJv1HTZyW67kY62H9NeVnx9yU3Q==","signatures":[{"sig":"MEUCIGb2msjBO0KigNisMBCNSyXEBJmXxh5QjUK4/EavFL8XAiEAhahZxN7Rx+m4sIK0eBI848roZHlTiGplHOmOS/fdybg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma57CRA9TVsSAnZWagAA2F8P/RmwnGQRCkI0SGYvmCpc\neHGzEt8SeUHgRK4xtEVjwYAQt/1jt5AVgPAvlExEMImIch6GYsJxmo+/rboO\ncYGILbYYeH9xDmdrpJPu1sJSOx72jTnUN8MCXqHa5XIeJj8V1U/EiUAxMsBw\niRhZiRpxj0G5CbwnhEMTIzBlS+Ib2pOgNlTQ3WU8buJiDuqsijBWOOvb6KKk\nzibzalvAm6fVCU+vcjssNFeAcQsM8laoXW/A7ZK20Nws7XedxWyS7apjW2Yp\nhORMT7ojwEPtUaNUmP+B/QSHGxKQXJzvLnHab/8WYFIw/2GvPrHZukWomyMe\nJX2tnC+1bUH2DUgueQAU5+mAI738oyZYJjjh9Vy9jQn93I3em3R1ZbdeKqNg\nf0KBUnYtOKcgoWp1AEDebH2PMneDGHwg0x1va54oigkyjmBLeZes6ZJRtnk9\neGo3IK++/62MitgW+pcLYDYMzhPFmEDTwKsZs+EoHY/KL06WSpFQA7dLE8D8\nIF4gAG8yI4HdsAvB5FDIsG0m/jPjMqATbpsB08mDVSQogT6oV+syAX7AVDKH\nczFaeFV5pdV+bwtyOJfSQezlGpidPHrNFGaVXbQWRFe6bVpU4DECB6eJPjSh\nkBVvUJiQSGlEHctoOCC1gUuLWDYt1SEcjeIxK5o4IKfIp/31E+Y5WMRgfFEm\n/ILt\r\n=aIbQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/button":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/typography":"8.0.0-canary.291b3553d.0","@material/icon-button":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.291b3553d.0_1603907195073_0.046902921254357466","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/snackbar","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ff24d8f17cf450f733cc4a67b7402e898eba69","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.dbc449b09.0.tgz","fileCount":40,"integrity":"sha512-0/NKbGN/TmVdCkSaGJyKtFrLij90F6LKw53OkTOJVeYx815cTiU+XgheJFv3Bu+DN5qPpofagGRwCyzZ8Gv7KA==","signatures":[{"sig":"MEYCIQChZozmTW19GlsBfAcPcA3/nyiPHKICkf1b0eFsgYppzgIhAMAB9Shnpniq40+Mxs/u2Fa//EcFQuAFLEM+4lTRXSMO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbT2CRA9TVsSAnZWagAAlXkP/3UNODSZmC/LOwbPe4bt\nUnY2Fg7A55BxoGS0/X+cJOqgtWiEHYW57DarIDaGInqwJ3bCD7EqPRe3U2EU\noGZWeE5ee+J/HZfCaAQJNCiAAIh64M4jwjrzRVvPzdTSm1kZgk04ZKLvFNC6\nxi0PcmMWTAo/V0VJfLzXQqvjNbZLhcuLQU6IwfFMj0krFozX0YevXy7LTGnt\nlfhbpyUms8ccqxvT9wdxjmjynkPVesdWB40RVQ4TqHcbbzm/tW9VXDU25h0o\nl/LauIovbmjA2VdnGom1LbgsU8o4ZRG9Yc+csOTtPz0JE4ykj8uJmmqX4yJP\n9QByz6BOMR817YNiBikC45roKv5u2bRGtLPJa0Sxv/77nC1yBPlOq0BZJiVj\nVnhU8tHMLJuIJ5iPZcp9Qo2GF+pZfir5ZRk0013DGFsadvWreSGxDUMCFVxA\nj1zoRlt0SvYwmA7bC4fmnrzF2yma7TgOTdnEb4j7gTxPVn2ZeNnkpJ33JbHf\nuiUWuaLNfEQg+kITN/sbG4pXamyrWiOWMB8hWwjHSE1JK2QkJhXjEK8d4/mq\nx5jw9nRRVIZ4Gc3+M1/jsaxPqbpH5eALQFeUvSWiw5PFrfy6NoiYCHKsNeij\n+TN7SAghaE7f9uvJN8Q7KrvRWEWHfD9c3jmuLrk2g6kq5N+SpyPdBiprIzdt\ndnJ8\r\n=engp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/button":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/typography":"8.0.0-canary.dbc449b09.0","@material/icon-button":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.dbc449b09.0_1603908854315_0.8782793790886052","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/snackbar","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1006d8d33699fb1943b9b34fa3e9b32c81698f01","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.4794b25da.0.tgz","fileCount":40,"integrity":"sha512-aK3R4tXWcSj/s9LHyvtkwrcsa9ZjaFniJFwscYw9uy3TMs9+sigiZxkwFpbvvWbjWg6bE4Y8XBXy9hoCVwFndg==","signatures":[{"sig":"MEUCIQDO2PJA+U0Nf63Q8pw6/4Zlc0ugsVD7va/sftYcNOy9ggIgJlCP5a5291qP3Fz9NOr2cHKs9PJcW2xKKJfJPXKJ5wc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbucCRA9TVsSAnZWagAAKyYP/jjI2FFASS+qgcx91t+D\n9FH9J+OJo6t3V2DJzmoLKFLTtfWBzcKNjGgt0GcY+ygHe30uPNqTjRVinFYP\nU0kzRVrF9rrqfuORpmHn/wJHwwqCGyBqLpQa5QHNBzJS+S7gwwJkeqdHjMmu\nxr+HSN1kwrQddceD49FE4WX7XSlUkKjoYAJdpZtS8kswWtLHHcoEzieM7doj\nVqeNZO/9Pio8YjttpOFgMuBMBDQOckyQ87mOplZGPi5RBurKWpdbYW9lbHSK\ndZqpVbkLSZa9KQFJQWcMvg+wlicg5ZHG+RwIOBKwiJ7scwSiUgjpNSjjH/ke\nzGRSjYqHquBR/5tCL/LOv5Tk/HEx1OSmRWz4GP5c+l2xNLoOPrRKc3liLyZ2\nC6eb9RN6hIqlF/FXc2HEe8EwCel2DdSGS6RcgdlDBK1XYtLqUYunFVhUzaQb\nSmOzxESE3iiN3bOinGKBDYNE2J/v9ATZ5oAIOfcTgb82UlSFAinSZIvtPOVo\nPBMzBKpU3QRhjD+NCM9D+4CQ+SefAions0Qrc6/MIjKM7u6NdkCx94+PqHkS\n3REyFgRcM8jUgreukAoCz9VsOl79aQ5OCcRjEz7QrbH791Q+1me4kWy/evjQ\np1ikClHTTwZ2UWRb13d0wUlL/O7yGsi4tVFKo6FoScLuzGL2tyLDZcjuW9c3\n8WPt\r\n=m4Dh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/button":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/typography":"8.0.0-canary.4794b25da.0","@material/icon-button":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.4794b25da.0_1603910555541_0.723934045352222","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/snackbar","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fcce82db022f1629471e6092c5d8cd383fe1d38","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.c61db90a5.0.tgz","fileCount":40,"integrity":"sha512-UFe5lwjwKER1eLbQPgvQSQjpBW59JSHhZ3PNHEySk9pdBLec35YxNOLiUEaSxn3SRS9AvZJdG00HphCriw9XWw==","signatures":[{"sig":"MEUCIBKjFIA93zz8xXsarsiDPiqc3zKZJjo8pd+0nbVQMIccAiEAmCLVbwS/YhGTIuojYjwo7mtVtv44bMD+xP2JDcnjYO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmcAKCRA9TVsSAnZWagAAkfcP/A92jpxynGMDAZEOYzIG\nnTKiU4fI8rkI0tIW41SGXKR8sxCZyTtLKJ83D4v26CPrZ6CulMURguCE3BzU\n9vTcLIkCf+RB8UWeUhEKEmQTSB3PCowMXWyO+VRYvXuMJz68JlNEWvVnrplF\nVtzUg4vtelYcohGF1arRkj+T1FuexI+aEB5AREuL+9gLlh9cPbcivGWmSqMi\naTyJ1qWuXUXvlu/vWC+jrmfbS7tpg5bXXOMqz1h8y8Fx3RygCZuOWl/cUMMw\nTmNms5xwkUNbu+CnpY8hUoFjMG5A7JObLeWr0XY1VYdLfyt3Arp1oxDeu91N\ngLNKMI/874zcV3UYIRu2nWLOFyW5OWyl9PxvbFAPHlhS8Wqfo+Kb/e+EFugU\nslvnjUyru24NwA7V3pmrC/7dH1zPboXpCK9J8+EtUELtxVpUA6UjaadKGfIq\nuT+2inAggf2x26afVl2K2R3g03vU2T5mSCPTOfpYJrw+hhDxqpagTgBHlfkU\neagw//LhzutAbyltTltAU1Y/39A5KOcWLokd7Z3znmezsjKLdkXy12WWojQw\n98+cEV+5Ot0HLOVexXqtxs+vwQpv1GXS36+KgKGdsWmg481Hku7aH8NHSHNI\nyF0hzLMRqDLcMezcW2klN7/iAlr+jK2Eoz5pWBbZuOnFSs7FCvfCMDWyPbuB\nVMdg\r\n=19Zz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/button":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/typography":"8.0.0-canary.c61db90a5.0","@material/icon-button":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.c61db90a5.0_1603911690348_0.2851967685794241","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/snackbar","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79e16db5bcf6f32fe0a9733000fabef26293cdaa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.6d9648ab2.0.tgz","fileCount":40,"integrity":"sha512-YyzlOoRSZlkKmEP6H3tUKqOQ7sMSBcYE1fxjujXISbP4KKVUU5D9UCu90dzFha8mOdpRMdOEXGkqNumBT1Pc5A==","signatures":[{"sig":"MEQCIBxmzvS/r3sP7NJoxA2xUYg+3RtIDC/AU/ScPn+FYpuKAiB/cdP9g0KG9WydVE0Ip3irfxiLfq6ycq1W7eIbl6KznQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyc9CRA9TVsSAnZWagAAdEwP/Rs5vNI6TPnw1itPK5iJ\nHaK/kUqqcaEe+b4wr7MaZ/VgJpeLKZbqfdiK8p7ex/g2i8cCZazumu0sIw4c\npSwENYjojM5hGAMIp1YZ43DKTzePuFl496BJ1ddaMBFEMnShu/gb57H0TSsV\nePD1A/xs24Y6hkFIJb7/mFtYO/2Bb4DGnN6fYJMMBGifBc9koivwL6/6S8cy\nCKxCGqtuFy+M994N+FocdZyJ90LJBRCOfolzAIatl9QEvFbDltyoyen6BtuK\n13C8DFV4XWYvBWnAyJalVWRuHx3B8mVMEgj83KORSnJGPeVe2AkY8fJmNXcR\nbmPsrgnwgso2NgftFNsqvcsQAqyzLTe3KG+5R6Id+y408LJkq6hkq2KRMG+0\nla98oWBTKtGYqSC8vm9SZoIEy5eiJFfFEpc3oZt3vDMtYihq6QnYFl0opST3\nIllhXIotp2B1gh0WqRznqlVRek0sBZZb2baIgoRma8/HVfEnwosBWGSUBkZJ\nJBOpGYlzslcRPC9E4PZWzBHs/YihnmhnjM7UIVxTV1WEzZE8TngtIHZVrLdw\niqpEgY/E5jET6NibpwNmX8ZHHt8CyvmhZ4WOAQvhCm7g4PEAK4hO91xW3hek\nQs11LVn1eQWIG6moIq1XvVdiZTrAFb2aRjiUoHTWd26TjS9GL9QePkINIhr2\n1BH8\r\n=7zAs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/shape":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/button":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/typography":"8.0.0-canary.6d9648ab2.0","@material/icon-button":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.6d9648ab2.0_1604003645022_0.8747586577506199","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/snackbar","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15c2eed4e34f803869e16b9008f5c21626ff212f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.5511c5254.0.tgz","fileCount":40,"integrity":"sha512-357UqHNLTYtkwrv+mcvahEiC9pX2IqRT183BOvva8yAXDJaGKfxeB6YqTAXAmz7PorEJE5jUh8glFKDFnRqmkA==","signatures":[{"sig":"MEQCIHPOjcp5IIxG8qiOVr67GOproIsPbC0m6qpvjwMIOkc3AiAJfi19uFDIfAi765Pe5fbSRnU5vIjc1wOZtD5xxE64rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFUBCRA9TVsSAnZWagAA2yYP/19i66VPovv+WZ/zpMpO\nnMRPrDCbaVUGRr1TeUAXHgwIbusU7ntJeL3T6ReqWEyY2eYIZ+Oh690SSkiT\nPM34HgRWE0+4utO4n1L5V06gTEaI/b9SGqMKgT3mA+PehWRiSCm2wAX8nTfs\nAA3Qx2zy/eHtZJsenugqpURCrT+XGvTR2k/Nljpa2wQUb6EgNsgHRuUgQIQw\nXh4JFOyXeqrEOcWWYP4JJ9Q/BK7aAWwqLwm9U9lqdH56QG0PA8zr8SsIstzJ\ni03JZMf1MRfytk4swQ+TGbin32H6yiLBPvTxT3tvL29fUD0w9r/SV12qGatN\njRbaChrxukoKRYO06ccnJwvVTMYUCQ0nMN25tfdp8Pn4jmtKAr24HHrlIZae\n9Gp5HXb9by7z0tQy4qBmKrcnWPzSzlWNW9cxC2/9i5KrhKAlath65zNc2aoC\n6wAmJwzXu4lENejOQ8WvxwGZv+fBBXkl89PAnfqipQUmreg0eK/uKdtoZbi+\noZVa6jfh8R/op4vhYkalY9V+UJ7tMs9xf8D4dQzwJAofALnUahcemJewm7zh\nCEod7YJ4j/5gaKEet9sX98cIu1tLtPN8QdklY+KDaMhEEpUYO9orhdELD0yY\nQoc/AM5A0pnMcybVBAJIVFewfztxMPhBTo8KHpHnKDvoofYVP7WKrlDNX6TP\nBmzv\r\n=EgAV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/button":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/typography":"8.0.0-canary.5511c5254.0","@material/icon-button":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.5511c5254.0_1604080896829_0.04043443954370618","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/snackbar","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da630815af1934019244cc538a0eb6dda48c400","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0-canary.bd6e302a4.0.tgz","fileCount":40,"integrity":"sha512-3Vji6jSe+A7fNxf+hOrokGHgkEGi/6dZHmqIVhGvjBbEAzvKvgJk6K248eTPUTCkvyO/gHp2T8NnBFLiBI1Kbw==","signatures":[{"sig":"MEYCIQDhwNoRG7Wmd06BAV7tPw4n0fCqSvdRU7x9tifDLZewpQIhALPIuhIf2yc1PaJXkxPCDnUSANYiYui8JCW/48Sm+RM3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDyNCRA9TVsSAnZWagAAJGcP/04mpLH6psSaSTJ7EWDo\nBQofdn8YfmPQ+5NRh6q9/lB/GOd0MVy96RV76H5Au81JSMDSS88kmfO/lPUT\nVQedovpsb31EavRUHQHaPKS5U2sXY+mDuqu29EIupD+YrUgkKn3TmgkIecDb\ndEUl3T+LFMRLzj9gSPoVzEYXYGnInlSgmgkcSdwm03VxJYE4mtXRZXoncSEH\ndPTimX8ZEYcVe9jsiJrKP8+c0YBaPrvgFPU9W8ClwUXgrag9UbCZ6X/7X6m3\nh13yyA9MHrvkA7cMjY1HgIpYxYBufcfuEryNZGVMyp6oX8Ec+HYP1LSXUId7\n7n3BABZPSe/UtdPf3lYpeu7mdXuqzn8EFKvfmdGXmeSadofvrFrLlG6e/F17\noA/fcE3Fy4QPH8obzz1aX+b+nbhpsxUYtOnqL/E15WcOf3G3Hz5H85Vo0c4Y\nNcDEPHSgiMgNsudvi4JD9CCF/6iXkfGjtrQPd1DK0MOKjZbuLbvffwwHiN9r\n3qdeJP5dk05Lo48yfuZqJ60vtQ3ThaiTFVpEVSqk1N7QxUU6iv8lERxSBkyB\nvGWPBPsaiwPyKqMeUukFea3gx2R6tunkyQ556IaryZxjpIU/BNX1fKJF2nZo\nd5S4Hx0E2bZ3fWHeSYjbgxOnyZAeWXyl9SRpUqwvHfYByUddzfcJPJxgiXqU\nL8e/\r\n=HiTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/button":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/typography":"8.0.0-canary.bd6e302a4.0","@material/icon-button":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0-canary.bd6e302a4.0_1604336780539_0.41902714107880024","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/snackbar","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72d1af84c07b4bc7945e124e358cae4e8aa395c5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.d6b5cd418.0.tgz","fileCount":40,"integrity":"sha512-EwHt4UpiNoyHn06hD36XPH7egWfYmjeTea4qM6b9VBWkX1bxoTLG5AKvXEQORavkRzTGZjk2gDmpDqhvXVGAqQ==","signatures":[{"sig":"MEQCIEc8mDY6hNI+iIJdwwwAmT9Swx+XmkGoXoGvpSeBZIhqAiBnPhZcjgiXiOSLepZicjTnxjdYpNqX8AOO9+hv8FUVgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+qCRA9TVsSAnZWagAAZqUP/jqKYLHnKz7U3XlevH4D\n3PZYrpBPZUpjL6LT5DYfeOJkauB024I3B01U1++CMtRsY2YRACWyyeiKi6Pa\nhnARyl4kysFVGYOqQPiwu2uQXDOriMOD1vIFdJIfstuKt5SRou1lhsQIzhuv\nor9xvLIu28eprbrsgOuRpjuYYJ5kFXMRwhVgQhnoH0EQ6bSsCQjOBF+qLiKv\nrK+0who5RaMHK9Dy/ADRpq/u/x7/7py5JwBrWPpw9gqGAM/0RKpAtvBv9EF6\nRONuwYk3rEIpgpvsbckRdHtCcb0LdcFNurG3VHUzVPQ/pufcCD6JzJjthvZ7\nHLe/P48buk2823KOYCYVmEFyBrXVbDClzNIR3rb2XVREj/UQ7rtttUbRkubi\ns4X5+6qLUZjNsAVcEfB1ztLVB9eT7w8GhZO7pHvwsQxjWclTFTyrc/N+7TyU\nDqWT5+QwAt2DgXK6omI9yAsn8l5ftQMzSSkcywgkqgbqXCnDsSwm5sqeFJXs\n9M36eHPa6j0qx/aRNCD1Et5mEkVsH0u7kZB9ap5gM7CDT4UdCxXE35o+uCYa\nWgcobi7DzEnInhfqg/4RdcO7VOQb9L6lceDEEqAjG8tnEKrT/P+2WJ7Pehc0\n8Vmw53tv06YsDWQaDNnzwV97o7RCl49bKPpgAFBbUmHXF1B4zMxv88tqypOY\nTo34\r\n=lf4D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/shape":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/button":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/typography":"9.0.0-canary.d6b5cd418.0","@material/icon-button":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.d6b5cd418.0_1604358057692_0.894984646542486","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/snackbar","version":"8.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"766169f70c428aa82044c79d04b2eeeeed401127","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-8.0.0.tgz","fileCount":39,"integrity":"sha512-VJA3C58o+b2PRpPsPrQ3dnS3S4L8NZ56Y9eEkOdaJ7mQUQqvYC3opYAT/MuawyGC9I7sUgscV7gHnYifm6JJHQ==","signatures":[{"sig":"MEYCIQCMvqXqB6NP5ZIC4Uo1R1n402Lt2ar3TNbafnS4YcZ9MQIhAIsE3J5Bn6LRac4zsM4e1SLxYOc97+hNaLQQ3/WQPLiR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI/BCRA9TVsSAnZWagAAXSwP/2zx3oEyXvjNSdK9pCD8\n/SUpp85Ps2Dusjr/nbEGTFT3jzjjcWZx9Lm/Sd1nnqld+qjT/hFn4DVnfXPb\ntr/+ycLTNehF5W2G4NIU+H8FXYox3fnn2OYYiOZFREU29Qmuuf8sRhMo/NwF\nzBC5EgWDF0sh47CFq4ciQkmOfTXCOdzw11dK5MBgwy+dLM+6KYUDpZtpcTvD\n6pCuMw9BM/aii2HBz1PHrud2FX1ze4edNQsRQjtfx9u4FPNndI2tl/xbuhQA\nuI+WCxx78eL42ZHpjd1ODZ1evee+7IBcUmJgEufzwTDobuzHKlNIUC80M9Qv\nqgTanhnnA/nnMroYWfqkMwBR2MMEhTZyyzeRSdYteBRJSp9BXGhj3eUa9uMI\nnKSbBbcLCxkTYHEvA9zc1dbI5mEnkniMgN8GrjqORuMoyv0l9ytFr0q85XEn\nZJow48UijKMNlFCFlLejOcYLrWpY6xhuyhJ+DAGXWzH2Lx73FnhBpvR7et8/\nrmJnmF0ueDo1B0rB4NF7m/3xz7k5rUMbLcYFUesftRp6ShZh92IT8RdzWKFx\nnP4ycOMlwuGec1Gil3FqhnY+vbmtvwzIdeyXEO0VBmG+XJeH3wc6UNXOudO6\njuC80Rtl8Blu5E3ip2JefmPYQpG2FWFG1WVgKJuaG/EMnWrkJeLLQ5l7UVTM\nkTrC\r\n=ThTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/button":"^8.0.0","@material/ripple":"^8.0.0","@material/animation":"^8.0.0","@material/elevation":"^8.0.0","@material/typography":"^8.0.0","@material/icon-button":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_8.0.0_1604358081378_0.23685744101779038","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/snackbar","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6976e954c285cbaa56c2069ce4291694367822a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.fdf9a2634.0.tgz","fileCount":40,"integrity":"sha512-IlGmt8ACmJPgVNMKZ9zv9p//mGTysrHS8jBYBFnr/NUPri9gLrnKwEq5E0cFhqFZLbC2OWxU/2Z7ilQTFgPhsA==","signatures":[{"sig":"MEUCIDUoUUAYKARb/JQEq0Kelp+oj7Jwk2Flc4iibCcqKY0CAiEAoB8oV4stIu1rkB/BXEhmitiq9q/toKJ9nNjzJ7QIBQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeZICRA9TVsSAnZWagAAYnIP/Ruzq3KsFS9o3WXP0OuK\nS04Z/P4/XiVfMU5GGeOH6WaKoR5y2fplN4hIOTwaia9gUXuDZjrJSB0VECaj\n66Pw63nFox9rBm6BX6z52do3VD/sS3RD7uSKqinbDxDAd/fegNQtCGkaaqRY\nv5k3XUrNvj/FtxAD2TdWMLAB19zpKgSxgPBSxj6N4paI7IUtayExfRvSey/+\nYNIUhoLCFnJ/g0BFQOzPg6rDStoq4eozvNLm46LaloILxmt3ZQm8GiU/uAHq\nx0QrW3j1hK68+vw3gW665h80/AIdnDTpvVG86CxUEXIsGNUgTmIpY7ScAu2R\nKN6VxpWWmNmsRjRtXXYPyyhAoCSz66OgidsUbMG6rHV2pTXN/GaxQGrrEb9C\nwrg62MTt1tXIRNS1m63S7sNgx+Ad7hGj0IDMx5kqLZhJCprGSVeCoxsSvyK6\nHJ1qN8t5E/sRfpeVTfNPAOUeneJT+Xd9hxFVhJxgY47i+L7pRsNhk8DSuVIM\n1ZaoSFdrauLrmGPBrR5nxxqx8t1nJpGzLJIXmwNGSfjDpImwA2MdjgAN5pyD\nWzTOrtG2rOcglZVEzizWbsfSprOZ3rh+Iv6e9Sh7SpvW8KiTvDlTpr19D1Gw\nquFdV+ts/nLsEGPEiHfrMflMYggf3/OKTgfg2F7lNXmXOTgXQbtaiM0Ssqy2\n6qLx\r\n=p37m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/button":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/typography":"9.0.0-canary.fdf9a2634.0","@material/icon-button":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.fdf9a2634.0_1604445768401_0.6526273738323802","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/snackbar","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20139c8cf88ad9cf8c97ef8b94ba1582404506cf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.4a86f30a0.0.tgz","fileCount":40,"integrity":"sha512-9a9UN8K1ZW526ixYg+v/PFd4RmfdftuEltdBFWEnZH/rUmdbQQCdmtYVUDvm07AV4If1R0XPcRlOJH+/B/9JUA==","signatures":[{"sig":"MEUCIQDxIOWdbznDr4aHrDiWgK0kMh24Vi9BX1pTxDP9qoBxigIgJeBsi3PjlBILnwaeeVmolHdXt+MXrjgN2ZDQDhOAWJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoefgCRA9TVsSAnZWagAArT4P/j4KyhnWbZz5xvs3IAad\n41Nc0dSLkynnVScLvjlGX4L2YqbyLTPo8sLkehzERQjKVjsCDjA+XgkxNTeF\n7Fx3nO/V++ik1y6R05kyMxtntYAuEGLCzOgH6BKluw8Kuebdu3sdFQw3Rugf\nTNMsbEoNWwSmcmQKbXacgH9uY3SETNBYSgUZ19h2g2xXoXz4q3W3q1HBetZ4\nb/LkcRzfssN9emtwtbJ6xM5s32yQ4DaS7K8WHr8Tk8+ZD1/OV0za4SsEGcFM\nIJuZ5PcvteQKAWdpfnEklItUcje5krgI3Htdj+/damJhDXLalwQa+3i8r/rd\nlmSAmOZTxEp/TgZZPpxV6QuVMnywkvs+xASXGYOTfAqyNGefVO10fetbpIRh\nfmQHChy7ZoMgnT5gDF9qC43Z28/lIzu1vQWz/xMinZX9Me3KYl+fwfbTUHwd\nyG8HeJPqblx8TqtFaYtbeijOSQcrhSUId7FrzZtiK2R3l7bFJyK1bOpCvffT\nWsgSC4hwhsNmkfOsD5MeOj50fabTVN+2IEYmgBpUJy9qFGUgrWoBCXdtOv0q\nLLzWmkiHIdbO0Pn2p2mbXyWwZOXug7A9be+LL/ftLmb1+rPV6hN2LIJC7MWB\nA/auV5TqEOUsH57PXCaR0anb9UPqiDDcp2ylfCAS6w//T1zAGldCVmQSoaqA\nFpa8\r\n=YKtb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/button":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/typography":"9.0.0-canary.4a86f30a0.0","@material/icon-button":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.4a86f30a0.0_1604446175660_0.014947205743921943","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/snackbar","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0ddc6ff7b6e81c5dda3b44c6cd10fae90364975","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.fc8b045f1.0.tgz","fileCount":40,"integrity":"sha512-ILk8XrTn4N9DS1NKaY8Mlwn/cxG/6oXsicliNg5V8SC1lwtm846oPGrQpz7fGPyhA62sedFg2WvjIhxwNNbl/Q==","signatures":[{"sig":"MEQCIGOA0AORrjSkSv35bmaLB22nqkOhE/Ht7rswMqL7JdfSAiA1UhfrU31ZzT6bOFfM6RN0Ca6l4pqDt6fhugagRODkzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoen5CRA9TVsSAnZWagAA3GYP/3zFOMe67hMe5NJHHax5\nGnlryxN4hQZeDyEB+2d+QKsW+mHYhbm+c1m33wlUh/R6MwNDukQNx1sECm4b\nLmS23avf/uQTxSdy2y27aDJTc+qpdYccS9sva3358DZSzNtGuVIsSd7l7v4C\nYTK40IMw68sq56aOwftxZIGsd5k6yoZT1tz7BjQ9eCGi6RpgW24RnmnXRxkb\nU1NNxmVJgBi27JsPBVdEJspYFs/RV6+p1PHOZgypgoMW0VUvtNH0F7WpXSqp\ngDaxE7n63nsf4IxrTZKhWe9v0J+uLIg3nWXR3rZiFXwHFe9p/vR69q5LX3dG\njqU9eoztaezbvYyExwuXOZ009nEnYy2QOTvIwVhct3mY/dOA8aOhDg4t7Ojw\n150m5jm5xDdoGMNmpy25LTGBTWE57mLFc4AubqCQXevrtGfT6T7ul7Co+aNs\n2OWgp7IR5kpFX6A5js+ZCWJZCacl5JLfJIPbymRpUq3hlfvB463LdLR8Q5Bp\ncQk3H8lnTwp+isLoBcQ9mJKScH6k/YOT07MF/TncmdhLCL6yLjVmsiINxNvO\nfNZ8lLp6p1PPrkfbZqr4uncAZwrrVRBk5Ce942FmaLqxfYnpMO15hJLxHjwS\ndKwe0xlLiDlhtAY/RvcB+E27RMtr4zhIfzAnds1TsTWh9Fc2zU/BsMIQKdeg\nA2iq\r\n=TiaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/button":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/typography":"9.0.0-canary.fc8b045f1.0","@material/icon-button":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.fc8b045f1.0_1604446713456_0.4153517664544808","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/snackbar","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfa3fe768db1d0a46d89a1e67065d0e77aa6cc77","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.a0b2db26b.0.tgz","fileCount":40,"integrity":"sha512-+oMjEWObnJuwKItgYjq5TbV9zqQzNlTl0PUvy1r/wynRzIAu54t/1vL9ckL1ePVGuvTbrFzPHGKwHd8U41t6QA==","signatures":[{"sig":"MEUCIGUjU+S2y5hVxlHOnE/E0gY8MkI4ALyJl9KT0igsG25mAiEAwTt9Qp/+5k+p9Nf/MFSZAIfqwMXgG48sC/Fg8b/S4Dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofGBCRA9TVsSAnZWagAAXrAP/3DiKTtyzGlFT4mLFAYm\nAea0P8UvpdS3evVzlAEKDQnIPmkLOQYzmg33WQa4Ueg7hbbXCfRQMcALQXtA\n0nn/LMPNafbBqTaQXv/W06X66BcISbDL2mzo/jK/I4s/ybPUglGLsXYL3rAG\nwZikjaQA+iUh2UTwaBXjpwy1cLQjX6UcVfG6ovAb4MnfDah+xEnfrzYPp01e\noW7lGKVDJqbdNDqJv8uFAEg9pwCQEVkHtkp1h/EdQYgwu3dsTaojKJPP877E\nLZxldkCgtpXESsVz22qSiEnFpLGqdGVyXC0SihIDmdGum/OludcdmBQe5pCa\nYwLPV140/nru1/ZRpGKkzG6haEj52Bh17KH7kEoRkVvUh/aVb9V/2xHTOzJi\nyxSTDh3tjdntT98KyD8RiaBTdM+ooCLfzUFnl+Dz+8qOKe6nQi4Pif17mUnA\nRNgY0m5LA8aPljzz9KBkVArt9kOJ5YSTiUGpGhM125paQafvwDdF4P9CnmOz\nDOJCT7NdsQTDIvwSptGIKNbVtLsUnaGLJ3xTpgo6O4lOehEiHI0Qcg4vYTbn\n0jYG6YbgJ4ORQBE3IKlQEC4Dcy+1ikEmt4pjZEsPtBFXRbPYzwN+BwjenRlO\num8EJPyVRcqMEBFmKh6nIK8epU7UuBB/WulZNjMylO6Gl0kjDprkG0OZQjj2\nN7pI\r\n=H3ER\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/button":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/typography":"9.0.0-canary.a0b2db26b.0","@material/icon-button":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.a0b2db26b.0_1604448641446_0.649460440305716","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/snackbar","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e26947b3fb9a6fe59f6b24b5a6a41da4fc38c463","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.419e03572.0.tgz","fileCount":40,"integrity":"sha512-fLA+pjQ3Oy+QN4iLtb+hkcYLW9E2CPkaFyhb3vtWkmJ2rthq1YXO5kx2yojKff1IjYlv4mlg/ilJWKwGg6jRdg==","signatures":[{"sig":"MEQCIHs4RMOi6EA9EBUvdgPrNgK+bzK61HX5iSroLEv6Q2PpAiAQOLFZ+XktWbITkeMcLpPIjfWdtLPjVLKUjbbAtc9tFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUkCRA9TVsSAnZWagAA78MP/Rdm4GjOtYTA4AVYz1Xa\nzbkN8obxaULKCXFPlfcbBAGlwubmW400UqFWtVAbKuj5OpH0iwprhwqhh+ZD\ngUHgkGiiODJOqth6nriYFk9Ya9o+t/Pi1Cqs++MMuFfsLvgd6kmiR4aqVylA\nFd7369m6rC6IyMtx/JCUdKWcoH1jc0TXF6plaliASUBAyDZzAzfPTEPQGzSd\nfLy2ciH/TtTtrpTHMexOeSVB/K8QvOWXrFonFWh7JF7cIWhEBg3XHMtXy1qG\nkYMof1eWTs6f5ATKN12EIEqNkAtAAxs4a71fq9XFuR9TzonQoJBvbb9VCeZ+\nun/8o7gDMEeWLsB7iEYIx1pzTJuatxMVk4+5Q8SgYEPTFAG1HBK6PwOobfc2\nWtdtvPpprB8ZGR3yExg7Nu7llJze6kuVlQDCa/c/NZFYmReun8ORmTHbhb9Z\nx15GnE9P/eojJvxaMohWzZLUaHJDXpcKDx85bA/Wa3DYsdHk76DWaZDQsBgf\nyWu3GZBzmYwCosp3mEC0ywM/OyQgw6VqEsPe+zb76YUG6YxestmWyuCHJtzc\n5oLSZLpXw5EirQ/NGdRYb42mgjilUE0rKvnMSil2XVfWEPZ8l77gfJigQGlG\nccMhuTDkW+sjko9kDQfYtnYaguF6sfQxy/Zz1wLEmc0I6JYXUNG5+HBumzvz\nW0tx\r\n=+1r6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/button":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/typography":"9.0.0-canary.419e03572.0","@material/icon-button":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.419e03572.0_1604453668057_0.11481369976931188","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/snackbar","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1724932fabfc2b32d68f9b1222e4e68dabfe5454","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.a432ad542.0.tgz","fileCount":40,"integrity":"sha512-rWdr4smPMksTqNoLsbGLD3FqZuxG6OyGUTesw21QXHAuCIy39uASJYQ4IwzVDg3PBrx34AIRl195yc/mXDuggQ==","signatures":[{"sig":"MEUCIQCHkAz1iVn/NGZmvQOeBwX7xZcvke/ZSCDIFWYNvZGsLQIgZsa3gvNVUyonW0wOXetvETIYq+HzhMDazogSNsxzUXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKsgCRA9TVsSAnZWagAAeP4QAIqexIeempV2zjKUNa7f\nFpcWVyWtSgKYeytmwebyEwku0DMIVRHBDnzvaErDWbu9wiW8OaJk5YlIj4uF\nP8FB0tvfLmXCBHqtdoNgfzreOqijHVgXPwbOW/WKR4iOOspYvez4bWFDXqq9\nal1FFx+iF6tN6H//HHC4Qo0vB1j9F9+8X1FTQwOdUN7Nz8T3OIi3ba3lP4CB\nPMAJoC+kgxCUrOUm4oUXKvNEGN2PjjhZDuBOa9tfITCrG4pqC7NX9w1Kkw0l\nY/c0nU/qwlggXG2VED/sf3zsJ32lGe9VAib1yUmQN+JqaznvH/nGwwVDmfed\nk2xvK5MDkh5YLjxMjlaKBfNGzw8gYMIX2NCeYwsvhrHwrX4yQBqWS4aCx96H\nl5QdaVjG42ZmplVXgZiRfGmzgIKQGvF16ymgi1urUeIZKgc+5LS84biZ26WT\nEfybkaS0Iil6QM7RJHjOX9IYDcfmnSDYlLZ5GXUDxzpUT1XyS426CntpcaXu\nqQRoyTrlDVeiTXcSf/DHY0xNQNdOnIKVNV+n67pwTd4uvLUWxW6rCtI0zdDU\nKihu28v6vzvwJSGkExokEF6V6PRKsm6TZVo/adoUAiQof4B//is2qTe2G30H\nvkMrVohkV1ArF3Ii06nXYPR2kzhWUxCZjB7sIsq4RFN7xjR2MrvFDsHPjqnf\nTKjm\r\n=KfSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/button":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/typography":"9.0.0-canary.a432ad542.0","@material/icon-button":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.a432ad542.0_1604627232064_0.6020891361884466","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/snackbar","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad1ca13e8d83aed07a314ed54834b3d34a820100","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":40,"integrity":"sha512-U+Smo6KFSLotWa+4GTf62N5JnNTrl0glRv7WtNMbLIJ5iZPUBSk0Y2kJ/u8v2FM1h4F6RiWs3mqX1yz8daF1Ow==","signatures":[{"sig":"MEUCIQCHhiNgrNQn8v79Y3h46S/bdpDLuw5CTNS4u7AOd2MKOwIgFEuNgQhmPZz1c8cVwb8XZV89MZZusGgwjYEVNzwa23w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+2CRA9TVsSAnZWagAAdM4P+wXTP6/80nfF0/OvlVUu\n5AGh2hYP70Ze6Ei+kImFROgskM3Nf51hus2zkltgRCYhfP2lLSmVSVUR3wRG\n1tXFUfzwP5q4dbFjyTmQcYtTLUsdadiC2Va+/YXBvB4CPA7IfA080eBHfj5l\nw5Yj64S1OiXeNXgRJMlD18hAK/s7y77ANGodDSfeNPWqBzftOEKqKCQ2boOI\nPihFyAePXT1RRVYa7DIcSjWca6VUPyEv3v7dCMxejaNw0ak80ZG94zHW+VjT\neq0d3PCHQ/JCdm6MrJNMInj/94MOjMmyKnwGGeNjQQuN9UPhA8IBXdW38bC8\nYeODlvScYCLV2V0yHG3D4V5y8HAFvZYDG+sFw35PZ3hxZJKFJ65fsEI2uOmA\nT2Yq69fNnWTRl7UZCECDUS9ykZluLhPZYLsqmKwolBdoiVPRCgCSG6nZJmpr\nds8quBla0DoBmxj1si12f9tGBGnVIn9Dnxqkyd4YXYQhxKrpzvlOPQd0ucMf\nONgZ9eb4qxldkit4ERkHGrhaVWp6PmG4EqG36XgolFStn4af2WJVHcqAjdEp\nCxZnt1whb7PumP3VY0C83dhvclMmS4/i0fBaLgUycQg2KBngU2pUcvo2LPUX\ncMMEW7Ql/ESW5+yH8cJfW4W1IOSnX6gZrD8NuC1AktJpHZPiULL3Mral9jc9\nUzCC\r\n=07+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/button":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/typography":"9.0.0-canary.e2e8aef1e.0","@material/icon-button":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.e2e8aef1e.0_1604628405704_0.49768270234008094","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/snackbar","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2072571b90ee46a3c4a6e7f2163f3ede37035f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.ec6b68b34.0.tgz","fileCount":40,"integrity":"sha512-QLbcCjgPYeDNAbWmRzEiVpB+XuxzMDTdruGcHZ+4XbpRVdsRs/CtK/P+r1AEh+1sgLnGC1i1Duj/AlF3bC2s3A==","signatures":[{"sig":"MEYCIQDaj5CYS/Emw5MaufCZAlIxaD7Gxect3VXDmW24mDI+SgIhAPr7/Nq9S3TMNvovV5R2WZ6LoKHhD5F2lXOerXU5zzVy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZy0CRA9TVsSAnZWagAAcWIP/1tbSwmE1jY3mMWyUjJn\nKqqAGwv8MhSwirQuzycNK5ACPRlI5eo2cXGCFyvChBYrS3W75iUlAUIv6NRg\n2K6iNw5ALZBHrkOpKoRr07vf4bzg4tqCcO/4/HJPtCeYxyrc5UkFA9h9j3jr\n/mvyw8g+1m2Y9LZtlrpOeS3GfYT/l/7YtlnUGUThX2ZccxL0jrJctSy3hMGZ\nNbp3bTEc1O+STQk8UXHAL6Ah/xHKRvC5ydws3uovoXeRmBSO1Hht0o95pWCB\nQqd7Cd2tLxzvaAoYyxFVxJ9jPMUBEN7DssNPkwnOi9Wihp2pBfz24CS4QtMp\nrLH3hJMPLfEZ27HMH6/AfFG18CCOMiijgIGoUKcJzMM1uPRMpDMHShzLmAFH\nQ14R29qn7IxRvMa0y/2lApUmSnmbpMIIxWqYBMgxdSs79F7TMejNpsg01AH4\nvfoxz0GUd0vGcMMNHdSMLMP7pMiEBUVcqc19WKL9ybTXauqaBuwEevnqZnp9\nDrMYssH9rGl0QDzs0W18QBNWTUI1Bn651w9XQw4+RcATXvuRSETlH7nhZHgF\nOiUR67nuttIt3DYpdw2+jENjb6r+T+AYVXMuD1rGx17Vv5RxB0mMbHPTnqL8\n28jbJxc2Q3ARqpFYJKQ5Fz9SpqsNWWhyIJ9ej9Od8ZWbPF+736Ht5N7ReS9N\nyMuH\r\n=oOtu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/button":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/typography":"9.0.0-canary.ec6b68b34.0","@material/icon-button":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.ec6b68b34.0_1604689075560_0.7085050197060623","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/snackbar","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07db35fedb3a0a22c264d015261044e0790452e7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.b39094d14.0.tgz","fileCount":40,"integrity":"sha512-iOLEYY9vyP9GRoSlJCk51dPogTlgx7STWkb60mHrStWFg46vsnpUNReZbUa61j4W6FvNu/liWGhwUTakBQRL/Q==","signatures":[{"sig":"MEUCIQDfXcSlf7lh0yFsIvWItRmhbiHDdk/g+zSD14kEV0+K0AIgcvQDqqVExjJKa9idctkYc559V7NQ+RXKbp6KTludamY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb1hCRA9TVsSAnZWagAAB5UP/3L92ZBu+306q/w6xAxr\n9PaOeuGMjpASHfy2IoYr6ZxfDQZCzauZF/jpYv1UGNkCj4YWD4QREcayxYDC\nVLXQ94xhkIxyvFp4KxhJdJ/+xZt3YhOOX4X3uDDd7GZ8pOBwWAz5v09HraNv\nzDav4yxtLUpMpyA4BrHkNCi4wRFSmFo96yWho8qByB50tJv1yhz7Cz+/9+xR\n5w6pM5as8annRiiEiewVJaO5TbUc0vsnv2x++0DCvfjIGUlveKXRnrVJvnG6\nOLv5G2yze1NHElWa82k8H55ckslOILbjDxHluKjCFaTpeL9yJMw8i7iXcaep\nXW+zq+e6OLsI7cq9cjfq+Dky9t6N8F9/rFMSpmyd45JYd7muWG6z8oychfd5\nh18pk5fXjrvDSa/BhX9X2QOCzgeC84EItV7PtYAo81Lzma3eHlw3VQ0eEdyf\nGIgXRde5mAR2UG6plPSh9oiuFWS24LiPdgbe+rxFMyw23Y/dELEVqTAS/b1e\nTLGvoOsqywg4lrathe7EWh1m5Jsp8FjFtOuLI+6OheXcIJkiWxX8CJJwolxb\nY55LM+hekGm2DRiF71/xAks+xoJwehFdM2nziZrbgD7Cq1VpQIKVVrbYaA27\n75GWfzUkF/Npa7AwQdf5SOBMXh65glSYzyaAApqecm3Dx9GmAqpN20RBovNu\nsSkV\r\n=JB6o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/shape":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/button":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/typography":"9.0.0-canary.b39094d14.0","@material/icon-button":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.b39094d14.0_1604697441440_0.2289658163677557","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/snackbar","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b790d90a4b56761fe65d404e0fff8cc542b4e0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.8648b8258.0.tgz","fileCount":40,"integrity":"sha512-o1DJG24GaCdufd8C1i1Xr8Lbzg9bZjpPk/Kunte4fpycUuKbkiKVSQm9uxHqYwamRo8lwNqmB9TCh6KTOMhGJA==","signatures":[{"sig":"MEUCICKQ1UH8BPrQm3NNORdKkHPVCriqWHDtroN+I5OJb++lAiEAy1JkNZLt6KNXaJ6k/8zaACeymyFQBGvH5ZPlgPjhheQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJ5CRA9TVsSAnZWagAA6cIP/30tfLiFnMMAh4kdtL+9\nafB34uCJVCJglr6B5mt5zLuCju8T9aQBXD/mRhhvmscEpKKgrfevfUO/dERI\nckHXpqjNL4ohrID6Gz1SCbmipbyeCNyvy2iCye/fvkQpL1dkwfF3IxqtALdY\nwrM5/X45tz+yLU0aGLJ3F8JNs00HhnQtiBL3IQmdhVkl4VL9MMei+3c6bxJ0\nKyTUOqmzpQ8IOW26J3p/A10GpHqkBlx03BrNo9yhgblxlNajt6APJqpg/C3E\n8YLwJCE13YlbrFG6lYAaCrgzxE98X5KRUtjVj7bSHEP7j45gD39CmSJkwQJH\nr2wf2YGCGl/vpDYexPPUlZaHLZjBVAivHzhFojhvdYcDW1UGGhj078gIMh2b\nybRJH0IsUDw8NTmkjj1ko2OszS4utuDsHJ7reuhFyypBtcyxcG1qXMYQgxNX\nS+lr4dnBNxv/Q8q4zOAd2clhqPKWckxThfdlng9x+NkhdelczPIR8zmeFiNb\nIsRCJnLVP9dNxskyJusXBodN9XnLMGsSC9gJlGIqZdGWkdHJSsaUVkkwZ+Tl\nHpj1x3wsz8xXUPqTboiW07g6eEzb/TGFhyS7HxcN6x+MfT7EZDlTgALTHgyB\nnXLTabT4PvHs4MsfAU3+YzAlubW2YBTOTSQy64gMJpLdDM+v0i6hW65yLXck\n9Lql\r\n=+uuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/button":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/typography":"9.0.0-canary.8648b8258.0","@material/icon-button":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.8648b8258.0_1605177976569_0.795693190999569","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/snackbar","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be6bbe2982faf0a098c554453501e46ba9d98772","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.240c5f74f.0.tgz","fileCount":40,"integrity":"sha512-eNKEtViLbVTcNSsArDwiBp0+B+I6efgy+CzZswJO3AvvS1QwrBxP/nM/rdtvQIj4TpWDzfCcL6G0Dp1Vy25hnQ==","signatures":[{"sig":"MEUCIAjZfiiWAlBwkrdrE5IDxOuC5aGtp0qG1adrIpeWCB5FAiEArPnCvrg8XEeUj+rKgkwEMNNl+pdJSiEMzvLnYJQc13Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZlyCRA9TVsSAnZWagAAw0MP/3N+iHd5QTK00FXkf/cQ\nUti21YFrqvI/f2mUC0/MBpdKPD7Su4NiBOClgxS33UZccRThR+8SAshWGBFp\nigMaEmfE4I+gV+vUue/a3A79aWI5FDXEpmZk0Ao66v5L6dZdKkExbM4k1nwz\npW2Ppn+GxTmBqMtI4c2nnMvQGFtNbK5pwDiD3y3H8y8WQxX2OMIARLYW7Zx3\nC0hSpeRrnSY5buCkSUJojQVEAiSlSLL1L89OPEg1+ihZTyzw9zujk8LCHVHO\nUOfEN0U7bxRe+/RfRR51C9ar5XvORpurAlbbGS14vvltiKPurDrJPPQcCHRa\nEAnnvWKGxFbbBsWuYdd8RL2V8WFdKzeyerUGbCir6rxz1A4K6VrxnOH2vjOp\nKeuThJGyqvvplV3hbYSf+AwkFkirvvjBqYK62LANsIFFTuaIQ68Vj198IrtP\nEAO2fWshty4gG4fvxhSx4p5ngbFBmyjU5hSGtgfYr4Gnko93uQNe364DS4s1\nYPkEtuTGljwdtQz9voZaW2sZp6hZ8Ij1AWBXD9hIIagm9H51rNkxGcox9NiK\n1Rt7VvmqRcSIB6Blwb0pcu9JDoshDFSMFOJZcS/4p5Vh3UiTcCxgvKfe+e1w\nFHSOgOKu2WI3plWwdoTBdS98R8DgieEO1Fm1nOJPsE79qkhQ/w+9RE/INddK\np1bv\r\n=Y7Yh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/shape":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/button":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/typography":"9.0.0-canary.240c5f74f.0","@material/icon-button":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.240c5f74f.0_1605212530089_0.8873874955583869","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/snackbar","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0c7c9642f6ea11e431fb031b6e59e0a3faee786","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":40,"integrity":"sha512-MGoIldVXtzp3DHlAqAMDeN5Dvky/EliSqSUnX9zUvyfT1C6cWTDIcK22c4Z/zZKao4pfO9T67kpb0zs+Sj63Eg==","signatures":[{"sig":"MEQCIBKn1d6Ly3KmFNHt/Ti6QgbCytPA8IoEGTF+o0rhyEfAAiA+RFaDTNgJWgWsAg2aIKDk3lz3odXUjb2KrZWpwQehBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssoxCRA9TVsSAnZWagAAvFEQAIW0MHeORCBAY01r2DuC\ns6l1GXbiWawUC+y3iPXsmsOURJlsr3okOpdgNt5vBe7A3SLgYHTle4wkS4pR\nNUpeRr5n5S6ybOJ1O+T7loexdHsY8oNtuX3JEW7zCTMzg6maS5D+RyNyFJjf\nDgq487q0DiMN+uGkEYkno1fX7KIeTPGGA3HqTVkIm0BCMTaZCH4DPs+VCWAQ\ng6I4wwMLGifTeuC5f6bz5MhAYL93gSJ1ditltJSYdVe4+NOXHJP4OLIrNNeH\nL9iOnr0Dig7YDjTtGqsQjJxhtZdmbmH1pj7cyrpnPgi3715OxQCwL+VOEkca\nmdNBVJST6ArbEmuoQAlXZpNV2VC2QrK7YxuMY7I2HEggzaBfFZgZLDtS+ADj\nVscIFcgquQPyzqh7YGRQmrOjYqL2TA+yU5yxeYGIQbxyfgoJIiLxYEV8FWLP\nmObsAmhdOw4qZ1TutctQJ8oU/N0xdJxwp7cq6cYqFX0cg+5hdNukCbTcTwmZ\nqJGsbv8OgTGDnJ8OQxhjoo/CUgjRy8XJjEqoKp2CcDx6nf9FpUqBqLSCbcqC\nBfR1OTCE7imj+WDFBNf6ye1afmS10CcRNmBoSDIzb9J2Ut2djuXUInEOLKYN\nZEURtLQjuDHpTGvenQr4xTvNY2/G0Zq5GQsae/JiYvEqMcXyUhBPdaD8T+ED\naiiY\r\n=a2bn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/button":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/typography":"9.0.0-canary.6cf6ba4f4.0","@material/icon-button":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.6cf6ba4f4.0_1605552682760_0.037863302952805045","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/snackbar","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64f1528b0bd1ef355a0c1c6cdc2a52c345bf75b5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.07f3e01b7.0.tgz","fileCount":40,"integrity":"sha512-COrOJTIAwBPlEO0djRhfNCVnPTP2CS8KNmh52u8zKe+Z/7wTfo6A41haBlCF8MOp6MAZgrhxb5rblA0w8if/VQ==","signatures":[{"sig":"MEYCIQDdMMxNND7Rr49dCATlWFghUf2CRcpHKJ5XYL5l5leCiAIhAP+CByK5IKYx/WNRkd/V1gLk0Kpourh1fMvpDSVOXO62","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNdCRA9TVsSAnZWagAANLwP/jYWJQj2rmg5aNHdoFua\n49EzJEamc2YNrqdBOy2Cj/AVw76lRBCDSKNPD5YlXA8OfeefMcqG0WZDYhhr\nDSkFiRCWHPYUqj6b/ad8vUUdqgLwKTbwRzeP1aD7EztyIVA7JLaZkbz6tdaK\ns5dAm/ZK/jyr1cm7NdTeUk1dudT9Sg4TdLQ9TTXoaPEuofiCacewqz0zFknN\n5MFc1rVb1ebQy1I2M/ZMrGgOnKNojazh83RYVOqD4ZR7J2vvBKowmzqx6aEW\nRjw+i6Zt9R+l1OTuL+EVVypUYSeVvMEAocQrLf8fT7uZkUEgMiVZGS6ixD6r\nlc7pe1OWeMKjazvjSbhafSUR2FGoGqtX1BscIc7Tr7KklmAWupohXSB6lEZF\nceKIgssZbORVO+LE+dy4dKKh5LQ0Q7MKsxC/S8IP1606HugeLUcQkCOq6qLs\nY34a2phimyyUuadDhkxyHcd/2FK1MJ2w9RaypIzW+tsasW9/k1IJzT1EjbVA\nSya0mT6Tiu4i7ku0dtsWNjl58YlkU522PM3cBOEnoqXtSLCJ6FSMAx0dgpwP\nLWtIE+xQWILGIU0i80rjSJ/MrO/A3NNUZAdzfyJr3GLnq6qu+XLlxTIBYAyG\nDbxMtnb+aZp2W4I6RPBPYNoKeDUGXCKkeugB/RHHUQMJ+QSZHy11Ihb0Tli0\nsX9p\r\n=Xgnr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/button":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/typography":"9.0.0-canary.07f3e01b7.0","@material/icon-button":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.07f3e01b7.0_1605563229215_0.4644328932968633","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/snackbar","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26912d93fd6dfafa6c9bbb2733ff09f08104f03b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.23491cf85.0.tgz","fileCount":40,"integrity":"sha512-l8WBphvW7n5wdL0Zr5fAGgeGQRraJVxMQPJPDpKK1JX0oVxc7YtQvoaNFc89eQlvybo8bjJqgwR1c3y9W4kpVg==","signatures":[{"sig":"MEYCIQCMAsnu37JS3HqxslTivCi2XvaNbSpMDjGIkQnETdyIYgIhAKrYwotm2rtO7QDurxG1r2hl+wftkLO4UjYBLmxpTJh3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbeCRA9TVsSAnZWagAAhIAP/iYYETw4b/gnlqRiSf01\nsdaTjGJGMan18LMZ6nkUkiQP3BFjP8I86U/in4VJIhu0++PWqwMnyrrFvCaY\nn5ytkfjol9YlzWSVie8gLPKN+PZDGo3o9H1MjHfoUvsn9Ogr7soL74BnfgNX\ntecEafCLqE2/BIlo1icfpyHwAVlEB4ZQRe38k2j0FxjBsvf3C/yCNSu8anf2\nfGlBYp5xKoF9u2IaN2NWpMihgVZ3HWyhKcmRGFjfxclI8EhiGpx5TqN6qmks\nLDxCrUcf5j44UPkimhLVEr5huD9rjRQUWIWPJWnUHJCYdl9TJnk0W+Ed52ib\n2Z1vrEZJeIRij0+unS5GvUyQLllNAq2IkcBNyTNmIbZ6AcMQW1PmKG0LGzQV\n4ILvQAtP9jEhzPIdmfvYem2F+ww4XOcSmNUsuD1jyGa2zP7XcxUIUsNcJe7Z\nczHliFQxHXHVBm14CEUmyAbeDKQi11OEjpVqFAlzCkOHHbOss8bxOchkMU0U\niVX4YElaRe6tcUPx5gcwAhIMr1/X+8PcgZ3fx5lFgxhwSz6+syKbcbdmFCu6\n9eVaM1OhEz7XD70SXQ5oNdDrk346TAp44A7RqOB+u2vqBhGIcY5Npnke0vUW\n+buyYCLYhUgx/PMfbJzsEkStVAE4s4gOmLEHFwkuaZ4fsCsEglxlCXtYMS7C\nai20\r\n=9Th/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/button":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/typography":"9.0.0-canary.23491cf85.0","@material/icon-button":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.23491cf85.0_1605572318107_0.059341816614961296","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/snackbar","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4acaeb2cbe276113819af105befd36f14f98b23","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.b659d4fc3.0.tgz","fileCount":40,"integrity":"sha512-pR1XcqkolYLPWNv5fVy3+cd4vA3hho6NKzOJMU9ZX5g3jlbmhGnWpvTGoSO5In/3J9FSLuyjTI9o2R/ztciKPg==","signatures":[{"sig":"MEQCIEXifCI08ZgIUEuaRDVI+seHeuXsEUAg85liohU3oDmVAiAcFFHKkVHZ4qWiQgvx0Em6cGC2joJDLQBRf1GDYmx5XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxiyCRA9TVsSAnZWagAAJcgP/2iBruCCv70MtI8Pb43T\nm/YHUNoUeVmbv2y2wXS82rC+0ISEOk95Q+bq7NnLETrpizFpOBCrWYGGxBQM\nrGWQN/mPOqnffGSe8CB+5FoX3gatzncUc4Z3CAfOcYkKIDDgGzRJhKtg8Lt2\nYQWgAPFoxx2OKFY9PHL7728oD3QMcBP4zuu0Q+Zu5xouIwqwmZHvsJlhkPad\nSCxa0bSE6Hi0blCa3/+q+mjVjSsu2H2iuhu6B68J0MYAvIQ/xP5GcH24HHz/\nOIzkhEYicdzj+olsXy+X/yMsxnzgejHy6BU7i6GFil2WIGFrr5U4xmJvJzLw\ngaLkw69hIJvjazbNnVq+liH42NVcTwDt3Nbf/FbnORvwKQR35Krb+lftH4+w\nXZQLGglHFoec3T4bexsyiQlbzNxB+JCDX0dzCh6HS6YoIXtRvxJvHq7pfl+W\nlMvrCqKzyfemdfWtaW+xncomilzjeLfhDC+x+XncVQy6KDrt/rlHNTqnDUEB\n8SKzFMN8pc4XYDRkA2aHfqrGmSV4BU3dkmDBs1QaOQkxfp6UJQK4M7jqySiq\n7K/s9NcSEIjKtqNHaN/rYTsgSFs23y/+XncK37wXCun+jWDF6EOsxDm46+o1\nHR1T57M/Ttrv0ZFXgFmTfFqww5NzrQualoQypUCY5UVfuROFQ5BkEyLJFyyW\nb6Dg\r\n=VDI4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/button":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/typography":"9.0.0-canary.b659d4fc3.0","@material/icon-button":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.b659d4fc3.0_1605572785882_0.413444181065989","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/snackbar","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e126c9cf9c07d35882a1aeaf29b534636a44312","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.d8a3aed67.0.tgz","fileCount":40,"integrity":"sha512-biTqgmw1Rl+Cs3qSt3oavp2NvRdg5E8C3R6dxlEWI1RgpZwcv/HWauuiwp5bKco5GuUR8HueTzWRibIiDLZsYQ==","signatures":[{"sig":"MEQCIALViChpCnAzYJvIx+joMqwnraSX+PBOofxuYls1M7pbAiBNQpdHByyTIib6YZWFEswwXfpO2Oh4eRUzDf/iLyJbjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+w2CRA9TVsSAnZWagAA6eMP/RUyCRmlgF/LWTlTqG+7\n0rQLJUTlftVqL0uu9ElPl2/EV2evEvk9Phbel4ipVvOXlMQQX9lLsxbvkXDg\nJPT6dRgHN3t37e2f9/l70EYGl7OhMGNY/+E0dITBLHp/Rj25JtQSEXffBOF6\nH3SQ1bixwbtUblwawizmF1McKSWBLba69WlM0o/gpIlJiErUxKlgGMSappPJ\nvFC498hnBhllguVxT6rfPNGxFnfdRx//D7cyyt5Y5wON8i48FYSvEi00SJje\nkuGWr0jt4KPNT2jOeoCuCiy/G45y662pzm9jkDOmr8WMQeIezOvgpolgqwxC\ngw5AG8bl8GLLPgiyhlTv9UzvxqEKZG0tNUxgJDdHg7yvHqG50RqvRvnwxS7F\nXF4+rqyxk2a/xX4bBf93PUskdwlfvhtufcFZmRvZMYKMjJvEfsv/C/CbnQ4s\nozGwjUfUx2RPzCUKV7e+WgCKi6FxsigSOaGGg8REP+w1VdEksXvpjYvg/+Sq\nffPixoP16aT61Wi9HotcMeiQgNFQo2W220jgxFF+1/NAP6xsSkaqNkPvZIc3\nFxm0eLbtZdbCu3vx9rC4AV7zUudftBe2BrRnlsAE6LbLB4oj8Hn8Ie4QAxYc\nOcA5dSrgH9Rzh6dACM69hSUO0/sc+rLYxjskDKGvKCKCW+XR/L9GSnoeMQIA\nII19\r\n=DuiO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/button":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/typography":"9.0.0-canary.d8a3aed67.0","@material/icon-button":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.d8a3aed67.0_1605626933738_0.5147104371210272","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/snackbar","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ae97c83c891459869ab2c6737a8ea1f07e7096c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.482ff9091.0.tgz","fileCount":40,"integrity":"sha512-KwiynloDEwCFeOewT5+VyczRV0WTKq3ukbZUUDGpuDdRTp0nqMtfQrTJkXMKcCLRpX8bn+0spEur0jeyZUnF/A==","signatures":[{"sig":"MEUCIQCIkuIIUEGdYh833DaOQGR9cWHeYTJg5YUA6+kazc3ljwIgNPfKJ1nsG4pNuUf6dxh6hD+oO0RQfP9miz/+g1RYKP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA+FCRA9TVsSAnZWagAAEhIQAJFULWk92z8WN372yMSL\n4O/m9yMm1W1vl/Y3Ltdf3lqqHB54QYnYBDOvruWt77X7JGSLk3xrBx4Qa6br\nWGWsv3y2s8HGavxLpb+yLTd0gXZYVSVkkLBt/oRdionQJGQ8sWpifnKcD31o\ns2KedF1hPUhCMBLSeojPjJ4ZnDe1iSA0CvtwkzUmM30g45xiKxdWXZtkhSJs\nta8Lali5ojgabs7WcIWcF/dcLby7mM4XV5sZM3p1h0HpRb/2nNjDC4JVUI06\nAXlDAOUYsLqwSI+kLBSjqXLDEBPk515HMq8/uzeaZq31YgSCk+QnIVYREQIi\nLoctpBn/gPjxsYBjibrwI6piTPi1W4/bRSy5y2jpGWXy1w8YHOZIjhtOk97+\n1rzaPT8/XZZnqZO7PvUVyH7L2gz1Z2wGelCwFKSDUq7HJ6hVnmziNE7Hr6Ce\nvgroyJVVUAN8X6jmgmPfgLdyjDCtw2iCCTnHildB3jrG3bBHWNmJ5215ROuT\nC/DXbS44c0r8mQuGDezo4nt9pMo2JLnR3b40Am5tjbyvyN3MoUpOTpRru/8m\nNjrQMVKX88dQ72oqEj5t8JFVL+zKTdh2zLmaZmyX4fi482+gPTYlH97PLoe0\nQjg2g4IHHMmBfaHFwy+6DVtAPBkY4uj9LfzgETJAEDZri1W9lcmyaRXst4Z6\nPXKy\r\n=31AK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/shape":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/button":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/typography":"9.0.0-canary.482ff9091.0","@material/icon-button":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.482ff9091.0_1605635973395_0.5261841250489769","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/snackbar","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbb76dc85a51daeda4308f419bfdeaa7fed4bdfa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":40,"integrity":"sha512-7xf8aR85NRmD5i9yQhqPt57sBDy9Tyegubju4KwzyzdZG/FuQP+1jQHAmpolMrqZavuwnEkqxrOSxA9hcGhxMA==","signatures":[{"sig":"MEUCIHLLGW8EnS80lFNBuAGa6aNP/roemysbve5f3xesK6j/AiEA23rlniMMxP2/SXEg/aYH7G/kGK//4Ju1xo/1Juimgeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWvLCRA9TVsSAnZWagAALWoP/RotBZJRfEuVHePQr5JI\nBMBCReHWH3PU2vL5jfx1tCPPR6bDC4UNJDKKCCvvkpCKhy5Opi5dAqK7QSsA\nbyetoOGm/4bj5tc10wGwCC6AIziy8d8czbqivUi15STHKeiJJ5Svlx+TzwXj\ncd+9fkveGrN1jgoupMrleZWbthMgzb+B9eGmaUeelgsC0KUNtkgmNYzAPDSI\nxlRNujuxiS3roR22wz60tbbEvgUNYJynTxuVxDrXy5bGWawwZZFAKQ75khP+\nrxGldk7v7FZK+tmhxxJd5ElK64l3BhcsD6g12cBIGndq5pItXH+e90GqYItc\nP2ydd/S6EpZ3LWq1lq1+aL6NLS1nX0ijbokJKuNFqTLprUPdHHM304p27hpn\nZ9wmm/gtKQKiAb8OtyFwBdCobklOnUnCYZPHmKm1brXV7sU1bl6fC0yTxaO3\ndkxXx73K3HAUQOwzUnTmH4ZTiCACyVzOuc2JBHvRmGQ9PLmHWT1pSBylobQG\nhWaOIPrnLKan5SouiuTKPwDJyvTNwXiSWUHNJrDB7ZfNrM+DKZheOFU2p7KF\nUXfxQqAv/nAAOVMd4FRjHLBN6dTyyiLODBd9I9LiHzpivxE4C3xsnu68vMkq\nmK5HiRR+e5Ibov3VZ6XSEoy5Eq1c2vS5T7MGWgYge3g5uIhjX9o63VcTDjah\nXKRd\r\n=9/Yj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/shape":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/button":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/typography":"9.0.0-canary.99cfb6bd5.0","@material/icon-button":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.99cfb6bd5.0_1605725130682_0.6018708032961615","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/snackbar","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e75b206cc7e7be7fc8cbef793edb65613c90005","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.b98d15d90.0.tgz","fileCount":40,"integrity":"sha512-Z1paYCStxZ11qTGqlYl507yNLp8GMK+3qpbTZ5VYvwoWvFSoGmXIocKcS37sEdyqMg1/p5WbO8mkjTiC/huzQA==","signatures":[{"sig":"MEQCIB4MpETz8ZbB32GEswLVVyKlD+OC3YyK5txQGDJFEuSLAiBLvajxg1F36BMPs4Mrz0x4z5EBy1a8c+Riyq4izHTWIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHbCRA9TVsSAnZWagAActEP/0iElVIcZNqNlMSV1KDb\nRfWsVZzT/310Ni2vQbXJv/9HnGzOdqPdrkxYm4pYamn6YtxgN4Se9ZUbP3Ep\nsAP2poTK5JApgQ/B2cF9lIHw4OMw+accueBVDny7A4fpmqs5MsJPnRvU6UZ9\nwLNh3/wD4GhWQrjRjgskaXHPDNbZabiHFlbwsxReD9sRgcUq/KMstZYuYJ99\nt4Hm3K90r0oB6QFUE+jSMOMZ/ol+2IU6ixWul8Ddu6EJNDv3JKlJDLciZsY+\nfMVQst2yRagP+/2WIZmiY475m4xruWK9i3YVjdI6OjjLsy9X97GmHOAuAPxB\nms+I4nLErRv882JmexzbMerOhMNbW/zGpBCcO3fLdRz2q0ZqfDcjWgq/Vcrg\nKz7YQoSNoch6q4iDbxQ0USCzOoIytjNFVKwaoYO0hA20l44q5lh2Bn4AAKOp\njFzXD7kb/L6O2rSRGQz+DZ7ZW/F1QAicid2jjgMvFqLU4C0Xyz8bycDppCEo\n5NFmIk9IhN4kHMKeQu7hMagVwT9GIQbrvEydRSTRGWsulPobfhQKoVn3wz/T\nVaTV0dcbNDoPLQz6E/0HjFY+JF8PU9gcB6XNWEDWsRG0m5aKY3AVN98FedkJ\nAfAUaQq3gZqKIrA8Y1ZK3a0LZrezvu4ut2fPmWw3I3L0CPFT8leb4fmDl80j\ntI2m\r\n=KFXq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/button":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/typography":"9.0.0-canary.b98d15d90.0","@material/icon-button":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.b98d15d90.0_1605738971186_0.4947485398638596","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/snackbar","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64c7ea9e0d551c756b81b447e38e823392b9e3f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.30c11bfc2.0.tgz","fileCount":40,"integrity":"sha512-ss83H3UpD0aFrsWTLtY+lkkNxQOgn4cOZVBDS5H99HQQ+KjsuA0aFsMpHC5pf/95PiEdXbDeYLvncwe8uNvadg==","signatures":[{"sig":"MEUCIDt3MdkvXm5sCAs96JVahN/5p8QsxXIn/ZCkC4IvvTwNAiEAwkzLfM8MsJe1ipAcvj6q8Nb/tB/q3+AzIEAKJ651Gzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcoDCRA9TVsSAnZWagAA9qMP/3HUP8BV2g8Lbog3TKWT\nndj377dX6Eoy5Rvv6ICCNgw9OVTGPJ7YFac/fzsjph8vMd7Am+RAwTAq60kZ\nvyrb2ussRO/h9Z0Zhhc4b+df7PM7fxMJ/i2qzKnn+HtZv63O+SfB52JJQ/x3\nKcSnAjnZxiXvMdDTf8wryO7ignGdoHZ2bUCqPpIK0OWhgg/4HqG9zbAnO8ix\nEvCOy+9C8Aaq32jVERDf8G1md19Hc5D3IAyKw/IUWB+Fp31rP4tBIZ/DIFIk\n2WcH5n4eHHg/UeP13shXtCL1T4vavLmyPYZ7uHRem1u1KfosSs7L7SJP90zb\nkDMZb1QCK5WK79dGaAi9B9HNwdQNHwOzrs6+VZWxMEJG5NIufUe65rUHHL8Q\n3ReTX0LKx/FjI9E1Ospby7A3LyfFyvNsoQW+Vat8tzbEn3r/pVWlxYr3yquB\nl333GPuHah6XQeGAQ97iha/w/TeZsHiGdb8WGkDf7koKOf/tt78V8vtbUVBw\n4LElMOPRuPhjBRFfKBtjAvgLF/0OeubGcPz+YRM7fwmSOs7Vd/l2wzawrvOa\nTUUj9+fNygV9SoMIddte2riLYOo7+QvlW5x6r3CT5qcO1J70qBVJlRcu6hyK\nIpvT8/AT8iJcYRguL2RtPM0xtQZge+mjL18ttlO+3f/r/cG4zx70ifqqqVFy\nDxTX\r\n=ar+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/shape":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/button":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/typography":"9.0.0-canary.30c11bfc2.0","@material/icon-button":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.30c11bfc2.0_1605749250771_0.6616844221727927","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/snackbar","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa9f3c533033f1e1c9e23b5cd37653a3c8280305","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.1b731d51b.0.tgz","fileCount":40,"integrity":"sha512-1dmUT+VJ4nsHG4OKx0xK3vO25VZBFgrfz01yvjxJPPuqn5yo7pfdvLMIsXzkM3r/ZxBkzuuLMWhdMwhD7OgZVQ==","signatures":[{"sig":"MEUCIHkmQXutKMe3wE2q//PFMvlNbhTk0MC45V4LG1HkiHWqAiEA4xDNP/u4ZfeegWOTHUEmHX+T5AZkCint19BlvXrvGPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr85CRA9TVsSAnZWagAAup0QAJHBbR2W9Ovgm+gj/q70\n8ZbPAV94UDqu62wTGsfhb+zL65TAoH1cxkzt+doapLlg8An9djxAlfFrENu1\na9Hcznl77NEPTGcITkJcsTNYCK7mkmiCte6m0feM4SOtAg3sY3JP41MopJyQ\nNAzBLuxFq8h+4fhzCnT9nH5fl1co/S7TFyzljAR2iqqIA1jcwxdqhKi7HU90\nl75WsAXubCH4T0LsfemXqZAQERVG99HI9ob2VstDhsT6sb49RGGl3dpg+q8U\nJNhC1G7eilLLHkEOZTtCyA9SEBKkY3Rd+qMbf0TedKmbgxL5j+BvcpJ++Gsv\n0Zk8/JOy7wt1bk5lCnFciuPysFC5A9u4eWEL+qGCnMLxSXb0c2B+sOasVugR\nCr+nJSvrRG1V472GIxYGqBYVziFKukBPf5VZy4AvlXSgDR81OoMH66MkFsCz\ngObD022VjIRaUD3LRCcZgtgUMLtmWDXrKlA7MMUgnSI+d0xRmoUMoepsbGlc\n7IMQqUIGnHIPd45tjRU9sNwwput+8Kig5ZeAunhUh7aA2lmBrgA+8RhDWlum\nxvboztigCcg78YJ2nht+GRNsdSRVV2QUJuWGwxrpr6lydS6d6uJDUBoGcGVt\n94UscPi3AOhOZ6DxuLjzVjz1E3RSccMg8Jbv0yFjbFv2RBwckViXH+6dxH5s\n+qsv\r\n=1cGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/button":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/typography":"9.0.0-canary.1b731d51b.0","@material/icon-button":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.1b731d51b.0_1605812024825_0.7535017934678572","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/snackbar","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e453c2986e41770c1c77184ce0e9ed47d76ca4bd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.4ae94ff78.0.tgz","fileCount":40,"integrity":"sha512-RfQ+4T4nyTxCDeaqmSNrbU5WD831g2xGnzZEJgO7RedZjeLaQmBff/E8iXDLIL8p+AOkxgH/TVHGn/BrIJ3mtw==","signatures":[{"sig":"MEYCIQCM1z2iGd32UNGEPSb6j4wTSQppbhNsV2AgT+Y72wmakQIhAJD/OFmRqilQqOGJO+xVkUSyzq6OpmK7kXT74/36CgqQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/oCRA9TVsSAnZWagAAU4gP/3Mqx2wRyroX9xqfAquZ\ndXvAkmpTNGf3h05LX3PEe23CCLyZDh2euvpK6OipE6c44RqLHG92SC1T5bfi\nD4rFjrP8rNv/cSWF4Rjw51etmwX0o7iJvyznhBI2ZlE9f9JEQVKC35d5gSyy\np1Pj9F+No4+svNqnPtEdSFBdd0/nxorKV2oWpMkvto7nEPwF2FNuWdlZkCI2\nrOClhkY5AkRPWC22O8c45dE8Xf6obvM92bP42ivcHrFprvfg0CrjSkZ/gkln\nYwJsnbA7G220A6bdZ+qexY7rzqmSGXtBZ9U/stMj2g/lZAG9vC/I/pTnlIVI\nl8CpwXwtyfUzPErCXNixVe/927vPywabbuGR+WSAabVpN78WGmx6g/ZGNoVp\nh9oL8oaeGxWQnmEwK553xGmwRAYN1lN+PK1TGW9L06+hSi4cZgR1Met4cllY\nuAArlc8P3kQMmury5g5gygw+RgY6+4JBm2XCz7xxFQzls4fIyS4ah3T9Y+vl\nybLKxOrLQ92LmkUqISLre4OBQfXqJvZgmnsqppVSgcY7SxbVhre+yrdYgvos\nHBn7Q/Lhrjc+ITReNOaDidtYqYvDDUURJQL/7Pjdx1BvRHBE3DKWjQ9HM903\n+S/PvqDoFb5/KloEIaOXhwvJ4ee6K/mqaPbjyJSyNKveE7hPS8WP915yewwN\nmR1N\r\n=5GIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/button":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/typography":"9.0.0-canary.4ae94ff78.0","@material/icon-button":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.4ae94ff78.0_1605812199589_0.45943516486013114","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/snackbar","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0904b06afd1f41c8d78ad188345bbc6c4669b28a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.7ad038e1d.0.tgz","fileCount":40,"integrity":"sha512-T7cxEhT129Ecv54madn7mR9VytRLos6GLmSiYKeAlA2fHpc3o7VSSJujeyQPoquh6S46PggWJfYryfqddFb6pQ==","signatures":[{"sig":"MEQCIDIs5sT9uJqTSSEhYlWkvAunOmg1VpIETlsK8X+Zz/yIAiAWP+8ajVgqnJaYz36ly9nd5SNHYlB+XgMX/XCb6Jk+3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsVRCRA9TVsSAnZWagAAtnYP/Rx/SWHpxIXsQG4Etm/I\nZyL86TB+u6ELQp/4mvx2zLNbdIGIIjLAm7vmhsez/J0qc9pjW8Gb07cigoMJ\nSXcC1c5pHynTzBtnLRyguO9eDEKc0ztImWFmLiw88jlrkF/YuuNHrQs3VJrY\n2AFwcJhP2sy4EIdh1cRBEb5FaprVY2QkB+a89jVmL9AmFgqZ0xyhAB7HSy50\nG1Sia9P6B/c6Kxmns/rBpA4ihrvtFYWem0izmS1ilj2ZyFxMuCIuTqQnupTZ\nxCwkIj4e2z++oPueUt2YuBQa8kLVgvigRSu9heiiM6U30nuwporvb9Z2nPhz\ne4kcmQHfbner+ur1f+MeBiSIs+hTwiee5hbdPC/ojOiffUWsa8EuiSKYlVkd\nQBuq83glbOxlgOMIVuT3gi+PEl0r7UngKYXPMhU7UZ9s4XrCN635VOd83mr8\n0qT2t1wvfrq0gsJrUZiXKROCs57cbDWsiPCbFeKIGgG42cDtlA3ohbg4hfKK\nsJYXUZatqjYCfz99tHf9TzBR84cOTLExLDJ2m7cxRnXmqSrl5XCQdQjHFk24\nPvVaOT/+en4E2weWRaAyl/H7nYW/zjSaROJ5rOFvKoWbuxlqFi1HghxOLSko\nIbF4mxdtL8VK5t/zPnYJ1r3ZC6TMmuluB9rV1CwljjbESRFfQU3YiAGvlrLc\nresP\r\n=XdE5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/button":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/typography":"9.0.0-canary.7ad038e1d.0","@material/icon-button":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.7ad038e1d.0_1605813584441_0.17118529715778186","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/snackbar","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5589cd3bd9fd28f6492dce0be7fabaed0e9630b2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.a41527604.0.tgz","fileCount":40,"integrity":"sha512-MIBGfPNhLm7xehBgWCIk+vhehVkNyYZy5PUr5v6GnRa2JEy/eg/NkTuNevwC3GR7Qv6CeiVUp982l04b9oeZnA==","signatures":[{"sig":"MEUCIBScwoLaEW0MBtSWcY6UijBUVZQbeCu00+LynAcm+Q1BAiEAj/9eC25tRp8IFvAnpP4DTOHhO/0uKaXSx0TPgyCWi7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts9YCRA9TVsSAnZWagAA+KsP/RGMF1Q95HsVjTROqrth\n4Rit3LEEM6PTmIJPadoEhqI7gbMV3cSZCfphfaBwy2Uj/l8PzZBG682oTVKM\nVkvaw9hS7uSOXkfrjC43dsb+lS3QB9ZEamtjmgxZ+1akMmH5furRrlIvi7vz\nM2u44gQB1D354mywFJHC8DSfXfsRW7LyiLObrF9cIkVNrR0zYIPT6/l2x7M3\ni4LRFbdMGI9qIHZPCgcsKl+2CEgmzuvec5rhk6eeXlxbPuTcpUHi7cskMR7P\n4zjj54/CyP72pJ1BsM0V+ja3lcP1JJtWCgg6zgTJjMt9oyZZhqrnBWgl1z5I\nvtQtSbhHT4wcbSPgrmtZC4ZfCeh1VXz4jIvMj98s8vh9WQAz71Ck8LzzxYip\nvRD4EgiclK2r0OaBTtS/EU+fFiDVC+o0nX/TxydR7lnoinOzzymM4BRlmOP9\n2bd8aHE1fOsnnwXFJFUTRjCX9AxACboeV19emQ/wIM/xfFDxuWp2zM2vAPaI\n4KnCB7mmeJ0vHVQBFYvE22q3im6QX0XwsvwxGucT00MKLiSj7qZoQvyvLyZd\nxL4uGdGGvS/ObgRMwjan4f7EzUNOtTcIsV8kJA37dsqlYVqpZDI7HlcnuIVR\nZBVd3Ec7WeP6hKhe2D5MMH/bHa91Z0p9QPOiIUOscFBdHjiLuoOiPEinJVXJ\nvzK9\r\n=7gBi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/button":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/typography":"9.0.0-canary.a41527604.0","@material/icon-button":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.a41527604.0_1605816151353_0.34379176443561876","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/snackbar","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"069b411cdc6b9d32ce163093131b969bf34c01b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.7b0e2b377.0.tgz","fileCount":40,"integrity":"sha512-YmnxfZaiNxB/Brdhb+gq14EthENqI96H/WhofZr0erBc5tnh/cnkjjqF9In2nmvWvvKaM2esqFG1fovrQyVcaA==","signatures":[{"sig":"MEYCIQDv14uIcRyO3Pa9+8wgp0O3ibT/RN4wzrDF4IkxItGtKgIhAOU4NdYJX02weCbzIK52Jc/tj/zudfIK6E8uuaFtyLLB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEnTCRA9TVsSAnZWagAALfwQAIfAu/HSqlcvp2Sk+OYt\nl0fMIf24bXlRyOrbM/4oztf0HdE1zwlzRpOkSXjQKOjw6dReoETlhNliYf0+\nsWyeQP64DiALXkyo62ZjgrwwqjppLIFBI+0F/lAskQnxJTHE+Vj+a1RcBZf6\n6JQNiPI1ZY/qS1D8ALDfceIuzEWGPLCr+SvjQHqkEgeofi8YHxy3T6Fp+Iwl\nNKQQ7iIcz6UeooNXdhQ6Njh+5vHOsTuSw5Z1iLT3ACgYMI+zwfFY8pfUQ97i\nKcZ35x3LDaxwMz0np+484WTp5g7cTSZxPiJau6BP6ZXE2imORm8R6kQd+kRS\nOiQ6PyV+Q5qj+NhzY9UM5hntOjxPtY3quCP8tg/pczXW+CUoUeuQY1ZoF0FD\nJxRirHd1n9k+27g+amBFkgBYCEzuf7ak9jisgTapf1YDfeOzHQ+IVPlu6fUl\nNmf33z1s7Nj3P2pHslcqrHyArHYGtNjzzHqgufwVGO4aJkwVVIlehfu5ycYl\nJJtjCCU1JIS3SWuLTv+05546nidhfahvn1KtORLerpeKPC8X90w3EBY1S6Cr\npjd0kOOn83nZDPzc29q+7gbqAfizws67wz+pEG0V+E9Q7ax87M+qLtccXGa8\nt14x7G2lzyqb+rOO3g8G7BFP3N6YvEgTSbnCek+mrpkZ8z2iDKtdyPgTq7Te\nqO3v\r\n=X2mW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/button":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/typography":"9.0.0-canary.7b0e2b377.0","@material/icon-button":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.7b0e2b377.0_1605913043443_0.7727128478299934","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/snackbar","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d4ea0a1b8868a30ef40fd5c45b8a54646b8594","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.c927a5d05.0.tgz","fileCount":40,"integrity":"sha512-QV4liCTJbxmxUAPfwDA20UQxuZfsGmoYzVyVi4kVkHYRyxPVUJI1zrh9RLi8VXw8l+aBIv8USi1OouTKHskF0w==","signatures":[{"sig":"MEQCIEsiNhSN6oteXXMWcAnxegxweHz55uHs6TszqhXniL+uAiBgJ0FJBtScb/sBoo5LrcrNWhCRYCl3C+7Mzv9lWp3QfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBItCRA9TVsSAnZWagAAZpkP/iy3eeIeQsXwW774b+sb\nN5o5kitxODmBG2kBjtpvZC6MYfHy/NtbHGGfvWyWdWtMkpvCm5zwQ116peuK\n3HeAMc1BDsOy2TTRftXnZbaXp77QmCdbbbyGwFJ1Gmd84/FdZTjwkj0UVxK4\noQNK8JokzC7c0YFa2r6oS4191YU8UvIyrDid1UE/NDnR0B2j7ABvhfBe2Ery\nY7fQEznPtQUgXiM8bM2FQp1U9q9povDMRJy2TbtUcZNDVT2kis0cev0mR3DU\nd7JAqc4yo0rVO4eZtM8ivrNl7MmdZAPYMgw1teMOUfNtSnkJWT4MhBoKJBfl\npsVWWzr0MRXXx9GGDzPXwOjVVK7stufBn7odVssZtFmOeizUEh3909tzDlMq\n9p9v+7df8q91LPaQoOCQRAKIokfagzUDGXKJKfeSSthB99saC6DBjloG002G\ndhS8juatgLTfVQZqZG3ArR/94POwqWf9lFOO++IEKl9fveZPBf5V9/ELVs34\nwR+NLL8pKX6+7eAVmX4h4BeCkzRIASSb11wy4fJmN/c4jI7KX30Md+Z3zyoG\nT4WxwK7vhrzqLnnRBllBNgLWraPbb+rikkY8vcNHlyzQqWVMpznNAsGZzP41\nN2Mk+ODQzqAUA8h8sdnVcy0Y6I8HT1tQw90kBO95o+g6XVgpGK6glkj4JUZD\noS9Y\r\n=fWJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/shape":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/button":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/typography":"9.0.0-canary.c927a5d05.0","@material/icon-button":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.c927a5d05.0_1606160941153_0.7165314431778955","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/snackbar","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1330fb3db92eee9c40aec11891083ad3b4f6d39e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.b349b5185.0.tgz","fileCount":40,"integrity":"sha512-fKAXSOILbF4kq2+LfxJ33yRJ/jdDVO5EqcRXqgoqsLau5a8tH2I2rSK1gQEOF7edto1k7uqrqpaWpbi18qtm6Q==","signatures":[{"sig":"MEYCIQDTXopwGmdSYzv1mrFiHB9ouB7e+7vdTFqyXqKnVEkU/wIhAPVYIgJ8e67S6LB16S8RXPWS1B1P9YAJm2u9X+O3dupC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT58CRA9TVsSAnZWagAAm6gQAJcgPFWxbpWvrZWlHBMx\nHDl+sumnsgvJVNQ4xJV6tPhF0VFQBwdqC8wmeDv2Gjt7NE9i5HD6K7G1eNco\nXSq/xU8K0fjBiR3KI1raR65F/YEG5i6Lz4L5cKIs/lcc7Os6vTo1J9AlOUfS\n0GJDdMmlLbUsD1hI7hAZg25NM4RRLfiUv/I4AhRdYFZrtSRQS8YZUSKEIiYl\najqjhhwWg8F58xAGE21IBbuP6Qn/oGbuTfOG0MTAymObqyYRYLY2OBXgXbZH\n6CJUZSx/BvPDD6frIokgM2sJcbOgnPCbwX/LGZK0PWPO/renEOhJSblnR3Xz\nmbH3OTrZvRy1+phYmWlI6NCsZWwzN/HWQKgWUrrafc9aCMhzfefpN5akrxUS\ngB3Pvaq87D2lVbOm+uFfexppu7jQXaoweAiBmBLYguutLxAlIXIP6r0ukbID\nJylTt7ne59xsgHOS0pg6MLWPw4+okC6nQKgT/xpxW/Tpce2lzDO3hYhlx2VJ\nILfxmwAF63ekq49F3MfmgJMkr1HaIw4AtUOWw5XSZhhzdxtoFUe2I2xpKl5b\nFMbAXsWZNeV4kkLhqQ6AGO64kLuk760MP5PywCl9sJonjY42OgZQ16RBtjhe\nVRDAx439LtZDATelRezrfmq0oVJB1k0K4NJOj6yZnWs8Tf6+HuN1lLaP4p0q\neM1y\r\n=wfeM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/button":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/typography":"9.0.0-canary.b349b5185.0","@material/icon-button":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.b349b5185.0_1606237819817_0.4211852013881441","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/snackbar","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"348bb118086d01bf9e7f41c2d6fd8421d47c08d9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.9083b7d61.0.tgz","fileCount":40,"integrity":"sha512-OG41n/tujcCA2EXpMnOCE+BAwolZQOYPD+hGyJxDkX8KmxwT8MWr8qNt9dLT2WSAcLy4LFH3tKfokRdXa3jqaQ==","signatures":[{"sig":"MEQCIFSPMd8FzAOgCAVIiBcyWoGqSnuXdYGGyEUx2r1ggg1vAiB6GEiWBwowkiVoxFohQmMptglgSq4HE77TQxhkcQvD6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXhGCRA9TVsSAnZWagAAf3wP/ixx60oz3AqwiwC3/dWd\nkVh9CwPPwzlMYdkOCKteMuw7BnZmYNhlLYG4FdDQghFx2Ex12tClWgw/RqT2\nfmdYpWHv8WBcrv0Z8TAd5dXzY30+okTb0h+p0nkJFqt822KW6aGx4v72vVDE\noLexH0rKCjNbg1d1OdaFYCBSh4bRTflYOU9TwCOaakUVT++v8npdvRLc9QXE\niCFDtzZ66l291V6hFWDRxbQFY8rwxX+Z5gE6TN5G4N207nAO2IrJ0W0T9+fj\ne8Npp4VXjgtnwzlT6j3AuzYvPASaf+RCIWa0AfGP13xn+oITd1x5iw99zTPM\nwqNjNGXsvcAIsKZBKFaFAT/yTFr8iQjxPlVsdAeLSY3QBIB9RHVfrKvWSucS\nEOp3Nf4rDw46GeXOQ3q5JmI5JXwXX3rkfsCD4d87Z/paNLsJlXYZXY5CNTPH\nJacIMtPPOcCaK9QtSAn6Vh+gXy4niXQnSJMlxd3eywvWErxBt7LiK5gMIqJq\nKHrWVPWj36+A+Y/3cr2Vex5v+C+MPFGTqNfJOzKm9zEK0WHj+ZAhOt5V/0Cx\nPA7aw5FxohqB6LKUen8DflEA/dCPJc5lPKmYRYDosKOxJWbQQqQ2bLGOiex3\nV8sG6tsBnEGEeg/ENeQdXPwiCeu97F9cGnI5/uIMaDbL10HJTdSZIZsIdS/g\nm/Jp\r\n=3Gtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/button":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/typography":"9.0.0-canary.9083b7d61.0","@material/icon-button":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.9083b7d61.0_1606252614234_0.7836318139357159","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/snackbar","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"239848f3b08d4c98cda342afa9ecef073f176967","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.eff7b46ac.0.tgz","fileCount":40,"integrity":"sha512-PTo6r0iwfap+iKm8NamesFgqrut0IycNxe/4jgqAf03yBr0pBWvl8uZRjENauBRHfaMMdEXOce6JxNu+WZBO5A==","signatures":[{"sig":"MEQCIEA1QSmB4/GX7FHWkYdpRQYqT/LPQbiUSscfI1gB63IDAiBdQI3Zk9EFejk8MN3seKD0OGY0CmqOAuDxyNgDJQiEng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZgICRA9TVsSAnZWagAAAosQAIl6Wc/Zixu+z70xlkPe\nomAyp5xhcWKVJKR0eJ9vEy7tmkWEnBTsmcEyX7/r0g0HO0ExVXTQtr6hkVMH\nN/OI6BzfTG23ZrivSplhMXM2nnVb2XwmWBe/KTOHm8Lt/deN9Yb60jtQhLQW\nouMn3LUBeHL4PXVMuDq/AnxQgV4AkoS28/4gFkJaqPnxbnZswynUEZOljMhH\nHT9i2DL1CpVnLvdd8WGs7OMHpJErjjEf1qXUCApOYDXNZmgrJtwHjGSg7wBS\nPS/Q3v9VbnZFn2h4JO7Ci4ozZsw2sf2Exkqt8v1ovTb9RPY9Bn4OWFG+CUIU\n3xRKrRtXOcl/Aaqkt5RCx6CANM8EbGMDHYVgCoaxTPL6rv8bcj6zEE/r8n89\n8m7c3wAHSBslsxybsKRtgZ08F5akts/xEVzOKMHx/hue8pL5/DNfFo4B2c+I\n2oLczT3Kh8WJ8JcPPRjfA5NDa+NPjkw5y2W26B3s/HdIh/Hbc9TlbD1AQxF+\nTp/oWAH9ayLrYWALbljbbJc1dOGmb8IWgHhbw2bejpbVyV2u1IPLirOrfxKx\nRCOYjMlOYrf6SWr5FpSxEJ8vLoLUGeP+5e9RgPfZyix397uh+Qe30AaCZ7tk\ntT66Go3w2VekPy0jVL0neWTQuwQNwCrwq9zxJMXndhptfg5WSKNsyJVMh9qN\nqdcQ\r\n=IKZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/button":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/typography":"9.0.0-canary.eff7b46ac.0","@material/icon-button":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.eff7b46ac.0_1606260744054_0.21894886314225004","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/snackbar","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1b8970ac30ecc0fa68e0de54e773fb244913755","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.ae27b44b0.0.tgz","fileCount":40,"integrity":"sha512-N0SSkoDoWnkpfN0cCbyU1m1MDiMJua21gyg4d985c4IiC0f8ptaZnqQAuPimlGnj8Y7zZTTEtjku/yHCKpUcWQ==","signatures":[{"sig":"MEQCIGURvYU/iG58ZtVIOdriFbOVH95XBc/klwJ/WPtG9YcgAiAWtuSbOsyz2csF3jWpRSA8ms0AQTwwLFWdk7m5LNp5jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnnOCRA9TVsSAnZWagAAah0P+wV0jFWK8R8xgHrc4rij\nid/8qwbahC576riCSfFjtzDoG82XhheyMKOVgLUaJYzH3orxutRBmn6qcYT6\nG69VgQ+Yz3zg6mCidjPaidQv9ynoMuK6YXCSfXWBKGW5kTYUcZ6LvVvNR2+s\nhg99kS6MGBANOZmqxilBYje0AGmvhj2ZQTXyTkXEN/yXyhQ/cjb+JVtjXt2x\nZF+5bwzwO9ieLBLHMUV0qUOD1y7qZ55DZ5PAkzH/VecR9LFZCACr89mTdrcs\nCXAIlMqb7L30Uz3qP40Bla5L4IvKC7luwwEB+fMTor0hB3TCjLGqbnZJXxS3\n5mM8AY1ssb3gvmpCI/SKgumu3ogUjveXJyZLrLOV4tCIv83ZObNPoNlBZG3V\nl8yYCYFSQ4a2Ij7mL+ohlZ/lAFBm2EmYWz+p862VA3Av61FSj8xL3AaGwli1\n0+r3CYoq+TJTo6eymWeBe+JegeNowtbofwzPmxQqAP+d6JNnPeAB3zg59WgX\nAuT1xqRCj+hE3YD4lWGeONmOyQQx7QWE9UhxoHv4JsT8fAtcOs1VLxIKsmqd\nrFonbyqUOK0dGe/2YMrwo2kBxT5SmCwn/Nh6IIPwDyv9b3iFcHcD/dLtIt6v\nBKx8kwh7pQdEPSGOkYyyRmKS+X82Q8vC8Eps04PwFgVlNhHLxVtRfvEmK/o9\n3JPd\r\n=z6VY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/shape":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/button":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/typography":"9.0.0-canary.ae27b44b0.0","@material/icon-button":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.ae27b44b0.0_1606318542410_0.9364788565304256","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/snackbar","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"525725854357aa0197581050dc889888b5bb6399","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.2fbba2554.0.tgz","fileCount":40,"integrity":"sha512-vpGMsIKsqiEk2QWpTY1rRcKiligoeoQZ95y454LHWT+MtvNmwizGn0rVGv3h3b/VUCZoXkyw9pttoz4adQWWhg==","signatures":[{"sig":"MEUCIQCX82K9uIRgvoYNC2pFmvaJFlXN04sh4y/uUUYgybGVfwIgTkAZZXb2cyKV/4pM2VAFiTZNzZN1T3S44H4ifpKgRok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7ZCRA9TVsSAnZWagAARroP/RCmV+44OSooKY8SMRX7\nzcbV8By7McrwaMPezoKOyV5K5wtMlCic55Gjpr81ZKeDGCm9qF+wlLP/v/ku\nMMBFul1XBkM7IyN0e/oQkXA7YxeGwro62TpxDYAHzgSaWCnvsMIpMJX7NVvO\n3ZAPvB98tPwzBLGl5230ZjPs2O7rNyLMc6sQQI+npJyMn9aSe3qs5BKZQ7g4\neEyop6hzwnhyZDbj0Q6DMUOqUVIWaay3A3XHt8p/yjN5wqY6xF1fVy8bu5kr\ndPCp6oVN8Exm0QKuTDi3CWvGl+qFmuDiAzrdjzYIuFBK0oIQSKfUDEzUapRk\nIeMCjSUhwxj0Ms+W/D7vAMPc328ujOeLRtNhrAnoFYGyyj6Zbj/P/pzoICqG\ntEluigbEMwYQPIW2OI/mnP2JhSEgxwHkj3eEvbXl+Qh9GMz1IZwRARr1zFR4\nHjQAr5fphOVHjVJjToTugUZpncvuEcnk1wjYcyRq9KEOjAQ58X/I0H8JKCDv\nSq/MCTRMZugUUL97O2eT7QUDLYD1QCX06Ofw8uP9qlzHPINPA8uAgIeyXEBZ\n2gVgbfFCqHftAUeIimadh5TRwjxDGXqVS65OjORTXaEukQP3WBwwlWjl3YFa\ni5st++iy3Bhh3OLkgaSx15lFvSC4bteEAPR67irZvC+dK6myu5aMvTXYGG4l\nCDRz\r\n=d2Pd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/button":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/typography":"9.0.0-canary.2fbba2554.0","@material/icon-button":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.2fbba2554.0_1606758104520_0.5952563432175404","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/snackbar","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"221c511c40cdf4f23c279f615e1ac30c893c95df","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.6d8574fe1.0.tgz","fileCount":40,"integrity":"sha512-6J345ToUuWUAo5S/zpM4p9oNxVwhPonb9ShRxkRchjxGid63Z9fvRyDZRUZHVSVV77fnkPBCyyz/9glEFLSfLw==","signatures":[{"sig":"MEUCIQDRnsiUBle00ZFVumrpo+lYKuiiVI77FM4T8EOKwoIAWgIgJskLYkWjJyPk9+tz9zoC8Tr5SMtE47raAzTzz6E0+Xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFnCRA9TVsSAnZWagAAsuAQAJiCHnwA8ELgMGo15bWN\n/sVVLObhNQZuW5Lvj3DbX4PFBOGQ0C/l6eoHtA/S242pY7/xmRu47NPOWKuJ\nl/8LSHDDYEaoLIVRIWBsHWzEZb7Ei413wSgdbkrfmfwsj5e3oxfTCTlptEpX\nm1pZsBvoq3sF+/UKgSo45lQRRt52qa0uF2TyhnP8VUNq7RbfclAFHU1g50GI\n+Rh2vu/tP2h72OY9++8BdV3NkVrdkS4KOjYCzLBUKWQ6+DqZSY5IjLtY+psN\n8Q+LP+IQxkrT6eF9Jv92xN+9A1k8DmvR0XDLGLA8CCXKEQ/GPs02BaiHzspI\nmar2n4KlqSJvx5nDu67x9c1mmSTx4aE52LRxqIu7ZVqcVh+HGjUnIUzoo/A2\nGuNl6ba/Th8T5ZSDYOalAZerY4QWXSxHsHdSazn4oIXveDvpKToN4Yne7O2x\nolMz8UVfz16I7Tdra7u7Q0kRz24EuMpab6JftR5yd98qmXjhDYlypjdc9mu7\nG6HOfvY9MAQrr4cIa4QfTkxCPMYJrJVJ9jHfDRnpl1/kOs60d8tLd99v8i65\nso3xHaMDhR7UzpRh2ZECM1nIUgrPK8Gb2d5nLHWDWrzoM2SZkX/MrwX27GZ6\nZPgkNdBR/sgt7/x0n/x1l2AGaAOAJ5UB2M4yYi0WODuVsU3B7242DJqXJBK+\nGeuf\r\n=t7Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/button":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/typography":"9.0.0-canary.6d8574fe1.0","@material/icon-button":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.6d8574fe1.0_1606758758512_0.7001665336911114","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/snackbar","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3b733d49476e093c750497b00cdde23d9ecb79c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.fd22355f7.0.tgz","fileCount":40,"integrity":"sha512-z4bCIgjLoBcfJ3Pq3BHZVRdf2TkP8RkTh9gRFbB66h1fN01kN1M3QPzfPtzPtAj4+6kEW27uQ54yEMp9U5XNkg==","signatures":[{"sig":"MEUCIQDBmf62WNhBnTP5Xp3fkdW81VnknCLaeBQm6DpI5BmOtQIgQF23lztdnMrUcljvdTmcdiJKzTXao8ezGtSm1TgpxEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXmsCRA9TVsSAnZWagAAR1AQAIeSTQEtYcFTIx/hy63e\nCL69O7iN/sYF60r8ONfH0IwO5UoerHQcX52elEHe+pVKwgraL5vA2Qug37sU\nHGZjkBt3W6i7Zjr3WJLY4ReJfHM+wFBvgKfdtWbLZvrLQjszQDB1b/dk94i1\nnetpervlbJFGPX271ziLTP1DCOFkhTtc1/JYJ1QCojFm94QhloNvvFDJY2YE\nLQ7qTjGzNtGToQDiMi2T6ERtgHUQgxaiESwLbtJFr6qzQhKbkKj0PN7UW8Xd\n/WvfJwG+b3wDsOZXt40tJ9KAbHt8tXhnRx79xh863i4lfCQeqJnjsMbE3P12\nrK75d0+lmX25fJnugREStvia06FFVtXy2kt2rkwtMcojzyisQNi5yEhdsus3\ngjDhbL3MzFJ/M3mczlfYHwjJgXU/ixC3EomrRjd9frO/0BJXZulAhtJJYBed\ne7DjPOXYs9tW4N+EIGlsq7dDDh2Z8n3Q4tx5nw9lGfDUIUqtYKOO/VgRwc4E\nhw3sBPEkk60sADl93KP7wPcZZigQojxdCbwMCEmjytbvMELAS0dwEJacclwf\nSFWukS1mL42VJ3AH1RqATKjldzx9WTbrHfhx4ilBdZVeA21EGTQ6e/IDk4Rw\n6u/bjCYwmgHLhjFf7bpDT1Agj17wdX6kgzIEJoyWI34TVlVPe0L827BjanwA\nSxrV\r\n=/K/Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/button":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/typography":"9.0.0-canary.fd22355f7.0","@material/icon-button":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.fd22355f7.0_1606777260398_0.6596844298145337","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/snackbar","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"361eff4865c34a8b6553a4d406bb6e8001f1fb8c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.c4ab98722.0.tgz","fileCount":40,"integrity":"sha512-RVlp9kmtIxX8kM5NgnzEe+a4HasCIBBmdQbhOyw6WTRUJwR5AQQVaaYeIoeKGn5KJJWm843SWbmQ02OU2JuVSg==","signatures":[{"sig":"MEYCIQDbnskrQkn7+2K7yubB5UiMd0J+iBIaDYzCiza5jCC+BAIhAOpKurhIvRNtWT90tetyWnMJDEAr9pNa/Zx8u6aQiido","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuasCRA9TVsSAnZWagAAm/0P/23PfHu4+6kr5a8gsc4Y\nOVH/8pvUZlcmkYXcg9hsOfAsrRLwoMxxw6ukw30q6K29te7FBamJYXaeYxko\n350VIJ35E7CuAyxUBKja3m86ATjY1NPBBVgxJfMf6gDSwfiquXjBwipaH6Ev\n/7Zfuh8/S0+e4E53gz8vu17c6qlwbd8yMUwIX5qOTUSeTdCX7Pethj8skZrM\n4hRGmrhLYVCuaqJnvP1lTuvv87zwK0ScwAPvZ9M4eNBXrM/nIXFNxObSqgCd\niT9eYd7dUCviDo2qPPRsYzKEaLwQ/ZsITsdnn2EG1oQMF8iMrW/m6gZgMW7S\nxnMin5s6Y0uJGIXDLUiFbvyVzOcS7zB1wqhrmfbd51QOOrvsp6gdvEl8hmQQ\nWCinQg/zvwFSMGeBpEI/KbhGqJuwPZbEJI6Ow8ePg4BujS4Yg3KgQPiBJ2oH\n+n91/mdQian+B/wXftOeTi5uHIiepFnIZIzlcpLJpHY6XMU6JM7JW76RPNOj\ngyraZSAkANBGhJRVtTropF9L2A1La3srVzWmUZS3lEZJHjZ36c9GZpzUn/JW\niQ4SBqofGTdZ7il288lwQccZQZDbzga0KKBXF+yhVjhKTpVHfVctGIt1DX1w\nQtVHK/61fSxLb3XoyfejfK1DxUqENxEALZQJzzzJIhyKAqv5tYHKx2wEjP2h\nG6qu\r\n=Lfhw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/button":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/typography":"9.0.0-canary.c4ab98722.0","@material/icon-button":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.c4ab98722.0_1606870699760_0.3592122541904652","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/snackbar","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aff038eb6963a3744e698b55ecfcdcca5c1486a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.977585650.0.tgz","fileCount":40,"integrity":"sha512-XnbdHJIqtVBIMw2/KTx5d5HBqLZL5S5YQceI/k9NJKp+HnC0maEZVslX/NMAdmG1fVonSXGq3kwtzJaM5EcmOQ==","signatures":[{"sig":"MEQCIBzm+ewL7xsckRJTNbz0/6HkwmT0FNcf/tB2K0t7i/PtAiAVDVpzQcDxEIcquxYppS8+Gy9vIgUprrXWZj98Gq79+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6gkCRA9TVsSAnZWagAAcsYQAISa4oeEzAtNZkRBpc5+\nqlrDXeEc0ZsvvQAWrjwjGJmu163rBjVx2203Fdky51T+b3mKA1UVarlUX5Rr\nX5M+D2Rc+oUsT0ugmBi1O5KQ7SktfyChF2RvNPCPrCDaT7guIGdhQx52rb1l\n/UmSjQJqtrEiUXKNSImOFkx46jHThEnTHv2mPX7acSfQl0ljjmvY6vANQ7m6\n59RIxdIZZx5aLm7RxgjLVoyBqkggs6VbFBMSvoc99feybwvDq97aZz8VIoH3\ncsCOA33i14j7B4m4C/hiwuDUOnCSZUoqOKoksrlHIaC9yaN9zhutut0osAuD\nkNQotgA1GMM+dtF+DNeNEyHd+KbJQLB1qGfEuiv6DGhV+/b8gmSRFq6XrRry\nzVHL3gefppTvrx8KSg07viO3+y9gzMc1m7cgk5EYaSkSYn5fsu+gtm/sfw9U\nEd1xUJIdIqEShgrlaQYoUartuZ8zqAJqb94qrulE96TAgkmS78VMX+NYFPYb\novMD5hF9F1Z2MJznDBMsEnLOYev9esESf4XssQoPGXhWRX7eZL64KmnKxYYS\nQx0dl2JA+OXOyIPJIFoJxb3qXIUH9VIQUUq/c1CVvSgNgCjFlnceL8rqhOgt\nN0f3nWzxwsve5o5TMininJ6GG/VUuy8sFS7FawmGjpyEEmzRcnKrxnx27uuE\nPmE5\r\n=N6R4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/button":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/typography":"9.0.0-canary.977585650.0","@material/icon-button":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.977585650.0_1606920228511_0.6579481328109937","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/snackbar","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7067a299808e41f280279f1e9da844e930be4d5a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":40,"integrity":"sha512-hQcukrgOpXHCWm76S56FGMA926galg7Y2Rs/5LknxYqQmDQOX+BBaHuqfBwGqG4uhCS4AoivWD3YnmwJrwJjRg==","signatures":[{"sig":"MEUCIGxC8whbLbQmJcRGgbtlQ6G5elLJ+ejwPXwuurIC6cYwAiEAhqa7KtFW6O8NyQDxvZ2Fa9SW7HL+bZuqFMDM0XVKNFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6nQCRA9TVsSAnZWagAAwAEP/ROTUNQ0awGiuDW54A17\nNbD2o6/rLKnwEuBCVm1PI00o5o19uSHygce7UAMzqlz3znHriMNCTY02/kXn\n3R+iikxnhiYinfR7gwiKTM9XWn9s7T0b6SyftFEE9+K1L3pQh47oDGtwWYhk\nH92YVrKpxT3q/LVb7ipqfRvRWcP/jj0qZrUdh8bVSXaWk6Ik/Gk6irdmI2VG\nYo++jgneQIgSFT9lmuxAGmhkY25ssZu5cH/2pzhukRfR0gYLNbZor4G6Guwm\nJeftwLIh8zAw23330YqfLKFmeXLR72eX50qV7xB3oemR9BJ1+ZiXfkGW66zJ\ndHjhmFJHQFt1iO9dVwbUQSsHqBKdi0di3Px94mSkANS/oSIJlCqf1hfR1TnG\na5JZS09ZKHPv8LA1EvvQCgmdH8n3TVDsLms0Nplwj32A7Tj/YRsPe3MgyiB0\n0YdmSdiP7gg9r3zRWcR2KoIF9MNtPry+dvhTPwLUWYbOICg0IMbtaYvVMcWS\n+BQIXt9XjfxmdfcB5xJjRV1euQtj2ndQjizSfiPPV3Jm+OXNuWjQfAZfFFZC\nDyCIvAlpAelwWXz/zLcYOBSKTseR4hL/6dHPEznX/qA80+ya/NL8VBqNr83J\nLaSQ1Vu6zoUQGZvdD+la9bCuwAid/Qqq2q710Ecir+vSp30iKHYCxpU7DQct\n82vB\r\n=8cSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/button":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/typography":"9.0.0-canary.c7edfc7b6.0","@material/icon-button":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.c7edfc7b6.0_1606920656418_0.5160812039375329","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/snackbar","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89bf8c00ffa2a9212b462389f46c089c97a18e9a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.4f3347306.0.tgz","fileCount":40,"integrity":"sha512-irzr+9iHeo6mLLtufeHect9wjp0XbS1cK+NKirypHXW/gbKHnmmq1CMKm4OWWfF43gbEr6txjS2fX9DZtHuxtw==","signatures":[{"sig":"MEUCIQCuyGLGyjdLl8qyeyiSwIhIuNwyIjigLvr1xQaJrI0RdAIgYBC2mMeqrrwlXIqrhjLVyxPsey+OliTAIKUxQWLJL6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx64GCRA9TVsSAnZWagAAi/oP/2B3oZKV5Ii92SGXpEoq\nCNi6BK2Ijiie9PLzL4IVWAbXFQdAq8J4bXnmpGA2X1IHXOVz4MLHm94SNrcr\nB14DYbeiglUd+Au7ws/q6d8pg3UIc3acvq6DNs3+NvhczcTG6ptJ0DJgJ4t3\n0Nx8axTFJulrygKsAdjOHUpC+BnhEBGoEVuhxWWH7pIhaYBhJ+JRYe+yjxgw\n9jeCR2LOgsX5AmNklTsB2ec5WFX0tf+ZuQ0O4nLYfFzrqwdhddmEeOp6QvG5\n04lvzadGdqaYprUZDQejj3oIM2ZuhDhCDEXQYXMPBjGVv3opc+/W8fyX7gLK\nLyDBnyC3cBwIUkwe2i4mMlugMBAl0B9WHmmiFZgMDQQPPnj+Me2jHtns6YAZ\nZCzQRcIobEbSkGwdb20g+ZRQdpPD/KemN9ggdd2P37ilYuJAkOtFZ22njR1y\nbMB/bXJLi4gjG2MLSp3ARKpzeS0YtlxhOcy0b6GsGCLxrGuWMTCsj7cVe0M0\naHNKfsCjcfmB6iQ3S4l0JivcBmsvS7/0bcHAHYSJ4V0/bgRBb6D9LWlcsEcv\n93LLFFW64Uk7YfotLEp/GbkFYNRtHyeaFGK7oax4Jyg14uyI8nuN0Iz1cVJ7\nhNHQlmzKU2e+n7k0U/u6NElgR5rqqYELG3NGQZBgeaJQjN7IlMDDiP1lR82s\n39kG\r\n=r4UY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/button":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/typography":"9.0.0-canary.4f3347306.0","@material/icon-button":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.4f3347306.0_1606921734107_0.9937107146147597","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/snackbar","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7044d3e6ef3d3d70ad92dd68a97baec4f7790466","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.37fbae10d.0.tgz","fileCount":40,"integrity":"sha512-JMoZoml3XheQe5+j5dh9Qug3Kq1c9w5JmZ5V1Sv98io80+hhZTvntsyufdPp0R+/SwkGPsHM0e84rC5SJvcj5Q==","signatures":[{"sig":"MEYCIQD8L1CjDfwdOpfR2eJDAX0r1pTstq3Xl6o/C8vBqL7zBwIhAJ0SoRTEHeWXiMZPsyEfmWllSR3CWNsDfrkAIUyLBoPk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9pRCRA9TVsSAnZWagAAPoYP/RBUBlJjPSvz4YVKGZZh\n4zX7M3FFyc7zg5Q9X3l6CGPzyz0JCfsNKeZVtVGwkiHch27oWa0eN7zHcx+K\nLWEM62c97l8IHB1xmzCNI6NGkfToQH+qtNVOAjdPJKU6orupGQGs7yhimFSA\ntWZK6MS9UhmLRUhDrN7pqDjSvCrj2kqiLTpWUphiXNrL/nidyxErC3dqVUc2\n/hc+ZxNW+nobqkpA7vwRIyu3vtZV6YwIFlpkDbMixY//7i0K/Es95z1Z0cLC\nHtjM6UAMGIdJQ1w78YLcFwTrfprRfOaHUoa+aFqhugRR0DWml0W6tSpY7j/q\nT/hfSvK+hOtsZZJ2Etk/7q20w1rvtuKf5xsRN1iitkX9nGHvM202Lmxvs1ae\nSndWK4jgU17V1RJj2OGzUhI3h8zCgKNXE1KqtpY+q/jbL29rmdMljetVbbXI\nBxTLt/dRLFlf/QoAGPgk7ng4mEnHrLsIM+QdVUGr1sQwt0VLNg5GOh0NYmrK\n5K5w7csB5n728fKBdDDhtzbatBM1kgBNQpUr7QZ3PR+hatjUlDXCHHN8kodz\nuIKRQX3AJ5v+fvk0mps6qCtmFTxCzk3PJk0Vybtvd+4m1QcTVEn44XYUN/Lo\n3vZiigp9rP2Y9iKrxzUJIHjsmkRyf+h9ogigWu2weG5LEHqkw+sV+Frv3ek8\nAkP7\r\n=LQw3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/button":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/typography":"9.0.0-canary.37fbae10d.0","@material/icon-button":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.37fbae10d.0_1606933072623_0.44857015701759084","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/snackbar","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e176c040bcedc9db2f8188e8ad9dd8d197235024","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.11da3c0db.0.tgz","fileCount":40,"integrity":"sha512-4fSdeT0RLfMScZEGBA4Z1jeznyOn8DoyB+2Wk8F9/iVs8lVW5GIUhm7/+j84Rn/a0YsuOdoMNSlQkfjZESfqEg==","signatures":[{"sig":"MEQCIFRULVYeVk9r1n2jSxorDr0pu9PuwjsRE7TblIaBmpnMAiBJTqRW68pu/veyJUtb/PHMWnmeTAtN0wFIF1BEO46wUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/faCRA9TVsSAnZWagAAS0wP/RHvxuqWBMcGgncYBOzN\nbLbuHGLUkWDZ57ZbbV0lpYYXeP9l2Oj+E9o3sqwX0vOfBERHhkxCp492wrjU\nMop0mrEHtu216HOlaLZqjh0FrOS1B2dS+ytwBW846A+rObiCd54uFJXNw9iQ\ntpd3UH6eSF55gWWuoJqt8G6xkhCSaVOdenWr36lAEjakk8Y1GQsFbWMmirWv\nXLsQpUuPjK5bGyF/VpILZ7WjhzHT6Mp05y6fC6rZpWVhqEaCaB/c7LE0/Eui\nPfrGuPCCuNKr6S3lM4i+lwETZ6jErQSwqGzUhjtoUCYHQl2ZsbhoCzuOzhmJ\n0nIh6E2BKcsbPzvWNZd0a9bUJI+Br291azJih1ghqj5g9bnRzyleZQrlmhmb\nfz3mIO/DUk3zYeEsbqhZ3+Af/ZhMsh8i/O+lTFUMc45h0Yif5al8bSRxF1ts\npk92DXWe8BBs4d98UH2kH+5hAJamK8MwV96mSg214lPJaAFD3jHBceTxfJZ0\nb8XeQA7eLW5RlvYNj/O1+0kdObSURx7VEKqpUeolH9KW7p+hPPfPx5v5sLzz\nP2HOGoN5Ii73JiNObEf7Wld736OPRrMeCYbbTc1L8qAZryCi8tSvCW9d8gok\nRsCT0I5MU036tJImD4M7XpFb3bthGcKlNYtV0FlFvVmNNr8n7Ye92jQY4UDq\nxLrT\r\n=NTU4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/shape":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/button":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/typography":"9.0.0-canary.11da3c0db.0","@material/icon-button":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.11da3c0db.0_1606940633276_0.07789285742200547","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/snackbar","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a597d306cce3137e7d060e8598f16054f4cfe5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.489d4c219.0.tgz","fileCount":40,"integrity":"sha512-Wl3vgYbdzopeEGKKMiD/GQVcmD5Sfj181say2OB74VoMNRg0VWabhsE3KVn3dwMFU2VkXKaeFaw/Oa+awkzVOg==","signatures":[{"sig":"MEUCIQCk/WW/NceF1pf8c89qP6Mmb6JISswsDC4beTMpt6eM0gIgSfHfKB7JeMSTx/YCh5HO83QQJTPmJgzc0sRNdXzMeP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQS9CRA9TVsSAnZWagAAyeEQAI5rm+xwDieU/cf+xKDy\nNCwAfxHEPT1Vn4RWhIDqMYKbQDaqKdPmndhs6QgqOCqUL3avGw2plEInwjJP\n/GOLB8TnjW1MQ96aN/EHgk0fiiv1tf1lZ/jWzFZko3utO7DC613yuUKPCdmG\necbNxpGH3qRmRRLrxU+iACmWCNUSVpGpeMwQA2jO4u2nmGkXHrtbtSzsoqLu\nKi6ZZVRCfFxNlsDB1NKUjcZXXnsGKBNmOoqZYVwygbQaVMAhFhzTmadiHsM3\n65X5vBiyRe0Uln0YUFrm+snnSdhR6XUz8GDcpYRU9W7I5IZPdjdapD8MM927\nBA71W5mzJiJwdfrdf3r1/bbWbyMnokPhK4puQoABrdUoOkEIArt4bLIRurqi\n3OJxQrr9MYrOdDa6D9mU00DaroulNR/58mDL0iE/WxpDTqzCaIVTGdpvqSAb\nLjuHcmOnLbuTN4hun3DoKRHlHhTCIwDfqkVJrGakQn5XNbmefcjSRGN/+KZr\nDXA6iD+0uEr1y+BrYDvHQUUFpxpmNnZv39PVkySq9wkuLVeI3Z6lzkaKX9em\nXsOLVvBo4YMav6EhzeNXlhsaDvASx5VSi3xm42616KjlVqPov//YjiMuM5HE\nl0s2ka8xCPsDy9h0kqqCjz6AZCH6iq8SW7G9sJQ0j52C53MhKOlcJvviAOHU\nwENu\r\n=DIfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/button":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/typography":"9.0.0-canary.489d4c219.0","@material/icon-button":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.489d4c219.0_1607009468403_0.2169978884446213","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/snackbar","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73b1aed2e6187834e5f28389997b1e6b296f2e5b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.6557a69d9.0.tgz","fileCount":40,"integrity":"sha512-57elDEvKalrrEKpqgnD7jyev2vEwJn3OVSGKGjy9clbb+0PsRNmRJzso3EDMQP4GA6nZlZ7TjH4cSPPW7rgezQ==","signatures":[{"sig":"MEYCIQCqsdycHS9AhGIhajX+gIzdwIM3Yf52eTrjE6d4SqnrdAIhANiKsdmUrKp9GcnRXDSR5hqOPa45F7oDpcQ8nX+YDrtf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQeICRA9TVsSAnZWagAAv+AP/0TgxqY5pdx00UIAKPbT\ngKAxGirnQAT7FIxZX9eh6n6InpaIBWL2MXzYtx+P+voZw7VeF2Le0HZ+LezC\nS0q/+4s5ylxwYUWO+9u+9EAv6k5GbU+mgrGUew7yvjPncJL3ZoB7YEF/JdUj\nezzpduv76zn3wU2A6naD20Kb2ZHujmanTBVXru+MCW8t7+rYHESDj+FDx47/\ngrTDqQ6nYPzjG5gfx8feZFie/EdGP8zTMEFcpxg820Dq/gENakL+bMyRqCAk\nucu1Qk5p7x8vLbPGTw2IkQypkvIjSK7XUQuwc1FCxVpGT6/U0/Pt++kpK1jv\nQFJbbOuaGafKWYpcOH28JmCs3VCJzGEB60JIHd5o7UQGkhStelEEjAeznxnq\nKzgStpLN4I3dEkxD6s2TNEnbWsUVjptC1/kwKvmqxqoiVJY67k/9yhIa7XsU\ncbIARTfZneDrqq3GOv5FtPEm0Qb+idGan2QvzVM7vxIY5GEo0q3MSgoVUDcN\nTa/xZFazlJYs0m4Lk+fl3ToCgioSFTV09oluQc0kozI9H0CjF1gsOil+hLsC\njvVyS0NVWM+VqUjqhkS/sWDnXop0/0MK6zRfKxDRO1/eO8ipStISv3GFRf+n\n7I6BjNw8ccTkQ4rPapsEvfQIWynxrq2ce7hI6Ya3vREd6AY626R0WfC3x1q9\nhwAI\r\n=avxn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/button":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/typography":"9.0.0-canary.6557a69d9.0","@material/icon-button":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.6557a69d9.0_1607010184306_0.7583156574084806","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/snackbar","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67a4850818b50391cae52d08df3ce79ab51e28cc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":40,"integrity":"sha512-EJCSpfI6g9keMbrsSDyyiTzo2QnUu6TME3fvKKKHH8Z/TSZ6ruCUFM5oSLNzt+eFzRq4jvg0pdAlLrfgdNBiFA==","signatures":[{"sig":"MEQCIEdj/hGdZBxZRb2iu4z/FWk9Znazc55a2qAdYBp7ahmVAiBGfoFJ0hXUkhrYyeLKsLYSUy4v6KnPIblmHyh/OJrbLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQuOCRA9TVsSAnZWagAA5G0P/RpEVBfNcfJsCOzUzLgr\nBk53+3yY+XLp1ra6iowKBzf5CxqnKTlDa7Vg1jxaeCBuP35BYZMJxR5SD0zP\nQ2wmcoNG+Z6FO9eAk7NOV6jiv/f2Nit5GLAQrcvBfm818TFUUl6pAaRNa+tG\n4s2QLVMNYJzSDfrx6+aGrCmv3fAhGpn7iN8tS+F0Rv4x91i7EGVI06y8nTch\nDbsuf3xPja5CzGIou+E6G6WPaK7JWiah/EKpLHeEIy1TLWGxhi3AcQH3gIBX\nSFugROv+nUsHqM6zmgztLrh46PeuiDkPD4oUEVF+jB1CY8+7dqlM0L8iSQAb\nlm+t8Qc+x3O0pohfG6/u7/ByU5bS6+l/WlV35WpfkQyZgJHTrI2fJzQsdCkh\n82OThlT6DiLbLM/aibCbNSdIHdSRqrfce8iSeu+hRL7CwpXALfdM24FCxHWm\ngLAQVpucGbCF954IwoIHqWDS8xEym1mDHJ65sRVJXPzRah+1nGARgZ7eDUGt\nlNjD0eZEnrXw29tdIkTyV2lJFgysLF5j95T9eOJKuauZpfzQhomm1H6LnPX7\nMb8r2Q09lIrhc8db+Ne2uxZAKW9Ap0I0JAH5g6HFT02sQ0q9hRUb7dqGkGjw\nL6G6xfOBZkEu7aCAhBXtrTBr374G/X+sLK6EOcrpLnW3FTHEG3xwjwTL5KxY\nccJH\r\n=2/GY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/button":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/typography":"9.0.0-canary.4ea1b7c69.0","@material/icon-button":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.4ea1b7c69.0_1607011213787_0.2589781154204658","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/snackbar","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa1e238a693c41cfdaf32cb8d6cfea1bdf00ebf7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":40,"integrity":"sha512-AGtF5xNlFbgBuWgP4Nt0AgGVlGoQC3SgLyWUIIvC/xJ/e3I+5WCmh1qLougMTdN/G2OyZiT5D/NCd5Qs/sDCcw==","signatures":[{"sig":"MEUCIQDO8LMFqnApeqIyNkP1Hoo0ZT/V18khcyF1A7SiuBCk8AIgdBVq6kLoynYuofpLWPb4rZP8O9orqIdYFfFJxFTAwv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRo3CRA9TVsSAnZWagAAd2AP/RvQzteQIcb08s3w4m2n\nZy4oosoDPipXKJRWqgIHJXTfSVePVBl0dqW7yYhxXglLRh94kh7NPyuu5asX\nnjAx9NgO2bpkO5GLphlANKkZVvU89B37TrxJAWMyR46xHAqJkqiMPup/otOn\n5H/2GOj0k7uFQr2OB8uVUfs5bNBogYmtA6Jx5/cEdU9akCBzrd4vvTZS+Izl\nsMQn8qtM3vo5+iQFWqjTRoVbzwve5c7+LCYIoj7XVIvEYQpE0ibbJuY0SksH\ntGfXG4ahtnLn6LFSMuNg3zQXwbuUUAYSOv8aRJtUPLOTV6NUA3buW4mRyRx0\nu8FnNRxRfAolo5QJLrbA5SHjAINcTEhXwXO3fsh9gpQrtH3fNCtrehBwSnJ2\n+N5Tn8Nb+dWPcg3V7rwkaq0TAVDwnK013IgWbjj1Do4xOvBJVhVAdZeM5xGy\nc1N1LZZIVobl3m6sgjDNovDOZjPrRqsJK9EGjWEeY53PrwQSY/E+vQznAYKc\ntnWoMRl4glxnHCIu4dPyTPPx5XR2m9z5Tt9V/PncniTu4sHakCI+xotEgA3x\nsE9dk3Sqh34262w+nh6pC26j4UlxGlh5V7OTCwhcUcdUGVobCbdf6CpW5MmW\naVYjHZcVxHnFnteokXsF59xxjiTYXktqQpSNBNDvlSeOBkGIEzAVS8Vwv6zt\nWskZ\r\n=YWDs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/button":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/typography":"9.0.0-canary.eaeb78ce3.0","@material/icon-button":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.eaeb78ce3.0_1607014967388_0.8755219461980466","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/snackbar","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80249c5e79092bd2e2118ec9e4344b09759fba5a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.1c156d69d.0.tgz","fileCount":40,"integrity":"sha512-lLo+SwQx32xyPRomERUiupPyNFwTrDGUJVEEjtgXlIyb+CrHQXd4crZnuZroACVCZcMMe1oXIGa3lif/SsPqwQ==","signatures":[{"sig":"MEUCIHARsatsJQ1e7n4oJwegK1+cyjEfdYJdrZKMNbvHZcHYAiEA/3WaPcE/pe9sw+PAUf5yuzNibJwba9+DDwDl3GcVEiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6vCRA9TVsSAnZWagAASXwQAJo/mi8GRNNzcrRcpxz4\nWh241siNf/3S8U6CsLzq51eIdznIuioK4KTwPEwSldSmK4kc6WJ7udUtEIGe\n1pQrO8a6RaVpdSpRYIJfGYUDfoVxZi09ZErZj+XFPFngybYHf+AOJaAnDhD5\noUfSADjucXHjaVLsRv0VmjuPV+1Bnde5QpXYr2J6HfF2bR2kdpqsrGES5Fzr\nlGSa4ddzydVS9lVZydRetlXMV+XNwn61XJxakdmqd/ErGPY8DKciSA4LMXtF\n5y0JbRRAwDMsAzDFut16dBjkXdlKM0BbTD4UA2ag5j7+kFiYAriXB8mE8Nqr\nNrdksq1L1NpBnd0l34bJH9mu6Dzi75vbYbBpQcOcmtXbp0msVBItHMvfbcHr\n37tyIvuiAtotk7+Byhq4Hrn4ZLXvJCyIdeVMevqLJTesTFzjOC0jx0sCT0sU\n7cqmwiIZ0yHH3BOKpgFz63tzLbqo6vnD+RwUprc/SpvG1JuHi4EAqu4RugBW\n26UUzBkWNu1PGnbFSOLp/qBnGO3PKzQ+3OkUen4x6KHitV07mDyf54dMmBes\nk8/vXSpTTEe85A+O7NlWuhOImpAFjmH/DgxmaSbPzPPzpY8tTJZaBBqeEDIe\n0L0By7xZWjUxEv/ZHL0xECgDsfib91T4YmQNrdmJABbEJ+ME7MdJMmJ1MeuS\nM4zg\r\n=DP1v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/shape":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/button":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/typography":"9.0.0-canary.1c156d69d.0","@material/icon-button":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.1c156d69d.0_1607028399175_0.9410022841619499","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/snackbar","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f98730e6ef0da37b92d0f5699fe2c8d34d3375f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.832668d33.0.tgz","fileCount":40,"integrity":"sha512-mmH4FbEzY1wKz5j7KJEBOd1Vq+JN7Ox48vzbgzKGDaqZSdod1aff1tCKBSeDnXcD3J/XPbiz6G4kJoQ70NqtIA==","signatures":[{"sig":"MEUCIFQRlAkTRBtoTwU6n3SCYToYuarU6xOkio7cNv8rPMcOAiEAqBoh9i1+/PHf9IqBhFM/4Zqm+1t0sXVMexdTDBvISeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrYCRA9TVsSAnZWagAAbqYP/3BkcmsBF1QpXjvsF08B\n5rZLe1nSwPW1sEOYSdlQYwdaYmVufugef1N4iSql6jV37QH6kMz2/stin8Iv\n7matLgIE/OsrYcmEalbvwdEGohIVykEbjcq70yXKIR2LIlbPGMj98DjrzwiY\n/SsURe9etISkZ9UivZLjY3UrSHgOtJU2jAuxBLjVw7N3bsORkyuCTVu0KN4G\nK+QABuS9CQdxuAUFi/OfiM8yJdWPTmKRXW3uG764Ngg3lDd368A+rLkt80Hf\nzQrbVIQPtl//7lx8S83iyy1Xe2U0l7uW2BMNGma++vfW/dcILZ0BTs72/DZo\n6xbVVOxzDTJV5ol717KuAYF0ZNZz8BbVQpAEMwDnUvVhfWvECiYnkwPeUJ//\neEmp9dqk7yTqQXPVDZlu+2UORM9UeYfM42rwYwc4wvmpgyQQ9tOEibOPgeJB\nJJw51z3leLZdh8RVApOYgC5ou3trHZZUf/cteCUerUS1GlVrdtv/ZS9iGkYq\nzrFQyNAwJ2YKW4BSLWR9l8J8JmfNfwU0p+Wohs9QsjMOTzt0pStZMHKV0j1J\nQEld9LK5jjceybXlLZD+c5beTXqUYaulo+dGAlcS3H4GlX8ZUl7XbCfzeE5k\ntZ4dz0I8by0B1/IdTSXJa+2rT8Zvol8XQwHrHsHrk6nwOrrwIx4lx1beFyXF\n1NSP\r\n=SQCQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/button":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/typography":"9.0.0-canary.832668d33.0","@material/icon-button":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.832668d33.0_1607105239413_0.6700798313493428","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/snackbar","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73400109a5d6d9516e27601c4b7531f1458676b4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.4321323e4.0.tgz","fileCount":40,"integrity":"sha512-ltOPAo64stfIJRRD+N5lCiVLPFYDRFVnPmf0/O+kAVrEjVf06Y8Zsg4mDhee/rtPChsPKeGqDFHdKOQBtEc5ow==","signatures":[{"sig":"MEUCIH9zP0DptfWySo9xAYYO3QC5jlPNZzVV0KD+z5d7J1P4AiEApaUVa2X5f+EWJeF9ik3iDOoFcr7Ovgwv8gvoVLuae9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhJJCRA9TVsSAnZWagAA+cAP+QHRb/DFuYeGcTaScjGE\nFEhe9zeazHuPwtZvNTd/aXARD9H/Xs3CCvp82GkpfCbKNJU9D3W98C4RKJvK\niQXJv+FKEqQdvi5+1z0cb7VS7k/x6SQTJ30Z7VxYGpMuuXmNjMYzFU4ppWYU\n5fM7I1EeFHteJi/kKAM3mzPQ6w52+Gpe9hRZLUsLyWofre7sW8cJmaiV5aZF\nW5Ze21u3NpzzfaCTASY2iiKsCY/p33HFW72yuHGEGnZ2QVXylfP7XJYcQ0iX\n+aJZxxxXYJcxQhlrCl3x5E9PUkJZt2O15PQeybaTWv+LfrbE59o2yl+74XML\niKmv5xT5VyNNp5801FmGFUBke9I8Nr5uRCMV/HHklZY2N6R2GllSQGL8i7fg\nfdGIJ8xOCUzCZseO8sdqR0d6UyQbML9+H7M6f6dow6LTPinWzVf6Cnoa8mzT\nEyp3wDUojSt68RbkSI7ENawC/b5py23l+chTciBzd0J55mbMap92P5hdprXl\nbaWWZsMPsE7i/W4Jnru7HoAFvDVG2ISAjbdfroVCQniXn9Jo4Vh7tERZezZu\nS8ekSU7uRDT4VltYgfLAmaJvGggBs8mtb5xhdXwYhAIBrodcV2ovLrJnL+mf\nXoM3raNUKsvgiszH/NqvsG3mBFKCuD63JnGyrIjrqDZ5Dw1HddQwYbpdBXG+\naiLF\r\n=xsvy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/button":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/typography":"9.0.0-canary.4321323e4.0","@material/icon-button":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.4321323e4.0_1607340617201_0.5626765800817555","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/snackbar","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca01f8044251cf3075c35e93fad07c6d25c8d8e9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.2d5f32d41.0.tgz","fileCount":40,"integrity":"sha512-dzDF/Sod6/HfF4Au83RuXfYhQ9wLZa/A3n+t32ivj27tPpY2tA3gb/Z2Rbi2rYCsGgC9zhYB6TeufUkjz4uGnQ==","signatures":[{"sig":"MEQCIHzLBtRTHFcYTGaJ2PWl/KPxLqH/F9Dod6SFDEkHWQnXAiAA2wx6Wc3loA+29KcdO/uwSLhBzEwoS6kJGgGW5kxKlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlurCRA9TVsSAnZWagAA8sgP/2h76y3sEb6qTyBKAGE6\nWI4t4y7B4VdHLIQozeGbyjYjYanjmYrBbtGR3jL6G9zqGVuGmZRADzlQRG1A\ni6pa4/buRGl4W0PifZ3YLxH8LE4zfc1ujQAktnK9pfnt3LZBZmOD6LN7mR5H\nt1yUcNan2WmZgxG20taU5pN6rlqktse0is3QrqZ93WyQMGVCK0a3PWsdDei3\nQPaOi8Ex7BFANoThEnVR8YpMX6iAvZPRdrFzmFvDFlFhMU3xh48KwIELWsYf\nqSewhGFqkBMCjC+sDUtn5AHsuKouhX4V5ZkVpX/fuf8i0zMNptYFPov95kkf\nZEqoVg6a+YfY84hE59zDLnzs08PXOezud6HDArmasev+Y+r0K0n31euSGlRd\nxW4U5CtHdjn2w7vBtMcP4vB2it6rpmGC0X54XuODigYBDNssSWUgRveQOWwc\nwWZSgIkA+X6Rsgoynv4xC+nPwsfqYK0SqRe/8LjD9voWEU4t2KIW1CgJXNJr\nY26zjBg6IMaam7u2LKO8coiDBPGLVC+BsRwAV9EXMAMbHCxMA7bnQ7jbIgSo\n9Oz72HSVA8NZx13KdGyPJdJc8qKsHIJrUKnClgznis99kQp4Pmo587HrRDxj\nv0c5mLtlWDuKRhH7FEIycmzaQRYtQ1fsU/87M0SPvkVek2h7Phq4vk6ez4FT\njGBU\r\n=enuu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/button":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/typography":"9.0.0-canary.2d5f32d41.0","@material/icon-button":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.2d5f32d41.0_1607359402755_0.31096520136017514","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/snackbar","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c16df640bbee1990e985dc729c6e1c25b41b66e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.8239afc64.0.tgz","fileCount":40,"integrity":"sha512-zfu4GIYYfhSXKvSbxv9i+i7xyawybdG8AzqBLqiAgpYmP99qSIxpdIfKhS3uwQyAWy6yrk6/pvq5kS3PNa0wrg==","signatures":[{"sig":"MEUCIBVVz+nIms2uDDgZ+NS4El5658dDkI6fTESfmAl6+JD2AiEAm1IMzksd+8NftZE4Zvx60NySr+U5OnpwyEJCUoP3gTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoeeCRA9TVsSAnZWagAAFRMP/1ktG9v/gY7+sglAVLCO\nMeLy0Dq2qp3Bj4kWB94FRNklYGnTcw26HmKr2OUpjwF73aiJJeJ7Tca+iOKG\n+JCjX41zwv1HLLoCPlv9KH4xv2TcbAkxDPwc4URoijZr0PqDez3HSkywa6XW\nznMzEhC8CP61LCKRfewmTkN9vir/RiDPZpnRAmKZ1T12mTSkECZ4Vsfiglt1\nIRJ113VWMUQ38Sly/2vr8yoF+0XfDdepHcz4sUTK9CJ8MIymrUXCfjrx5q4r\npHWAit///59D4t5IcZQXaK5uZhIxrbBy5dtV1jE9EBVnL3wPUQBKDC7sdLr1\nNc2eoaRZiOxjurhu6y4VG9ZcxqYLFLeTeUL5tdSqhnNl8IAaU94W232kQbDC\nQz7vNrXEOXaaz2TN9gwX6TBg4cuSbvwPgsyQVVUo3Dhmn02WPyD6eVOJgCC6\nV8Oa8OOQC0SxICjxXCypSZj+38rJBcEFjqEJqf2pmtwdEwDlAwT3STiUcUM+\njBnO4ypKOi3QIKHjSL1QZsErZ/Yz41OBjNpNlpSTHJg0IoljhDAyT/iDS4m6\nzu5n3hs86LrdZiRKhY9odl6pZZ9GtyQQJM/ruBFBfMTlb+Jqer+a4A/OAO8E\nw5oyfwhThSYMTXL+Ut9xkGp/hVWQW8C6vg61iXUedBMkaLK67pJolRZA2fNk\nwMey\r\n=vEye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/button":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/typography":"9.0.0-canary.8239afc64.0","@material/icon-button":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.8239afc64.0_1607370654043_0.06662474252674988","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/snackbar","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3427c0403a3b08d16e25f87aa7fbac6732572a63","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.6871336f1.0.tgz","fileCount":40,"integrity":"sha512-UdGtcG5ZPuFAuVzXoP3sTAuRNZjOwZ+tbYG3t5dFDNFHxsItOZ6q4Ank90bA8Duv001jGLeEO5v4ugWRKUiheg==","signatures":[{"sig":"MEUCIFq/5kXR11KeLUCaWl5pojUhlwGQcEqmLCr0/HpnCN5KAiEAvVd/iZp3+C8nDIJTtJcVpC90InWU79xvic4Kz6j7olU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6OzCRA9TVsSAnZWagAAihIP/0vnHIQ22lPzvJIYMNmw\nK/KlvPizdVGw3afynOHOxFMbKpn/+a0EadTNd/dmWMBoObYWQ83jPEHwqhXp\nmP5sikboatnZe0pRn0xzMCSV5iM/iO4XJ5s5P+RjUrHRpRU59ByogcKxUPob\nxdDmF3LJyaMXW30PmqiR280NNpd+o3BRbCFx3uZ7OoBJKTo9Z4Ay+7zBMzxp\n8ZgRGzdAbK9z+FLnFteL/1VU9mcP9CLbqCcKAxqSeE9fT/FDV9VSSSSJPXOQ\nfZs/xZCnUv6+f1V53Gggj7CaZ19mm6rQWUUZxhAjxy8bmq57aWv8byB1+FCt\nlKVOJvqf9KPKj5HIs598s0rvRQ2AS6Bpjn3z+n4pgfNH9GPu6zpSR04Ey5gP\noryijVkXIBYyis8OHeZ4LuaYt/AOrDTHBigyG3ACIstA9oHnmYMvZaC1MugO\n8V31/dRAUXXI6ngHJ9cHbYbv6qiPUnchxlHFgxAzqmxL2cOQjbw4MngybH9V\nrOrp4S4lYlgueHGtKYph5GLnPaTgcbBICiV36EKwIEIJNYbFRO1Fk35Ng8HB\nrqrZqS7N/xN9yfgXheZ5yHzKQ9r6ddvE0fzhhdTvbb7dfDSdzkVR5Y9kOMNP\ncCBdm4HxNugQm9wi/a9OVkWLYJ6J8VKumiqkdxHAP1yryGOX99HZjnjvdqSQ\njikC\r\n=P4ME\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/button":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/typography":"9.0.0-canary.6871336f1.0","@material/icon-button":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.6871336f1.0_1607443379386_0.060325967590608265","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/snackbar","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1c2760c0df69fe210d544c396e53665ffa7432","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.9f718da94.0.tgz","fileCount":40,"integrity":"sha512-mC/ND/0p8vp66VNR8c5uWkyLdDf97eQO3PoaHRi96Qj1ADfUJRDpLEJIfmg+GuWI0VV5mLQ56UNzXCGlQGaukw==","signatures":[{"sig":"MEQCIBFGHUu2nvWcrekqCOc8B3LjQyByQxJzBDq4T2F1TwcdAiBdKEZ4rx3qTrBqNMsw15L57PqthoaFhCFnBFEd9OwxmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6Z0CRA9TVsSAnZWagAA3osP/3w0/FZHXhQ5EkIsLdfz\nvQ1EL1VonrOhg9Fc5JEsITq3T0uREouQQ/g9m9Xg1igU8zhHe6zd1HorvQMu\nGbdJg5+6VMpbKzdBr28QoCs/hVqlWegbiRJY3NRms53eRXcCVvc6rGNgoUQ9\n47OQqcEGIEnrzJipxRGMupmfE9jTKv/q3i2H6fx6/7aWKFOojrVZ5yGYVm0X\nwVKtSJ90dDQMK14Pi0WnnwiNL5Vt1Yt80BnSxccLDEiSzblnvC/KSTZemoRV\nG7s4hg/+FRxM1/ugRbSagsk2BYA11gmaNSKqtRrx2HVEAhUn/mNqdtIyaVGy\n90oLuGBBzIZn2ALcGQKwf+aspftI0Sfw5cVj0r5LFQJ2c+252SSV9UpDMwRB\nySKuPoZm39JqSLOStmpZzdiE8qw4GYDBZlPXX3hFLm40dCSxQ0JxepSIFtvY\nT2OZVU+GGmDSIW9avZangdVZqlaOJJDMzDQK/gEuL3qTLLOCFHqQvtvxRy9F\ntlhPhp7Yrw44ZEbtzsdudU53nS/CyF/9fMwaIfq0/BpvecgEsBlAHy/6eoiO\nhdG/82AW2xtQTvm2i7I2EqUe8DgZmyzo4B6f/THWqHMd/NKbmJ0t7IQTIYf0\nt1GMJ2m2cdazPiiNOLJFFl7z/cqTgcu9ZBfLcXaGSvcUAthYbJMXucIs1ZeR\n9Km6\r\n=Cn/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/button":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/typography":"9.0.0-canary.9f718da94.0","@material/icon-button":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.9f718da94.0_1607444084475_0.15411565773140778","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/snackbar","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512a127e68c38e9d4b379d6ef7786237f07f3383","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.1fccb1418.0.tgz","fileCount":40,"integrity":"sha512-iNXGlX7/YfqpYHH8m7/ey2b2giCXRD7rcL63cilXqNtTBCS4pkAD1hVOXMnlWwtP99tYcqUCYa7vATGMvctiKw==","signatures":[{"sig":"MEQCIBf5cGxQhqX+iWxJSZIspspScWzzQNF+88VBUzF35lNAAiBdojmfan3UYVeaReWDojrAw/yy3plNjUbG4nyUXRsutQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6n2CRA9TVsSAnZWagAAwqQP+gNCBZzEv7s7o2pS5PDY\nkMYiF9FH/syCNnYe0foGZ70BT4rf+WzEbSZWoHKIigK/robyGkcPD92PZOO9\nqGLqIYAvnqbPglTPeckSWzdgwEZUv/BzD1KOrJAr2tM6qrxxCld1/dyU6eQJ\nFeaxPHSaj0bFkJi2xnlVW8HsE9lrT/lOkJIrQsJis3+lGtyD/KD3m5N0c9FD\nQlK759h3DRuHDKYl+tr+wDDFdHYNrNzFbQBCBkVO3rwn+U/z7TcTHJXWnSSL\ncygF6n1XG04hDYsYA7a3whmSw3+XL5B+IQetYrnc2ybE/oVYFuSuSSB07b6Q\nymfG22nZ7JbYkZaIczBPBxCjwJ3j1ybbpqzJYjXPOT+3l3PGxTU2JWkFLJL0\nLfgeYfY8mjyahg1qvqTmY766vRqGUBQa7TypP6e0klzGYmM+LxSs0cZdaNBb\nEDmzB3wR+ar9Lqo/KwDKY0IvKd1VRBIXqsq3nbs7VzqtfDejHqLxQZB+IHhc\nZLKKAjtvIzTyAQ+ETB5nuX/PwGvHJgyytT07yamN05Rz6hPaPCfVxk1rTs+8\n1z+ksIjjs271lVpPnMw9YF7frovIoJ5eoEvaRohfX8GFfE43XazvwOV7BPP5\nouG0BqVl1WO3sVB4oGqnw65angH/28uZuidt5aGHq3o4b9t4iDs5tueRTObh\nTl+N\r\n=EKxQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/button":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/typography":"9.0.0-canary.1fccb1418.0","@material/icon-button":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.1fccb1418.0_1607444981760_0.9855781589774573","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/snackbar","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d5d6b2420c1d4bc3d757ab59c0f9de6ba1f7736","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.afb68894e.0.tgz","fileCount":40,"integrity":"sha512-DCuizubgR6uNjrGLAG/06n+PeEzhEAehdaeiZ9NIuoqBzgKNMoE6k9wDFrth4T5F2zK8hLWHeruCuCpOFF8oJA==","signatures":[{"sig":"MEUCIHS7GplX7/94mRrAruEcY8YS83RN2EYAlck+2J6cdNYwAiEAhAAFkdVPoCxrHu9IiUc8/uUT6x09Mk17f+8TrtJ+zBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6roCRA9TVsSAnZWagAAHF8P/jWGWZ3j06cJ02lVN0fO\nry3FrL4KNhCjA3tzsMdBg/W32mOZke0KgdVgSvH53tHKyLJ2FkYr20QIeI6w\n4UUaPPpkzYPiCtsbE03+j2utU4BevOr70tSIBDd2lkyPDJebuJ/EH7XFZTK7\nZLIQbWG/ivqqdl2KWXdmwdKMa8xj0t+U/ABSrO6IhmNsM1WlWn2coK8NFuh/\nzlGfoQ5BhBlodUOx+1KgFK17Bf6gk9ExqsIOYu+VTnbZ6LJ7WfuOmd1eSQU6\nwLUL1EBAGx8iXcxD2EMgxkzKyLfsnJPKixOAre6027HyhkY4/3rcc7TYplxD\nGPLdIr3sXZIzPWCHYMKB9LeuONpE9LwSDCsDYO3ll6cv27/+YItSHGBYnFnw\nauEqdxb4Xig2VpgcGF9DOPhv9N2V/I+wXMu7cIu8QkS/RnVSq8c+Uf7OXPIR\nEWQ//1SSU4/MZeJPLvBVcnnmuf9DMxbnn5zoooi0pvwgF+UrkuTyQmh0x8M6\nufMT0FHTDKS8NXk5K74wRrv6apRlviVDOes84Fhox/otkXyGpoGQ/2+fAh7o\nk7vNusBvlgpStqzaFNux1vet5WyRwyQOUhY2i2ygX3YJC+HHwo6rfUZ3OQ6M\nmsdr3CqknpbEJoK4pypf4L3kt3Y2mvc+uWsvJImMrDWqzMioV1iZjDVvH42d\no0XE\r\n=3+Wm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/button":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/typography":"9.0.0-canary.afb68894e.0","@material/icon-button":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.afb68894e.0_1607445224185_0.11699194084506037","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/snackbar","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64f24090f913d74242924d1ce07673faa93de7d2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.fd88d40c2.0.tgz","fileCount":40,"integrity":"sha512-tjvdRJrDvDB04Lxm+zJOjGlGtHxFKjXMDjiOVhywVEYOOLzbwgQy6iFGZQdgYpsaMq8pM9fRslQXujIIXZmuOw==","signatures":[{"sig":"MEQCICo29+DoDBQ+GzFVrukREVh3efRMvBLvYg4sCUIguKZSAiB2GQCWDuU1qJKoLTw7xDRG+BcfRFe74Oh+HMkkw8fvSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz64dCRA9TVsSAnZWagAA2fIP/3lThhJrhsl03lMbHsf5\nrqycn4oODuHk3NK1BLu/s6/A+MDWAJ+ag+fB5184aoC8kAd3lx6H9sy9ODdl\nkW2/j40DumPB4VYkcWPcf97dJGbCfnFWUpGFmOR33gcfXWh/m+GkTeG6eGwn\nbaT0pbBFnp8TiyNBc7oa3PLhURhyeMIpfuezKtLWQEGXwBeNgzCtwlhYaFjK\nIcGWftu8PIkSGkc369Y43HhnFUv1sNqdEkEjPPRWtsTnxsve817O4cYXrmx9\n5+gUGc6tj2LsG63ctOQbH4cCvhLxiQlTBbqeZjTJ1DhCa3LKvNMkLhaM2C8W\nq5Jc7E5ZGtVpfIf4Xlinmgnin4Av9dA61GNC0e5XOzBgGAsl6a58Mr2IhMfc\nArPWLbE4B+TKP9RYdVxi7IrDngXbmj7SRvJn4zvTxMWkZLlmdZq/4OyhsVCa\nBx+nMZ8PKu+uXbCR0d199J/n9i9IhmkdroLq9yy4COSCWjZANjjDx7x7Nljq\nuexIFVLa5bOIwaDRkB6bZYWHqReLe4s7gK25BP+7eFPpKkdHVe1tH1GxKrE+\n0NWj8agLgIFS4q80sQeF/0DDRLXa5pMM/1gBWLnX+kSfkHpGNXR828xkk/gH\nfzlAoHNB+EyT1nBvozQw69vDAvpHPYd2hxFrd8QX/MxegMAQPRNEFFVnTxLe\nKzZn\r\n=o0en\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/button":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/typography":"9.0.0-canary.fd88d40c2.0","@material/icon-button":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.fd88d40c2.0_1607446044892_0.9231546197842089","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/snackbar","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17c80d5fd51bea3cf198edf002b26d2b5a157329","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.ba9e3109c.0.tgz","fileCount":40,"integrity":"sha512-tvNjnFPx3CNZ8puRU4qXoDRBywh0Y3DPyHf282tCN3D1Si9Xi4GXMMGk8rwieMQC9Nh/y7zJVSuNbKrQOMB4Zg==","signatures":[{"sig":"MEYCIQD+yItYgbSKppQi/QibPHqDvtzA8MGXfDINufjmfFybgAIhAMWwmOIZD3WWAv73c0Y7rm8cK67SiWUHRnLWxsesB0ad","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz87LCRA9TVsSAnZWagAAz4MP/3T88ZNekqNbY3wEJw7h\nfZF96xaGOHtNfanJaj4p/+wbKIeHpbJ7fVDDtKwbYgMgPuov30ta0W2XR5B4\ncHzjltYWg8sCxtw+rxBih6Yk/1bKPsi2rnXQpBTaVrDqoifWmy21g0jd/m26\nGlcWk8NIC9XAfe7ClODlbCtEZda1QaicmDpX/Mzu5xedYE9ZoUKrcotjjd6G\nzReq0kBL+RzyBvvSlW+nXGJV1utnSRiKTIxJJ5W9zkCYEA4ftu0b73bJvEnh\nDroF0/Om5WF0cph2diuM5bkAUl8PrpJ3CYhr7TfTFfDTpFI4gULNnDycZ/Ec\n5OIEiwMWHgB+v6Tfd6BgabQNVKbCF8jZDPbIe04skwo9FUUxrvgVC/uyOBVL\nH0fUpqixeNtJKPUNV+L/UAnmBRnsa/gWrOOhidks3OsBOFt477c0HHF/+Bu8\nKKzzoIsaxUwOzvLggbLKFMIuYDXTejwZFSJezxEB7ZItwBc6QxA03jZVdyiL\nf7PsQ5roj0c8lQ+wHEIft3e/46j2DT6dIpc1w+1eEAXR9GsWyzxSFaTBuq+z\nMLN7LoNlftcgEvkZxZ708JkGo/gtel/40zRgdNSY0rTa40umD4iOifrG8Unh\nfdcaZAAeKfT9j/uV9WCEw1k9SAWtQjoGdHKqiK2Wpu/P8z6lXX92zG2hJrQS\noUbb\r\n=Noia\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/button":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/typography":"9.0.0-canary.ba9e3109c.0","@material/icon-button":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.ba9e3109c.0_1607454410579_0.11855968118249494","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/snackbar","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79b234750abbff6ad7211e33a708a87b1cd6a626","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.1085c3b2d.0.tgz","fileCount":40,"integrity":"sha512-6uf06rRjXLzPazEX5UoLPJuuXhJ51qRBxsZjaC/usbTjL0Te1YgIri262xB1Ik3z67SaeJdfmrucXsJ5i9z8Lw==","signatures":[{"sig":"MEUCIQCHgiUcChZk8+3jfLLobZ6DCU8AOLaPTm0bNk8kmXCveQIgR+KpsQnvtBsVofsTw8hmX/fBA+BO7rTvdxsL4kamGk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SGaCRA9TVsSAnZWagAAjooP/2fYc04tb/nAZHe4a6B0\nGYklZ5yH2eUTcNgazcYCV7vbsh7ZNUO2mqW5vKYTDzG1CrlMVQpR2WzZedwH\nnDPzipiOBURIO93j8EoneoTP+36A/Els5tO6YRVRR37lkEpUKv4IgmaHAtPb\njWcVe8AfyYI8KI2gVZiFsZh5xrWOUR5N5AH/iV4Ca1nFmES0dvyHsu0QrlQn\nTanoOdUONF6M8TRmEHTIY7fsnLeaHGaH8ca+m3yy8XvaoGLlfAxM4kz2VSVW\nRzu2SuW6OH0kxdBScD1GKxC8Vj2mDH6qt2RLWduQgPoSCZs5Q7pSp+fwoRxv\nFTnSkVPfOYWKnCa4f9AfrUE2uwHvGfZidnIO9auDYvyz+iVBUYtmS3LSBj8h\nBJ4tTvBrWe30ABhk1xcov3gcYIxRY8NxOSe90l57rA+PzBqNWoIzp+S92aus\n2O2SwXQ/WGC6TJfyZ0+xzgz5t2a+vb1BpVoz1PUxPKNOTI+QZg00e42wpEIN\nc1pY31gJJW4P0G40qCDftuAA8kAi5c58tiTbdsgivsduxtDJYqGXYqBFJpC0\n9I5mAAdAu0G8/TjIYRstElh0hJCuT5uW1FPrmetHYqQ8i3xpXR1kBWX1vI/J\ndDqYBw/9M9nfXlWY5LZCbihjBVOjcdLSF+c0WkedVWyIeZYwj89T7jPI34Z7\nZ1ca\r\n=fBqh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/button":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/typography":"9.0.0-canary.1085c3b2d.0","@material/icon-button":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.1085c3b2d.0_1607541145840_0.9215572963712908","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/snackbar","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be5532a38853a2f1804ae625dd5de8223ed68851","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.c5dda809d.0.tgz","fileCount":40,"integrity":"sha512-niH+KFpiAmq4cxT/MpVF1+e3jCj3LyNFjiHGGItOvBps8w8LEVOz61mpKrnR6Zx+WS/WXtXv+47qbAleVY7/iA==","signatures":[{"sig":"MEUCIQC5jNR3is4hFjYT9gbb/vyLoukAwRAbb7xl5zeYgTAKKgIgPldyOVwj5oa9grpygK/YbXV7d2Y48ecPzaA0KUsxu+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TjTCRA9TVsSAnZWagAA29oQAI1pLcFb5CVqiZR1Idct\n7Pd+IBorMbJcfSJ7fq7CBn6R0cu6kuF+Y7D0SNluKXxcM2ffzsM5XB55wsR6\nLM2YTgWJyM6csn1EoaWb86H15rcTRPll4PSb+/b59Yp+/tJ43ipdCcIr8vGg\nsNxdiBJvVVZb7fijw3gBXax+p6RtlA+Z/lcmhdmnPeSociLxbiUlC89rIdFo\n5f2oP25ejaaTxO6Oy80Sk9yvCOPJ9b2Zr63Y1UkaMp/mddVx/4ZtHa7VdwTZ\nsktLX1+YEleqV0/Z5K75sj6JdCiftFENukGPKtECV9NoLE8t2g+sbwdgqntu\nEecng6GLFQYlCv4uuNHFTtHzY9gEb6ZQtzdafkcKR98/3kKobhu8LdYyDy7t\nNrwKK8N+iqKuhY5+dfQrC8Rkmyj0XKCdy8iFM2hGAkJIskB0Uhpp+X8YKUaG\nryMj927xUVJqVileSD2nuxweGgwX+q86A6mSJlnfTiIoz/hWfxp14VcP69C4\ntu6EtmWZYy0LttpA0lSjSog0eFiJ7Y4RaaD45IpoH+xoPXY6mUKHheorIK4o\njWFbKlmnZCrXa8dZbo3TUQ1sKAcbbx5lHS166ponughLqGG/alNmUULycohx\nOUENKg/IoDIktSl7NHvR4oTrJVb91auL+t0ScJYSTFtDET7FtodUriCHlYdI\nVnZt\r\n=laq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/button":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/typography":"9.0.0-canary.c5dda809d.0","@material/icon-button":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.c5dda809d.0_1607547091250_0.6496432534184771","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/snackbar","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a08111c8b9706e86bcaf26ee95ca66b59361d19d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":40,"integrity":"sha512-tfnZolCNegF1WvKeLCbx5opJjq7e/6HkwRmcjKrDsaCaMd5OstBRM+OO89vt/rBYpWlVZzmqmnuTl6RO7g6Leg==","signatures":[{"sig":"MEQCIGsMTG3crgXgkegKDnLTYFCGC7Qm8aul39Os/yfE1jLBAiBUnbYWCD9FXEsn0Vvx/hETo2oAaEIg2GfVneCB4mI5tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Tz4CRA9TVsSAnZWagAAXAIQAJZ08A9pzI92AKH9D0Id\nJLhcwh6UncROOel0ZQgadx8142VYx9McZXp92p7CQHfW5wShpXJXT4k10owH\nFwKzxapj6KkdhtvEkIl8mhNMAT10oz+h2Dg7h0UP6l7A7bIok5avusyEiX0i\nf5T0kwwL8YQ86pYhfyI4JPU6qnAOjS7l2WtbNza5JuGXZ5zHyQiOx44eg5cy\nbdTP1rVx/v3EG3Uy9JO/k5Z/l86q8KRPupTYtfJ9bIvqs/BshFj4/Pg1LQ2C\n1mO717PpXwVH73F7H77f++Il9TAQhZfCUznkhNv2kCH87FEQmqDFkcOF0DX4\n7zO7cLehgCbXFVbnGMe/jCbUjUN/7aWTtYl1BzicCC2bo0yhClG7CT9kpjwn\nrXG4rZRXkypGPJV7mFQD9JwsRGgCfybfQwEYB+nL0oIb5ZJBr4VijWEkPA0h\nauLGbnSqhBPWKusNd8iJjzR0AAahiGl+9hwGVIBmdiK1ExAdKmqq4mrY1S9d\nVLXKxZbjy/nm75vFKRNsBFL5NW+meBcRz9W1Mh1mxd8l8QTSWOlggFE7z1Kp\n+RD8mPZ59+dAl3zjUyqgpK89ojJWSlZnQWvDgPnTQiYzQGA3n9qffhtUGhKk\nGJX0l2kjCdfZHQV2WwjxT9b38i4NZADp5MZcAG3ehzzpibnwhQ9likCODg8j\nmpNB\r\n=vBLm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/button":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/typography":"9.0.0-canary.f5f1bd86a.0","@material/icon-button":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.f5f1bd86a.0_1607548152129_0.6407568679104021","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/snackbar","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"514d8158e0a660efc2cb0cc243d7cb9b7862e667","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.00f38200f.0.tgz","fileCount":40,"integrity":"sha512-eyoDKmkECiqZfYP27v7ip/V1nPmzuYQ0DAoRrvSOE6H8xzh8X3Rug3u6y0QQSwqJd5c9hu72i6uBliUuvBILEA==","signatures":[{"sig":"MEYCIQDv/q+eBO4G1GXct5WViFPivcT29H/y3dEicANeVK/XfwIhAI54f0K/HHMLx16yv9UUgy6MNw62o3iR2ZOHNUbmyosk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05SaCRA9TVsSAnZWagAAyw4P/0ehF+xgvaTX/zlugAWZ\neT/XaEG98tvC1oMPm1aZBStg5RZpAkRKFhcSR2nprJxolNg4Q9U1bBa/kDcu\nXUhF0CtwjBo6IYDC360+sEJSN4yMfucGtdLPxPT86jW2D2TmuYlxXqWt49L9\nPU81239Tgysr2tlK3Gf0G2ok7qUxvKLz6GRS2O1C8dNugHvc/mvBi6Y3s08x\nI1L4y/w6oNYQIjtJH5A3E/JXA3BBuoBCOKELITsL3HHnrUFCne8VXL0crlLA\n+GQSSB0DnyncsIh6bjxFh/74Q7najBDOqiaUSrTI59uloRpRmZh6xDcQtNdw\nNQmkoXzrvMfbccQXUyLqlPqPGWeu26ZIOoanlxfUyImJQrPw4V3Pgz1YxMiK\nVG5FkiknONJlroRgYUKmpkbF4FPEcwt3ktBBPQivY3M6w3WmxQ2q9dJMnxoH\ne4WxvLpwudBZHeseYORoOWDm+/0m01w2LqmUyxW0rD7s9arzlWHTfHb/FDzS\nVccyCbdsBKFE1sc4lVe9C3cE7czn/gPQH32hNLgafv2zUUU++L47zrCsEvAM\nNjSIb5cIgGFIG+XGmzH0/Um1/egeyQUnESrnB19P+jdPr1eK4b1GSLLsIRXD\nB5QgBYGdC4sB48bkPX82fIYwoVdJ2WQXRB/03EHgqj9Ia20z8sCtLoDbbyvH\nKv3E\r\n=yHS1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/button":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/typography":"9.0.0-canary.00f38200f.0","@material/icon-button":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.00f38200f.0_1607701657430_0.28569604255215797","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/snackbar","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f4414a494efb69d4214aa41a15b6ecc163aca53","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.ac41a5729.0.tgz","fileCount":40,"integrity":"sha512-LldOFfm1NIKnyYPSPg9XHsAeCoWbLtTbFwI3t271bZL1nCXbkyh0a/8om5ZEke5eQkx13g7TLpGBauxsV84I1Q==","signatures":[{"sig":"MEQCIAbFFWzrcB2j6fThnYIMe8SmWPxO7wByXm1iNQJOpREwAiAwvhLTV1YlYAcaD0lqHSG4NOolkhOUiRd6tJDD1FuTAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf055+CRA9TVsSAnZWagAArrMP/3zVqpUN4uONtEhPgYlm\n4odfz8mjYzTJOY3r5y7trSruQEfjdW4Z3pxIbhw1dzgSkrqAya732KpOBTJi\ngqxGy4aTB6lHukPjUV/v6hnERVCg77x2qzDU3xvT5CZePDMQgIceVNBq7WFQ\nfU7mdho2ZHba6iFhOtk9OSdDzLio9UtwFQg7b5yUNan7U8qcpwU9U33tqcIT\nby7823Fh+ItM3MPYJk5CnGl7i74oc7yhj0zxfCefBwpFlqEBL5W4oBjyFnpI\nvQ8JGcjLBJSSjzIhAeTkXrzEVMsjLKL0DeiIPU/dAaMTxLpu971mnxZCY6yY\nEp7I8GRs2aXGlaQBTirczqoI3Npujf0M7r6kkccNGLhzqOk2ru794XiGbXYM\nm9ozt3EU536DBtZD5ehQPbfFnK/t7VGoRI9kVgm7IoZYu4+cVsJ0ZoRWaIIh\nxc4Wnk8keBV+KaSiiKtStpOkD5sHNrTvdY3EedZDkq9dFC9i0ZwpYcP87CLZ\ndLD8J3VBkCrm928jIh0TUHZt1/vdBXoQWM+0/GJb3SgEEyVxyIXS2vhzfos/\n62IkD/JCnL9zM7Ia3Y1GLPtqVzIzplwtWm1fbdg0twha57h4zihm2X94PNC3\nSBRTCwsCTmM8y1X8fUhUAxkIUWvaVEg2gDCXQAMG0XtslUYN9JSUL50XvXtc\nNCR8\r\n=u7QU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/button":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/typography":"9.0.0-canary.ac41a5729.0","@material/icon-button":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.ac41a5729.0_1607704190315_0.5262336844814295","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/snackbar","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6969226c74e1776b83182d69f0e9bcc9a4bb9546","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":40,"integrity":"sha512-oCrv7y4oIPyxxYhFlPozj5IUn1quzHw0kwyCjxKdAHSpQ+ESuylS9o4zLlnZIbc/fKNFt37YFxbO6Q30z85ILg==","signatures":[{"sig":"MEQCIDjIXYKvtrNQzNqjSW+6d4nhyjp0BPzw8OvSuplysViIAiBmtW0oH6Z2lp34D9r7xTerdjKKMpPXLGODStabg9JXgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06cvCRA9TVsSAnZWagAAvpQP+QH/DVL4rIfRACjMfKWf\nEuVQQXZduC96FRdm/fmF7qPvUjgSWp06VwjyRP6kI9xV4cYa7p/7TWK7dbTu\ntzvZkvWglE8qZRn8ezj5ZgTya8Fepgsl4Csf4897ZMD8STVRkwnButfspWdi\nP0siAwTtA2wV9TNzJTREly6HXBQt1olIwh7x7WaJnpodPiK7spMVuVEW9PJ+\ntgK4zX6bSxenPdG42xXhoQehMB5t9IMbipvOAmQombLREuqXn+ITkX2oQwzH\nq5dBfL41/ihRQjyd5VfhkFGXoMDlEfOesxEqgdWVJ7GQ/sxi0WBdEgBWhemi\nlp3udz6KIgSSMMrH0P+WVHcme7Rd7s/nn1q4gtO4UCjGdRP9VAT2CiSkenSE\nmRl85MhJj8qVdvLWkl2lpgtkCigvVNS3e0dL5qyshWwRk8PV23BkpOyGevtx\nr+0K4sA/8TAgGqitAAtlxdJKQyKT5mN2DI4pFLHxdP73HtcQ2ZwXR6kqPMEp\nRKrpMVyz/yUJC3o7OVP1PYE/mKVM6X8E+GdLSuQfNZ7C3JUIeuQudiEDKpgH\nNvpVF+0oVD/dUTDT/7J2G//4b0cG8pqIwC+PyGwQgrk7ksdFGccwin3vQOdF\nG632tNTQtmIaHD/QZjt4wIL1ma4SrdhniW/Czf8ZLl5RvQ0DFmlEJHWKcPXl\ny4c4\r\n=76LW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/button":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/typography":"9.0.0-canary.7fe0e4f05.0","@material/icon-button":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.7fe0e4f05.0_1607706414859_0.8650652710495705","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/snackbar","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d07f7de6451651fec6a8e27d5b0ecda7182d560d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.9244508bd.0.tgz","fileCount":40,"integrity":"sha512-iT9k0buppODc4oYilCrMPyVdilvghFhcCZpVrYxRQBqjCCgp1ZtzZyRtleB/ezO8ZZmaD37A3MwacBjZNTH8eg==","signatures":[{"sig":"MEUCIHB1V8TAw9KGOcI7DsYO8aYB0ncBDhr4nO7TatSMSV7nAiEAyfcQt7APagpvRFcLSZG7419txjegIj4+cii8n57C/Pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08O7CRA9TVsSAnZWagAAj2QP/Ag2sH8JBltWgqVGwVIL\nxYkrSetzn+cCeOpIqslUrWdQvOcN+5PWAcf+C5YVvZWUTvEYgHoCcPuNobHC\n6tKzyWWN8A12pZpSt6kLv39ypcrPUXWTP5+5PamvSRoNjtgObCu3WfTRXscS\nzZpnmSoKyJihvF/VY57vH9Hc9aPEo94mtgyI6mI/876bEpRspc14a0NzbdRv\nEuV69qPxdwKRivbE0AGJhqNzH8vAQKICAFKrY8mKkF9XXQIQ3Kvj1v0Go6n+\ncgu0YvPYMdPA0yDdBCNMPpNESrKk3Wt4nHu5F7/EtEQ45SjWF/cUbX8Z6Exa\n4rtk0E7RFBPdyQFXZEKLTvhyrG/j3D7mWF8OZDDpQetlveASzXPIYt4gZdEu\nRDkcjKT43CViYQfv9Xjn82wuOWxsD5pnQ+fgiT2P03wixRyYIq5mlgO2Qjoy\n9TLmPCDDqjsV6/OXZFQ0niOald5cSBLFVFNcky69/bC6X6N292ueHg0dFcaZ\n4ubhlzput79sIGdHi7fhol2Tb0zLP6PONe8OvVmTBiQN3bd0ePz1B9IMkM6z\n3vJMMb3+h0lRtnjjvluqbua5IdraFABuP0MlmJoB57rwgYc8JKQATyd1roDj\nSF2CqbrzzAijBtFlyZsnAHPH5k9IpbmLz6PQIRkcQaQ5mEC2q0wFL75YbXdb\nUCyX\r\n=FOGS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/shape":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/button":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/typography":"9.0.0-canary.9244508bd.0","@material/icon-button":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.9244508bd.0_1607713722491_0.8100105313536079","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/snackbar","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aa996703043bbf33c0a411b901e98a1392029f5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.384a8eeb1.0.tgz","fileCount":40,"integrity":"sha512-x9xtYWE8QClacBXjfTkQws+kTWBunb2gY3iyphx5eUjxJdOTJTC3BpvBFGtc6rsXy3twv8HH57fAZ7XxJ/R0VQ==","signatures":[{"sig":"MEYCIQCCsWYTx1KaKjq4re9r2jRUM3YblwkJcNz+ZNIOO5AFcQIhAISiGNOrQ8HMPaHxBT0cX9wXo47hB55Mxm8f+clQheD6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j3OCRA9TVsSAnZWagAATc0P+QFQHITtWY0c92YPtRoA\nms9IKh0ep1ijjNWTD9570ZsiuwO96f1aemEAY0LZxX+u//3vrr9LovPD82ns\n6ZbnINtKVwx0xvh2ju5BD7D0afXPkyqtvpC6LKCubqZUf39Ff0yiLxaEUBRx\n8gRzt9IpAtIJ1swzM3CveEAv7bpu9cbSz8dXii15CR//dP43KaUXL98yEull\nd/vam0mYDlq0FvEwwN2VluN7CAUj8d/TNrcuYZCE3T+Xun2zX6MLT0jkhx1N\nHGrPzpJFNHJHEWX2CGHNSfaBhCp+E1ekktzZF5ZEB8xS0+mBz1TLx9qJw8Xw\nJHedw58DCyg1dOKbx21eITQav9BN9qr/vPB9f7enZ4fUJQW1HeOrQsMHnbjz\nRqrpC0WtydE3ZGxMtcRvTLmx5ZOVK2XJCTTLORukRe0d3Buirj80GxGr8nkT\nZ+39VIf86EgBJWHuOuXJDaLWixqkNUapnVNHfdWppWt49Q79YUyELSkPg55e\nwls2epfhNEnj+gjjsdhCf/bWnhjOPiYP+L5f+O25jDLXqZN82UuVMwPgP+++\nqjqCRD2Qc8TSDfIBUx7MY55LPTOFv38hmV1kf684fxlhimLYy+Vw4ZqPtgrC\nxn6Tb+entJiYO8LW5JktmR1tdie1v7bflV4e2Lx2PM4eJWu2dLS/FPQpU4mn\n2IKd\r\n=Q/fm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/button":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/typography":"9.0.0-canary.384a8eeb1.0","@material/icon-button":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.384a8eeb1.0_1608138190142_0.8150734728752769","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/snackbar","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7e4ccc5c6eae084cd80173be649ed95c48a21c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":40,"integrity":"sha512-YWCHxFkk10r1oaaAX4gzWf0D01qouX6KygPB9X7XsiA0fpNYyKG16j+hx1PmY6s0vvJVWZ3GhV/CmBDe98M8Ng==","signatures":[{"sig":"MEYCIQCZ9UTYEPapn9vCnvumbj69gicd9bLDSrh3rsxGukM4DwIhALTZlLYqzGjpUNtG0XbslY49VqIUwY1Zt5FuGmoS/A7U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lHqCRA9TVsSAnZWagAAWoQP/1A+UgYcH/n5GYTSE7Z5\nuAOcpcbtbk74abZqFxC7Zh9M8/WMb/OqxEGXdFVv6dDOd2z179MhCvX6ZXlM\nNRwBRlFFeI7GkqUUxG6qXft3cev2Gk+VP7Eruo0wPRrJnnLZZe5amtIzT6Xi\nSFnaz7ONizbW034nJFuOxDesMErLUQ6SknH4/J+rkoPhhnMwd/vSQREfNVtn\nyLVnSVv0dCW/bRL4vV3NIjk6W8eMu68JNG1jg8U8MAbbCoYCROfagG6TM5Np\n6T44e6OvEwhygqK1JtlBVZhPN6YF3lQfsFT1L9Iv/+N957OAGeiEUerXtSKv\nqfDN5jwIrzDDOawWGDD6CJZzMuDmHZvrohAGAO6auQ4C8Ap5XvKzoxwl3jWp\nxboRfQK+Ja3dHJthzG0KHIzMMI0H37dpGqftnpGE8ZGBrlmLOLt58eS1AdA1\nfM/CLilKzKbfn9fJX1lnB26UuJfZSb+AycTXa9KBm69bfqXiion8sJZo+6t3\nPGJVyuWTIbaZU8Exshdg2K2Xro6Pdr+12e0iOn+WplSVJAvDBQeewolZNTPg\nh0/tzClyVYvQjDePrVM52oYIePpm2quR18t19Ra5J2/KRui8kH+YHIOjqzPe\nROM5Hvj4CbAXHmRaA94WimaQDc9Y22WiQ16us9K4aL8Onht4npHe8BmB0cqG\nrKdG\r\n=QaR1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/button":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/typography":"9.0.0-canary.eabf9d5c2.0","@material/icon-button":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.eabf9d5c2.0_1608143337567_0.9999910777336052","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/snackbar","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dafcc99ada8bb62fc6e170b94141ea472697596","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.30fdfd06e.0.tgz","fileCount":40,"integrity":"sha512-WiflB8vVUWESgQXNjeEgMCBy5OwAnzWNo4TnMpJI9F2nSIO+G4oHHjx8VGCr1vXD9Glk7lF+S9FzB+x/nA8xUw==","signatures":[{"sig":"MEQCICughmi9wNOUXRGYLdiX/Dlyxw9EfTT13SdijmRPGfYnAiBuQzMD8Mljm+VGlJbDLo7oRQvcrNi1CAngWJ2g3NFW3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2ltGCRA9TVsSAnZWagAAYEEQAJjhkf0V+tEeNTUzudt1\nZN0yVK5lSLSy2cjI16evOlUBcSa/XjWeGeEqoWEKDF6mT0CK5wHQ3tF9gMmy\ntU1/vJsHlNBTKyJmWoE+MKGhjt1H38XM/WSdCGavEh0+gfp5hMsM3TSIK4Pe\n67E5NWKcdhlAijsLyQne+jPY1qPR21MpFFc+guP2zUHRuVbqBazHTid9ZQqh\njk0RjyilRSLnmk+47K2ztfSGHRzZj3n0CN2Q6NV2QTlehvvQAFjvKEFN2bmo\nYQcIaeisDyYiYYMWUmOqAGlCinqWSJhyjYr1LZ9bDfqyhuEE5KN63A/252Cm\nDgXD8UMkOXaTYhS1zdlcGAWt8liHPxCXrgWBVrcOYbELGQnPjsrwEbJl25W9\npGh+7Cxe6mrRZbynDtAcZXi6VaMRAmO3MGYc1o95/pgZF5+R6ZrTqL2z+p30\n5O/vqkDWBtlroMCyS/kxxaFmngSpM7qqR2WL3KGnss+M9gxuiZVV+84FL8UN\n8Wq3LV2Eb0ZOwexNb+PJ9+QKyUB15LKOMU1+qbPRsU9yTEaHgibEYRhg8AnZ\nV0kcoSROnNaVRaML3oCtPNCItcQ/M4FF55kPa3Gj5UHWHlNcZNOdAM3ZZBiP\nCbOjyrJpxF74wEl3t3ZiINmx5/rBX5siBg9OSI/9L9sogHA2MgGkV04q8I7R\n8mor\r\n=b524\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/shape":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/button":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/typography":"9.0.0-canary.30fdfd06e.0","@material/icon-button":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.30fdfd06e.0_1608145734214_0.08837491016593702","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/snackbar","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c2e0bdbe7f70a89271cf3ba40825c82d1fb8bd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.9590a8f90.0.tgz","fileCount":40,"integrity":"sha512-4V3q/y4ioucaUJ2lUJh/0VKohJEOqc+UFOlGZoGNSjYoR1/PCllBea+u7bKV+lfrTSXBkWdsAR4QUfA3QeG9+w==","signatures":[{"sig":"MEYCIQCp4gFnijJzRZQGnF+EnDRuu52EyXxuKo6nYmAl4EoP9QIhAIvVdKyWUZ1bnnE+6EwNUhiGWIFqe+SRWA1OLVcSum58","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jA9CRA9TVsSAnZWagAAbU0P/3fdzXUP5aJUxk939/xd\n1OvNQ3rhuU1DAVVhiGg9ngiPVMgfoEps1x9hnhiqh/goao3f6Nshc0s6WO64\nVe4nHT8wUVrETevqHz1E88wI62P2fzKAe3nEfPuiZQQVak1IG5qaM2AKr+kd\nWU4CgkkXkZ48/9YIGiHeoXT6uDemEtpOLEZ3Gkxl6rM/kuVQ3LoyUr7AG227\n1vVN6k+ePEft0jtbpS4hsMgOmFlKWYiax5tqeaYf4D5z1mfuv3XYWWuswOWm\nV+NdrzzeB9EaN9mA4jUi+R5EoTby4F8s5YHgZv/U+1axfsw8gC/NDQsgvp3r\nBHHkdFytfvYOe+aD7hRNj4wGrDSy759tNKX1VncqJdgFpF9QoGxRPVNhfwjB\nK1doHQIHN22dbU+XiBG4iZr9yZi2jei91lsg3zd1LyePiut+SOhLSEKcfS7G\nLKUihsekfb1xy7PXDNef1moUvR7btDbW4IU6DgJH/ZjQS8A4f/tKijfCDEgC\nJwmCRyTO7iuuMKRmnpM85BgLmVPR8Td7+PgOCXPWtOq8pwG3/oRJFTcrzxWj\n1UiiJHdgdW0jnVxV0dK/b8hxk1o+gdk6dwONFVspr37RMwamRKck1QN/CRcf\ntO7PqSrRWKkZbkXTavNM6CB0TA6hFiG55po6Z9KRGEZTiAvcgO8LEAob/7lJ\n9Zzu\r\n=J0qV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/button":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/typography":"9.0.0-canary.9590a8f90.0","@material/icon-button":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.9590a8f90.0_1608659005140_0.3696347321491602","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/snackbar","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ab1be32ee01b90c052026a3498f5a5b07cbec50","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":40,"integrity":"sha512-1JYR6NJ9wNCGBd7sePgaRQ8MkS1OXrn2ntd0L5FGKdStbO/4oli7l2RDLZAXyfGY6iv4ymLUe3lJYli2aV2hcw==","signatures":[{"sig":"MEQCIFrkMrUGXRFox/y6x+juswYfQhXVKvlRjUQRCy12prN0AiAgLbyV+s8qbnC3g8266C9w8iFSCnktYpOYlFiXt4TThw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nv5CRA9TVsSAnZWagAAvfQP/An6eBmoe8HEsDlRsDWU\n7hETx4yqjxFN0hEw+Wiu1Js0xA6W9kmLsj6IyAfNjUNyPxe/HKjbbkCZf8ZK\n3kmtQdtciGhiD8RN3RyiaCeI6Kc285QpXoNIsodCCAFZUDVVRzRTQuADGfLP\nsiIPeltBcuH5msXZ/FQdWlFMDQJA5+OZTRsZ1xYzjnGy9Ixij3yv/ChD6oZo\n1tZdwEaLrVkzdlYpVJckm/hbm100NTKaLQkvc92dVviApJUHPMbuu/nTQf6u\nw6q07pnNw/L210XYJYbvsyxIrrhvfMlFvaKbFiXcEgz++KdzcCjc7ODjEvEE\nbEBeTzseESAWqNgSwqiphdbDCvVExqeEAJmCduCy8iVJADuj27+cjT+MPc+p\nOMJoztIMRhZgmhm7c8yPnDeyDl2Hx34zh3Y+k/I1LKIwZCy0QvA8o6UJFnA1\nGI7OfvHQLu1jUliohbfYUhoPzh/HYWu2KArA5jSfdegjJRlI1jjfanQcIovF\nJF9amDO+k2TWbBE7D6rt+zbT4Zm7/TqYE9ndEwzNupkUn9MFN0aGnYeKvbeE\nS7V2S17s7NDZoAfEPlJEfhMQVUbmsSDITvrbpSjV0ircoEZ7nWD6qElWQzq5\n5+xb1ZSHnlG0VDRETAPwXbz8OJ3XAzHo2BHjEdJFDQsmELqkBWDTOU6OU45t\n1rVK\r\n=P6Xk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/button":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/typography":"9.0.0-canary.f89d8b8f2.0","@material/icon-button":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.f89d8b8f2.0_1608678393532_0.24999058096747073","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/snackbar","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e151d0a1312ebd235f02390d017cd9d3aaedcaa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.fb194dd35.0.tgz","fileCount":40,"integrity":"sha512-ekL+niP9ElCUGZ8PxgaZjeSwitL1kLUHxNbIEWiG8AJIAxqp9A20QupYsIFsLlbdiSazID0XuItruM9OwbukYA==","signatures":[{"sig":"MEQCIENhyNJ5Bzx+cm3Z8wkL/IwChz1WOn216NSEcw3zM4kLAiBLXDMY0pAS5Goy/YiN5mDVH9Rm7KCddtCiuLS9lahnqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQ9CRA9TVsSAnZWagAA6DcQAJX7qD5/YN87S76/YRZr\nOmJG0iwWDxJEhPGRE1065xLm9sdzMg/KYCklR//WTH7GPgLVHH5B6dixmkRc\nM09ZWVxMUZ5I979tDA1fRXEvI9S9jmgx2hvnJN49JqdGQJi7bGCwOHC75Oq+\niL3s9DQWvwca9+zVB18BD8lQv8+cLPsbnNXlMmR5ABTpFtktNFC1pR8St591\nk78FZxWQVG8R9kZQgjPA9fdJ4olzI9FVoy8NpwAxo4sLnLUAjO1MPERzT0SG\nqPjOl+2YYp6/eaBLAQHvIngvdpijOC0nuH+yTqM/IPvi3l8iv6jr1C6gyDV4\n88xK3ZuQnqjfWwsAapTZCG/HZujqCVoK445UGtLoSq/G3TKQ805w5XY/9nua\n1F8hkR3cGYhyk4L1SfclFM0ssioAjRn4ehWAneQYbODyReIvZOMYNn9Neeet\nugmF5uVuAAwiWOhrZmS26ud2Y+1mQfrNVKBvo7eqtQ4wZob7gzy1HdxvJJcj\nsofsddqMswmJiKwIIdcmhjiKrFXPjjn6iwkE/a0Ty534C/+qrBe3b7dx6Xlo\neVAA6Y+IkJS5RulnVb23z76eF2wfmjADSMl8MQnN/0urAsUYTYhoSAThgrR/\nJWentsGueS2iOMqCN95buw1detTYBvAkmIKxB6uz2v3yDYmuSH8IaWF41N9z\nnjVI\r\n=04Fe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/button":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/typography":"9.0.0-canary.fb194dd35.0","@material/icon-button":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.fb194dd35.0_1609188413108_0.17139105097328766","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/snackbar","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d000137923187f6e46ffd7a4d9a803178925fbc6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.64f36e287.0.tgz","fileCount":40,"integrity":"sha512-nm7a8hQkMyrbgqzTzvZAv8bNTh3oCXtUVCwmOTpdjno0n7OYlJJ8p5MFUA1ve3p95krmElv7+Y23a/9sDeR1/w==","signatures":[{"sig":"MEYCIQCaVILCW5OhWRNfcRE+AMYb3a5pwxgogyIiSn40Q1H12AIhAL6UKDalCAKk/A5U1AtjniOt5I+C5bqTzwqKhJYBpIeY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmcCRA9TVsSAnZWagAAFa4P/iFsbsl4W98e/a0J7CS/\nEqM8LCIqokHGr7UHcbqLsUOcYRbQ/ov9JfRpfh3t9TUfAb9NDfysSVqAxVb9\nvgagAlF4x392PcWNc/JHoS7ztU9QH+ssfZc0L7DUkDPBtt+DSOFI+71RswAz\nR1CRhhhm1iS2StRcX1OctDGrjdrLbkWJZwkDCQaaHSIopP+82YWVYwmQq84H\niSMnNpgNUT31St+ER7ROXlWl+iD4aU0VEz0BDPnLCFJ4IIqsK37Jf6u1d4XB\nUP375fGr2D2bFkjuShaOZoZBsxGOwbvy0ag8y/CGUOq+4T/2ZticFGvnoB99\nksFcadI7IkWmS2DxNUMtXGEn1OV3SzTc4JgG0Ge18I1ClTX1QSgSHyy8a7HI\n8QQRVUt9k7ZHtnGT+JtyH4AxUcyzQ4X+e8NcVWnIZFVDdem6pI9gGbTYFuGw\n4LyjMv9MpEs/7bZfdQa5HJIPXQEX6OhFjqnT1o8IIcPnMp/1jLx6OE8za5JZ\n9lztJqMBL2wnzFkQ+eHrxmju74xG6emJHtJxmGOd/g40l/wP+Du/pEdUINe/\nnuiXjM7ml07+3pQIrgBKy+tJj8d19aVcM0c0cEfCE0w8Fxu+FjRgj5SxleiM\nPlfuQzx2yJmEraichUt4DKX1Twk86YU6s0LT4RV+4xvx7YHs0/BV1WpbSPDi\n1RpD\r\n=6lD3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/button":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/typography":"9.0.0-canary.64f36e287.0","@material/icon-button":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.64f36e287.0_1609189788035_0.17751874745815344","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/snackbar","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"524d31dcdcf6f0cdbe08ed1d0637ebb31672ccfc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0-canary.b7bbe7022.0.tgz","fileCount":40,"integrity":"sha512-KjdP1EIB3OkfuJ0xrzXSGxbd5TTANnGinAWGBWtnoxg4+KfN5DY9ff9rVll2wU+Q3hmAkU7gYYQyljCnlR0uqA==","signatures":[{"sig":"MEUCIQCkQVScxkTDihT3cl+ISSd1O13RvL1T8ffFKYnS2dUhiQIgK8A11TbGwTSslQz9L8hqXfYqdiqEzjTUfQKb/DPGQJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63osCRA9TVsSAnZWagAA+xMP/2e1Uk8Pj150QPOXmASE\nir2GQUgrEoj1DdGUYHbXK6E9aDx+jqISQZsYQYJG/mxcUugkOLA7cOp1mblx\ndGHo+fdtQs1GK2sB9khFKFWsjtC1wDoMbMKNDEYu4M83KyIrRl8RDbGHAsGi\nobXTQ6KJmCAWUmS0RG2C4OncNJMK71vLH0jCZuFL7t49WyRCEsb3qvvvJkYF\nPE6KG8sHXZ6qE2eFkbVJnXMhmUWSaO7Xyrx0XvNx+AMtwPeCBzw5/nmKXKiQ\nTvewq/a61wug1mGoPi49+T5XdcG25SL9dReZXa5+6JGHRqMQvPDgi2FtENID\nT7YkhnyjpXd+yFhUZg+WtLXq7nInJ/tgYqSaJlj0g1jMjMgE082T/LzDC9u0\npl2Bq5Ox7GdQaaNMd0P3cTotEEuslWhRMGZ5fQAtTxUyt5c0rRqdtuCjDF+Y\nSiFbyME1XbVv4ThFJQYJMdJMCGaGlZinC1ye+HRZncOAeo8PWxUv3S/fO9Qw\nVxByi1J1CRJS3u1Y2evNlMt2AVv9plaVdAsrgPYq80XqonhhlMRhk+883eUT\nwVwEuB/OXSsF9+Swy5HcGuU5PmLbW+v+qa+x43T0rAdBuOKL2RnbyfDBoSO3\ns/ZAv12yP7tnJlJOZwzlZNuPH/NVlVO3AsQOQjbCChIM1lLk9Qjfo7UUYghw\ncLAq\r\n=2hpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/button":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/typography":"9.0.0-canary.b7bbe7022.0","@material/icon-button":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0-canary.b7bbe7022.0_1609267756111_0.8985244528069549","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/snackbar","version":"9.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d493a799ba612d9d73a841daa0aa997671d9ee","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-9.0.0.tgz","fileCount":39,"integrity":"sha512-566hzyW6zMWf11Mc37SOB7gHmZr9y5oUC5lJ7Bzi5k/ExGKsqR8acZAn8nvgrbUxu5ZYfWAQkaPuN7wNO6s+Vg==","signatures":[{"sig":"MEUCIQDrbVhzm/S+1eYjNzVzTJXJRX7GA5NzhSofotFKz3jGNQIgNZSivu8DpstYTjOzxp+Rtv/jbFuHpOhDt3ySOObWlCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64fLCRA9TVsSAnZWagAArKIQAJVt9eIkmajC0nJLiihV\nignzx6CaQAqiL6s9IV1haOjM4NIna843NK0xuqdjH/F9pjhkFqyAj6dn3Jmr\n1ibEkZ9X3vCl6j59iyIIk12Ae/pTYU7GGI4QGY5x/9seOj2YK6zh8TsS2jR1\nlFhktWrwhvFA12t5xQISIW0IYIFiNc0vej6z71moTp5V9qo+rjEq5BLhfjNq\nthYpqHunuc3V/pwR0s7+j9PdzVqQWMD/v1z5VHhXIFVWDj6sTlUvIRcfuPkr\nPFNFcwg+nAoWe79hZK9ipI+kPyiYySv9OON0Zqojz2z97OQYMnmqH9LTw8t+\n447ENw1G5f0JBbVElLEj6ghX4INNkVYxagUb97fEy060AyrJFkuFcugHbPIw\n9hcxjUgs4og6WrgIFxk/wCgjq/wxw6MPpW9VNO/HJM59+UKshurYLeqPAU2c\nBQ5bezMgFJ44UIX2PQqxwpHnAoVvfbQwnT9aFn8lirhQF/QHxG+0LRSVddcf\n3BULuIPfmGiIKtxz31Vh4J9DqrNDXGqKoi35kODG2dqHMJPEZtJXEdxoAzZR\nZFxBjvKp0eqXk9ruAzy0V0CsLg9sgFrZbUM9sP6bPxOXOr8tGWY5YJHd3Xfx\nobccZ9gFkXGd2YY9RWWxR4POYg2BSv/SIlFeWFYgkJSvUI95IaMTwKYmagNS\n74Ls\r\n=hr7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/button":"^9.0.0","@material/ripple":"^9.0.0","@material/animation":"^9.0.0","@material/elevation":"^9.0.0","@material/typography":"^9.0.0","@material/icon-button":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_9.0.0_1609271242577_0.7795918553553232","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/snackbar","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00e1a9fcfdbdfdf79112384605ea812b77358a70","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.776c18681.0.tgz","fileCount":40,"integrity":"sha512-ReJOp50KxF1+z5KtReDgtuq6gUqfQCYf+7klZ0sErQI1q2hU84DmJluVz1/UpkbbYn4VHYNxnoXPTqnRfxdagw==","signatures":[{"sig":"MEUCIDdgyZj1OxXRxlQ7AYBCccq00hr67W5b48JLf4Oq3VPQAiEA+IK7PRQyMJ49YHjhze3x7OIhgA84JrpbdI7UcYLbL9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68y5CRA9TVsSAnZWagAAO8EP/iCDuhILu26m+oiQ9pIy\npfAASpsi/exUmiG5o7V6EABWDeeFcsk9P9w29JmCF2IQqqr2Gp45zpj/2THP\nMM21YtD0IjMAEjZqB30wXM+KpgL3u13iU6715P3tkCjE98CdQQujkdA/ecqT\nstCMF+7tWw4WSTAZpgkb/yMfrLlj4zxTC2escmDZ7ks/kqXH4FJiTOFZrZUd\nzrvQFErQkXfKzY3OVALfs3aTu3iCRCSCiAQ/tWXOvl6dfl0D9pSzhgkQaBOW\n5oj1oBZ2xGhE9QX+S1ZWXTlLSq2Y0FBSDjaX/bp85MNHI9GUcjUna8/UgNCo\nQg0la+nHSizU8k0g7Z1CuWbCPD7XHNa3g8LXPu+AladImhwlW/Naz5CHfedl\nzaI/RcOJg5FEqKP1dxVAhoNLaapO54D9313l/n3w1edYgMloWIWyTQqdkqQd\nUz5smWJY/NeLzqil1y85FyVl0FGmWtihWTjcXQStKcS2udC04J1XjtBfj4TN\n5U7agffDonFddCqSmq0MBplqbj3ClvKWjMMkPRUifs1AlzvaToIOG2XpFh7T\nZTzrgX18jQAWcY38gAH0NP8U2S2zg/TVZyH0Rkd6x66CWsuEYYdoWp8R2MPd\noh4pAwpLoMT+KBeVsRWbcS/OWGf3p8WctfJ6nzYV0TZYUkozKHbMUvqH4AuR\ntFjE\r\n=RMiB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/button":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/typography":"10.0.0-canary.776c18681.0","@material/icon-button":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.776c18681.0_1609288889433_0.9094931831855952","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/snackbar","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9204e27fe695f86da76df7c91459e0c13b209415","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.671d72d95.0.tgz","fileCount":40,"integrity":"sha512-5aelGICeON1iiiIUkBPos4CdFXHwyNkSLDi2P+EU3WDYlHcgC1MOavvn367DDQBeb50RKDd3yjguOhNop5BWPw==","signatures":[{"sig":"MEQCIBODHGSPM55NaSq6LZeRpa6sxTY8PlLUmrnS+h9T6DPSAiALgFTVmAKYYVxtK2J8xeyhA1AnWk6cUrestBKVMT7IFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N9aCRA9TVsSAnZWagAAEaYP/1pU4hRohI+NkAeVYZbD\nf8hdN3uxeJZGqxOueIi4sedpYh1WfCam3SwOUTbnJFds+kHPm8kBSq7TFCoa\noYwUUKD+igzai0EggRZ8R7Q+hfQXoLA3P8ja4Gbtmp/Z9KOIWhZRgwwrSRw5\n/zbjO6lYJaoCKgRPZcNluyVb31XNSvwBrw0eWk0oSi4cIDzUMWBmYbnyW9qH\n2zbiaDoKZosGl1OKGCiNgCtHhJFc3c531fLWbxLFgAM3dyY5XFO2s1xvcoZT\nN4kpYiFv9s22EsFNyFZDYPPt3Q0UcjwhhroEeYQeHiu/cRXcruBiVQ6GXDM7\n4H5+TqehfWbXksxdS47GC0Nc0OI+5NvZKejOZe5WCidb+pw4L93Cd5rPcaTw\n5EYUnKRJ8+UxfALrZFuNWwGdYnLURWezDoFuabyR7prRr9Sk7WHNHHUMH34y\nYc6NGsu1SN01KKPOwaSrnw01aVhWvae+FeJpYtUdSDa5H1CH71S1MQsSpbzu\nMw4RlHKvS3ONam8toqjBUUBQrji3Je1lK1793YnrKocEMz96UJ10TVwuKMUI\nXM/iACsgwXiFx+OvGVRu93a5L/UK2smhCj07KkJ3a1ArY1gKKtY3cuOg1Xcd\nQUi9xUEKeJYWUMQslxAIXgWkzhfP/KG0x9n0Ew5raliT5VH6vT1CGHF1egh1\noeT7\r\n=yBrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/shape":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/button":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/typography":"10.0.0-canary.671d72d95.0","@material/icon-button":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.671d72d95.0_1609359193755_0.9627567769140848","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/snackbar","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2af0d37554d206d90af24e9cc14cc74eef36908","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":40,"integrity":"sha512-Ohfz9GQhc9t0bOQs3NKPD8sDejD1egv7xuMIruA8W6vlJ+hGC0Zyey4cnQBV8aELibyPEizvVpNeAFMcuX9v3g==","signatures":[{"sig":"MEUCICh0MFMJL+CWEcc5DRTw0a8xVPRh3Kf/+SIOqCulWnj0AiEA8EJ12jt4CUlZ7Se5e58lHTdcC/0ce9fd5fdFk8ZkjPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PWICRA9TVsSAnZWagAAtawP/1opiBhddwL9czg7wdVg\neMeiwUrAPHyODsyxNhNWxKJrOTx/vNYyx+m8RfNGptQ/NQeIWCYX9CKMyoU7\nWvQ9HaxU22HHLlAGQRPJ9Wj54wXh2VXE5BtlOkJXO0IVoxGPZbHDmUfzU96k\neLBsOWUIgKc8IqWLfjtXD8G2t3CyRoRTma9ceDrE2RXXOEXmcxqZ0viorwlM\nRKWMTNbonqhZcsIQg0uSokenpCpiw4GKrfSPAXxEcn7jtHLvm5uyuR8KIf7R\ntWPozUu0R/UmhFSKDmLR6XhmfNQtQS98s4b38HX59XAjyobFVvb7NGp1Q4+u\nCtzCBIAoHLEd77aIIl7mPYmrS+Viy/6v3AeAWCTeGr4lu8P7ox6IAvHhV8G8\nn7+MNnHuv9M3ITYVPsNDyuf5qq16ZsKnR59sg/mjR+tub671guU0xwo3TaYx\ngjK0D+T3/gDC1T29/I5QX9aDtpQxfwYFXn6rssVSXLnQVUVVQbblsv4P4YJR\netRJF7kD1fbPX6vg+PqgnYeAlkEd8v3EkogzfvibUo3fde/F2dNAKWKLexgS\nt+aDFG7O5EW0jhOpFMDuEOPajgXWD0F4/CQ3ObcaG2+S+jPt4i43NK2D0plD\ninsgDSR3FuU1mfqG3D/MpSn7QOAi33klr2o9EEX2sk8MkOfldIjjJzFnUU8p\ny1nZ\r\n=lURg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/button":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/typography":"10.0.0-canary.b4f5a1c9e.0","@material/icon-button":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.b4f5a1c9e.0_1609364871763_0.7759622207090551","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/snackbar","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4699036980a7fd0be074452f4c196f225c101f24","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.a94bd8deb.0.tgz","fileCount":40,"integrity":"sha512-5vRGcvlexKIhvkpXaHgDGLZEueO4bA74nRa7EivLimuYRNUixjWmxtqnKEUNeuQAjvcloybl1qFKLNbV5LiI2w==","signatures":[{"sig":"MEUCIQDEIBTG9VvrDoe0joIMzZ1prezRnk1rBCBm6MuO1ZOKPwIgFNf1WVQB/LspgnVCsGC/xF6mRnI2Pzo/PsOv/eTutjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pm5CRA9TVsSAnZWagAAxWIP/ikvRCjpIisOa8TSHJ7R\nUPOZWXdPjlA58rh2KSoc2aEkTqjqzQo1DwVawP2qxr1XIULPc0UlD3/nhQGO\nlq/1nK9sPBFXfU/pDeAakRomzA2JiAtxRUUV1paqddJp/9KJxkQKsqi2daZT\nLYYYJ+xqQKOubrIhaKiMSASFpVSaSVfLVbUNYiNMuzfq29WQar+4mzS6QMsU\n1+5IMTMN+fEEJWn8A8VWqwO1K4qrg/540KDYwdAXv9k9ct/ZOd4rpNhFR3Aq\nCQ0dEkkVQxh9jrgAm4CdGIRt6yEw6y3EePuw534W9OtCUViBEcxWHF80HavM\n6CO5fWVNH3Sh9Xq4Xoi0+hW68UMDq6gdLC47rCSBOA96/OrJXsmTBCQHW9+J\nDXh/o0ZyH0ZmgUopg4zhJGZAVF2LVuXVBnTJBAxyWuGTNtAmsI0vPcojlvTB\nEHYC7pHKrPdzGrO39J2rZs9x+/noTygn/c5Dz38Li/PQ1jP2gFXL6g9Z1Lod\nM3+oy0ayo3RH/snv7BpPlokdbyo8j/nvOec0lMKvKY4sBGh8nvB1WWYiI5n0\n4VfvqPFi2uBdj2ku/q+VSZvdpWMgLwo2/vsMqjwNUyazS0f+SaglpZgfChwX\nEOh7A+6YHgDVpGlm05aHdGKf7efwt+3Wre6CRN0lz7/Wy0wtH0aNaXiaNTD2\n7V/Y\r\n=BYx6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/button":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/typography":"10.0.0-canary.a94bd8deb.0","@material/icon-button":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.a94bd8deb.0_1609365944986_0.5836293493284415","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/snackbar","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fb21379f984617b15909bde6f63ef8b32de7701","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.5d128511b.0.tgz","fileCount":40,"integrity":"sha512-V1cCO6jU2HkuoGTsNPCS/3fe/lxd8NDIkjo2KA+5QwRC3mBN1C+eVClVIxU/ntK30cz/11+VpOzCCIlHFH2TLw==","signatures":[{"sig":"MEUCIANtMbQSPQw+VG+yrw6dnq6OzsdkePsjaGCdF3fbn8ImAiEA4fY9WhUsOjQfvbLeQ7lGc8ERLwLQBPT7btAfXWTL4JU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PryCRA9TVsSAnZWagAAr34P/jhruM3Hto0RLjGR1zM1\nhI0iTQnK08tFICXm1l+2+vxIzyoRaeOpncO1jKBSEKPgsOVHJPnm/7fh/2qo\nRSt32egUUBfurq6fP5dCq+W3dncgb9l1/9zcFGRKiq041eUcyKSwQ1ux2Cw7\nlvDNkqGIfgSmQtPm2HlZdwBIoMZqMQ6VyIed6q/I52fkARWrZ2785mvYz7KZ\nqGJmYHwAgwjN5kE45ym3KcYbsUzIaXqoP33NXkEixFK8uo6X9mHfmuBq/NMK\n1bKuVxxMXPrF976RMM/NX56Sw3MeCoTPZo4yw3VtbXvPdmCsNeewD6jbXeRu\nAaaFNg8AUuma63knFpWj+L6BBTluRGgKDjq5SklMtuu2PgV/ae9PgL1AEgCc\nC8WBaD4rSbcLyH9bSGWYC/awoG7ip/vtCBSBFDXW91HaJRPjKFPZhBZAqr62\n7kla8q7zxRkwKazYWyGqv+I3Pt0kydUqp0hzAIq0ThOPLfwgkywFPjxCDh+F\nk9bkxLJHzNROlOvYKedwRwaZDYQ9jYMimXemkHo8F7ZEE/+CxolIvAuNZ0WO\nJA43mP4SSYetTtGfik0exVtFikx/01fwPF6MvBBedlnJZXwW0/r+ZyPKyA/W\n8cMTIE7zfRJToMWuDXKgcGIzg6/aAdF9V6q6AeqNsfRxog5NSwrGLrEeeUAF\nZVm7\r\n=/6u2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/button":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/typography":"10.0.0-canary.5d128511b.0","@material/icon-button":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.5d128511b.0_1609366258310_0.05751739308434911","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/snackbar","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"918209a15c9fa11af566e63d7bf3ec0daa82f25a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.365c69360.0.tgz","fileCount":40,"integrity":"sha512-nnMIewIfDpdFy6cu70D7WH0ibcUgWGTRFcGjj1xipT27zrgY3WPyxQv4WHS6szK9oiiJiShlW4qWUiL1OrUOEA==","signatures":[{"sig":"MEUCIQDlAg/UZabMFA13g/30ougqVBdLOpZtmlklLdqmdCqnHgIgDgrlVBOUOc0ELwS3kz+TWpavpLIsQrKn1rkvpzBEtJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9Ka7CRA9TVsSAnZWagAAfJoP/i4GEOSWFWwawnVKnQH+\nB4IVpG4BX+U9XRRMTyXGMpXiQgZJMxrIF4/olgSsLgmDrvWHmZBdCOMKFwcc\nmj1yBtSNDXBLCIoFLD4c3en9L8iw8O+YVHWg9cuOb0wOkyiaBuUabQBQ/7Vq\nkJizfo3+6irP99K75dU6Pys4fUh4JZiHDYxbZV5z39z2KUgQJVT2tvqA2gjU\nFfm8/oRGGQ7fdFTiNe70u1T/fPIVtCSsHmSaHXkJPnsU1rJTro8Zg7m9YTgT\n5rPXCqPrUFXWpEdJ+RIUG7g3aDop0wU3oFxil2/Bg17IwOoq/R4AJx8FkmJJ\nMDOK+IPH5+dLjj49jpwo/wguI0hJYka51Vv7+8mDgJOBgmTTFznxcT4PINTd\nboMz3g9prlICDZTjd8U22Wm9iE1Dt/NGPpuO7eDJyBh+F9z2PsgSFOK5l4iJ\nz36IQ3XG0RqtrFNUmFY4+DQ7fzfEikWW+ayEJhPlxHtXoHg9mlh4fC7dCr9M\nrSJFzqEoKSvq8wN4UwoZ3w/u8aQXFoTVg7ACAuc/COPbETn2Oep1XpkbdpFA\nAGkp90nIgP2WT7S15JzqiUuqQonjaV/5FTbiMJx8vfzh8abp0zlkOAJ9ZX2j\nLi6J5uro2UdHaYmrSeMB+x1ywMeVZy8UxE+TItipBy2ZQj+grNVFQuCO+JUD\n6OA5\r\n=FX76\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/shape":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/button":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/typography":"10.0.0-canary.365c69360.0","@material/icon-button":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.365c69360.0_1609868986863_0.4960209678598928","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/snackbar","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc381fcbdae391190d96ba8c5e1e7d12e8d6f1e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.700a8261a.0.tgz","fileCount":40,"integrity":"sha512-SfEMIEx6Cm79I5Vjj8CT0YymhlRTjUuzwRYldddgy1au9ww4zqIEbrMSyoGbafqtWOFOs3NRvs4/LtKdmhRVBA==","signatures":[{"sig":"MEUCIQCjLgdTKojqJB9BYu1DAoawMjDqA9/x5bzqdu+1j0ju3QIgLTBG+EXQBoepLgKRod6RHusX0HPeUDVrZGRyM0qB6Sw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NPOCRA9TVsSAnZWagAAIWcP/0qnCewviGoMoI/xtXth\nZ8eAi9TLS4TjemDtLJEuRhiQa1bEoi5UtiaH9T0kMJvWG8w11eb861+/3uI4\nb2OnMCI7x29f5HezthqsGu/DZ1RotcKrApMzLj7X/AglTG1dbV5a4UVcg/2m\nbxdqtQgbfEydwIMFAk/h2Rw1zI010BzvbgnINJGBVJ9k23DjuD7aVQ2111ss\nBtZiYokLPg5mToxbx+yDvlGkx1biXNfWpz/dMFl9QyBLlljLbJAjPzwTUk7A\nykz8ipVI7nuCJLJgX2NvlJM9H0VvgyNnbSP3NLmkMonimLesfBbK5zg6QQe4\nNth21T52QsBS86HqAllIF8qXewz4AyfY3Vgk/zAFRVjkhYFz+HjxDUEcIKUk\n4SPLEv+REZQk+63wypLlJwsKwVvQ/uyO7ScFtqte3EIqETzzA7uuX4rIWPds\nuyBawKfg5RHFxWcwkozGws/4H94R1HvxYSiSd1J9G8/+VDmXwZAyzaU3B/sC\nMF2TwiPYbqxKnjHV6BSaJlhmSES0eaKwsnVLki7+bnVDggOmHJ570GshR9G5\n0x0R3R+TL1QHS+5g+nl1Uezt/JTCpNE3o3S7WbTDh9cKCKtoD2MxlIvJJDjl\nEJBafcmGvdHhg14z9ZTojVTbqEK2QK3tIjCcC1T9diK9xuTcc5y7PPpBaKMY\nyIPw\r\n=jML3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/button":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/typography":"10.0.0-canary.700a8261a.0","@material/icon-button":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.700a8261a.0_1609880525489_0.5150568990060813","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/snackbar","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"195bee02702f45829aab0ff079086071980a5853","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.766981c15.0.tgz","fileCount":40,"integrity":"sha512-6pI93belsvpU4WQaPLz9ZLxNSMPSKuh2rmZu6G95kYNYjl0/hZu7vEBsbbxA5ZjIE5y9iGCryCOPI4/YJc0Peg==","signatures":[{"sig":"MEQCIAtUEq/nlN6MaMkJkMf7xIwd3yT9GxR4O3Q2EO/3RTvfAiAbhc7EMAlMmeAUC0S8zTwV+dF1I4vB5TKYPp4DR2pc4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OslCRA9TVsSAnZWagAA35MP/iwKFDnKNHi+eQWMmOpr\nBTqcEuFivZV5tA2RycalUkHwmwtZQeA1xCXadWhT07ekoNCykDUsNAaeFuAq\n1iMPPYQhCNmw6bVIWtBPwFZHwMiGNCn739Ki7GgebF9Ba/6ZX9KioqT1zGR3\nnlF2IUvq2z2z7HjYyv9Y/Eb4PIJmuTIkehnlMNiEtcpCxg5UCd2TisI251zI\nxSNoXY0z4jmzm9c2asb/RosLclIwLPo0PZhiClWW9mL+CHQTUeXgWth/++Up\n6LAdRsVVGQI8PYbBwR4G9jp1/AEjMvAkS/qwwtUy4Ciei29y10RsVei237qm\nMJCkuWv9b8CHwn8sNHrCXlxq7cynl1DK3nB9HgcjGBjMVusns3xgREBMdJCL\ncxXHFJAbMxsFOhaXZ4hAdVxizx+wpClNv3KxZUJB5dyk/7WW79aAeyPmpB8E\n4BUMjh2oqkwZmnmGts1lpBe1wC3q3upkayDX3GEf9OUeJo6lqmW3fHmGiPpM\nTRVxEbIVRlc4ObSqLF2JdlCcZ9JkUr6VFSOA8kJYeo+GL0294pUP7gtA2g9u\nwWsKsrxt27qDWUAOi9IJzvADIm6eXNIJspGioeC75t1CgOIXvbeUj9cYlcY6\nZK0RQ5WzZ/IjmjX5tyFBZaMH/NM0pZOXhLRVtPILJAmPkuum1A0mQKieW1ww\nTq5X\r\n=lAIh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/button":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/typography":"10.0.0-canary.766981c15.0","@material/icon-button":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.766981c15.0_1609886501499_0.4442962917080715","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/snackbar","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1327d9dada2af0ca0a038a6e57e03fd7a95218e9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.b28c576d9.0.tgz","fileCount":40,"integrity":"sha512-dM9Rn2FtjflPIj7LNS0nKa46iZZbLEfu9HXUkTVxO6o5wt2/gk7tAMwMSNp+TF1vEpfLoUY4525b7mkphtL7QQ==","signatures":[{"sig":"MEQCICWbrykz4KOpcCCPHHTQxHgve86VUJQeZ3pE34HOkHJEAiAltlTx/wRf5H+3uG8osPq+HiP9vD/Ix57KPehB1VnNYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1oCRA9TVsSAnZWagAAQJcQAIFKY1DdvzxGTzz5a/Iy\n/iT1FWfBDJxNRuDhzCdTfshyThZxYno2INFcIRWvtjMw9JVDjNIMmWX3nMVs\nVVUQ1XkZJFmmU/drQM225MoVC6pXp47XyOwGOJPbzr0d0O1rDpvPG6g126dl\nxIMjURLw8PDwYgytod9t1E+q/J/ztMwy5i4ETagspmQHQkaz3xYdvcBhFW1d\nzV5wiz6XfXNQXINZm58ghodPbDCUZmesW0/hmuFkrFkR7pASJJPpdfKpPEfw\ndbF0HFu7W7v2lsbiVSNZDMV8hNyaxEmFUoqMgge7daZGOJy7oNh6xyHLaT1O\nFzo+Oj/U4HIpHrmdO7Q/BSSyhA4q5r3C08vff0gu2CO2jWwnMXCJokHz5/aY\nUrJTLHkBI4piQpVBL48lkFlIknOAHRL/DAgvf05tzTBNheR9/KjKAgJXsAKe\nPk1dVi5qNIlu7OMZ5b1OzDCVsdhAWqC+J6AnoujZGAdcLosVnV6nPE5YA1ze\nrYlDOHqbsthxi5nWgR+dffC6Lmq2iJegZ9q7M1GVSCly+B2zmCELUWyzVWmK\n3BNjnOf/5HPp4UuPKBLOs6Hkr7zp5wNCuE3ujfrOA5cyNF6T4Mh4OQcZKBEl\n703ZhYMI2RUeMM30g7kx7f1fqQuvIejTLfwPrsU+D9sd7aT+rgNGodageLQk\nFa8R\r\n=9F5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/button":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/typography":"10.0.0-canary.b28c576d9.0","@material/icon-button":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.b28c576d9.0_1609887079526_0.6256103156540878","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/snackbar","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d03b4c6ed66b057df42b1cceee0dd93c2de4624a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.968735356.0.tgz","fileCount":40,"integrity":"sha512-VJ+Da/BNbYry9Dy87tPMVPnbfHerjmocXUlAuaqxvxhhP3lyB7BMZrZO6DpiW0v9RD+TdzB0nqh5hJoHTWHw0w==","signatures":[{"sig":"MEUCIH6/NKrzEpWi8pABJMdjNzuYdw9KhjM0bDZXheCWKvJuAiEAlw5Et34aSLTcmgCW6RUUotykDn6gPUr7dC9RjlJNZ3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dy2CRA9TVsSAnZWagAA8kgP/3uyhBDEuEgTSTEta69q\n08wVQ7nkhh/h35FoQm9fn/2UAO6XP/mo9N7BWoaW+WQ+b/PgQTwEpM0B41Z2\n6H13xDqU4sFylelIS5wbB5+L9zov+7yEJZVFNRwj1k2CQoSLbV6kcYgTYGV1\nOu76guupMkCkKJCzdxMUzmS+QY+kblyrGNzlU/Sr+mb8/uweNCNiEOGoTfDE\ncZXxyGn6jZC6+aQEnPeVbbnmTLokENA3px4O5Qjcl0Q2Rfd0KiBV8rXsCz6y\nZe2kCkkLgVMjf1jNpI6SngRAYMVJs070GcxHe90aXMbl3HWo1Bw9VXicoGhV\ncy1l2Ize2rW6FM7KhFfn2zWlMrdGNYPAB8ZkksNiYc3Qw+HOPoxq2hZQ+Kl0\nbKyM9TZS47O4SQTeo1thOyZ5RPtlFudNWkcvsR3rFcttVDtOZQBOa6UD/I/H\nMJb9JTplQoRZVAzCpe9XpTzowcwU7y1VTBiFcvO7dUFHyDnhwRC/ZbM+G5dn\nZakLj1dX6bLklBHvdR1Un4PzLbYGhqeUdf+1P2Wjp+Yek5IfXkUQdqmphbU9\nbn8HZAvJp7VXIvTbllqzBOM8L3AyGjnazB6gNpLpD2eVz2wG2v7MVKeTSJsV\n3TFSU096XyTy/dkyhtBSxAerpYQ9oufpWlBit/98HSPFNF3aHPJLQ3zawNo+\n3Hds\r\n=wNFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/button":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/typography":"10.0.0-canary.968735356.0","@material/icon-button":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.968735356.0_1609948342023_0.877256442558134","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/snackbar","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ce75634e2c24cc924104f6b000de82466b4034b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.c5e18b020.0.tgz","fileCount":40,"integrity":"sha512-OemABAQapoabAUP0gc/aEIU5wszhk1jAmC6uRkCKVyP6OGKRb45ONXi1Ze+gRpYQrFafOLSLMqYPCg8VmS7TcA==","signatures":[{"sig":"MEUCIFWmKlcFjH8pGiWTnHZnxwOtWJiV6JISZQ3AoyOJWHYPAiEA8Cg+GN2GWjhAvPBSROqgkE/0RtCRUnN/1dTxnsWFm4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNdCRA9TVsSAnZWagAAeYEP/0PAO9vcXgXi9ymrvleC\nUcEr+PrOI2qa6SuQsLcUKwYB8O3qW+HTjfPO1LUhsxySY2bN7d8ckn94SYkS\niWzxgBFgCCbpVsPujXxpWZ8WBiFh8U9Gj8Kt4MfdirjDK8I8kh01Wqv94Oxs\nx0tv/TIjcVCQHWPrSZVgIkm+RV7+zYUSDOT0xDI8NQPMn12mAVAfJ3Q/wBQq\ntIpcPe708xQytbwh8mH7RzSgSgRIKstzT7Gx308LFK0+JtKafeoun+GqX3Ts\ns3LrzuR8fAOTpvpQDBBVKRSAUEqXWRTqYUKK2YRGqueXkxV6JwuIK38ZJVCt\nSp0hfJzhZxtTLdFRi8X83CokDIRsvlqZfOWYYXN+BXpzgK6sqtsGPtGDqXHg\nL/fxCeOFjrQg95jUkuILzIm1uGw7EA5SUQ9fV8vpVz7MMjAqZXxStEYXJl0t\nA6fyHa2zVrDvoACrW2JAuAT5X2M6yEz1G53H+6EjHKUo+Mz2sXxioFJYlac4\npjUdKVTcliwhnvuO7F0+7i/p5igD8aYRqypxkhWWxQ/oQjqKeG01u0WvizXO\n0KtC0fWIw47zaXFqh3ta+iL0Pcy45KnbZltOv9Hg/lriqmqukQiawJuoSt1v\nqqh6pUrTFKU4z0Fs0hbbhVUbZV+3NQPMF8ydNn4ODqp7nBWWHHx2gmYqMouS\niGjV\r\n=GHDr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/button":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/typography":"10.0.0-canary.c5e18b020.0","@material/icon-button":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.c5e18b020.0_1609962333407_0.9005052132436695","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/snackbar","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd6339d50f8406db1ef94b9b9e407e267cf8284c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.bcff8a66a.0.tgz","fileCount":40,"integrity":"sha512-bcN4/y97bFjg9dH4p6cPxgxvT8rWztIq0zoYXSD51m2Ssp29ncqFaSU2GJvg4aeGwxMIiYZKHsFduVn38OK62Q==","signatures":[{"sig":"MEUCIDonCApEBOkzsQHtun0bevo9TySRhkEpk4mEsGada/zyAiEAkA1zEmWWKgb3UDHtBTSZcbW6yTUHTaS/ZWVTPetfOpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h1QCRA9TVsSAnZWagAA2fMP/3g9CSSgAXLlEtymHaid\nI2fXtdPXOT9NCe2jCbf6b1xOiKwBaKFqYVBjy0qCZ9jh5SUUCpJjq366Mnor\nvFldFejMQXMZXDe0haDEGnGXdMMg8MHraRkNBhEq7UAW/Mi73lzIWmZLI7++\n5aKqQhhivmXFpduDLnKHp9W6kozJZ9OXyCBCeE2MG83ItnUh5EyznlOyxGLA\nqZohXT98/2h/jJJHA+GnHwG0SkkBmQuOB6j36mrIed4fzm1WZPf7bAnK4Pv9\nshlkQlwliSldGUtRAhGSiczdVD1BVQB1j7UuquT/S03h+KrN9EG8p8fXXv/K\nfstKxfl6Qmu9A7gvlk2EBk8lbUPhO87nBD0O6TYCukVfawtthBUQRcVzPwaT\nFFdQebJ2u5UL0m3CrZQIFRpyq0GijAM9yRjBGrOmihL5groLpVJMMif1Mysb\nGM9xg+MhvJbAXzXHo2m5JQ5F6XG2qwUgjFuzqUWgp3NNknYA4Y0OKZkyBmNn\nKkDH7dRhnsOWalpmVVzVc8EUTfTsYRxyiqMzgmyUyG9Q8IXo4uky6hZ9j4ew\nl/2y3VDWLhD1TubVw8A3R8AmVRkJ0R3Hi2V57pdgqnrBNvk6Hs3N7gC2RMhy\nsQGikbUwLTra/CBhaOu3dHf2SpIBm0i0rq4y7hdEH74mc/o8VjZB1Sh2m+5+\nh9Sa\r\n=O4WB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/button":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/typography":"10.0.0-canary.bcff8a66a.0","@material/icon-button":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.bcff8a66a.0_1609964880232_0.6037430536869981","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/snackbar","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"906cffae74f48a1fc35b4a8f41d9d053b32402f9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.79328c9ff.0.tgz","fileCount":40,"integrity":"sha512-8fIjto0sti811wdhwug0jisWMzDEwhC8ZjjyThH5AUxa/RGevUGDXDJPwqBNXGWimEoQ2IlOqNa22FjVAIxrFw==","signatures":[{"sig":"MEUCIFBDGnLw+1L1sietrK5jdN5Gdoedda4ibinrwLYj0a0XAiEAjFxxYYCKaD67Q6E/yf8kT8qCwLSjJI0jzELtjwMHivY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":420322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nN4CRA9TVsSAnZWagAAIcIP/1MuiaRcm54GPaHXjpx6\nGhNPTnkznVNKqGdVOJcbLIziWsHwzf+oHSfdIvkKavqQ7C6bx442zvUzxvps\nOQcP2yDpkZhc80fPK1SN2hTKZW4nHv/OPh58ONOExpxGfF4PvAWHxg4fBx39\ncyn9WMuOpRRdzpxE7fBW5qaqv2NBorSj3jHamE9prvoMffbeZLdzIBH28F+N\nMTSDJCJQmn8AmvAuFPsvkN/mNVsP6osHpEMvoKJVfePOR1u9uC5H/jCdScnr\nLhMpvZ5SC1azYwey792bg5ddnsXKqNFXdAnrVqJZ9xUj5fYabf27E3ottZPH\nDPkfaTZAHR2yS1IC1jUTZFi+2GQwraHuz1mcHem3snkbT/vieNT0BNe8L+V4\n2zX0zUqnis18j4GCWAYVOLfWDgYPWsLnHRcEsWKI+oCfEevylCcioby0nEZg\n972vDRWX4xL/G1zYp9BLEhT9fsT4blSyCNDPFoYPw8tIiY24TjrCc2/qMy4P\nI/NU271Qfx5gNuFzeA4q/ufDLdHj0YQkX3dnBWEX6Qz9NVcT1V+6w0UulzIR\nBDzBWt+FP9459mks4GGp608LhmTKGRfoAOc9oOR/hW6VWN+VSnJv3OCKDqil\nhTRje6GL3kApRNMps3NawU4j4FzY1QuSyTEhBqr+Q3KxpiY2OYitrCuCMQGq\nreUN\r\n=+L4d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/button":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/typography":"10.0.0-canary.79328c9ff.0","@material/icon-button":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.79328c9ff.0_1609986935856_0.8672129838200922","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/snackbar","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80d04714ae52ad2949550ed7df596c9dc3ebcb6b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.121e1f303.0.tgz","fileCount":40,"integrity":"sha512-V4HrkrR04P498a0uYUy4H0r+7O5HluNeommIsIkgZHpRN918MRJ1Gu+ZYyTsj24nljfz5izv5W1lEeOO49hfug==","signatures":[{"sig":"MEQCIDG2gkofLkfnItNi3FrbBStqT3udXj1Z7g2nonJVK6P2AiB2QR3+VtzxffEs311coAnGOdY/NNosBj49RraToPY62Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95dnCRA9TVsSAnZWagAA/swP/0S9QnUQnV9rgUbX5cP2\nUV1+CurYaWvq+hJsX1IU+FJQaRdYmiNSesjoiz9Ix06rgOxUnKk5S3pST4fv\ndfsvYlm71mBOXJlEGziZOTdOdGA4cRNGsCU6kp5jTVEkI8oJDc4hxDKk4e+m\nY5CVSPXJvPOhogEhYbPRpnUVql+hKlsS4ekuDAwcVxU+wW34nRkwqhjH6gLW\n5UCRQCQvNcOedFu9Y95LYJWxCnfpy1C95MHmOg95weLL8uEFAaA/8vh8ON7J\nynX4q6yWNOBzzUwyLEtAJf2FFIwPKBBjeAaUMk0kBEmqAOg4KWAr1wtQfcg8\nzCRD7CLDDwIPHOVLjoLxhIB9AnHo/wkin6QIqvJxZBCsv7XcoTna6jHCO0BN\n1ha5WS8bH7CeGdnf6EyPNVS86Zsm3TyHlkcXOmwYsMjkZBIJbqalZjsmX9MM\nMyOPaq2AR0NePtewSxqYiuQ1SVB4FTHLr2w62BzdROqy+SiPlKuwvZr0QClX\nvY4jWE3kUvb08z1sSN0GueWU96fHQMM8pSwHvLgV0Tyhzr9zeDg9d3PoaaEn\nELeuSFeSiIyK+c6lZN3sZ3YnkC22C006enBYtqFhTFmJEZnuyyVite2KEyd8\nlzHXRTK53FDrYx+1CjRWV2fQJAqjjpuOKfwofxOY3J9WnZ6Bk44zUuYZsG0T\nCAHT\r\n=PwAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/button":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/typography":"10.0.0-canary.121e1f303.0","@material/icon-button":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.121e1f303.0_1610061671375_0.2815314985719497","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/snackbar","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b33f0b426f8b45d29a2e506519ba1d013da8863c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.abdd10065.0.tgz","fileCount":40,"integrity":"sha512-VVx7OIrAlM4KJPs3aKBuUqDDRebDvu0+hZoM+FUR+dc/FooQ8itUXSmEuqjePDXV6reFDDcDJ0s6oIcaAqJ9HQ==","signatures":[{"sig":"MEQCIFL2AGUKWA62k3NoDoHfoG4YIQr53v0TbuqBsdZpzt0hAiBT9gz06Os2SSvdWAre2/G7rMaPUlG0HVMS6HrBlcZcRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Jv9CRA9TVsSAnZWagAA3AsP/1zUJNFMwapOPZ5xvHJF\nQ8etnPDf2j1mPk8Ft1wl0fKzB+wIARD2spOT0vjZIHnK7uKIOGKgOG66Jl7j\nFUckFJno9xINBrPK0hhxzE3o8hOm4iuUHsrYQ8z3JNFlLO5kUwFPGOwSsB9O\nK4aKwN7eE7Ve3oH/F3YLPp34gCiLsEfbk2MEDS7UEWsntvkEnn/NkE3KAxBR\nDM9FbgIuQfcKMAX+/5g1QCWr65/XOI1PEhAu4sT/BruDoWLpNQ26CVaML4gv\ncJwhvF+i/UAt4p7tQ5Q1y1CevGaByFyoSB1iHlf7UnNjKwbApIkFJxgH+f8p\nG/MLsfFhN7ZYZIIiCDv7OoTcObYQbn9UkjxhviJE4kMZclNuUt6awJo7N8jx\n47JlnyIgNxpSXjatjDrTNY4jJDn/IjrJ8jiG4jOiwamEPmTNSdXLhUdapkkq\nBsCNITJk7a9cD0y8/A98wbpDWQsubgtb/pzX4zdtssWm8FdH6x+OvvDGhYSR\nTM4879AOvb3l47KOvgA6HYKvbleSynUZA0U5hp9fudIZ4kvRmNxB6aJY8ilG\njivOQbYC38hxvlPIiowiACfJU/t1u6Ee+QRTQeh8PyO1FlszIW+BaYmKN/oe\nhYii6lMic6IGupLlfdPvvy+SXVTmxQfzBxAEu7xMT52gGY1WUmD7REkq42Xn\nkPlJ\r\n=PrMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/shape":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/button":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/typography":"10.0.0-canary.abdd10065.0","@material/icon-button":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.abdd10065.0_1610128381520_0.9058979457656489","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/snackbar","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf9db4ad5313a07553d04f76685975aab6b2373c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.089de519c.0.tgz","fileCount":40,"integrity":"sha512-xG+eK3p9S4Ueyt6rqFkFcRcu6/itQDB08QebJrhpXHHa3Rci81vQGSw3KdVmHXRPPT4NElRri0VAQxAJvINcQA==","signatures":[{"sig":"MEUCIBARVCxghySfY1574JPBJR7tO2EJtfLhckAqo4tX3hkLAiEAyI4DyVEKN2kTy2cUVrQbDi8hdengcd+YaGK15ErAoKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NsJCRA9TVsSAnZWagAAUX4P/0sBI0uqpovYviOTubDR\n+ch9tE/kXJaSxQgrM6Y+/hsr62Wd6nKlEu5oO66Y3/26QtEgqdBDHDbkGxr0\nCyI7sTt2rHkRQ4dy1IzKExJunDVUJyFGtecTPBxwXNen2kbJRhQ4rwh+L9Yw\nBff2ZivoRhdIQDdbeODgrJO55uTgaB1mz4TCClWVkBfZ503an3VqUPgTtx+Q\ncDwxzE6DpgvJmjVl32a3V7yMWniC+8mO7+0o8O/uuhqqH355vB7VJWTuBNoS\nUzEuMxSSva9Cowo1YXGQONdz9xp2dX0AjdePQWNrvkzHJKPJ2B2pzxM0gQcW\ntKwr9yn1/3yAO0yl1XlD1uI0cOnAInmKm+DP4YWvothCvEjOrKneMu92oXpW\n/oLNlzxUJapQX6oPQW6sipTRY4v057/JiWP0Gt0wSDLgqayuSiFPwUzChKq1\nYtdlaWgL5vdRV0w8tosuYQEyBQUGEYi12D5YmsHDVmzliDGRysuzyV103Rln\nTZ0Cj4maZnmZHXsfcu04b8kEDtDFK5zvW7yzAC5ZeHcEiFvaYaexhHNL73jd\nqcla+tTQMfW/3dyfwuJaw20AZtWRQttFiTnQvdeoezuFwbmOHYdnIRuSUi3m\nMKvY1mStRMDJPefCUiAlCjyzld90qc+J/jHwq5A5QqQYwhQY4LJKxwPE5Xrt\nHcJw\r\n=BVdS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/button":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/typography":"10.0.0-canary.089de519c.0","@material/icon-button":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.089de519c.0_1610144520544_0.9251988363381487","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/snackbar","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa8496a1b29a0f85cc493d7d6497e048be454b80","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.163119837.0.tgz","fileCount":40,"integrity":"sha512-BP7WIP1DabfMeDv++0jN7+gFTnEWf35e8KQ9Cy+c+UP+7aPcmgcJ2mAKdL8CKb7UcijrWhkeDWkXTcIrlWb0hQ==","signatures":[{"sig":"MEUCIQCW/5rHYPU09QNoypoYEwHxm1ksgcpELkcTZIxoLi3bIwIge+HW3B6KB61cyx1CQiFwRRU2eihQBxXdFuuyH1E4/UY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7cCRA9TVsSAnZWagAAzl8P/2VdVPNYaZHI2XvwbMQn\niRqmsPI4NHpXeSK/XPmRiL2D72J3Ngq4HsZIX3Bb5AxFzjGO9HHvDOq7bvma\nh7n8Y2Az3HCO5AR7NB490nynRq1bhR406BhkqoKpDtNXQhQYqOcBfzBN9SBy\ngHg+dXA5qyJC5EmWiCamo6FtolI2WRGOv9rw7RTQzVLDyHoX8Z+4ZFMgCPy5\naB67F5hEwqNjAOW3MgvkFtKrTvO1781zfUDPLCUwAjzTkJhepL6/Q7PQlPzM\npocyifQpm6d6qPiWkrrvg0KhHrcNk6WTgtnh3wOdFWjk0AHsR1pmz6IEbsM9\nCvNAWnlSfawGS40E9IuZWEtuByaGTMGX+KmV6LCvGRx15PHiTaOvD6qmBR5j\nToaB4kDD/1TNae0jIvP6Nsvao6ZSNoaEJtlG0sHQZJKbp3qEl5xyYifU+C3U\nrB2YdCn1GvDTXnLw/8h6Bfgv5bxm03RUS42jxXE+eJxnjorO3HBf4wp4s3bO\nJ3SbCUqDS/VYx5V86jm5Xothz9KXNtnqe0oDa18v4JbMEJiUDQqSCcmwQPR/\nxxcwU+MWWZbTBKG/3kZ2gFlBVq/qsFwJySoHvS1cwfeLtyv0IsxrN5lNmD4k\nrB3sXhsL1NO4VD5yqaOxNt4UHRVmLS+m7nlC8lvxg7Dlss9wVb32HLG4xiCv\ncc26\r\n=stM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/button":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/typography":"10.0.0-canary.163119837.0","@material/icon-button":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.163119837.0_1610149596294_0.13024756160438566","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/snackbar","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ab8d70da891b6a2d19fbd425d21b82e9fde5ae4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":40,"integrity":"sha512-L51b0/OQvhrZnv1HYXE4fVBx/wrmBtk+v3HwMzvLYfsZkUvYA/nepQ1kKYJaeaZSj+DXxOeDCV+x849NZ9e/mw==","signatures":[{"sig":"MEUCICCu9LWYAQ5SCv8AKIGzwUmVl67Jk9xEWjZlvrqveYCkAiEAx1L1B5THMybHYroUHQBwGcR+F6dnPIObb/sxu63Ahs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HwCCRA9TVsSAnZWagAAs/YP/1KvgThuWxGJdI53BPWu\n3lepsIVYBGK0PD1v/5PEpNNMWqfZHw6dytybZrZ/qAlwmneWNRgJ9SJ7jsHZ\nYQiK1m/wiOfdY/qqRw1LF2MoARw7x6p9TLy/K+sc6eYA1NkFlkp8uVg1+S6K\nGN5PYYF9IR7PORAmaSqX3xt7GAng05jRlxGRN/6Fz7dX+lApGlLn9uOWG08Z\nbR7JI6B0Y8buUaH938l3pRadO2gBYC/X4uZP5EIsgvzWLIJDbdO/AKJcJJeD\nqsvM/LIGFLl2sM6jraFvP3Mzsv+SzdTF0brst0u9PdCfs88YAC5zT9ZqNWov\n18+icblHzKAxAxJDSlgHCS55x4rTZbZ6jEvgTaS+wuB5PCbgr+oMyPr1lWWY\nvG+qysxucJ98YekBd0H0gIJc++jyF1VdS0k3iYCRn16uEZ47UkcujuLw8aZg\ngxzwWKmUAgv/XlEdcyCfqDfM9Ww/cRxk6h0yFCFOv+f1nC5nPfNWVqJvScZe\nQazwm8cTC31Bb2TC1mTytJP3Ts60yLYilbqrCk8NE5hy0bvpuxC50FWNRk+I\n3YrK88fmhQwwgrFzZJiNxlOI+1he4yow+S9mzCfBO5k0yjWlX5AXCc2l9tuT\nXvOwUwUg1OZiNcglbvbWV3PreAKXqLc3ODLRxqzLEA5yFbWcAFbogFcRQHgV\nl92z\r\n=agLC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/shape":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/button":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/typography":"10.0.0-canary.b8a1a58e4.0","@material/icon-button":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.b8a1a58e4.0_1610382338006_0.12082663819342732","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/snackbar","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7408c26c2024d93ffd9976f959a0758b08a733c0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.7584267ff.0.tgz","fileCount":40,"integrity":"sha512-pF8KU+r7B+/1fEFlNYppaDXI91ZDJlIqc9PQ7c/gt512/3GARnt+dRDrCG4mTc85D4EUYMK5N3PBiiD8toCkdg==","signatures":[{"sig":"MEUCIQDmxD9pXXVcM35K/HPEoSCSAZ+R0SIdzC/U3M1/U8ICeQIgcQ2IFkFcrSw5lPJz14ahjAuB70J4ehpfKEJKT8EWIMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PfNCRA9TVsSAnZWagAAVG8P/1oZuXNlpqIyO58y815b\nsXOfIeQB8hbZ/L3elH/CbBi7xTiosvc813pevSmi12c2pqTT68uyQcIQPRAC\nlDW4yw96OvJcRcJaiyadinmSRs1/imQbFT/N/Ez4Zhu733EXqnJbit6H8DEl\ntv8xPtfrdIRE9Zl2hTmrSg3dM7RwtOqcyLFJGi31q8Baymlr4UGAQ+XkTipD\nTcBBhZJR0cRznpeFUkZOjY7sjRCKnqMPItnEKpGlOIUW2zS0M9LCidAT4/+c\nZqIP3oyHQGLfDeQ9fmlWs83XUa/9KLSvmeyVVw8hKeupY90KGP7J893WmySR\navMVFY0dF7tUq7yEh5qxbEM/LemASCMraXDVXSlnX2lzgPMd0s7ZqeN4tQB6\nLpC3WA7MuXRVDgWNd/pD5bbzE+0jTOlyK9Ta+V5gLy7QfPbUM9GYiB7yIdNO\nc8gP5VC+d9dwucXasC5qJoBl+jU+57p9IrvtpHRDDl6tj8k76rotWdjSoidt\nMN8kaSHx3/UBvHYRJL0L8913IrIg84WVYLZ4kkrU3F9QzAwnTjMysAafciVX\n5UkzVSblr41LHvsnxsO1tXEvjK8eQ6ZyQ8FX8Gjx++xAWzCHMFBktOoANAOU\nqGYSxuT/iLQdNvAOeH/7G6vNuQrA4aP8JwqEfJF9KP57HqrGVMv1PlmN4nM5\nwyLY\r\n=zuHS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/shape":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/button":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/typography":"10.0.0-canary.7584267ff.0","@material/icon-button":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.7584267ff.0_1610414029401_0.6207798983564132","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/snackbar","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff60bbc9fa5edf660369ed5ca0896bb62435a1df","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.251ac04c0.0.tgz","fileCount":40,"integrity":"sha512-MKTvBzvTOPrcV/dpf+XVxGzNxsbMXBESX+/3a3stDmvbe8I67WKJlsQ1mCvZpoxIdRNt3Xji98eFF/oBqwI78A==","signatures":[{"sig":"MEUCIFILiudexLF5QPSHtYUJPaAWJIfOUFNtLmUCdePEyxpfAiEAnqkZDhOV79X+HroQfjvRYB2flYQOaq6WKE3+Umoa7jA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f76CRA9TVsSAnZWagAAmZkP/RmhZ7lFaTKELmA/vu+4\njWhnoJvf1/lVWqlxGOo/wacTwUFgZQi1qCFsoL7kxLSAMija5h+CgXqiMX3+\n/c5O6T0cJ7aCYCKbSzPFyIXe17riPo7TaSHHY3Z/SUOjVkLcK0CdwZXxm7Ug\noqinWr5pJOguWmf/z8GOEAbrM9HffHwjEKd7raRN1j/irhQ8mSpPhf2Qctbs\nFgkhgHyngAmBJdlxL8SZO2nxgxne40Kxx9vnLPI3icg28XBibTr/B7Lbki1h\ndHfRaYj2+0tfR72Rqkbs6a228NDuiAgufMjt4TXPThyCKfJviEd3P7EiJhSa\nGnrsSojBCfS8+05bW8AV90vUqRxbXe4EE1BhuQdwqGpPUoQAw2nC4HUX2ug/\nXpSsW24rkPeJxxBKO0IJ/mWhVQRqSCK8RE9TzooH6TIm3W99VXIwoeLdICr1\nSHCQwEDwriPPmNpUPBD40T0p4fIvABULFV8MphFaNCS4kBPeoNUS6tLqYw/J\ngjWWsx6URdrdlRNXroB3O0m3jeHAB1V0ZML+pmJqVUvxbWdc5VjspNYyFTa5\npSgJCzBhr8rIxlyrEZO6dbF+ItvjhBnRZBzTqqXSrb6wEFgOMyxCnX86xbsy\nBrctcE4EcqOAfaLlSI3eZikI/sWcuAT3xEvkaHWUrDEYk9jEDYhawrQlSqWR\nYIqf\r\n=ZQzL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\n\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/button":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/typography":"10.0.0-canary.251ac04c0.0","@material/icon-button":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.251ac04c0.0_1610481402460_0.34264353162666605","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/snackbar","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcb760f94ba3b96ff0418aedea0bedafedf3bf49","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.772cc1068.0.tgz","fileCount":40,"integrity":"sha512-wD8qdYdlppQ4YtdaYd9LNlYvmHs0iZ7bdLesE4TVmmm2k4XuMTwPTkSaQ2Q3rTU23l1JEyW9zO8pXF9fMwFl8w==","signatures":[{"sig":"MEUCIQDPy81/jumEEvVFQ0S2raVUcB6cycl8QXXIVlxjsv2q3wIgfXzyd7de0g9U3J0yd0+d/2ixlgmxjT8ay/e9iMywKv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4uECRA9TVsSAnZWagAALJwP/1+HrAyykYewlWDGixpl\nb++DR4Q0y4xiCEdI9D4LbZ1vRCo/Dt3Qhs9eqNR7I9ZrchagwXg4cTHDnkUD\nL3OHxStllAb8dW90ZSrBAbi+rOVCxy59nW7yE5t3LzRaEQImWZePmgXNkAiZ\nmDBbOQ0evPFfEEV7oc7CroaeD21CwzC6Qt+nId921AmB5++L5JPzUsaQUsaL\n38JTSTGLvb4LTibY0APs/HYnaqux9rjIOoy+to1q5wzjHL+idBAObd4ba8fS\nQ8odtUt+baAypkTfkS+6NYONGECo+PaMPnw0B7AYHI6f5do884jVajtCXVct\n2T+TFljBnNl9XzJcBkBK3VceaHI9n2+zVHVlYqIKnxoIFwYpM/uzzkoPx5Js\nQgvePz9s01AFCX6+BPnRytvwMXbpnnWqUBz3U2ZvEHzlnJQ1DoDTy+KjHTju\nSEQu4MhjcTR43Nv3bg0RKuU1CzyOS9zFTBA2rAtefp3NueWKVMLizWHsBK4W\ni4m9dgLyQqk1iq6Sw5H0f0rlndzGDU3ahrCaMOi0fAwSLC2RglGYAmxLYKVh\n4Y1EUo0qeaAelxIrVDr3vOG72XHkrw652MSlKAwhLdDh7alDV7Y2dl6b/HdI\n+ZQzpa2omo2QlN0zTTxa7dSHqLMFjnr10bBObJQEUHgSRBhfETQaJGLcewDu\nBf0T\r\n=7hDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/shape":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/button":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/typography":"10.0.0-canary.772cc1068.0","@material/icon-button":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.772cc1068.0_1610582915592_0.18540244607778278","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/snackbar","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25e6f669320957e7de5a9282d1e8131532525d17","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.fe13dd130.0.tgz","fileCount":40,"integrity":"sha512-HfqK7TswGn5CZ6CZyNoCdKrIPR+054Bho/uTCS1iaRUf9jIKMB/qn1e20yvUc0dyjJFtgiXxkuGzFDT7wVgxXA==","signatures":[{"sig":"MEUCIDsQX9khSt8kr9ycON/IP/lZvOOhvN8seUYIxIJYIm1JAiEA086TVHw0NlVepA0yuqlSPrWNRoVMzKMKsUsg7xT4ITk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5pICRA9TVsSAnZWagAA+D4P/1uAWcIENf+A3TCDSSm5\nfnfEoLN39UwuyHSW0DRJBXtGqrCer3ncVjtTzX2rYljxeOqghwPV1Rq43oTG\n0ZVpAp8d+i0bg+2GhDhBALDUr/2WS/yBmXc2s6lwVSjjYqaXXI12I4TTMB/G\n/903ckuZuL5d+InVrvxygtr66/jzCACgWIQy+KBNI0ryEA58crzl2vNJHCpZ\nYy2S2gVhHa9R8nhjCWm7nnGFWRZEwHuGwNqANM3P5UP3aLL6ONQwCU5GDxVl\njKYPhI8GNn95btZ+1mRzh10+ICd+74xis6bvxIyj86g1p85cj1uftkwaIgZy\nodzB2Jnzb0x5APmp6xKU4vH5HQz5ijCFFvhTYqd6ZjM7cBgSuLZfcBdMnshQ\nHIskTPDrKymMX4raU8fKz1B4DCtq3WHxsZbh15MZA7shiPhu3UhxhpkDTHm2\nuZ5RCtCU8+Rsb1wn+MV+OA54O9s5xBn0lBilzyoca39QTg1r2fnRNm1TGFRa\nYPQGIHpPGsKm9x9IM4tvcBTIJRKQ0agYcTrhK6KhzPlCLliR7SBe8B5PuME0\nDEP+tTBVKa1rKex+/i7SH4PfB3uGhmt9V50brMGKnam6LxPbi2uMnqN4G3qi\nh2n6IJIwX5OHOi+Jq2rl4//9Uqyx36HBjrvg87Vzo8IW47C0MrL0emTAJMlk\ni9UF\r\n=aYNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/button":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/typography":"10.0.0-canary.fe13dd130.0","@material/icon-button":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.fe13dd130.0_1610586696278_0.32218194303456227","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/snackbar","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"582c4ff90980dae83c04966bcfc09c624e86f486","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.c7c5da28f.0.tgz","fileCount":40,"integrity":"sha512-zSMjbIjXrlHgxytsUP/+svm0nOxp610j5Hzvc9MB8LRhHoKZFWOefse/63DvLpHuTJ562mMLJOZn09RL922dbA==","signatures":[{"sig":"MEQCIENk1Teb2BJ+06uZzb1Dtoge1ll6Bp+qNlDmSKmUMHceAiBWieuCEOwYJDmwaDwuw2m8Mt3AZVXmMC1CzxZCbo/fug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/hCRA9TVsSAnZWagAAfwwP/j87B3LZntB+Z9lrTYif\nGDAh3K5S6ZMDq7eJwit6BgeP6Dd/3OnyxRkeM/tdlVwCCR13+cfXR6bHIRbc\nZ7GmFLoDu2CW1KAg2nSWGnRMlozV+vKEorkAdYp/48pG+u8m2my7gpifCKf9\nAOJqoxPEUsB0yee2YxPDF3lPM2FZwgljJkYRPrFZOqCFpyWn0xxie7VJKCPk\ndpipAsH3gCe3y51IVCqNul+CBVCv3IvYXVJpM/ZoDOSakJt9RS4NC1LySW++\ng9DFYWw5mH/8ZV0haW76ZtLZa66YTwp7mmOYB0/RGxlKo4PvxoB/TljyJ1rz\n4lW+I7WNgSGEypKjrPWoVlNuSVo1ac5/HIgZ5bmzCloloJH5ZKiT8Z307gbR\npzaIjdYacDjUFZroRGMbEkE5irZCn5yrWe/+FBaF1SqOBI7g0LniwGiz72wd\n5zFYLM9M4RFU2Ol7xChjUBlsgbt4CccfHf3XwxbNGg/JDx6bUOKDIrAMTzS8\nDGOZZ4QtQl7PjS3bctCtB+mAYqKWclf4QHgjCBESV7y6mTrficj4B6uc3ZQl\nXDpeMWjZxDzy+SJoRJ0EcXzFLFOt5Kt12Bd9PK/NB2ZLkBUzqbbMXoP/wFfa\nnNaa42bTIK8NiOsStwhwS3jAmyCwBasij4nG0+dznWQL2K5nf+6OOz5B+0oc\n1oJe\r\n=8lvc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/shape":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/button":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/typography":"10.0.0-canary.c7c5da28f.0","@material/icon-button":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.c7c5da28f.0_1610588129485_0.25491610027348943","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/snackbar","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df95e3e492a6ca191d9e41defce1eb364deedb2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.b2faa116a.0.tgz","fileCount":40,"integrity":"sha512-ScgAfwuy4+pu8mBooUUD+5j0cnWiTAmwSUBCa7ZcyjB7HHvgXBj7Sg7v4y32g1orRZysM0WtUnrEH4u5hzBiVw==","signatures":[{"sig":"MEQCIEiMkXS+UrDAfvqu21sG4T+G5kErdcvnQMve23vOPFGaAiAhe0XkuhemSGJeC1SeVpWmLhY2mI+jUPvDjdo/dLcWkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzK7CRA9TVsSAnZWagAA9R8QAJOc+3OR80DDT1KrjswI\nGKgC3aRZO8UIBLgptZ1HnExZuxHwOZOQjyGFKD1bHWCEezw4TqqXSI9+/Egm\nYgM/FHiv6xuHnJfLHYDb1W+qd9VUCy3ZYkfssxrBiylX70wuiUAcJZkOJKCi\nBjbKo61EbBASwH7k9W7ttlsep9XERwPpLKU3rYbmGCGArDUQ8P7SyfmH3Rd7\nQHKr193Mvzy25LE5KGWw/kU2Ea45yuFTWtFBbH6bTZvszZI+NaNLb9G/7v8M\n2x3nL7xhkXrJB2NkmJfEwWe99P7D5XS23wOHI3PBr5Vq4IenHEgklCoPUtxC\n2Go5xs3417rMN2YQ3UsM1QSn2POjQq7Pag5DFAohV4FPDezYcOP99zxa52k+\n8+EULXOddr/A8nAE8qh3W3F/aiqGLYuhs1fNop+Q4Ownlg1NZ21HcqSZ54DO\nTfW0iN42hIthqN/TIeXwpCDvYZeRppedRZ3tNQWKhuBVhwt9mRQF257NxO0d\ndczhcVp6Pd+uRNOQHIfbhaX1yqEd8uwSJp/064erl8xDFpisLj01KSSn567A\nKeFFcP1KnizcRFBD2Mle4vdahswetyyXvcweEz4Fe3vuSV8jUr1RlI9UnMSu\n6ECRavIgbIGEIxa+q/ajtYzHIR3/tzMmt2JXthtf/5vi+bS+IIhaM7C9bKwe\nGw6D\r\n=kWe+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/shape":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/button":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/typography":"10.0.0-canary.b2faa116a.0","@material/icon-button":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.b2faa116a.0_1611084474775_0.28130739453181275","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/snackbar","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bfc176af1746b7ce4cbe10c6abe006591c40194","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":40,"integrity":"sha512-VQ7vYh+iL+7XpMhDTqlRuBn45VXrcnj17iMu0VcuCyITxxybFdZLIew/AiOTgGWjXdm6EZuYkjltkQfR5CBfpg==","signatures":[{"sig":"MEUCIQDCNu/rFUNNOrMrNT8VT2z6zg6q8NKmGX4ezIfdRUpZlgIgUHMlB2derz5yxYmQBLNO9oXSyGqy8KmBu6MSU3BXzIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2NTCRA9TVsSAnZWagAAVHYP/3/p80DGpxp+SQ8FhqB0\n9Xk4WbTpoVuv0Z0O5Qix8hZObersvntg5Iv7WxFPu5223slmgPg0K2+dc/KY\nIM+0NSKXN+d0MXlccA/whOLOKqhCLgyo3eYWr5eQZYft+vExWazrX+n8+xOY\ntWhp/1CX+7jh2XnwQMOV9AKg6MmbQCmKAvk7h8tYIUs7aMPcZb6uWWGQEaG8\nA0qCsyVu4Abm1OlXZ8CmsMysZ00C2uTG5HjkilPx9VJrdFzwh4aVFa9m10sh\nrf19H2yxB16lyiQj5z6l/FxVzlIeUKbMFceojPzmBq7x8FVuLpRinYPeLUEQ\nRoOdmrlxbHkdw/NjmKL7odMSUV4q/VnIrAWZ9pVuVKyE3eKG4ENwe+kTtr+N\ny2rj/gY3RPWjtS0TfVug34lex7NtFfblUvtRmHn2AqkWUai/AiSZIY+zly3q\ncM+T+1fH5xOwBguJQqnFiAO0MS/fY7qle1RLUPbQ9yXb+D8zUm0NG2q1gXxD\nKqFyv7OoZ9iwJLh7YvkLAr4PYkyjZgoFjvRphPxF7VRVuECXuf7vtQf1yFbF\n6L6hx3dmOIE9keZOEC/S0BdTiw1Sk0EqMdrHjfKRpN5GUE8K7oUks8BmrYow\nGmOPzGeoziSI0UlgeX/0H6H9Kam1dwgVN7ntAV3g5LNU4RhTu8cDjvh9jhjf\nQAMZ\r\n=p6X0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/shape":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/button":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/typography":"10.0.0-canary.0c95c9f7b.0","@material/icon-button":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.0c95c9f7b.0_1611096914991_0.16867386544036922","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/snackbar","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29842ba4b5e0ebd8b80d2aba3b468d3dc08e1e57","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.5268222c4.0.tgz","fileCount":40,"integrity":"sha512-/BFsUFgFiJMvcfcBsG6snIfVMvEd8N+aNehHLZCjoez6p8MBdSqgCcmSpNweuGAecUpC2RxBotUTIWCHbDDfWw==","signatures":[{"sig":"MEYCIQC0r0lQu+QDlYqc1NK98PcyAaYetJlQ1tTlF415eeRRQAIhAPpXiZxA5YBfX9siHLmE5hjfIUHbZXpNZwQDf3xdLHiX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIKTCRA9TVsSAnZWagAAoFAP+wdwoGro3hNHNIHG4wAf\n4r5eE17+Y3DTV/fR3iXwIOU4Q9iK3tdN4lcbM2OmfUcbMhIWGunphMaRsog7\nMR+KIGVsY7wlB1zHVxdF74ODCgworQzcfkLnCZ2G1ZM6AQWeYQggnvlHfTYS\nH6NSWE6QsW9lnHW2HbL+zgBOLA45wVZS4iPrL686tQlb0EUpWye01I9YssnA\nUHRdzW1Y3DLEV7gPsGA0TZXdWjNj10Z3vnbjKT2DH+bKq8I1hQDljuFABkni\nyuHxbreFquBllPIVBgAc0ZukvK+c94AhItQsTy9HfbVvSRkdCJJQXUpJtVqY\ndHw9KKIjJF2bJlxRG8zu+Mnx8crMUjRENF0YHN3o8PTLNohIQ1uwFiL+9/w3\nb/yXKZHsy5J/UTF6qXKmailk6hKkxyzmagzEDwgR281uaAvybP8H5+JaODjV\n6Di/qUTGnYv3OSoPKxt444PAj7yHe1IWkEKnznPyCxFbkHA+iV0R2vN92Hu9\nc8GEzJOmcg5wLRL8PaU2iC/WWkOaIWpk4y5lAwZSiHFe2eFCxt7DU1E1u0db\n3hyPycpkq1BLgu23cnmojQbPYPSEpc1O8PBY6dTdMBfpKbLc7lXT1pmb4GZ+\nUU7281AQXL78QFNd8bReEQAvh/ZAFVFo8LfEH0STpnvJVByJGvTY7HL7Cqck\njTst\r\n=wHMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/button":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/typography":"10.0.0-canary.5268222c4.0","@material/icon-button":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.5268222c4.0_1611170450700_0.9375590610342499","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/snackbar","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"063c21bce5b4c93d523befc2ea304a25b58e6181","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.2ed2d829b.0.tgz","fileCount":40,"integrity":"sha512-wjal2CkF4AaSc4Rd+4Znv80GZJfFnjQqgvN+r7QEWrU9NMetkFu3/KU9fhDBl7KDDOzJbGE3l4Jta1jzKNtc2Q==","signatures":[{"sig":"MEUCIQDQ+PB3Un55mLaYL59+ECMhFaWlxqkCt/LUkC30yca/TQIgE9P+NfCGuGxE+vPqp8w4PkP3oCNrGx7o9JE6ul+Ome4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLgxCRA9TVsSAnZWagAA1EgP/1mGnEnRMDVcPPkfzyOU\nyK4qFSR7CrTJGZW9GmXr70sC5H3A+fd28OZwXCLdDYs2pSU4KDiuV70FwKmw\nmqJxnHGM/pM1ymawIvmDjzgz03ofu2JtuFSqp1KqCEdmve0vboR7xmkS+Vkl\n1/wj9CtAjvMxvQPzA1CQz+bddvjvlWDacM6Fdt4JEY/01O/2bjks9Nc0mcsy\nkkQ5F08s/aIaQij/pm0eEyW3f99kAii8HSYaYH12/X21KvySIJItngyLtoQO\n79OMqP/QTsJsCuT6E51P3B8xAw4/K6VPeLId/YyJ24wrUnPBoD8UWTWAtfyw\nJyddSX6rOu2jbPcbwE/DlOuTs91BxjaXizea1MB7M8FjoBTdKWopebKwdRXK\nwf2436oPhPdu2EtPO66STEkGtCxKJeNR6i5rR1O0GS+hSxiXoMf4rCzZdJn/\nr7QzEYipaeiOQqLQErDWvpNBAvO8ZHTegm625fMVqHrRDCcQ3FG7FnekUu9u\nMT9FgAtK/lY2ES5xmu/vNpGIIG0JN7EwVW/mzM7/5yRlwCt1/JD2NCiv28s+\n3yRcgAeCI89eeL4GUAHDUhFdFovU3/No8P6rWQ4POGVRM87pCjDt8x8wC1u6\ntpUmiKlUGLaK6KACyu0AH8l3feCx8rLbrDoFvCnP+/9+oGvApKR+6hyvrLJF\nhvHW\r\n=qhHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/shape":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/button":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/typography":"10.0.0-canary.2ed2d829b.0","@material/icon-button":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.2ed2d829b.0_1611184177561_0.7885642859866879","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/snackbar","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1ad99669d159c046c49c348ae9a96ac2c9d3d3d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.df00c2b30.0.tgz","fileCount":40,"integrity":"sha512-fkkn3nqpCD5pOr6jlmyEE/NuwO8X2TV26GOQ9gTvl2FlqbrgpIVh6rP4xhY/ERQBfaHH52DxZAdhsFwxMWUlyw==","signatures":[{"sig":"MEUCIFPfvEcFQ64coFJQM5ljEQ0QHm2i3DUiOnCB3X5ddk0rAiEAyAstlc7zEgOPj6wYsj3i95xt4g5oOpUClFf3wHSHlJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdxsCRA9TVsSAnZWagAA8J0P/1jNfLyHPvFDnZAZ3fF1\n3pBcnx/Z4bvi/UI5Ay/UALcPfs3DheD88gHmE7Zztj7+y49qglme6abjyJJF\n+ytRHkYeTS1RMWKqmVZSggDchL3lH9JQekpjsxb5gU3uUPduKamPKmYirQEt\nIgJSaX37YCr1VcuZVCBj0IqJ0ggLXoeP+mH08JYjPB34Z0plZSQMKzj0OhGF\nHvHXKBleyW2yjz6QxdFbUQNWA6wDgMoGTUkgAVAOG3ljfcW6q91g3iccYFWm\n4mXPBOgVxhth3iqhFS9h8Zl9Upsn6CZPosPGgV7Hl+DWp3SbBI3cy1X/fS4m\nVvsFmulo0H2PO1YGDwgTHAWdUliOMLQDyJELo0E3jBU8Ayo0y3VrA7vRuhq2\nk4T9u/qk4pn2XlDLl+TjF1nvtgIlj3205LHhAT1EUarm2BWrhnFKAc/pIkUM\no6o02njIi26vzqmFGQOavRxWSQ1r/IVEkoVlSxmVsLVC0K88OBpBsMLD39ZH\nNu4Iq/OVkGIgBJh+1pTguUMynEO23Yb2Kf7+I/RFbsEHQCdZak+AChQoLKnT\nh8ojfbUJJBnxntp6mY0370B5VwPpBNYjeqdZAXAPWeEe6kRICsfMFb0aAqqx\nm5GHNwVtIMD0Ebs8O8q0iKX9XvE5lF7ZNLMhULHM4PaDnB9pB0IHs4IJHAvQ\nhhh6\r\n=lASf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/button":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/typography":"10.0.0-canary.df00c2b30.0","@material/icon-button":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.df00c2b30.0_1611258987911_0.07939459300240004","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/snackbar","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba04b5e5271ab03a4d825fa10650741cf2763c97","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.fd61b0476.0.tgz","fileCount":40,"integrity":"sha512-CBuGp1pMWyrTKWgNx+zjKbZ+2YeRsNciVY8lw1+M6atWet7RTRHuayN/xqM1yv82vpCR/luNDrFzsalLgYlf8w==","signatures":[{"sig":"MEQCIGyMdUp/mvhL5yKqPYpO1wleGgjLPZyR6oJW+nWixcxCAiA1JPUCEnocv8NdZNDEK7D1ZMYnr5/NK7fM4O9mD8k3Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd/VCRA9TVsSAnZWagAAQtMP/2NcNJp6a43YWSmriDPj\ni4or0Hq0g/M8NxafzwKhhhXWvLP/5zM/RBITifT8t3R03gdo2jk+i8NJY7j5\nv8nkqy+Ldh2HDqhJga2RVne18iywk+dVIdi/C+VjDCIOrpw8MSUMq8hLQhRB\nx0Z5NNqfQ7N/c6QQsoXCmVwT0vWxBiY9zQ7G78yH2SktPxv6tGAFrQC0F5UH\n4sy3aKKH7DfMgIcgjTyEerpbjjlHeQVjxsf+BhHDVd/PkiFZU4CjBCDMKwmZ\nX7d/Z0Dlsvb6FtWPHY0LHPHEAuqXmyjhWFLe2XsgUOtoaYD1xChCA4SMRfLE\ndk8V7FVrmdKmms8MhUXDKX0uvg9bS1ZiPdGKmzYe1celM2WXP7pbyLCD5CyT\nMR3V/tdVLgo/cQNDg6OiuQhr0DqKDCKrzbY4E36GeTJP+1uLgj3lDwRDMnUd\n79jUwIkmKlYz5Zl+TYBSh4kfctLOxVMF8VqUIJQj7/MLToA8LLufaVjwRxyh\n8Ot0J3gpa9KhEoJacwAAlEnYoI9FwKaa0QM09V9mwliUFRpVxeIm11xdUZpo\nWDudX1a65bkoCgCLHnaK+T30sFQIB/VJmuV4Bwk0EMpK1onZZZUt2vNZ3RKg\nOL7ioCyPveS5o+Nw0gLJfnfmoHY5IA7zXSeoq9myUK3t8KVFQLjsBWb8omlT\ngNGO\r\n=Kcop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/shape":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/button":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/typography":"10.0.0-canary.fd61b0476.0","@material/icon-button":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.fd61b0476.0_1611259860948_0.15583301845435438","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/snackbar","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea423959ab2c46c345b63654f0908c988321e118","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.3fb3a0265.0.tgz","fileCount":40,"integrity":"sha512-93KqTD174E2bPXokngmNtnsGG6ftPEhaNKhaOrKTG/EWK2amxcIsi6QTpBxgnCRXmvbcRpVe7lqxt/yud3CBgg==","signatures":[{"sig":"MEYCIQDkVHlfHR47Ri98I1Yf7qEOyjhJvhZTHmqTs781We7DeAIhAKjA6hBIPmdxToUh6qxhDRX5I8F3EFoJeMqIR3E0SWVB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChb6CRA9TVsSAnZWagAAWYgQAIaRt5xUWSC99LyPd8lm\nHIEg2MXU/ND8KHVdZcCOFZaFlPzxFGUh3h3vCQ/aD0/8XaCi/wqa5Ytebemm\niWQo3tziE8c6hG+zbhYdp+wVvTtzW0cl8lfv7qc8/C91e/EEDtob93vtY5VL\nVcM5AwZ0wx7XHjCiqGNyG6LtG/jYRTbR9VfIoYL1j3Cacms1NqL06hvCqhjt\ngiwOjrfO/rUvyMUnxQphihPlwYBnGsJlPxN4swwrN6xo1fvDHLU0bZUcEE1B\nfxbOoZxJzOtJdkFKxC18oXBqjwnpKJjQzuk9GD9TgxxoBbq//WN7E0eHEgvT\nMyDYgxZ5b1rAYNalNZe6d10xCi4zrrPKZ5gslRBy4WkqXgPiUfDzqlSYEqXX\nYOAjXcA1ybWR5WhW8lf7q58AtU5PC3tWLlsWc+aWGhRoNFRCpbph1IzyS1KH\nNTqzzZ4DuNFFABRBCM8nR0RZLBg8HPgEXVZLUxAOabu+TJw1dw8futpMZ8xD\nDGBRLm2gg1Ec8TtcUGpc/t+/MRysN2Iazzc0Ersucv/qu4A/3QOGkAlKVDkU\nzINKJjhKg2g9kHQFlkcIRdVkvlFB9JI++Q1WV9Lw+q+RwNnJvIfVw5T0DNWb\nmaCEmgR2/DJNV650C1TP4K/xZh7SAkLijjga6fRqlxl7arNvurxgJBtLII/7\ntVNs\r\n=S5mv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/button":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/typography":"10.0.0-canary.3fb3a0265.0","@material/icon-button":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.3fb3a0265.0_1611273978040_0.7851423001561213","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/snackbar","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cb862bfd631be22e0c3ec15556a5eba51bfdb04","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.07deaec27.0.tgz","fileCount":40,"integrity":"sha512-zrBLuotmaY6RKnmDJTKVfV0OFKx2E2ilxU6kkhynknDhzrCiIuanjlvylcnwIYwpUlvyJSdRjYMNw+epYw90Vg==","signatures":[{"sig":"MEUCIQDBRcfLZtQM/GXl8R6PL/HuPPUzdhNB9UWrqoFlUZwCJAIgVvekxL3xJxkXBH+P2h/RBSCv1q8Pe864vsE5i2SzIJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwQMCRA9TVsSAnZWagAA2Q0P/jCWlFlkfhHTeSl1oGfP\nogWSNELB+IcgfR4HLNsccevrLecZTlS6y0BpDh03YeIBPxSPRL4kV0TSndfS\n9W+7c5hd48RNQ5dAzcr9ZgPGwyZqO+8JMVgV+u/Xbg0SyDLpITsU9IMsChqD\nk5aV3a7LEnosgwILGnsKAXeb8Q81IOUM2Iru1a+WI6Lx/iX08Sk+ebXsp7FR\n+zQ2bpgnPDQOKZi3Aw2vGkyh/+HmgvTYli/99n62uV+8KA8CtQUVbmfh1SQ2\nr9fRn9XHFlI8T5b5m5Gk/6WU3kVlWu30rKy05L9ePhfpo/ntQls85OmD2/Ci\naGj9hjgQxI3Mw2Bbg8OboxOoVBZ2cIXLDilHRtjTX/qWnxqbOUIGNiJYaLa4\npWxdA04dxq5OpYjtdPSsp1uEMw4xphTfcwRN0J023N1ztRln4TajqBoTq5Om\nCG9znvRqGV8WHsmhX4MVLEAesz0JrSclyMW4L8E9cu1CkLWWOwwnpka2+nXu\nqTVcCbFCQX8p5hfpR2v+jWM84DiU/HGDzA/fJZG2f6i+AQD9vqir1UCdTrxF\nWNYxMIhsEnR9q4iyGKXY1TCfvWDpXMo9XjTNNgtFYxYWUJ/aOlk+BKluhTLA\nrKyCON4fLFRINu2I/9CjBlK6jg7sM3+aGA7wth0TWrFM69iRwGeDYax1s+ix\nymFK\r\n=0xAS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/shape":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/button":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/typography":"10.0.0-canary.07deaec27.0","@material/icon-button":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.07deaec27.0_1611334667570_0.34143732683524153","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/snackbar","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"303e23c47931770e554d7331677b6a477fd135c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.d2959b16c.0.tgz","fileCount":40,"integrity":"sha512-eroTYfQGTRleq0ckDaXoj79Phr696E83VGm+F6mDa+IeaOUpG/MyiHDP7VXGgj6BJE7f0KnLdYW6bKBLzeXhvw==","signatures":[{"sig":"MEQCIGacoLkA+m2EI0jI73BY+s66lLK/pkHDq4hLG2+9g2pcAiBnNuG8vHbKzgfZkjn0ASpcFkwSSBYfZ2hIQ8XnZixc6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx8pCRA9TVsSAnZWagAAf1cP/iC0FyfgfulEltzcnq3/\nglutiZaE1iz+DVNoQABqhJWCXgxQudJlCE3f+07r5ztOg7slMoRDKZS2GlWC\n454PUzt2idx452N8b+YQrlnk7NYeLgvNBQnHkAvPZNjvHPOVK7PkEA6Q4Nyq\nmfe8gRJg5GLN68PuZvD7J3IL3EnLRjecEn8jxuzlxZwfbY2qSHbqxPpFtQaV\nqT3A26aguNdNXAQPbLF3banxdDqrcH/4M7VbKfWQ00bhjSN+1T7Y1egJ/3D4\nEyDFmIZbL/JKa1uGw0VXx991QCblHOex3BFwwGjCvU+gHD+AmyFf40gVzOWf\np3XSfpuAep6CkmNpvePlWWp+BX5UpTAWJk210ZNwH8UV3cLqrRrfOeuI66TJ\nXbCmAFCxJOsrKnQtNWatUh4U87v7DY/yDxX/hP8t3pJim785ihMH2Wq21gvi\nrjRhATxObP7I/rt7WiYwdAbkJNcdzFZc4OdSU4ICQZkYzrDBYCKxILx2YGap\nUSrkUr5dIgZcovc5Gu39tAeA5YLm20UZNkAL5qoGfiwAMoYGD7TCyqMZZrK/\noyKKB2cK9BayVjqiMgPEJnnMzEHTaTENvpXpcrrwCMUYv8hOY4NlAhUK5rQr\nMbNZtqGWBN3nfhSeRkjGEqNw/kUPABvGf0L+HE8hti0iEfiCFXOWlyXvEx/0\nGOkx\r\n=uMon\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/button":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/typography":"10.0.0-canary.d2959b16c.0","@material/icon-button":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.d2959b16c.0_1611341609073_0.43925746855254477","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/snackbar","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aeaf404393b3afc23b6b5085fbe0e5669a752b1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":40,"integrity":"sha512-64mmM+xUX8v7OXtlk9suAfvEq1PlGhXtO47I6wbPQxbTsm4migzYzMl1/Ma0X2gfEcY291+z3gV4IXkD/jCZqg==","signatures":[{"sig":"MEUCIDIABAFmn4/B5Bqv+uMSwI0hAYSG+01PjrNDv/D5Vh0AAiEAoDSDaSOL/C7BwFpA4DMwqOn0hdz5aoamHoaTttSJpXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1dICRA9TVsSAnZWagAAE34P/RERmrL42r3ftMMHAqJX\n+WhQz0DZjGlBgPTQRT3kxchb5qxdxhccf+MHwqQYsguUT2HlvqjZ+h16E1y+\nFTwkEwZ5HKvXK4rCeNKVsU66RChCmXeVdleK2xAIG1dJLr21ghtz/2PqySEQ\nkNRtwQpMRgKPumiCY5hnIPR2xGBzFdbUssevIm6QsU6Elt1PQXU5XBMyYiX9\nYSnMpFjEZ/h/vUnNZqF3bVoFt3ksMounWFK5sW2XBfB/b3JD80JM9Q1+DkeP\ns1k1T/UCzOZfZGvr1OKRpDi6I7V7X8Sz8UNJJcBbAD3LM5duojt0NlskyHtS\nDyn44ooC5lp7eYL+jvroqy3qXF/VoRT+H04Fiqyhdz9rZLFxwf1LQt24jwnG\ndBNirfpf8e6xQ9bJd87SvjqumvoDv+46K0LqX0etdJLujOkjx77rN/kom4FJ\nCMjY4in9jcM5dO9Qtf9Ix/tbq4DUUsagWMOAOX9lI6FXQNQP2nrPOTDnMqWf\nZbARPxw0HxjcNjR09mlHzHgWTEkw8drHKTqlk+BkEhyH6j6Ui9yIJohyswPp\n+/+RWyzMU5+2PiPlg+/PpVjUsmpNhHtFDUPZjflWXAhez+s55HpWGXUzUVKW\n6bAwoRHjvrp2eooH+gou4rEJDP/SgegFa1ExCZTQnGDmIeaR3HlGUD1PYmJE\nWlI4\r\n=Jjea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/button":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/typography":"10.0.0-canary.75f3bfe7c.0","@material/icon-button":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.75f3bfe7c.0_1611355976017_0.07708235429875776","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/snackbar","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbccb103b7ec8e9d1fb38c14d46554a80981b59f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":40,"integrity":"sha512-EHUkwMiDiRuFDN/tdAGma1JiG8ndn1cuvx8Js21yHCDLMJFeIYHvZRNwo4cUoD1qXUK/KnpgKxz1ZWreV9tDxA==","signatures":[{"sig":"MEQCIADuJoG6Rk6yEFSOADcP90s0ZjoQXOEiHJa+nbkMlAgWAiBE3a24TAuSqcsGYIrhKGIAH+lb6Y9GrDB7jdOujNJAHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2GvCRA9TVsSAnZWagAAuwMP/1knTaook64w+txtZIeV\nDjNOtSa7psN1KHF7+V3ujvlUmIyXH6YAdI4VyCTEMKktpdxK0RlVeZvs7sDD\n/UJ1B/KH9l4/54t0yCwdt4jA6meMV2yhTzThDqohtXwhkei7qRDEaY5K7HH2\nV42Dh7GrF/0hPZMU5pCvhIBbCr07CnCMxACyj42pfNPjQv3QQOe1znpR0vxD\n6jbMhqRSkvw/9kJq6CycgdeneyLiXvmK/gIDA6flZZFjdHIQUet9cuYomc21\nYBHdI8NlZAkw2el+yAu7dZysLbSGVZkRzRzFlTX1vAiBTS+OsspkNEBOKiOv\ntz8aqTgG9SZxGzVAEedOYyHRUOQpQbSi5i77+u3FoEx941tiGNL9gtMzDkWP\nlCNz/umul+LtRe78+PbrS6hCU/0lzlZkaU1C3mxsezZCPcBbY4xIw/l3RhSc\neO0FrIDC8jtPcGiIfhFe1cUrgkBMswCH4Ej2Si1EW1lj38hq97fXsnz3sW9j\nLVqfGMhiWk3Sm46Rh+2Wk53rNhjoMi5yFHKy0N2JyhQFEjHNPPQ6ZWXWshWp\nvZpmRiqeWme2sIu4GdB5y7boiCdvJqTA+PX2z+S9iLsbudz7DrzM7m8wedzi\n01vcyTh0JSuZnkaKuAt1BMBV3xa3jwJuw9Ozsww8xYqWIbl/9RHAwqzZindZ\n5xYt\r\n=uXYA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/shape":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/button":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/typography":"10.0.0-canary.b9adb7a0f.0","@material/icon-button":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.b9adb7a0f.0_1611358639452_0.09383130971563736","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/snackbar","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34fcb623e62a83dbb24a2e71060e1a65722026ba","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.d29ec2862.0.tgz","fileCount":40,"integrity":"sha512-/mzB7bGQ2ICIPp5V/yedlrSlJegkB8RO/Qv8ZdcSG7NBjR8h34ObIFZ1uvCFC0r8YCest7TVBM7O1xUnMHa43g==","signatures":[{"sig":"MEUCIQCaaw/zDLHzNxwdxOqy1v1WjAqsIeevqbD4zyneM8kjJwIgLPI6tzS/XwJe7W7YcveHjJJuJC+y38Wgx4cwa9tFhBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvEACRA9TVsSAnZWagAAPcoP/AmZV7Md/zHhMpR7Ffec\ncApD3c/Id6c8WbpZKESCaEm2hwZkponMejvZNUi2ltvTiwXB9qXSXML95VSH\nE72YJhp+xPQFEth+rBmHglBWXwdKKA2XEtqA/kW9u2b6fVfPpQ8R+NejrOPk\n/kGxImGz2L27YTpuOEycuY359bV2jDUAvwtQ0uN0epql6f8CufcXmIIo3KY/\nCjSlJ5cWmSVls1Pk0KY5lxgSQ+/xAVfYy6J+GgEpmnGdMZVEuh5wJRosTu6N\n/gdmQssvuKOPlj92jeohC1or4bbcwFqHEiFccoMYKLKwirfJoq/sPzC+FFDA\nvNv/JCXcjdPkG+zH5w17X6MZy9uLu7/Vv5t9SzKI07inwPuZV+BsW3QBYpZ8\nMHHRX2hhtO2EP9uzPdyPTQ5dK07vwQwuZCHc3brUW0sRhW8kuSaW5q4jRUAp\n1wwh70bU9HatE5OnZqIymfnC2R14P/TG2mcJ6HpH0vkOzxoVDyAAxSf5zhKq\nmr1Qa+1G4CLQzL9P9kVbPL3ZEfxb0686eVTjTm3PYw+0K77pWDNHGGCsDwpB\n/VKYMksMcJf8PBeRwsUgGKhN1j7+ckwFP0XYEL77IMeyqSzoauh/NzjsbBkQ\nfH4+DiACgq7YRAzqtmA6fLyAIfqMV0xZN2p04GYpFML/+HNzi7EOpboETLl3\nda6G\r\n=dFvD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/button":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/typography":"10.0.0-canary.d29ec2862.0","@material/icon-button":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.d29ec2862.0_1611591936098_0.025432975293853133","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/snackbar","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50e3dc0da8b72673a4915e54c6d2de7c5cc5164d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.96be07c68.0.tgz","fileCount":40,"integrity":"sha512-/k0aX7Z+JqHuYUDi9B2EIQ5GNrQfKSuqqyGPPPBlII0ps3ZziAgt4jcK1NTUB+xJniAmLbvG8EEjHObUxf/OjQ==","signatures":[{"sig":"MEQCIAcKD/AUjDyHvsmBiZVtcCiOPxsUT4vaMvLn6AAFR+bPAiArnApT46vY7GbuRpVvQwWGO+brtF3huEVqGXcHRseDLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD148CRA9TVsSAnZWagAA7zcP/2wq8Nbcgc5MZpGktXSw\nhBfWSiDr1Ev6Fgcq/kzbyzkj49w/vbntspjMBkC5cHrBc+Wzjjg8byE1b4xb\nPA9j4hCatx+T/PE/CuMNbKN2CZaVr0pI/BgxofVBcARy0EHxvVxHEReyspEU\ncVjxycT1/9uhpzTtUD8dEFbw3QfFRLkVr1feXh1azp+I/bK4S5EGvwbWSuYh\nbINeYyTjcdTfCulXx9CK2nebOlJNjsZBMDMbrDR1v+1hi3Hd+TC5IARev8fh\nAPz2EYUv3mXK+xuK0qxM08L8gOwNn4Qp1PQFdLkHXKzRTNEzOlX8kAoQQK7s\nxX6AA4VWaMk3rBjNgk4HFXohoIgn9tDDsZMbUjaAjVYYx0RUS0WclU4N71s4\n+W+BSlzLsWJD4V0daFqOXG/BRMN1SBPTlNj+8129Wk/Yf31dlmB7MPrzqxPj\n5xqUezA61x2r364q0HsPezgEgh79WqDFl17K/PQK8mhTnaugbpAf+u0eavk5\n9f9c45QMgKE0O1whm+rzgUz2gCyOw1amQ9IkYCkkyzRYVxPKNa1s2ZfLWujn\n814wmf2MW/l9WS6ZWqF6+3mCCSQfVRgjLlYielh4sdffspj2OvoGLDGGKxm9\nw1HxdMlYH6mGKXJWmPuXxcUPfZENfreQj3R3h3VgCydnhhwr8gexGRusfYRw\ngadt\r\n=8Q5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/button":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/typography":"10.0.0-canary.96be07c68.0","@material/icon-button":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.96be07c68.0_1611619899761_0.8331271944872654","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/snackbar","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb80af0c75eaf5eb3c4f72e0f54a679807628f21","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.e383944e9.0.tgz","fileCount":40,"integrity":"sha512-NjW2lbpPXiq6LQz6LsEefpWJzjg1pvpliFlp5tXxEKVQdQuNv9VS6WiFqLcuvrgjxs4cTY5TNxw2lMYOPAHFgA==","signatures":[{"sig":"MEYCIQCrlomBMIFrvb28ahxwzPHjkj9Yb1+QtHQ99i45aOEQkAIhALTC4fGg6c6OMKlxee8t3ltIPw8+ZeZcKxAeuI/qaQQ3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3RsCRA9TVsSAnZWagAAkcUP/RUj1WkuxGbcKeWo+p6G\nc1UfQWbo6bC6D0lps0SQ/ulmQFym9QdObgL+3gSSrOVqNEcghRvUeTIcR2rn\nuczYZ1BjMdIU8pn0suhM94pwREqNntaFRciXwFD4qlUyj7wZ6JKmN5pQydWb\ny1LOuJUhGzuxQveHGwilBUEMxUl9Cm2tN3s7EwNNE/6xLK1lLmRrGfCRZavc\nncBw9W7LQGdkrIkvxmh1XR5UraKDOQjfNWsKq6tt+hL8k0uqKO9CUBWlGvbi\nuvekGUseMEX8K3ohdPO0HitgtsT51xc/aor2vVdayNVZW5oroRRe+A/JsFxN\ntuAF5eJ93fdYZfd90m4yVwDp0gYXYTFlmZYQRVhzYEyFrFSIcZUtNA9j1c1m\nQ1XsIHcFZ/4mUUFgm5HVgGiqCsQWGIzxdARHjrOk3BSCD3RSOGf+ao0htake\nmirWvsWPKZ46BZBtwT1GHJXSMZeavtBTkD77CBD23myN4nIA4R6x2IETQsCC\n3n/tqHpnQiBxSZWy/HTw4S1tM8+UR7k3t9LmysvLkEaQPCPTPVAFP3qg+/aT\nOJgP9/RZB1o0i6VnSe2oqCYV1MH7RBKsBlsbp9nLCkZfR6tzRJ+Z123Qu+FO\nZG21BqxABjDLSrn5shpTh7a+sOzEGWOpypV4SRXUDOmhez8b8Sbjk9hDhe2g\nSkSj\r\n=dYgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/button":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/typography":"10.0.0-canary.e383944e9.0","@material/icon-button":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.e383944e9.0_1611625579551_0.7878355783035025","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/snackbar","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00fd9339749ce6fc1b73dbd928e0df07da8ca2b9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.623af861e.0.tgz","fileCount":40,"integrity":"sha512-AmO2l8GetmCFjzT59HEBXsIFRq/E4IlfOk00uAbcbeZGCqRFAN+Zl2Gl/AvG4NrJSwxbOmyp2ONoYylEnUf/tg==","signatures":[{"sig":"MEYCIQDS6fR6FP9S6UhNmaas8dxp7eFDn4PmG9MdATD6opdxmwIhANPlctrXuJztc9Jmo6ol1PzDQdsvZgm/mXFr/1Ew7HW8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5CZCRA9TVsSAnZWagAABMEQAIAA7exPF+g0mwN19ukH\n1I2Vr+u4i9aW7T9q1qayrZ3+N4OpzGIVafgG6GmvO3XCfb8cQyPDOXJBQcJ6\ngKPYZooOu4MHKYgwUoIs1XeWY9JIUSU3JZByeluw0aaXYt3UPijCO3/CrNtJ\n+9fU8pOQaUkRB1XTfcanlSKUu+6jiLqI6/hfNTi/UYGGclVSdVFKrp54S2iy\n/5zbLE7N8oqBV3DzFjtDStBO22AnCQ8yajOXkPESSB7QfPIPltNEmv0171ZN\neXMPKxST6JrTe3FGMIL086+lz6AkQmYpGY3d5BSueT7hK2CpM3LX0lNUKRMc\nNYz7uP3iSKp+P6YFw29Ol72psi4EI/VFPE269trKtLaEGvKlfUcWG0RME1FJ\nMmfBopTqkcXF1JNgMue1aouZ/TYNCUeOcsNJC0Lq3OH/31UqMrLVo05d4p70\nWl704+ymqabwEZez0Lel0adNsdNor0AaAThGJ0Qz40ksgQ9xM3Oh3T2oy4TM\nloJ1J5PRBnk+t+wf6Z/zl3V4qD6ejd6yDLfVp1uVgkOxzVY7t3JPYDKK/4FU\neEmyfKklCNY9bkO4XBW1DzhPhm/U0ZetX/RojMcZ9FEbRwz0Q1NmdX73XULe\n2azAms8JD+vpynfhToqbP0oHnPTgyW1C6VDzOIZPYHpYMK6/D7xgo2GlSLPs\nr+ty\r\n=HP31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/button":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/typography":"10.0.0-canary.623af861e.0","@material/icon-button":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.623af861e.0_1611632793083_0.15584401132461156","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/snackbar","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fde5b707600c115430a1b2978e942eac7d6b70e5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.6863fd43a.0.tgz","fileCount":40,"integrity":"sha512-K02OjIEdj+m/dQMOwNsGv9h5QEVIpRXk+/F/9BWA6Sy0j7lxKZIS14d6/RDmyQP68G7VfwDJxr/e0jso3oP6dQ==","signatures":[{"sig":"MEUCIQDWWqTcRU17QyDnS71FAc+kwh45m69ty/ji1PAF8LKgIgIgNqDvUshSw5NuA0ktEzRd2PLyPdSDNmDA9CrLVJFegkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIsCCRA9TVsSAnZWagAA+zcP/2tHnRviC68gajI1m0AL\nUACTktgkUHVt2YyYdCCwFxKm5P/ZtjInZKthVk/kl9Eg3nLTLVp13ezq3E8J\n2M5DBEYOq4/o18KWwLB4/06foKCKtdiyB4/Rbm64C2TRjTq+zgWi4lpH36Mm\ncY0aBm/CsRKGdtKZWh9TdeYJtj6Hxorfe2GZTp0ltI0fv93ijEfEiwgjeLxM\nvXi8uHwbgSRQ2TrxcJ5UlqF9KRQ4E63N8FyrvBP2b4Vf+gfNdJKV0qwGJ1Jp\nEU8KzlkKYOufM+6SI9n3+H478zmtPps463qKhdz4x0pBwGHgFJpcMYd/IFD0\ngRsQdK6Uc1I1eIiAyBJTEIOCYVcFGVGnDblWvnUwWPRQrceE4SO3tlRSHc4R\n8W8d5/nDor0FipYOkkXI67k1nX1YXt2i8DZdy7+ll1zclp15zWT6iP27yM/N\n95BR5uMPwkFUOKcSkYK+N3kyHGtE87BUQWt79Mszh5JHF2GQ0uBXf+l5QdUZ\nd8cnXDsXp593fjX2Ssahxq3YIl1ACuWyL3z9/zB+roQ1TJTHeDOe/BaoePnu\nK75LXcKWsmN1ckRszfzjI+du77ouh1E9PCgYjzO5OPuFBjp43SifNlIEE5gG\nbN5w1k+Kmb/hcAoG6b2faHFu8EZ8OiCgNOl8Ozz7P3oZVBD/I1ICbGQA+/9F\nrS/s\r\n=eozP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/button":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/typography":"10.0.0-canary.6863fd43a.0","@material/icon-button":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.6863fd43a.0_1611696898438_0.029958449516601426","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/snackbar","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fc4c148d0c81c3d190c0e61abf3b535cb37addb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.ea55b87ca.0.tgz","fileCount":40,"integrity":"sha512-uI/ZJoCQKw0k6XUZwYdmNk1FobBqdwvPyEX+reu9nDOiWZw66FCmmzZ8ZcuPszQSBtGFLcynHYn4aQMZLUa4cQ==","signatures":[{"sig":"MEUCIQDfcgWgv36q2qlGnn74F62tm9W2Q+79/GWBA7dAz5KVuwIgWoB/3cysvrMZNh1NdOoP1JAcbQum4wJ4DBazmwTFRwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKoVCRA9TVsSAnZWagAAHaoP/0G/5GhFP5rfdIm1WQ/3\nbOUq0ZJWPy+WsRqWT4iajyM6nPtAIYvFzdH5u7kTiXTS4EKOXUMNO45ZX0BH\n8b/dAJr//Ch6dbdV13xR/qeok+3RgnqZXNQnpZho18SpmXoL/Aqa4uK7Z3LS\nS93Zg0DP4ntTrrlJxOhYcHQEMAe/VEn4zujrjCxvz3BBbvie/0R3JdD973p5\n+kG1px5UPXDVPUWiwVYUyJOGeHMRuuK/C0rYEsfI0Mc/R158u0fQz0z+zrc8\nt+8sUuxkMrhvYnd1Lmctr6bInXdEQxO6es/zth75mmQJKC+ImPrIpxtXM3Lx\nNqRR6F93gR+C1pvsC3GKRfaD9K31chTgU+E2eiOyk1DN8EtF6t0jIrM0M0ls\n6zELJZs5SG7H11fibwVZ1+IPUjttG659wCr7Uj78TBXBLsse8XW8CEc781r9\nsmW+dAUU+/dso/JGfnz5Cqw7cYraBaOmU1Mn+35TcYcT+37cnnX6UCtsY95+\nC6sGvGMv6JGblmMxu0gwUUXKwDWhwH6kz+LcMo3HbEzeo3nKeVMW0br2oUWD\nwCVfBzAvMyfAvKDVQ97MB68+HRtACw3pp8CJDVDap8SyNbAEydt73idXa8Bi\nDFnPIvVnLFlzLJbAY679ODBe6K7V2yVx5I+q27LX2GR9PiZCfCmJ+qZbIlrr\n0xU+\r\n=3Bwn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/button":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/typography":"10.0.0-canary.ea55b87ca.0","@material/icon-button":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.ea55b87ca.0_1611704852955_0.3396280606223412","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/snackbar","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a47ac63e1b248e6cf67e327e959cb0635445b217","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.e902ff05f.0.tgz","fileCount":40,"integrity":"sha512-IdDSVZfNidFSBZNMyDjYTOyu2x8tBf3orb0ctSK4haX3t5FPbTWfoP0zC8XYmv2EoId6Zkz9AQfjwHf0fugpLA==","signatures":[{"sig":"MEUCIQCibTeHF9mfuuuWOX1K99yR+dvA0kYuG46K2IhrESAE9AIgfvhpJeOz4WN77371Vi0euRUATkiEFQFhlIB3SckcQNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK5UCRA9TVsSAnZWagAAxWQP/inF+sh6Fu6jsEwjxQBM\nK5sZ1BQJkyJKxNMFKqZDKOXpJKBz4q6cHEfh3hRnU0FLsaj2R1Aoo5G9oQee\nvkmyIw8gsSH3yYfmtwXHV6KUhqF3Of7HI6D7vbESaRbc/o1T34ZIFtcNGNmx\nIJ65cRNVKRf1i1XAut46ak8zmR1zf6PxHBbwM40IZ9o08ULwb62X7a6kEqb8\nzQlVjKRKHYo9iLjwwlGOjS8SXHSaGMnSUZxYsbqdGe1dNjAQTmlOPW3zCmGY\npKZS5N8tIaZ/nR8VM+RlgeXGoQeLaZlWcf44uuD0cw5T/NkQ2C2rrSivRhvK\nWi+hYlK3i3TG6DMPOXqmEQa+Ze+Gl6+kBrpTWVDUClgjpt650uDJLOO6zQIG\nDxfY7vXbQT9tq5cVugtR9Rt6aeBF88KVZVmGD7WPAmFol+HcGlqxH5uDFXih\nRhtktVbZmUCkjm1/1e4CelijuI9J3v83f2eOYLz6GBx/Legps8/oiTibfMIh\neREti6KdqHchnx4G+RcTWYVIqVVid7lrIfnHb4YRhTcoNO5gOfWeHgpqaxcY\nuPtwF9rY5thkEcNZWVX3w2Ln8rz8oRkosP80R/9iiaK1FbADxfq7K1NxneFk\nh0LhVcPh9ihpGpOOlA3x/IvIcUzQJzG4CZOK/1jZe92WFOxEi5oMu+id9o0n\nwJRM\r\n=hXck\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/button":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/typography":"10.0.0-canary.e902ff05f.0","@material/icon-button":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.e902ff05f.0_1611705939547_0.3216661231899829","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/snackbar","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79f6ed97be6eee81adb13f4fbf69388541187933","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.2c9fc538a.0.tgz","fileCount":40,"integrity":"sha512-4M7yj6/dRENJB4D1yHUbZnqJ+prY2fk4dqToHY6YqxGwaCLTy8ls/BgbdxYi8Tf8GflLruACuIraa9Jra21/OA==","signatures":[{"sig":"MEQCH3kgkqxpObBLz5kbP/oIT5OpL0HfA6rxVu1sIktRw+cCIQCSuOOy7FjasSuAbhGYxueDV/PfND6j1c7lB3UzqFlvKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELO9CRA9TVsSAnZWagAAdSwP/RzFqS2sG0EDvdJWkDGV\nGadJciX411/nYnjXcK6xYlH/A8/CT4eF1Tjny1AKFpY77V3pywNylGCelORJ\nLLXMtEbSrRP2wh4xafz4Bj4nR619MFdBeGfuhwc9jKBbJtVcNDTNA9xhGan3\nTlZUIsPqdNKBnvSFIJ+fbZ50xz83Pgg2B5xmjTGzaAFo5yReyibboQ1qi5Vr\nilJcifbwciaZ19OHUXUhCMhdzwdzajAATOmzbUjqyuBkdIvYbehgGedyN9/k\nGBhdui3vF+pbErL8mpq3ZWAQFaT7UwwO8rueRCXyh3TM/M0c/7HkekgeP4PP\nOEBUNew5IPojbZRANY3BTIj8QotzYl9FRZzgT8T2HEtBzxALYV8krUDvmGBd\nGOSPHWg2xn+lKErPirnGx9gjtWlK3R3zdxp8KEmw+3SEmBzcJD4dDye14VBL\nBTRCwUP3hb4YvY+2F6V6wRh71RbgQ02r/XsjiMIfZT4wMal4LotuzMw9x+Iv\nXP7XdOh/PVKZN+75mirks73MSjpmDsCMb5BqhHRxk4yksc8cGmZThgarpsKp\nJZO7sqsm0G5BZymPrXCzS6kTD04g4nlrLpmkjGfDjcWVzaD2TXY/FGrmQqlD\ny+P6MwMUZ8OBPJFZvhBt04AH+PC/uUQ/PLggYZi3GkNrGmk8KErK2NCmedkD\nbzOg\r\n=LNZw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/button":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/typography":"10.0.0-canary.2c9fc538a.0","@material/icon-button":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.2c9fc538a.0_1611707324584_0.4263670122513099","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/snackbar","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82e5e6f718665eb9ef57ce78b9d0984088cabe42","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":40,"integrity":"sha512-V153E9gzjunyJnReqDF7wFL8kEt1UTxy94WiR0s4nELk6ygnrsAgEDYFuz/xVOVSo4kDWJIH2XYrAC5tD9hCDQ==","signatures":[{"sig":"MEUCIA+h1dVu14Ydb7nP15zDBxZyjH1fTXus/J+8ehmHwFw2AiEAoXyEcfMiO7uBnlrXwEdgY6IhQADpQIYqjIsDsHsHKxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMAmCRA9TVsSAnZWagAAqOcQAJo69uVAyJ+pNvd4sYC7\nywuq1hpL+eRNbFOk3shiOmyh/dVAZFct/0dCGFf8oP/jcs/ewFs9H9YqKWl8\n0FDNWHUjeY2PTKcQpbM4yzYxhWeqoYAnVXtOfdVCr8UlVqy18o5EbuItrlgZ\nJSCcHtgMleZUtnMSK9OMyM5g2/SY57AduxF2VNH2A3rJLMfEFE5TB8Y+bQnx\nVbSnv+BXS2P3cMvrXNkhmGIPdNFdqUIgE49PyX7ilr7v+j+UB9T2Zs0K5R80\nFQ/BfxpNZHGgbi7sdQdlt3ChkcRv85m1joGo+x1zfMD3f+H7nG6Ol2IvXort\nVXWxnVIsixvQzo1M3fC5LvWt0MVlU+bMowSgwJtx//4S7EBBrIqhzYhinpyo\nyNkOGEWoV8viOObL1R82ftZs/oXcnqtzgwyGow44GFTnF0aJIf/v8WBu2u13\nJNg9luMPR4Zc4+EmMXVHQDPqFgjcJk3EyUL7UI9jq++6Qfqg6/h3fu6oPgW0\nHfC1BLBAO93ob7JORspd2wFToQ+Wh68zLeyBZGEu1Gmh/NvrbopgS8CdJzzp\nOK18SmFfdRK4bPOanNADE1pnOch9kyKEO8ZrvBsEcgPTjdXTN1aOsFCxUZcQ\neijJUqMM8FrYji0SUkYFdS8Sk9q3HV6O4R+OjwgXv/OCB9aEm+bE/uPqgo9W\nY7FC\r\n=5h9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/button":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/typography":"10.0.0-canary.6bf56aaa4.0","@material/icon-button":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.6bf56aaa4.0_1611710502136_0.59586976660156","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/snackbar","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b918fdb51926d7d8fcfb4c771625b5a7138e8155","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.994873795.0.tgz","fileCount":40,"integrity":"sha512-7kayT1JjTcnbHJNa1NWo44B91Zt3XeZtGJFgnr/NM4gvKu6r7mqgVg8N92jTATDXKxyrmfuTFtARKRevggt+BQ==","signatures":[{"sig":"MEUCIDEaEG2KJiCzVwYdmZQ/dtlmquV8B/z2burwPyUXxetNAiEAt2sR3dhojaO8g1XkRUXfIh3iYFpgeCiK/EkABygKlpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX41CRA9TVsSAnZWagAA/1kP/jtUTPXzh+C339S8Ye3C\n+LDh1jL1/SVehV6+ef0N7b4R4YLKbX+wfFp4rh8elwIo+CdxyZsQvpxUCu/P\nA9gT6u4+sPgWKLWlXcj76Qb8loj8P2d3usakCnpnM1IVpas8tTEhR5Oczi1F\nwvV0D8GFu8s83+9D/wknD6prmTrCehffiISx8doXZmPDy3HCR+w7aeg2MCSR\nhV1sn8Er3FwNSfrpAuKZuI8AGRM6v4ttfekAq04bufpwkWETt618rffl1Z+n\n8HRxvWNL+kC3Cal8B8bBgBia+byaeMMXxrLTvbyg6Qbd3qz/Pv2u/RE9onJe\nCn2LOtyeY37AOd/537iXzJZbRFddKkMh0cweBwdHhCz0d+lKUD8JaKUAojUa\nJj5og7GK6nje5AS4dyBnZ8Ob0y3MqvdfmVlIs2HDTznO999ob7nMwOZMqRzX\nF3a4oFBaLHcTBeutJO7nt0z3ooNePxVafnnoLHPOrzrbHOkRRKOYDNDQQwy5\nn9AHk5LgyD7+X9C6cFt7akyvd/mZ4Bl/flKJVqV8qW0tbIuNvGZNNDcXwv8p\n8ZWHFsuOkwErHDbcveb37JJRDXuIuw1huHcE40qlZxPDI4mZI3/9zDGu8kDp\nzbx/VkPtKqXnRxMMUIJCQ/wmBgmBKeSmg25za//0XCYYrzDhuHxgBqEI+BCs\nz4H+\r\n=JeDm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/button":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/typography":"10.0.0-canary.994873795.0","@material/icon-button":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.994873795.0_1611759156550_0.07636483100671021","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/snackbar","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"603b1910f614b41e47be1593cdf6629f34c73aa0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.96878e1d0.0.tgz","fileCount":40,"integrity":"sha512-jeB2a6Xpy24pSrBaDgDZ95nvuW44lw2DTMAA6JHUavUN28abDPALomo1YyALfeNqPd2ujw5H+MI//VLxqIx+lw==","signatures":[{"sig":"MEQCIFIk4VJyk9kYH5MLBlYmP16qDE3hrGq6cUyWbSTrDtzxAiAruFsEdV04ltnbLETSClTBq1v2TjzYxWvV02mSZ8xXig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEasECRA9TVsSAnZWagAA9KgP/1jx0R8QUYhrz1F6/rQU\nYGVdVPWi8WDpxdLujEDlcubuLZ2Bdsroqp+d7GJ1bDRPNblK0M2Mpvucv9Go\nSN8W2aHebvQ7O832Cw0I7D2J1ceWX39yx1DXjA1/fasxXVMnsrhw5jwzho5b\nHw9ORa1PjSBR6wVFAmhzWxtlbg+KK8kROejujtXCExLEG3SaSv/prb6ZtQ/e\n354LH7c6utDjRTRYks/HWk7/C1VyXbfa20NVYCUlQQStYGohIl/coGAIid6I\nuYlJ7TZUb28bsmFmOc1pAOscB1LxTLZ1LyGPyKTgJCFuoEMXeDKQSlqMQldJ\nqhFaaCLddls+0HOAAWM/zI3kQ8jcXdIkqV692dGbZ+Y/ksoFA/LE0AMUjeMN\nJEPmfgHmjLVbmGNEJ7dw4FIqrWBkmaWY140Hh+FgDgVNqANcOpDKqdcaNFsF\n25lXw2fd0Z81ugbCrGhcSfnFdDn0IRufARf6AGbF+5GJA9NGprOfioHGsOws\nsxD+n2iEb9bU46hTaXFlVcYkgEZ3Ew/xBW+Rbxgus9CagJCQtvhjYRcvj2+F\nCJ8y3ktlBo0UlXAJZ+r0V/E/zcU+tQaz6BzBe+rSuOSG7s08F00Rtg+D2haa\n5uUwuIdft4BOzzaKW/8VAGu+YtgmEdfiRrDaxH/vrRVOZJJ9SUShkK9miuWb\nr/yb\r\n=+Bv4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/shape":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/button":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/typography":"10.0.0-canary.96878e1d0.0","@material/icon-button":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.96878e1d0.0_1611770627907_0.6217098325105261","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/snackbar","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85f90d2746f6b184c819e819408934519912e7b0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.3c117cdcc.0.tgz","fileCount":40,"integrity":"sha512-spQcYKdC2Oupddl46XPy+sTeKyS88nf3zpGhWYJZEXdgX4F511kmFRh8dur6NXJ80utKg/Hw4VKWR95C+A+o4g==","signatures":[{"sig":"MEUCIQCM3dQ/mDgBkoKuYjki64Q8dXaOdBpVZUZ7716FLTk5yQIgb1F8FZ6Vg4OzuzcNKvLxwi+90JKJ4sFKGBKpZaV4MVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbIiCRA9TVsSAnZWagAAh0oQAJeowOeOs7ZU7kCoimiL\nZEP5DvM2RRaoBhccegKo0vvmY8MAksI45AJWgMckh7kq0F5Cqr7he4X/f/6I\nW3N7TJ/Ov0ehhxeiysJ/RtdjAO+m/4Nzvgcnx+A9AqTHWJtJ4xkZuNORPX0S\nVAB7i8kSB5MVU1WWT2/RbS+4u1cYVCwy3legOl2P855kU2Sq6rUk/oQCR5C7\nm06NidGXn4PbGZtcSiY8stV4/9m1p/FFjYzBia+b9nQugKeaIk3dLqHA9V37\nJrG4SX3iATHr5nHSlcJswrVKQUrWApblxRe04IKjJjEKFqV7WMaDMrnqlfsC\ng8HnJ0Bo3lnjTMES0RhyXO7CSKBD+jbyoLi6hTt/vvqakcHplwEVnO02NV1z\ntdPpGlyv1GC0Cbx/t8xxmfD6Sb/Qs8pT9Kxw0BS+IGXv8bUD4pxqamD8UvzD\ne7lqLV0aja2rV/4NeJOXvBXFT64bIU13aM/1/MvftHtieaKvUb5KX/81CU4A\n0IXE/PZ1KN2ywaookIdj4OakorNUFILPgwbIjLHE3EzVIJ/KErRokF0SoDg5\njO8AnQZr5wOXINK0FQxebKmMuUk/6dJuR9ZM39uUHelWnyn6q216gG9WrKLN\nTGDO91SZ40sSIRDuG+gSfZZqgiucos76CTIm2veIAUDLrK9ONRuSrGibqA8P\nuLEL\r\n=BLDW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/button":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/typography":"10.0.0-canary.3c117cdcc.0","@material/icon-button":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.3c117cdcc.0_1611772449525_0.7398448159096072","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/snackbar","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c88cfdba7f979e18ae0baa53abc17b857f85110","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.b411e7033.0.tgz","fileCount":40,"integrity":"sha512-AGNG8uCOE0gUnGsS3keY0lAUY1/e3ZbKwnGf8dLXwCglONmS7Llw0uPO1a81LqSBYnzJ8zj6RoVb9ScFYAzS/Q==","signatures":[{"sig":"MEUCIQCSnKU/5FnOXuXb28wQyDICNUhBaGoRN093zMdLwPkc1wIgZYvXfQnyyWfHEasYWrYKQDPqsm6+cgScX2yRLKFBwDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeOiCRA9TVsSAnZWagAApWEQAIkffQ84fQxQWzHnqXBv\nBsxvSqXOvPYyoPeCoEwa8Ush96xxk+3JBAuk7LDONzWcB/KcRJmpaMVtqaiF\nbn/dijVjuBCPYaSQBIxyffKRghM0RxJt4JZt0KOF3z1IldRIlGhRQGNqCRS+\nDL9gw1o2KsFTbmXEWrJoJCnExxfyc7XyxcdKIlzzgodg8C3tXRT10cw99nk0\nVQQIXEAP1pBCo38BOoVrN2eWgfF+sLhl+/ASd67vp3wf1df4aaClzejQcrrk\nGZ4j3259p6jGl54I4wHAcGrQx5Hj6xenVrNxiaeaWMwNYUSOb82pN9kngnDe\nv00ZznwOm5iAQNYq4UAL2uf7kAh+d5M0nxXDUaTjarr1A9B4uALiQEIuYZmq\n3zzLbxc9BNQhPPwg5GbBvz10lB9Q2LwX587suVKWSGfzK7kWThNW5d/QF/8Q\nsUSE3vbKqo9zoABT0xY/g2ds3ssJVR9EX4CKFUd6UcyzAnXhinMv/+oNSy/G\n1+yHt96opCRCvoB/kkvSkEYJH/xp4OgmW2sH3+0KjZf2ga3pTZhOM403S4By\nvvDUK/msW2E92ipe7ttxjk9+AM0JqY1pBtgYrS4O9e6cfxMOazxFW5Oz3vFO\n0Op4TOOmTAFRl2/a6BxyjDJwWAB4mLG4wjNLkQgVANIdsUG+Ye6uC89GwXpw\nFlg4\r\n=XJk4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/button":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/typography":"10.0.0-canary.b411e7033.0","@material/icon-button":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.b411e7033.0_1611785122155_0.5730479482456914","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/snackbar","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"145d54eae9c097a358c07e883463d274b8537d5c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":40,"integrity":"sha512-+lhU0kxRBO0aCOMmFtRDUq+vS1a/PicHM1ypLL1I/mdCeYd+//ogycQQSBXhNqbBlxm47anWyHPr+gujtKrf2w==","signatures":[{"sig":"MEUCIQCIrOKeYnmAj+tf9jZbpGOqv3ijyiorW8s/n7S+o9616wIgaOvKTHHqwMUO4d2hWmL1m6RqQ3a5/rnKN9y76eUrvxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfGjCRA9TVsSAnZWagAAg4IP/RgScpMrdzWzJnXg0dNh\nbt3gvNB77WGaCpcB+V04w9241Cl8MW4G9Af6r+7Hq/KU5NMqaqy4PH+6bpbt\n4fv9Xtqf1jijNyP/EEZLsiJmeDBh2U6YHeHdKr/t/UXiyBMLpsuMT5Ptc2qu\nMRppNgB1+shKGiShWsP/vtCBBzPbhR+x7L6nLQxtuirZ5dF1dI4gXdHEjbFO\nEJnaXnOdzWsc+tvvXaJkGkSKYw5D2ADaiY+z38npzIGaAfrewsEiW6PiRMs5\n87jTCPva83iYP8vG9HoT5s0FV9xmmQBgPizEZSEVz4BO5AWcZjkbS5XllxmG\nAussxBDIt7lJtkreXjZWwBixOmkj8ftEqYMWi4JvCxjHUGW8wOeJGqtRUdjG\njWqTBfoyzfSOSdkNfZdzsijjThmgmMZTUCyC9W0dK09lLcnw23PUhs6GgEns\ndTfyl/qInZLOO83Um83cTaP94EmqeH/BjqF1V7IZYBoqHm3NIXOP9cTBSFgx\nwbSPoXhug/VkGMu92x0PHrOLIzmB8Ds1K7JT6GgPu+Lgp8KgqW7WPSJitx8m\nqIZQTd5mcmjg24bd2ApVFRGSuBM9d3v2qVeRKBBo9ro91Lcv6pzDtk9jt4K2\nv2lqwGkl7j+aXjS+yYhq8MqClAOIGrr5jOoTM17KaMOYk1YFPIK1F8uBcol4\n8e/q\r\n=s0PU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/button":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/typography":"10.0.0-canary.a9ac16b4a.0","@material/icon-button":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.a9ac16b4a.0_1611788707170_0.6007008427116451","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/snackbar","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a54cae7bac7a6b4dc4be794c2f2584e0388dca0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.fec7b42ca.0.tgz","fileCount":40,"integrity":"sha512-DHImvWvmNKLRk+ieomUHeDvP0aa/aHthYbNUOuozHK33ZKwUc6hEKXpSXRw3PPPVY/qEEKi5sCLxc+BuZj3ENA==","signatures":[{"sig":"MEUCIBI4vKtMsVtFDki/BBP+x58jSwrHjAo0ckb+hZCzl6MZAiEAyWGMsRGRBV3zjvq/ey6zrHYo5v3gzOUbLg+/WZrxDCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw16CRA9TVsSAnZWagAAVdUP/07O1olxR+BKF9T7V9Wr\nT+isRBtzBxXrQSO6XF3BDXG2vy7CZ6V4YnY8eJBxFrYUevXD0/ncN5wPfVpq\nR1s2jtctRBbc6j4Nkd/oUPdHVLfDdnIjLLEVaIMBd+I+0UZISTrkYaA4Hvpu\nC5IrzJinpDOClu+TwCrQYrAthqypPXwqCfUTLt1/zpinNcGqiuL2lJ30TW4e\nP03wq0iXqllAIU1gSCEpY9BBtX6h1sdexKRo4k7TRJziVxL/e4gdbZkkrCGN\ncA++VZ7D+EvT4blC6jINEu6mvDPhKn3KWpvDoW5jAFSLmkoyVYrx8PA1/h+t\nL+Pn1UuoRNcwg5ZlTc3YmpKutq3XsF5SGZvw6iGPVWNFLm4W5XUK/n6/wsBW\nEv6OZsnNJFY5+7IW9Kiiv892s4t12/LiPWSb3PH4kBF4cByk42qfhRgfgs3S\neWcpFRLhrpIY9tAc3BQRLUke/ezWoGYxjkh/AVpZJQlMwZT38jZfFV1DYGd+\n0QrsnU3HGcN3myWsmNSBfYhCT0VxUgcS6/GJJaIh2Gof7vKuRVWHZr3r/FfN\n9Tv3GRjkFFt24X1+weZBUPGqHjiQc6Teex4qhN/KzSzsb3y87rIexMe41Big\nEAHWnAH1SgI5DBCJCc3cgN4QEsNvvDcI2wvbb/+EMXak4IyH7Cov1LA5JgsM\nrtx6\r\n=crhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/button":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/typography":"10.0.0-canary.fec7b42ca.0","@material/icon-button":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.fec7b42ca.0_1611861370417_0.3660348744337065","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/snackbar","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"226735b642f3118310628a569b19930fb0445992","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.8e66dbfee.0.tgz","fileCount":40,"integrity":"sha512-EdiD3cst+3MIpEm4kgmxoC2p3FpHAoqq039Mfit43ucpfIh1yKHi+0IQCkb4/iEGjaVUNP9TcaKVGyk/Xyvq3Q==","signatures":[{"sig":"MEUCIBkpqG2YWGtm3jGKgqXnxmQ+LkC7qvJl4LFhbFPUESUxAiEAhXBDPHa6KQZiWGEQZnMOnXxJUkqyDTmqe9r6jWWP05U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGI0UCRA9TVsSAnZWagAAIwoQAIvBoOFMzI1v60Eyv/JJ\nwxFFsGSg5f9DMqGSya8J4wE4Urb/9fjdOk+wRwsGqwDwbLi2849QO0LpXbec\npQjmlTCM/A/WgI8tsMx98JwGyv2syS81TwgQpYiJ47NjgT85hOYlHHSZUVou\nNaRLDbT86tagdjFnI7/mOsXbjbIxZ6UBHIyYtXHXFrIReNETu5wNsyyVFen3\nX4g4Rcw9VzA9LGHad7jkYbl+gjpwaBDOjjxIdQAfBVLwh+h4uF1uNeCRm3/I\noXONKF7mHxcFlG2vsnGqf+yM4MyGHHbiTdunB1xZF8u7zpF02eeIKH3aE6rr\ntYdP9jWR7uehoO0InjfSuKGu+5PolLKWR5AqJj/9VuRbZGsQ9lfl0GDc6rx6\nSCz0MwTGYPrZeOJ2zEQWq9ZBBeQC97FZG9R5aa9J+cCIzO5aThOtGrPqbp6R\niwU3FO8K7y1QTk4wWfthBb1FAPhRD7cVe+j1QM6nJNfpUqdR8wlME3YFclZ2\nkWPmH+irzzuRB0P9AtYOHxXSxVp46kSoyz0DU4/1v0/61CGw7l1wKcNbXM4Z\ndwq5xQtPBgTlIpCd5fXUNDvg2We2XRDvD9l/rT+aUAml4VO+dlPuU0CtbYLl\niqkxKhYO5yzLqqL77CW8DkjS5WAegfseNA9lKbRbf6U5uaLzj7b/ICKVV6GZ\neACg\r\n=2/XW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/shape":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/button":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/typography":"10.0.0-canary.8e66dbfee.0","@material/icon-button":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.8e66dbfee.0_1612221715726_0.3295339869616083","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/snackbar","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b6a75d441c4ae343fbd22629d93df37089d159a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.637d15da6.0.tgz","fileCount":40,"integrity":"sha512-zQnTNWAkXk5WzlVF4CmXqnJyUwL6iZHCYTropaaEVkThTEwJ1sAkVpU4zRvPYaZEec9b5kfaFETV+KCeZVywZQ==","signatures":[{"sig":"MEQCH1iuCsgoWvKOqiaPxTgUMlSVtO2MOQ9plIxkl2EyCP4CIQCdreudq+klmpPHftrUwP0tpVGeVxjZjMd5ULLGTF1Nrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":410703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ8MCRA9TVsSAnZWagAABDUP/13ZmiSIo9s3eb8om6ah\n0xAslpbtpoXfg4HQ+R6IyOQxtOYKSDYE5J3N8YvlEaTTIKCoucGDUwS7Tz41\nWR+LE2nGJdzuicbp92mBxAIsDP/VesZXX8UxANwCWKZY5bi/Eo6t93Xed7DC\nkXOM/WJYLIChqWNI4l2fo2slFsT91Yd18dRSMn+l3pqdBThf0q7xnoixEp6s\nIEHgYpeTZhPJvIGvzkR9CygGP1Ff8apoyMcBE1lqTKgjlm/bkdYXhNW9HsiZ\nHoLRZ67tOkAw5xpg0Z9ur6UWT/sW00hdRtOV95omYbCF+Mwtf+bRLGCwaqEV\nFsFmA5DS0MO7tCBii7JqQxdMsyj3OXoUtiDsJV0CC0WJwwyIyfsWNrmaXYs2\nfRzKLLc2O9ZU1JeflgDWlEYvIEJM0A+YsvtzVWrkTsoxa06Ho4dPwORAwMlK\na8nlS6uTIGseGMAz1x4j/IaiRUyqNQcSrjTh9S8B+H7mcnhoRN36jnAFPKov\n/XpZMlpRu0+I6+L8MKsabsHyDEN12EOgrr8oaNT8o1SVf18KpuCU1jEsjm8Z\n0x3/YqlIR5UQqi+tv+wDP4c71Ujk6Ar4kixZyrGr9LLHFvU7W7U6Cly+dWv+\nEGxNRrOIKXq8lNxBrsWrKvVVizA+547LGmKh7Y5zXpr1DLJf9Ve114KeO1KG\nErUb\r\n=lGhR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/button":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/typography":"10.0.0-canary.637d15da6.0","@material/icon-button":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.637d15da6.0_1612291852361_0.9567161351021474","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/snackbar","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee12fc3aa2d040a4bcef8517cfafc57ece8291ef","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.fb793939e.0.tgz","fileCount":40,"integrity":"sha512-bU4kv5x7bgyi6m1EIAv4LScZXwwpEJgvQPlrPMmW1fVrAFScwVat+3XOBsH0SwWBDpZ98nc+xcJeGKx8AXEiXw==","signatures":[{"sig":"MEYCIQC2LBeOnNP1cYur3tKOR3g4SGVoq2EahYdGv+oD+xM70AIhAKc4DkkGrTrnvim+deOcugu1U1u9Gl973vvmbA5iUeS4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":410703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePlCRA9TVsSAnZWagAAOncP/0GF5HJONAEVwoW+9nqx\nw5W/UnBOiNN+gMzd+jvfJyQnm7BcGSmqIV7sDKU+Pvz3ud8KGjXgYAcFs62h\nKzVi39jh+1Q1hpSY8oHUfYtzjEbdsxUAajHGQcKqS2luBVi9N78pxVipNcZY\nyZto+P9bCpi1/bG4qyuXrxRGBzs6RZaX818ZlmVvwpeLBn0wFpe+Rt6tSSuA\n1DvaV2Bv4gAqJxkRvTh/vxmvFXDAXfUPfy7M4HlGATdqJleKP+oFaTcSv5kW\nj+YKGt7PTyiieJ5luL+L6K7x0f2Qb6eHbua6nUjjD+1rCnuNskrnA9KIkeS2\nxHCsqVZuPUJ0O6ln9vWl4kRuYgIEVR4qwhAeZNIJvoGcwwk/C88ytTIqJfJo\nD/E/fKlaFppObhZSBnTMZ7dy0NHWGCN9W9IJhu6lOpn6lVfDE6eQOdxdJF5t\nzPT4FKDc8caKVw3ACBBXYKne8RIGi/GecXeMfWa1RhRSScwXB70ecnbt3huO\nV+QbaBgEt85hqNTr+3a55s6bjPzy4ycv7kFVW36CUq0fz+CBx1YKlV93btvn\nkO5/uyLfEDDMa8E72uy5ueTLWsc0lW9k/2zrjkHFPa5ZDZElPjlRDdJanSMp\nT7bJOlEoqMJrHpGtp+ueu3+tDaVvcjGB4ee0Baza/7Lkmk2k9S14CLHNRZ22\nYdP+\r\n=anLd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/button":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/typography":"10.0.0-canary.fb793939e.0","@material/icon-button":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.fb793939e.0_1612309477337_0.6909429270796981","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/snackbar","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"540df330c6252ba7c17aca3cd77b666c2e1a8ff4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.15a4d40dd.0.tgz","fileCount":40,"integrity":"sha512-D+IMKeR3aHlYYJHuf4WLWVGxpEZm8am8KTKmY90UR2ypcF2+DYVXDvLnANz6dcaw2VcQ09MKMjggwOMutfYdpg==","signatures":[{"sig":"MEYCIQCKd+ehGO6NHzxdYLufW2GsofrBd32alXJtktGr35ICQAIhAPJAcwnUjsPmZB+pQ4HcQNAYw7WevBvjPepq856PAjsM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGghMCRA9TVsSAnZWagAAajQP+wfS3kVMFeFAX0QuMu8q\nuR9qh9wS7iSgpHZGNg7+CTnGHm4vHm2UIpsHErOv7zKdS4j4y9HtmoHPfi8O\nEmvYGRfSIAcadTN8rSxPV8RmaPO66T5kju1xLWitrh0AVkTUr+P3aZyjSCDU\n063wT8Nyxb/lDjptUpP5L06p02kWPUP2JN10eywOFpznzahwG9oqb2WLpNlb\nhvgsTRVoD/mojPKFDdy3sj1DontyqXoMzGQ7AeTHD1jEo3Po7+fP+I2HX8+3\nPkEPE5Oj844OY5sSS8JDZvtpUSkuKXGH+5EvWBB15GsUICCwW5uN3VY6Qkbv\n066pReK1sWjgA2zo12NaGAj6BLHPbLUrjuEClJSWD5wis3s0hkSHNWQG35QJ\nJKyaPE0n8SBsRU6ZYF9uqu93aR2S4FV0/nBeoXMdcAmTeE3TL3zmSXTgj28Q\nlg8DBsdRpun22qeNtvSQFSwPUlr8TisHr1WtSAUX5JS2WnRwC1e1dG/lzHH+\n+VKwkji3Npb77Z2OkchajY15q/9tA00P4lbl5ayZGIS+ayKq3B1eHf3oIxKS\nKwXVx4c6vbBCZxBdIAb8G9FeM1CgD5ElIzVHFo1Qkvo/zwfiZ/X7KRN4jR7t\nD/pG6/YOEBWkCWrusN0m9O9ao5UUk8+5tsFTZiJQULQioQPXbL0eVb2Dhudm\nEo6+\r\n=N8Wi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/button":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/typography":"10.0.0-canary.15a4d40dd.0","@material/icon-button":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.15a4d40dd.0_1612318795722_0.6813017174967118","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/snackbar","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4799afb05e70bfd7e343471ede8104c8f3056556","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.7a003acf0.0.tgz","fileCount":40,"integrity":"sha512-ibz2vJ1nLbp9pXiXMgDnWYQYaUt65K7qjYPVy5yEYookLN92e4D2EUS6wCkjjbYe+MbEsL5uhmJrZ/uWYLAmDQ==","signatures":[{"sig":"MEQCIA9Kf3BKVPiD7KIjWau2gueiXUQsGQZovBlZJNf822e4AiAOxP854WEZTgUpKjAtvAOG4BI23F37/uL60AHsqHUVJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG110CRA9TVsSAnZWagAAQ6kP/A/u14J/l02R6co1Z8uR\n0h7dw32h19drvfnGpvG4Fc3sX7ozYQfQd0TGBdVK+OERB/vsSKMA4LEB5HXn\nUXoHshNj9q8XN4rBr67dXWeDRRQeDG+uTn+StG3E00IKFuwAw53fnDiRSJWd\nDe2OYxobzHBT9BfqvInOQ1IJWjLbri0/oE4GPRbvIL9NyjFHb0EmZRqnyQbY\njPI89Ifvw6shp9Z7SXiCsg+KFIWPNHbbgpxmUi524CBiJorbv9WLF2E1D4k4\ny6D3/rTwDUQrrF1W93NyYCaFYwl6AtUILZgtLXKSJkImmpDHRc3QTJg+6PMf\ng/2svhMqLgpvWr1d7yt6EbSBGuUh/xQsEucwbwHLHauldsi0mh4HqiRNaXCJ\nFj0BIORgK098SxJxsCGUzQ463VrSHlICz7qbntqykZp9C5EOi3DzU4l1diCq\nWtXBhOTQ5iG6oTx1VTQhNOj5hxRLJSIyhrnhkgnuns7PlycFaGLHyDo/xl9w\nZI1BvcimiCUPKi54FlF0t56uQRfMcbDzw4eJB/A+wY2kxiJV7072vh1Z2g2Z\nix07B1RdOvB+5AMUaxR+2l2lcVulgbPZwRCyAujdxD2Ppu42HU+wbwB0jNfE\n3HFHBf/SSyRlCWRrHvSElxcHBY2LM7+ECBGIg1nmKiCiPLnLg5TH9ovJ/evv\nxgeY\r\n=pMrD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/button":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/typography":"10.0.0-canary.7a003acf0.0","@material/icon-button":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.7a003acf0.0_1612406132341_0.37015707415343546","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/snackbar","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9abfe5b7df1f71b0ee5a197088c6001764825d16","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.05f249666.0.tgz","fileCount":40,"integrity":"sha512-5jvJXQFRytwk1kC4lXGWWpoYkuuee18XwOrj5ejSRUcZqW8Hl9ToFWUuo3T0dJiwv3ofCbJTILZ0qBJporG4PA==","signatures":[{"sig":"MEUCIG1r2gZigiZypZRWTvYWINtOJ+wu6LWkMxCL/4smpRedAiEA4Jb1wRELmLkhDAX/VLN/njPHKiFnuRxIlD8tZswpnF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQyCRA9TVsSAnZWagAAxTQP/iP5Q2ridNvprcVLxiUT\nTB3C9/aDuOBP38NYxc+mqo+ER0s4UODAF3qxWwfZz2EKQjdzWjxBOzyGFf1p\nTS3pTbE+Rlu04gqFH5hI15Fe1YjXzusyyI/6EFGhox1g8P4Po5GcRnTZzZLr\nSqZPwbrAfmf1DjKzpXt/L2lFUWW6BPRExiwXg92HIoc3sPRKbmaBd7WQY1pA\nAR/EzwUALcmnGyDh3AerL+iRC+0QKqgK3inoZB3qlMXbDP8uImmY3mre9BIO\ns4UIzgbX5qAu4kvgu+SOC5qxZOAN4VtOXbs/Dq4nJU7srxCNReI9iVCkG9T+\nrddm2ivhfwGezayMFhujgIPfbz1nzolpyEqRcQ86UcYjmj2c7htLu6iug135\nepJoMfaXZksQzf1WxzT8v94XnAwClEvlJdAJ8bwsOG3tNsNlGUPIKIQLXe79\nRfTT5nmyd+ZO0htmgOzyioWquSpWodvArKZac5FhVXtc8FlbKHdJLkZeN0tk\nYfqjWpp+4cN4wL7Gv8xzNg1syeTThe+fqclt1LAtMnsWCp1atC6tBz255n/y\nN/Yvhdll/r+nE784dWJAb2p0FP3mpIqYAP9ARhA6Em1xUYZsVWUd/pB59mHf\nh4iOkpKi9b/oKSekRefp284DUfbJf5pL4KoLQ2bK7nL3NrCXPNt9VxGajYRG\nHjKh\r\n=Gacc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/button":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/typography":"10.0.0-canary.05f249666.0","@material/icon-button":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.05f249666.0_1612461106287_0.24935433885820046","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/snackbar","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3db4fd71f435ab2313947db1dd250bec4cabb4b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.1a3a39629.0.tgz","fileCount":40,"integrity":"sha512-pEdMJBcMBcZY3nGAFrQa+GmZR1sUA04vCNCGMVnk/4D8KHF0UrGMpKNw4bqv9gm2pP0dTu45OPQQ62py9ZeH7A==","signatures":[{"sig":"MEUCICV+tXGL6f48TmhVVvmmROooMpZWtG0Qh0QTrHHLvO6hAiEAx15o3T2vD/96KQF49R1AFPdhNhkC++NEY0msFmE8WzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHECdCRA9TVsSAnZWagAAxxwP/1f5hpIQNYQouy0NvJXM\n4ji9VDjlkwdFJOnMfdlo0aZ+VU5zCsz6UD/bPkFLCxX/cQzRMMRKV65RWVfR\nU91YJfLii8MUjehqt8PqjQttMY9cHv5KvWZAnQaqs+GWpHsD12w4VaYLD92W\nLikqwONqcl9hu6ScfubSboyRMUsDMALApZ1Q8aFVi4YsEGBToqN74IMUdDsG\nLgUBrdDW8Yb5juIcSiNGTaHRdxLonym7GO//9UW7CT7hh5cakHZAlOAMWCB9\n45sTE4W1S9kDWphccF2RDLanFcZIheNDuePBkjQVqRUxUgFg4+qsLLggepjd\nlNwpUbz1/ktLKiEXWJh9P3R+yQWsBhvisPIlpibtWkBppeJj3qlSUwmn03cg\nEWsPjRSyEYKFnTOZaXbzYVj5iMzcoVcTQ5pyG92icRI2HfKp9I8fnox6DzNe\nouvE66FySBB0jk5NGn9TwJLKQjxOGDoBsBwYVRXPpPJ3gYsYVPQ2T+vF3qRo\nhNfPDxhzS4uf3Nd3SVXajKQ0H2RpSQYW7t/3yushp0cAQ3q22kuHgROZNAS0\nXP5ktaCrm3kwXvxLfW7JsJ++Q5TEpAiQDRnNDlm2a3nqbR1DnDRVTJyV38EZ\nZcvhINHqX6TR6QyEEaM18g/KTcoDlCy+eY38S0sIqwL6/YIgXgsIVLwv2/el\nvrEY\r\n=LSVq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/button":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/typography":"10.0.0-canary.1a3a39629.0","@material/icon-button":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.1a3a39629.0_1612464284893_0.09466241962593558","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/snackbar","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b5df1f99f9f679252bbcb48e6f1514e943ed8dc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":40,"integrity":"sha512-odhjEtiKne64eHTjZtrYZTWLRfqlzWiU0oKhrAEQuyLxgKCql7OV8pkdWjVbTBVffu9GwmOtJVA6074BtrNPjw==","signatures":[{"sig":"MEUCIQDXCLtmTsE6gsstUfxEg+S1ujNucVyYdY/3+t8qPRZSFwIgBjHRvbpAkbL1z0zHZ+A9z44ASoCercvXOZHPmepicKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHblCRA9TVsSAnZWagAAGq8P/RXtqZ/+3JcXLWlSjAVI\n2jvUsAhLsvVxQr7hUWFyKXNIXJ0qzVcdMuYHr53QnayKeVNK+nGhaOZLAsWJ\n+in59S1ChuOUjq3Uz4tUDMn4Le9XVqH467h2hCAxdfOmbQSSj833oFja83vj\nfxiOLqEw2MQmTzNJeqm5ZvcpP65Y39oXZgs0+6wBHg7G/NjIXQArOeoC9LxI\nSiILzxvvUbiGfkJbjz6alO5o/k4FSQ+TnOmOgXLEpTHhKq5S+P8FKiYlzExj\nYZQPyRAHUwhgg0V1I25REyJCeIVeLCj/6EhZVdo10Xzpp8DdpiMPCKxvD+Cv\n+krDCw1+ersHEwtneYvVpnyz+PbOjr/53sMEG30lZbpMUDmyeuugwLuD6dRg\noVQoJpHn/kFo/exrnzP4E/vSp+t6qZbvo13/5+dAX6fxZcIqohAcVDihGex3\nn87hlN6yfb27jakCA51bG1HziZoRZACTGtNj0t1nd41SzDiXXXHyJ0uer5Y7\nuDUDT24aLXtbP45uce0KKaz24iy6K7spFHmqx2XlewNqTWuLS+5uPp7Lfg+9\nsCBuxelKkkruspUawhMFPq53j5fEfRzDcM8TCPIk8Ap33e6sJDlbU9/+Aka4\n2C7WiLBJWjELvMrqY2Ev1R6TQXxi0WJAOqKqkbziB9DrqOxVC8oNhhf8pcZ/\nTL9o\r\n=2SId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/button":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/typography":"10.0.0-canary.8b1cdb1be.0","@material/icon-button":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.8b1cdb1be.0_1612478180448_0.7891973226853641","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/snackbar","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a9d17bd5119d17ab9264038ec6bdc33ddbbfe77","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.8271f00f7.0.tgz","fileCount":40,"integrity":"sha512-aQc5evUo37W7tcOfWYd74oDZibXdEaWd4ar9XdzmtOm6wV6/IU8HfreNG0dNRItURtnnD1orLR0wCI5g6b7MLw==","signatures":[{"sig":"MEUCIBLcAl70uzGFZX/jW8FEHsl81XL0CQqINYlXri6/kpMKAiEA9WjYFj0hWZaGgmIFxvD/0eAbHn+4qBiOFvsgzTp7Vxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHzoCRA9TVsSAnZWagAAVa8P/2BPVsdM8YRsb1nkEZ4c\npbhvNV2amYcF55/dFEFYJSI22CI4nMI4QqFdPx77sQaxjcG5QCQoa2I1WBhU\nSu6LPPzn66PKlXN5aiHzmdNkUE3P0TEwqjyZi+fKCg7dx7r9nXitpXYTrPBd\nKi5j2F1F4ZIHS0xsTT0nu5w0UwjoEcSVQLoUiflE66gqBhMLZM71tfFNIgdv\nZC/SyIMg+u4FxJMcv15p8kkwcL12B9c3gQyv0joAzqdu7yXkdvAFF3cpodo2\nH7Ni8YC3pWZpD49dENos3aDk9B9ubGGnvrkB7HjSyW12/xujMnT7YlB+r6kg\nYTvKAKvt11mhcfyH6iBMsLsvN/9aZi7rTGXHUUI08nLD75jkZMpvoYUNFtn9\nJfw9JWL0V9fIFNFgyhSVSIOxbVZMBZ9w7z7nH1tOOyVatLt1tmsmZXQ8bl+I\nPCQ/809H4kF0Eqveyp9l6LCdq/Ec8iqDQWk6buo1PCk9TKca6VMmi087x2UR\ngtl0b9c4Xywy+KyDIYytenE4D1Lc9JNgRr7SaHd1//7c7G2Dj5j/XRZ+F2cF\n/kzvAPUikKAWiiMzpU9OfJ8/RP7qI1OcApFQAyXZ8L4p79nAMl/UfWs1FATO\n3moSqTUhpkdxSO0MUR5mCnxVDbHk8pi4Sl4rACIewMPDo2RqRyPNkLm6JgsQ\nMtbQ\r\n=H4Zf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/button":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/typography":"10.0.0-canary.8271f00f7.0","@material/icon-button":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.8271f00f7.0_1612479719810_0.5465300371555102","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/snackbar","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4806d0d31438e1b17b728621f15909e78df84e04","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0-canary.533092a90.0.tgz","fileCount":40,"integrity":"sha512-ja+Ub1jm7YFwUe/4gBIFZtOqDffELpS0H5klsscvjrpXjGfJ6ycEfE3BrJGJhsLPueUjajGPCYYQ83hmdc1KtQ==","signatures":[{"sig":"MEUCIDH6wdgbcqduQcIjE3tKUSjIqyHAf7jHByVYl8aO9AYxAiEAlD9Boc4lQkArvM0pPkedB0tYFHa2toquxevEaIGp7KQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/4CRA9TVsSAnZWagAABtUP/0E4minslBY4oO1gSCvi\nfKM+OAzPunaIfGo8GGDOFPKVQ2H0zY0KTrIbxsbdVxc5tn9q5jfVQI5LICqL\nHfbKuzE0xrVJeLKfkDBhGyQ4cI8T9ypXiFDHdIVNANOyt7rGZxAv5lrvL8pK\naQrO4nvbXaAEGscWjW2redUWSkddKY1e5KeXwXFLotJM9GVgtPwk5Co3x3gy\nP1Ql7lIJIoUaHmGnuPDb6f2xd5S660CPOPlts+w+F+lJNt2TzyEzPdMwKFm/\nMFEZMdg9TRE4uU/gOcG0+UxAuIAToqQUDHl6ZBf0d9zUwVBF33PVhSEd2Qz5\nBSEI3XXW215hN0LhF6pv5bIBtS5m7pDEErclYO9ccPB34y8nyeRn95AFW0HO\nUhLqOGd6riNfQ0JC2GWUYYcNXsajt4o3HQLSCyPuma6q/kHhXRef5SIkzqA2\nU4mMEuZLdSneKWLoI/0uwcw1H+s3TJbjxwmSnDsvdZC2BMaz0ayhRWHWVoj0\ny1UrSl+rfJ4uXnJWpIEKJ1QPG/deuSm1t9c9Uw8YQZ400ftkNPIlkvD+JlWc\nMoncFLqR9A2uWT+urAZtUBGkkFoRHTOffhkzrH+WK5C0PPENuhZ5/sO3LsLp\nVYAb67GvQ5ywg15hl5lU2BDld+hocXPjPwpCtj60VGNP/dp/L7C2LbXSjByw\nLWrK\r\n=zmwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/button":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/typography":"10.0.0-canary.533092a90.0","@material/icon-button":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0-canary.533092a90.0_1612496888210_0.9821708924909429","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/snackbar","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"168d2b5c12c637bcfb04ae67ab293e05c114a420","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.633a9fc7a.0.tgz","fileCount":40,"integrity":"sha512-rR4EBRnboV4zO61aBrMvkdYSOIiJUF4F/t0LAVLpgB2ob7DjpjtZye/eShQKJkGCmJK6kCcYLqNwDSgK5Tlccw==","signatures":[{"sig":"MEUCIChJLnqmJSWaOG7VyCu4SQOQKo+OMRwtH7NhafqjQnMbAiEA9AIRTcdcRSqAQZH7nNDaedLFrnhIm1zKm76X2ihWZL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAACRA9TVsSAnZWagAAB80P/iRFX8CsMmrxwXM71LSk\nAG3X1xd1IC+Ofhsjw2nkj6j4r9iwkPXyuOAXrSShSozHkb2t80WnN0AVgtEn\nFfoVw3a5LcWmJZetYFnZu1BQTlimRCCM/yJsZ86Bx6wXISICNG13/3rlZJ2G\nAu/mKholwV3iRbJ1qPTmHsyZfvm+/43GwU6FDn3B6/4Qwpbj57yk/3scPgry\ntEiwHLpIgeb9TX1QjigYiQhNkcx03SDhKmFHeOtyyFtMOc3Dt9SAsEO2avaO\nYcHfSJM1SVTgYwvMVZHs/4Psg+Tu0FK5fQPMZohzL68ya/fzKwCaoaUc1RNQ\n4nLRB0mNzLNajvze1lSemVqDXSf8baWXrkae+k5PBcMlRCtZgJ07FA/9jRe1\nOgeUrB5A6d4T90pGcf9ocgXxD2zXo2Q+BYFUx3nWoWLP/MYJIL/kyI1he3nJ\nXtOMM/EWR23aFnS+LyTpSK2Im/UKJJ4A4+vNpvE1SzAfAz56Z/OFUhbjhQkH\n3wwH1aZu0B0rcVpO5xa1rIMwi2bjcT++R5tdfVJEFf/GZDrSGwhDN7VuLCOJ\n2N8zqmjAkNLMyL0LafIq9xlPk4nriUlPkhX6FhamLWvVBBxYa/nocCqpPg9L\nKzqHZ/mu8M0M+T3CK3vmqcvbHfeewnOrxTCEFtfT7v2r5r0G4QxNrIBaxJbJ\nXBvX\r\n=ofG7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/button":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/typography":"11.0.0-canary.633a9fc7a.0","@material/icon-button":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.633a9fc7a.0_1612541952127_0.255347400343483","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/snackbar","version":"10.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5409f67a0b632316998ebab248748a3906eebca4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-10.0.0.tgz","fileCount":39,"integrity":"sha512-Cp/OpLZm6ze+/jxpyf2D1jUNvdyhn3MhYcH1EWUyJowJk0wc0DOvWWgrZcVmyqTCROJUmTlL+l35EQ3f7rkjxQ==","signatures":[{"sig":"MEUCIQDgwfKKByzVS2HpiDaqWHrPhthfjwXBfavwTuauunz1fQIgagWu/3dF3fH0CbwbHWqS9y1u/UwfeYi0SFP4s0ywoyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXBRCRA9TVsSAnZWagAAQbEP/j8rZ9nSA/fYd/p36Okb\n2/a8HMbjzp/TUaz0WyFw9SBTj8m3+brdbGyb5L8ntLnsoZFAcqBv+oBByPpX\nli+4Kmxp162Oa/s6FlCD2cLXzVZWP5Rk4fTiyV+/1r0m4f2vNyP+XiGXfxsW\nGl9bD90MMF/STlENsWPK6cqP3P4zi/Tv7/bfeAJvnqgiiYH831mpnfY+7WDJ\nSGO64TZLCWAB8D/+Sa6ids6g0KVm4+v1nRrFfHU1ZkIu14cgC30lcWNHJktp\nqI44L8qFjSkQS7g2YSulpma5Ux1B/VATk8NWn33MPxxgHELyBCSmPo6kfdr1\nBwTPuUB5O9vXj7P0uhYT7U/QwN30K9EOd5z2hSezxp9L8GFkZZ65Sdz6qZn8\nEl+KHq24vb72+sGehdgmhAY8vMNyRyub3UFVYtc4nyPeEjVo9YZAunRyhiHn\n0wUqts0XUhuXLZRcbrGFYL6tkOTB/1j7rg7tzkMoe714WAzYd2Ff4JXsZ0Oj\nPxKtnseVVbA+IclU8bdeoPQ1QquhUYH3ySapVz8THPsj/RncutzoT3GmIymc\nhNvSeCWVu8QovD4fCBvHeYVUx+3JTQ0/PZgVq2DS65Mkg76//eCk7v7A2k9l\no03FTv8w8aRxQHrAtlSU25CJU+NFNUtudt54X0y+sHJ63F2yRkopuIogmc4p\nD2jk\r\n=0P9T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/button":"^10.0.0","@material/ripple":"^10.0.0","@material/animation":"^10.0.0","@material/elevation":"^10.0.0","@material/typography":"^10.0.0","@material/icon-button":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_10.0.0_1612542032935_0.0429920096450771","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/snackbar","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3696200b1bb45b966c0353bcc67689c758e69fc2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.b5227247d.0.tgz","fileCount":40,"integrity":"sha512-8MTuFEHuoEThRkVCzrgMKX+bxstCwafEvTSFGGSU2zPGqEcG6GprgmtrciLY8otdRkwLnC0RW2jraRMJrZTJjQ==","signatures":[{"sig":"MEQCIHteXfQKLClf/1xBOLhF7erPIrH+ohQO9DySG9lu2KfjAiAW4kVHpFxH9luCeFA/YBdiOHgLlBlCM1vKqoZ+KYuRAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYPMCRA9TVsSAnZWagAApFYP/j95+NQf3rRZdEdNWJAZ\nbtcsJ9RZ79Whbtu5jGPOxerilfKFsF4CM9PfHgK3ZICKjRQovljHt+IFwINX\nVtL1tScXZ2EPxiZ0HzYetLIhnTWJSFO/g7dCVj9QdmGpPl1fwlkukMfAV83N\nJ2h7r6CDAOqsxQMLb7vfJgCzZ9q5yzEW3Esa6HUAAdT0VT0OqhiQpsIVdv9t\nVCxftLEb8q88JNE+8WUz4Tw9FTso09fkXP86F4UmWQszCj5z8PJcm79UHdgA\nh0h07DJBP75eA4lsbETrYDkENBaPLV3hoOzpn6/YwI2AL5eTTIqAeoqtHSYo\n1Kf+eJB9myNm844Hr9hsF5T+esNJaHKPDJoB7fmiYVNtKzbwvKVmSrmv5rsq\nXaTU2CMA1Qt1fPmx4231Wyxx2ObUiCdewa63sXqwk+ErK1hpWlIXI7BT8txH\nZi7bMsqx3OpPkL9gEl+PlzxcRm3A1s/SEsGuGnpjEYOtAaDtysQLhEyZCC3h\n83KS2GGeznRt2rssGNXkxUhbFRnJ6qIsq23tdVRM7Bf5lwoEhZ4Fw+mvkGYt\njsC70xj1w1HjvOMi5PET0WUHEV3bbYeUfNTBQMljlgsIuosmJktkUG7mTfeQ\ngsDdlNQUPZGEuswpWpdb8Ylu9joNoI8/066hZBLFSMAv3YauJb6WsDLjoxCb\nmK7L\r\n=o7Lx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/shape":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/button":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/typography":"11.0.0-canary.b5227247d.0","@material/icon-button":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.b5227247d.0_1612547019859_0.6161003810660521","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/snackbar","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41f2747b8fae5dfd5968d3200d7b097a79054cd7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.95322b11e.0.tgz","fileCount":40,"integrity":"sha512-G4ULzKephssWvhlTV78+EmuzcU0IWvVv6tRVSF5u7woN6c07rrPPD4m00oezdk1YY1TSETJKCCGeGg6Ga0NSNA==","signatures":[{"sig":"MEQCIEmHU6UsDQdwNisEpaoLTz3klaTWQkwKVjvus6dLncJcAiB+MBPSCwGOW4FVDB6opzGriPlrGsjxAKznVlNjNwDQ/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdWzCRA9TVsSAnZWagAA3BQP/0K9HMT2xLIft19OsZ5s\ni0XgB3TjS9ho0TpYvJRU2xgejrNedlcfYgFPbdXSkZXoE8BhuMr819sX27qv\nK4ROuUB0MYjrlHoWdvqGXUjLJsCopSw0VQCJXLWopNrrX0tIT4S5dbOFbl/M\nMLdav5mTRrqPfT55URhbS0gNm87Fl3Hsrx389mCMlwNG6CdfYKMgItUXKqpk\nr2nhxd+SnRds6rCh6lpn1KgN68AB93wLLzYEF8f1r4q2k7etkPrWNSHywV1U\niOUkyX7aTfEgRL9DpFclR87vml+x7uJwJAXuSb9dm+0imvAkKYRZmHyKH3qc\no213CWQ2y5d7nOijLo0kT+VTcnwe09sq33m2CxKXFW9fSalYUOb3gRjRV6uO\n7H1qWXy6bDz8/ep1Z65gQZar5ONal/zS9cw7il+OKF0rh3ZR96c4uhcVwoFt\nOWqBUr/u1OQ546g24QDNept7GZdLm45mMdSnBQ9KIGQjt92JILU+FL7EX5hQ\nlF72HS4iCq5U5LyRebOU1dhdQhy6nvujFSq948fnKHpEYm3KaVuYR43MGf4H\nwb1MfQhja65drHKZhap/ZEfgXB2sb7Co+xGafHGdTs/KV0ZoDV5SpXjB/vOc\nJlVVys0VRJ6vCt4PqpHF9kpfnmou5VLPRy2wa9n1n9hCOa4rGUYVIZIcOr9u\nnsdU\r\n=9AtS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/button":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/typography":"11.0.0-canary.95322b11e.0","@material/icon-button":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.95322b11e.0_1612567986618_0.9292661897896402","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/snackbar","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6009daa32ce13cfe6aff1c63fe0b15200c42e0b0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.1f318ff0f.0.tgz","fileCount":40,"integrity":"sha512-glgay9L5hF8DEfHWWyGVPwxZSV3jkDdi2S6giZVo0y3lK1xpuesQgqAneRhEX0jvNG5uC0ERdVb5suRe6Qe2yw==","signatures":[{"sig":"MEYCIQDD0R8VMat+S3k9+YeHMlRRM3Uzo0YjcOTjN2YhWhU+uQIhAL7rDRknOrCtvP1KcvRnawgFLDjFeb1UoqfqtpzC3eXE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd2ICRA9TVsSAnZWagAAyfgP/3msfUgLnV0lAZXQsxRM\nhhWJBdQa8ZB4gUrh0+PlOtR6W+ZDS4nWJUApIfo8LUD9sMuwbSI7k3LdbKb1\nQH6DZ1Lr5gxp98SWtLoQJVlqb13jcLHQFenng3qTAZipkHInDQ+7mg6x/muq\nekwVM3j9BaJwzsQQeEAuowMuxjGRACdeWAy3ciXfqzLV5OC//JnES8n2T/8X\nBQiJ2j0nV2evF/94dqWfmSacSLn8koU2StuTNgDbXzmV1TzkQkPSqpC+XoLK\nUKsgXXzWNYCcdpBVoenueFOJHYll604FiNlOq45Zp4ALxvSsrpdCsgV6DkZm\nYBMaWpOYgHuDx4gj3NieujNlmxTIiBu+i9ILjqlrD/gqGUA/xKEtslESJOOR\nTaOGkvIA4cCOhqySuOCntBojYFiNUC4KLXEmgNmUggaRRx7w0oPfMrJHGh16\n2rYdpowJTpJENVyOKuWOEW649sp70332SH3jtfmmak9yXM95Au9+ryvj9vzQ\nDDdetWZbmQh02ekMz3rkSJUPaMgt3IzwHjfdZbvYW5orfM7ALCVSXww1O7uA\n3/VEDKh5TC3BC7O4bI3hNTbcBI9XnxvOnZ94J1SjyuRAvc6N6lYLN0g1QBxm\ndw4utygrtsRHGl7UsNIxRK6F+zECGKQgepksRCFe250Nz/NjvBHqB5WcS61i\nFd6l\r\n=gtlk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/button":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/typography":"11.0.0-canary.1f318ff0f.0","@material/icon-button":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.1f318ff0f.0_1612569992327_0.3132352931126685","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/snackbar","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ae9320320c5b9d6174bf02805a026249587b40b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":40,"integrity":"sha512-1NdqN5EGXMMIVYchCRodv5T6YGgAf+AgDXafQ5efbyytBC44k1WStLrud1JQCZxTGLl45D8Jbhpm7h6tZhG2OQ==","signatures":[{"sig":"MEUCIQDTO2utbgcfEBbsE+tXB52zAMGpWKy2Flz+CBB3C8ixbwIgYHshmNUY+3NwAm//QyWv6RodM+GWb2UxFai0fwBTawo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVMuCRA9TVsSAnZWagAArGkQAJsMW2sceXFAS5gykea2\nMkWWpimRgDNPQuQktHG7Id6bk0g7w4AGqBMUjbJI15ygxVnQoxBd+7KBx//b\nbYRRwLKjKIjZt4ijhXadI/YPOfytUb5rlw8PBWP2lnL8D35xp+a/kY/q6sL9\nluNc212sDNoAdMQDnq0MZcw/tH6EvvDzg77c+u+Ok6QYl9MM6DCOoQdNAY2r\nZSZkFWgp+JbcqUwPqltpFHZyBgaiXBO1HlxFZ4hjBCVP0lj9Cn//6tIWjGLE\nmdgBF61KVW/7yjwnz1UNLLLjsM4xcZCVxgJP6B+E1pLWmAhJ5BfZGpwJFnD0\nBXgMLL4CimHuaoL1c2jCzYoyXAuRE1htcTM87Gda3QuBgi8lQWxoa/HNx5CU\nLRXs0zqui//YXUIhMqAdGb0JrPSO3r52jxw8Zx/AKnd30VpuyBurOTTSHHOE\nzj5BOz4V9AXtXxlwtxcXIG9e2RylKZcZUTanzTXUinSlgx4/8G61vcKyMb+w\nkxAoAwNk8H415Sy0yeCXnZrJ1WhFH0mK4wwegOUj+CFfMcx6BmeO26mSQ/ig\nenP7mZLx52uTS/fdRX52q/lraQBxewdRp7hMsCp3t69xXM97/R+VPndT/1O5\nd5CUm6z6Q7FA/GS07R3u+B6/GhoGxpyMetExqGPjVZCn8Bk4K60xHVfS200/\nU8w6\r\n=t2xf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/button":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/typography":"11.0.0-canary.ab12cf7a3.0","@material/icon-button":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.ab12cf7a3.0_1612796717561_0.6248318900524699","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/snackbar","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a87776b6c25a97fdfef1e50cb0012cdf68220ae0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.98db2c5ec.0.tgz","fileCount":40,"integrity":"sha512-EYmU9uwYNdn3wnFZdPUAEJPBIaP34jIIDcc4kBu0h18q2bf2pBziPkEMid20kKoynk02omFgDeLJsYWtUoS3LQ==","signatures":[{"sig":"MEQCIEGjue3HBR18V5Pc++Ae65TdUtPPVaoV9cEndsJ6aK42AiAFbWQ8K1E3BHF/UeHykE4DXZx6ZEIT9uveR7JMpOKizQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVpvCRA9TVsSAnZWagAAw+8P/iNlaNjwocQQ9AE6JtdA\n06sIjRqdbXKr6/qYDGOeB/cSGdPgk89VDj9wSru1AeJaGsu2ueQNABKOlXu0\nfpbqjWVK35kXGz43lEIQg/sSgNvlhAzR1tRaOVpQSv3VhjiKwgQMueUB3iF7\nCKkkySp4aOZMyCrQX241Ur4easxsd5ZHZ/WudTLkvwfuwNVwC72EaeBcXHn8\n2hgoVXxOofoMwvn3TsmWIFiW4CtdeKpT5qWoxHC5A7W4m8EuCCAdB1BQQZCT\nlClWNda3/RH+wMDWw02oOv7hvz21xhgrHtEOMMNxg5smiqAfmRya2mHRpXbU\nAlTTwvVIPqg+UpztkCxElg8Ihr+GgblqBv9m1w2bMllql2F/WUgHFkd+b8CR\nByRwaBBAWeow81U+9WNivL/YMF4RHSmKmjLF6fU+P7w5Dt+hDgp3FjIgCsSg\nXrsSA89dk9V8NIa/JUjQFNgBX6w94ZRcYteD5YVCdjh+6Api+3Tlmbi8OanG\nkICEH5iyLkjHdTSYgzXu2LICji055Jbd0LFcWHlaOW+fBJZYxBPWwnmRD/4s\nTPoaU87MlsyCLwXO1VvXBAFDar/eZ01bb75eK5XXr2md3QOCxRDwVo4QViaC\nIkd4vv4y2jNlbaUkWxkrtYP1C+8m1rzMiKlA7WcgLmC8+kyt+RpqP9aLl6AX\ndGWN\r\n=73Ct\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/button":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/typography":"11.0.0-canary.98db2c5ec.0","@material/icon-button":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.98db2c5ec.0_1612798575309_0.9030751192043389","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/snackbar","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cef587b658bfaffe19b9d032be2ef8fec9cb37a2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":40,"integrity":"sha512-SVROWIPPEMCsu3PhG6M7kA5fGhEYEcnk1I4nCenuptl6AT+xO3x9EiodsnSCtVCiWHOAbXLStgE7x7HOSSiHJQ==","signatures":[{"sig":"MEQCICKIzecVIB5Eh/OMgJu/T8igPmwrjgdCglsyk5YXSS1+AiBBUu+J54YW94D6931AkDTp8CZB17Fu1HksZUKkZv/GTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXKBCRA9TVsSAnZWagAAMsMP/2kBmubZajdV1vOGs614\n4os+rOzVtVPNPSgNYKqR2Yc5vJ0bDOlXhlfPVTkOqid9rHY0+g6s4qTgqPQj\nYe3DVsmJEA7GnIfwjdr3+/YoEeR0xoNd05nyroXExdvwd+WeShgjIygkmhlP\nC7fy5AToNuxPjZ63p1fjYna7C4Cpm+AS1tTw9Zfo82l2qYHsVuR8jW2BQc/I\n/ESjcrdseS8g9+g7+xhQRPTIpcuFnKuxyyTluvnWdkDqoEgXG545vVvpWXMU\nQ8TvTmCgcGm0Q4Mz7TXqPValLC2G1XvYTu4q9pqS/wgO7D6fj6jru5f4FjI9\nEy1UHjPMdiin72hfnqjzTE6RjnPp1ykYMetWYJKmAsf6rzGV14Pd37EeW/Yp\nZb1uWSKTY9XgBsV78nrh444c1IgzhiSNx9hx8REhpwhzogX+l08Ru4xQbs7m\nw0PSmUBMMEebbdiLpW0FolOmc98GlyGiOlpcM8PvmBaIB4C44w8dtavxFc7M\n2JP4x4Dm6rsRdqPY+OAFo+QAfkJjzvhK+mfCVDFzTvGFQQXq5N4bJCoa2QPd\no9K9bkuvE316Ze0c6gWx80X5cxsjzeaE86egfTa58gqiXAxRn+mbimTA+uyW\nRse1B1RzK3fXbAZm9xIBsj+yRNoJ/8NUqFx72GykXHtJusv05Gf4XQriWmfg\nbUII\r\n=1uHR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/button":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/typography":"11.0.0-canary.1f86b9f6d.0","@material/icon-button":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.1f86b9f6d.0_1612804736942_0.4284635063829949","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/snackbar","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"388000a38cec9009fd7f1959d3c0c2d8e20848c8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":40,"integrity":"sha512-wZzH0rOVVT8vDNsbaDlIcN53CV7OK3XWaoPuw3QBB5TsxXKeWQ/jxDd9524V+2GU20QnhURcyeMINZoQ1gX4FQ==","signatures":[{"sig":"MEQCID4qDswDLIiR4SEYsPer9Nrg/nRPBiSJezLQ5l4Rgc6cAiA0MFCw/A7hSg/lNCTy8kHry52blbKOZvgmb/P6/jcO/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXycCRA9TVsSAnZWagAAvfYQAJOX/Vn2hPCxxrjbBrhD\nv0zAYh7fobd2L/Q1HcPxFlK7qpbectgmPohzv5sBcx8MLCc4iSUSiWhz8LoQ\nr3hOMMuIENskevCDL55Qfan+ND0iv7EI4dd/RPONXFmsv2IrW5jab4F001Lu\nIn9To0iTOhkrWy5hgb64Pbank56Y0W7gYavGh/AeSonQ43LDosvdKjl3vKH+\nPp3qFP/nKFbA42k2njTQXGQyq0rcbjqkt8W6dc9viMkEirjV+W9z29XEQvm9\nNy/4KOrvA6tkg04Xok0IsoZjddIlMk1C2Al5wlcKbt7iqkgkAl/fLz0iZIgg\nm3oK2zA3h4QU3hwP/Sf8+6MJViEDv4IHqxD9o8efcqsdOn+RkueQdhrRMCbW\npSzCO+QDKTP5HGM3YnlOyozv9ALoqSnPc2DjQNs9JDTrvkWGlM6gfj0k5isE\nGKle6zkqYmm2bpFQE0nnEP/vjm8PtuBlQ8sskl/vWrmRdIr7mS5RqGoOrcD8\n/kUbD2PeXaILmb4Y0GYTXH5AiAy8UTtjcUAvcTmeWRaHySd3VXsPTlssfj+O\n23mClkabuME/7JxhCQ2APi9BCo3AN2uWlyEIn6zD2Hw9jnbAeRuOqkL2Taz3\n2ky35Jbu5WDZ22Zgvas+YaDQZ/BAPWGo5wT+z87CCmmJlawSWnfxCNWjwpbD\nPM5U\r\n=bYN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/shape":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/button":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/typography":"11.0.0-canary.aac8f5d9a.0","@material/icon-button":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.aac8f5d9a.0_1612807323937_0.2200622962702019","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/snackbar","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0433b23a242c4ba452c544b1490b85be8d7fcce2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.750e18fc7.0.tgz","fileCount":40,"integrity":"sha512-wPF1pFApEVQIJYJ8UfE9qsQ6dHFnKIfTdwUnvdB0iAMWyNG1YGf7lp4I4JNDuFj/A6FrqfZ7Uvj9bf/NiMB4+w==","signatures":[{"sig":"MEUCIGCb3rEZwTpkOoBiXoFJUSghB1T+ZFzrm4YSMGo5U6GuAiEApK1TsrqBTnPHpPBiEdvCedaY6m4sC0EMPkTVudAX0mY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbBXCRA9TVsSAnZWagAAZykP/Rk24RhEk4NAAbScPH7b\ny0pM7a231WuTl7idNCPbo1caXUNoW4Gw9Ma9jmzMaUN84JjT5tmud5QiUgqJ\nvvk9e2tFD+AFzs9WAxOThsTzz1u/aK33rf7GPf3nLzxZYftmgo3trUHhR5W4\nhsOS5CL5Cpjd0rOLPJVAfcSG8LFHOvhLdoGuCbFVW5o9NKDq5rykk/jcbWHV\n/h52bucPm8/xF8Yzu89zBehl5yimqijMlDwuKWonfCUe5SdmmZfPd/+mxBKs\nyh6WEUTHfHABQ8nG/WRwOPwcNIP9/tORBWePctAJm5ZiArWMRSet//+foZCd\n3xGMDA0agVaNhLIbm42VQE6uWyEXPiYaLAwFilCJBpRbrGBqM2VhXVNEw6XG\ncZ6+vU4AYk31JcNcKlBr80XGRHXlsvzQw1dhEnqE8D+U9roJ88cL8lMpNDf7\nsWU1IjYapzTSx39xlvB+JUQ7iZZZmHUlKcsR5n7tK4lyOXuF43m8YX+rshE6\nPGC8F1fge1SlYOZJ4E07JnlLwsKA2BbuPsRK9cJMfIOD2GCoa91F5BR8JIlI\nJ+7P+OSQDvPvUhgIwLySktrssv2P9AXiIc9gRUxWdKN+10Gl9cMNs9pWYonw\n1Ahs2HnhaUvx/hSEPWSWyujX5THDDlh4tufh/iquMO3z3lfugQlxKhK4xjrk\n3MHp\r\n=w2aO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/shape":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/button":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/typography":"11.0.0-canary.750e18fc7.0","@material/icon-button":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.750e18fc7.0_1612820567338_0.8937330525554399","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/snackbar","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c505b73e68caf393e119c68ece18f6d0e74ee9c4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.b62b1266d.0.tgz","fileCount":40,"integrity":"sha512-8sMvlxxE/RKVAGqHkSjjmWd564vDUCSZSqhHbIpfX4ozaFcCscmz8dD06VsWT2CXldAC5OhegDvhikhslA0wUg==","signatures":[{"sig":"MEUCICnPO+jTmYUgxZe1a/KIw4NbhE3ErR0+ClMvcN2k1hzeAiEAq32gOUx0Y5pYc6c0XEZHoUXueP6xbojwHA0JE7ljNl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwSECRA9TVsSAnZWagAATqMP/21bHLOTl6rjjRZ5rjCr\ndSj4UihBNRlLBvYuASViB2fOPWii7biqXvDKA+qhC3+xU0g3ogwnnx57Cihw\nEgU7L0vGKdAKLllUJnqx45u/iOt3mgchpRdkJVajR+3GyqBqyP4YJS8prStK\n3Iop9V3sTR2UtI09Y0dmBMEWi394yUmotHSMxsdbby9xWjSVgchEiK4DxkZH\nr4Vq2MoIZ/Tsne6msiJVmWDKTbf8CdARkGE1gaCA9R8O9vxzp1jSmw2ObuBy\nJzGaCCM7DdT4mhTWOY2dx2qCg3kI3hzqMAX9qrw3vLhYbUG6NcjqQgQy4HY5\nxfKp+KF0rUU835x4N98GYx6i8/0gvhbrBgSQspaeLo/QG5HiLUQEIBwkcK6b\n9tJQ0oFyKttYI6JK0TTKVR6opFhN2LEpKkABypXQVkEVlbCUHbE3IhPwNA6U\ndflN6s6Z1/QsXM8zm1X0WWM1zIPZfuBefiMM6VWq3uAbxR8nOYEMngUhVb9L\nM0nsqQI5TlWj0gLa/GIuH9M3oN4lowju0KwX7kVDneHvTACZPf15z6aZYqCa\nd0r3Kd4TvDouggkK4IQ4MYAV9yy+oKVyywKMyLspjr2f8xOBH2P8Y2jc+fPq\n6p/Ibr1JJErlPNs7D4hN4U4kzQ0cqCzvkKNVOyx9ZsabxUt07256cy1rQ/+2\nnIss\r\n=ytx4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/shape":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/button":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/typography":"11.0.0-canary.b62b1266d.0","@material/icon-button":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.b62b1266d.0_1612907652304_0.4736994060491999","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/snackbar","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d2aa081371895942b674619939023f7669471d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.a6b3101fb.0.tgz","fileCount":40,"integrity":"sha512-jKzpKDrc0o8I1GHwmRWmcPPzO+jbCvQoQAP7ToO9NI5Y9VnPLRIndqqmyKMTqbZA4KmgS9p44rhTZZe25tsdqg==","signatures":[{"sig":"MEUCIQCMsz7iAub5sggc7drlX7LamvqCgrAfZBguvJ5hWMX7pQIgW7UlaGWR+AOnGSlP4z3TB7XzaCI7IajPCctDAGCuizI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbtJCRA9TVsSAnZWagAA/CgP/Rc3xZoFgHf+tiur0rSW\ns/rZtuVy/vWPJEJ/5L26iwT7GyTe67PmIPAPQFftsjg38gyUR+e/zhTC5N+d\nc5dTlnSEFLod0/MusGIVOfaDSxmP/eMrNRjMCHJYfiKBKbdY4LMttN4bsc01\nT5Y5+s34sXcg12Pf1Q0TvffniHdtX5B1t7A+ZBz/tkM512BQtIcg+OjLlEJW\n/NfwvUhB5xXIimwhDni2wd6HYVs2Qw1mVWKWK8i4hTt3YGA1zxocFT1H/uz7\nthdw2vILxBPuXrPCSEbIDAhD9JrY/sWWgv5ilzPc1o+k0kYxaWPvukG+ADwL\nzBnE5mHEymwZR5v6XziZRk/nTRTmu0D3hH+v6W0ao169KV6oKF2mrc35yEwr\npkW6pZZdx2OAca5pDPClj9SunKzhpBPhpIJA2466dEJD9GAWfEv3shSUxSwn\ngJZzjYOTWlZ2qoI2J1KV6JKIdWW8k3JSoCgMAiadSaZGANCo8O9MuwXdUhA2\nXGknBX2Qt6BxqXkRhIHPSaghZwEC9JDPPWo9EDJXddBrW/k0hNXvGAXEpi2g\nk5K1aJGUEL28ffRE06bge5jGKQXFIAsmAa5HSz+x/PoXkNoRfNPA4siRwSCE\nNIR3BVIqK/mY7vQkWEWvavi3a4rRE06N/uAcV6/1ePX5/YREn2Gu0VlX+xvH\ndG7h\r\n=pHPt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/shape":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/button":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/typography":"11.0.0-canary.a6b3101fb.0","@material/icon-button":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.a6b3101fb.0_1613085512613_0.7754560495496956","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/snackbar","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"138b4384461a64ebc7699b3f3ce3ecbf835602e9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.ed88df700.0.tgz","fileCount":40,"integrity":"sha512-DSIr/jFEHNLPXYcyg01L6PgmGndHmhuxkc4RjVX8ub0aOqYf0oVez6eo1yMxzTP4owhpSlxMahC+ixfLvcIOWw==","signatures":[{"sig":"MEQCICesXerPB9cRHqaJtd5+fU8te2BxPx0IGvQCB6wY6ZY6AiBg2eKzZIyae3I2wsWEaOUsqBRRSQaNUSdxrOXTcgtrgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcb3CRA9TVsSAnZWagAAHM4P/0hyZ8Q2TXr+1NMYsixq\nMFk387Jpl5TwWKoh5yNck/xR4JkCQa3MeuJfT9bq6flVqZ3IZfeum6sJ974z\nUdYI38jF4V68uVSxvDe2n5Gl7Od0+1b4QNcDnk2+LJ5KaP/+sMmZkgrIp9tF\nDRgtaqqOnZ3Mi2JiVO5vod7HsBqCzyPAmX6FcuQHrL0asIRszqPfLbByMxaT\n3jXCPftxhgIgBHRUNLNRHfGX7RmdlQ+BXFeuEki3nDEPwlbR9nB/nE6Hri4C\nMxQc0SfXYbN2ZUReZ/6h9fxmhJEjXBqNzS8EyzlQanV24gpEBA4QIDrLojyP\nv9zMZyhGHhOnqGpQYf8GCIXAPDnEwmBm4aoUfPi1ztjNM6XlxJcLeRiVOkA9\nSG/y07SKgdD+vE84h5dnZLYJDr8mfNeGTt6r2UQlGocwVFiaevj9dbaTcuXU\nrlA3j53i/Pi3F0mUpR5wx2DJntnBOn8yu1ArPlx4VXcynZmL6tbyzm/NWGbM\njiMLj1xUDMw6yBQcao44k6GLhjr4ziCH7EuxvxC/zmqamDoB9QjLn8LzeW4S\nfmezH5IekMA6JGYcOdl4iiOK3q+IujE4xKF8FQFAJA2RP9x1LcjwATQHzNSw\nAl9efVLxfMP0SYO6AQcuOGs+2nfVXdELwoNTr3w0/oz/KeHibydm8wi4CK2q\n2rTo\r\n=OlhA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/shape":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/button":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/typography":"11.0.0-canary.ed88df700.0","@material/icon-button":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.ed88df700.0_1613088502451_0.7044030804824926","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/snackbar","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1742d0467ceecd2fbb970c8cdf279fb673537bbf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.d30efe6b4.0.tgz","fileCount":40,"integrity":"sha512-s1vIHJE/E29+V7WDfxR1kV5AS/ywK+q7fct00l+uFEz2O6c6qs/V4d+1e5bj7bKBj6WqSe5nKeQWIaq2ZVmpSA==","signatures":[{"sig":"MEUCIQCsDAC2e6hS5TaaiQRFyqXA0HI3nn8EYZj2HXhOf9wp9gIgVMt7YCg1eoYuomWh7aXMFtAD0/StnDxieA4mPiLUxBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJetGCRA9TVsSAnZWagAAo0YQAIYiLdjollzeoB5M0O6+\nLMGTtPOvgKfrTWoMIoO3GJsYZO13i2NBe04zyCwcgfNANIsDGBC5DrIvoAkP\nqEav6twEKlqnAuEL160rKV0K81sbtGJzSpqxWnFk0zSp8yAH8+85B/2DNkUd\nbUMEyxUPXzKX7MXpZwHhX2nHvipGgjLDVJP97sb0HDBl5IiTkTHI4Q9+0fsr\nr9yvjQtfVtoC0qXBkcvDTsDt9cJqv889Jd8nnTqmC1TjE31TsU6KaviRfmq0\ne5YX8AaZiHiRCf6kATcDME+CqWHmoR1C3e4E/3OpO/IrsZ+kfeApDSAfNfha\n8Ihc79fFr97l25+faAY/Q1ji94EBvKzRuVl+l7rKBxYjZBuYF7aXl40cp3l2\nVGY+swmaOv1H57jboQ/c3UAxOUntpxODU+SxNTccjJbYeZYOWnVdlIRjoQZh\nR051RwCmk4iuGyElrWiGPCe0gfALPjcngFPZsBjsEBeWqkGdSkDMS8qQKkub\niXCIovZ4lKN97TP9bSv7w8ND0SFbD3lQCV+OlyJskeyrBcmqeuShymGXGATM\nSghCH9HACR5sX5eE9jRcC/qhMHW+UWsjFLH6fIiwMDPNXfE/5hRB9vSEUha6\nAFxArP08C5ZJXdZPTXFuTvur8IlNMUM/U9wyMBgiv3xQET+QU8MFuAxCTRdi\n3svx\r\n=OYdt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/button":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/typography":"11.0.0-canary.d30efe6b4.0","@material/icon-button":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.d30efe6b4.0_1613097798135_0.5998579401666102","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/snackbar","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d766dbda0cc83e28bd932ea514227f2dd65e7105","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0393bdc4b.0.tgz","fileCount":40,"integrity":"sha512-Z8b1RX+AkuZUMU42VC6+WnLBS0hQsWI7EKFYbsijMvs7PaCtuQiq4AFuYxj7f5NcsuqZ7LbmFTBc0FiunMm87g==","signatures":[{"sig":"MEUCIDkOShEYXvTA557upufz6UVxRpoTUAmfzs5H1nZ7lEXvAiEAzQ76Jq2Xrdxz3EcAnVUXjy4uSSr+lKD08UA6EKUP4jU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgTXCRA9TVsSAnZWagAAKhMP/1Umryw8croFF74RYK+Z\nozgkpUhC1oWCOla2j7oWAsfdDkHxj4ueLOg2MDO+zZZNXWp/JBWCQun//LaC\njf/VCie7yTlWgeAL70Mc1A76UpXvqXFzutVD7O8N3xPR8jBmWHfTlYUawx2L\nmOQH3Y8Lz+/o2AYI7d9Xw45H2KWDnrgIuE2p3sqA56cQJWFk6QBoq7nKlhgM\nxEd+KjY4dY+XfgEscVKDFFSl3pcW7UewZZpj5swUilxkvmlS4wJgLXfCFJu3\nORL4oneCh8OZnGs1hgsoUwxesuqoWruCUdFWetPWhafoWJvUF8o03VAS1a/D\nkkDphh9WGaGhAJEVJo5Qya6TITjfKCGhlCekIuhxw6bgMV1gOm3J/TssxDoh\nCmf1v4dCrERUj4qLr7lDPPeGhZl9ld6CvXhZV20em3WJzicyyTUBS827/uY1\n3CcejCYPGRL3ssszQwAGv9x8Fm8e+VOvXOzitVo5x1g4JXOd2qHXKmqi0Oe/\ne0otT8vv96E7VwGFi8R5pcLw0ubAxM3UYHs4lsgn0Uc+tpqh3CXZ0o2K8zis\nh4kBZoR1R0O9kU/ZoGRjIjOybxt+iu8iVOitSPRwyIsyfmbN6RQ9oS9kFpyw\nNf4Xf3LHd37oCH1mGqT4Gc1PKPIA1lyw1z1dQOx21Mz/R8vUBZ1g+iF+Y50s\nbIhK\r\n=zzRX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/button":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/typography":"11.0.0-canary.0393bdc4b.0","@material/icon-button":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0393bdc4b.0_1613104343123_0.25875718636673906","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/snackbar","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"305e3e498956298e2affe6a376814b205682dd12","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.7cd26af4d.0.tgz","fileCount":40,"integrity":"sha512-sBoVXAfVKFywibaxWPoopEps0UXjKtOt554YJHrHcHow0PqkDrx66O9IVtqYMR1WdfhyFsclL7Zl72MzE1zzzA==","signatures":[{"sig":"MEQCICdvHNcSKWOpH6k5w3emuEHD3RwME7Ei2Cb2bhE72A8nAiA6XlCdlUkg8E1K0me7u1atYFvsS4bD7xOmRntLU2JbZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqY1CRA9TVsSAnZWagAAJ4YP/Rqqskjlp/zP9ao1KDLY\nvKprJP2m3veyyr4auTYHBtveDNEsqyrc2XqFJ7ipv2v9zdSkqJAGI+w5bDgx\n53850tYJmzbGlivtlQ5DtAxzU2f/QRgGnV9k2DGj3BCHmwYpKkzi0FbjUHY6\nyn7VIi2MgVfr0H233x4DDEEEGgC5ma0Ya5CX94yVV1VrM1ceyLEhD61rXsNi\nrmP0rkQNe3e+SwroLd5/a/InzDBy+R5eQvC1ssfzgvhhzB/7jh94XYPud+OS\nrzMKcrEHl8vKpIhjNS+ga0USmdFkyZm5xMhVgPcMttTZJfIUUJ92FllzJnCd\nc8XfgPIm7RqHC1VbExYdZkh3nNOoOLVCer+Ukxr1++qgf8MoFSndpWr41GWg\nLllEhf9PWi/eXabqX1pUs13TwX5F8z7W4xIeVz2X9Wp09HwpAq1+mmeKVEIK\nX1iVLl4FLmRHcuLWaD/NrrAL7j9YADKzw4wBYC/zjZ4AZvh4Tfz4wOvPbhKB\nC5h6bX/eoUTTq7OB+mWdufU5TKx9i0Gj6Js2fhkv+au7pT0aXiVjPCfyD904\n505xkkvxR8xIytu8UdRGHq98Tv5GaGLPe2RIDddnLaDD2I7H2g0S3TKqOf9t\n3EmX8q7EqPNPY3eVNiQlXiHz+3Cn1yw+CIy154z6rKuuoH6cRJYF42vvFEod\nmxOm\r\n=2Chb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/button":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/typography":"11.0.0-canary.7cd26af4d.0","@material/icon-button":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.7cd26af4d.0_1613145653408_0.7764239624745013","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/snackbar","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2234177caf0bceb2764c0120874c66a3e3a510d8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.71fe9a067.0.tgz","fileCount":40,"integrity":"sha512-8mz/HD5smsEVGeDFLbbtldKfjPNKNANTuvu4DszuUxYWNUDi8j8GxMFMSrtjDDFTdV4l+LfZWATwKbpNZWPAbA==","signatures":[{"sig":"MEUCIECL0IavnmRh+Fj7xH3uHFYHL70OQj0ZefOyMo8cpq+IAiEA91aMDUbXDScx2lUaju1/1IbSDvBuhF8r7AkS9hxra8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2YCRA9TVsSAnZWagAATKAP/2ScLFZLYGFl9Q3czU0n\nAzvg3ems5ZQLOVfzQIGhaY2AY+E5vH82297uZLOzU8ZmNqrRxWQEJNeyhZMD\nCises/97yZuSbsazK3NdDvGqTSwB97CWXe5/dek7ToRbX0zNUELo22354C13\npGnb0++Mb+h/meWzgfLGK+pYXsFtRKaAhkaXegZ6gsHrtPGF5R+pDzRzuimf\nz3qwa0KA5ghtYIN6cGec43vRTJ3je1xyLIFG97OstwS0MzuOovFnS3/Cvh5i\nkcbo492ZN9YeeNOHYNiVlOVztG83/qTj3YcABIJbjapg8/Ppx/u8V8RIdDLq\n/hxjsnW/yodY06sOoYTpCtSzz65IRwpox24h7g1HXk4M/HTFsvN/nPWOd12G\nUq8aTDF4mbYkXgavDPDE8D9XLP7DaZ2DGapIGVmuVI3YXdIOwLpnqp+/mXsd\nDlTBEuAkRYxzNQe3kSqfn0KlrNOKvrrCoDY2tb3Zlt3Ql6drU17OWX71yP3p\ncfT080Q7yQozxgl+1+S61nGiW4STEv5eZpTNmRWThZgS+p6JR9R/e7TCbgy9\nCdLHqVXpFNEnXcAtYs4pqTcQWKf27HtdhhDN1vFMz8ELvAu6ZZ7J68umr1Lk\ns8ZcJteQpOwt42sUabOwy8bh/sBYU4xuyazykkw5SLnOAWa0FOTcj7S0YVVf\n0KOc\r\n=JSsS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/shape":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/button":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/typography":"11.0.0-canary.71fe9a067.0","@material/icon-button":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.71fe9a067.0_1613147543949_0.8498878649537667","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/snackbar","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb9c7cc4ba51ba4729cd4b83125a7a529b6bfac8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0fd56a86b.0.tgz","fileCount":40,"integrity":"sha512-pZhSrMlxT7qM8wnnUITogObKAdkSjPGNvjsFI6qY/Q4FmMZguf56f+ftCV+CZLk+6sdrZkqtg2QReK12NbkMBg==","signatures":[{"sig":"MEUCIQDB020y+EEAG7E6fWcxNc7liN4OpEsFXWRaHPI8v4NwWAIgAchKsRvFJ+u/b5H8QfbLPUUJiSsIME71XF3eh/stQlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxmbCRA9TVsSAnZWagAAiPAP+wS6ykEYx8UiVnMOhP6/\nTsmP/WtuPlDxOnPWeyGquIHIV3pEK4lrAnzO/5j4VwZ6SROB/R4H2SaeDS/B\n7eLGXG3ZOa7Nf3XnNwrdSEKYQWJYLYJdxX/7v7Vl/uyJTAkW7TYjxO1zn0B7\nUzifcFzp6QrXpbaCts64RMBlgsqQoljdY+39IPVaGrmUQAej5yeyn/eF1A8o\nFwYYh5gqrG20Q0gvS75qNH/PsCJXwwogCIGuii7zS+fU4l8+NO3FWpT9podI\nTjSUCHVCQkKF92qSrvC79lDD4QYnM4u9xy3xRFgMDpYe85r/xkn59Ze79pnw\nfNcz7oy+4ldYshz5PxA4p/K2gdFgF345IZ/w2FN4xoe3SuWic8nT9EKUvX+g\nGVIrPPGFB9L5v/B3fj/45Mg3xea8CASCc+S6SfosL/qD8fopa/Eq9TebO2O1\nIuQAYs5QK5EVbEV8QAXPxaJkk10Y7cZGshXrZEq2a7Jf+gFj/Z1YniVWr8/0\nkjelz7ozk+YAEr0lod5y2x1q9jxiZbU3b30PThOw+yPWXzO7YeDK3eRqPYHN\nk0gWTbkeOHgKm/XuyIjYUvEtLFL3y1DLuOOHX7ibARerHHCAo1iDi21UhpdX\nso5UWv/JfwJXrrhjyMvjs8JNJtFVIkdjnWfDILA6a2QrJKMfcsKTLdkKtldC\nxGIx\r\n=OAF3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/shape":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/button":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/typography":"11.0.0-canary.0fd56a86b.0","@material/icon-button":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0fd56a86b.0_1613175195157_0.002708890532117314","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/snackbar","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07f2249755ad4f9afb661c025ac5c195b0ddd2b9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f19bbc4af.0.tgz","fileCount":40,"integrity":"sha512-BcLfXljJAbz/poSG+bgM0JzdbJ0ixPuwbn/EHOfQQmt3xrkX1Wg1GgZ6n3tWrnkLXqtBcWq+gipGAWb6ytidmQ==","signatures":[{"sig":"MEUCIFumP502/+7+YJkzx7VXYjEo7OSd4vF72E53jZPJiQ3RAiEA0kksQLQ2yIjZPP0+rN6lQa5uimQCcojacIt7BUZjWiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLESECRA9TVsSAnZWagAAJJcP+gOVjtNNLVqGyjkp3oFh\nNs0kx64ZRecAeW4XfRiOvNBTavBX3RP86MO5WNZMXKDsSXt3SYZA1QhHbyah\nuM5u3fY14OBaL4+kWUcBDgByQvpz4ULoyi/NQYdwy1/TSpfoubbxpHowI8z/\nnTNgcp60pC3IOU3Kc1aWHN1DRL+ohocDxWQnxtVez2oxKH59Gwga8dKy20DH\nojBH9gfyFWOQnzLuohrR/g9A2j/PmPS0mAeNTqSWFAsEdkazu9wrolVtMXxt\nu3SCIo9PlyhKxfanOCnc5Onx8FFUdnggSWitGHXLOm3MIHN9n1KOgSClq0fS\n42R70q91RuLxdYuuHD8lEun7UbS5pYtx2ZiFU7RwMbTqHxw7QNaXOZI8FBwl\n7bz29aDcQge2tPKB6YYRsVhrXhBU/+o9FsBH6Sxi4KT+E7xuqDXL12AJA48L\nYWkzsl9p/nRjURO54yrty5TC2gXjbV8ijXA4mj1O/aYxJojLzUVfCDUhW340\ntYpQIW3ZoF0RGhYtXPsFs8lzX1gYb2n9dRnnwKEN3CxZ1Nb9x9AaqLjpTpGB\noMRjA7ZCtwdgpp9Ap545Bi7IRrfBphbGivBgcT+rSJjNZ35vk1WNxgZmNx/E\n5qsUzSuFZmFEi/FW9hFL6rbiM8NbMFH/oOVkdYgxz5pn290SSpzfAd3eqshu\nG5a5\r\n=BUQ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/button":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/typography":"11.0.0-canary.f19bbc4af.0","@material/icon-button":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f19bbc4af.0_1613513860496_0.824473527025597","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/snackbar","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2554d90fb488280a3861a0d4e1b8da5983c7a4b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f9cac96cc.0.tgz","fileCount":40,"integrity":"sha512-CaP5Ssj1m1iMxFHeUN+canzOotGNELAp9GR1+go6TtRaRgJNv0+Ih7QJ110ISwugE/Vin6SVAPDyIazuyYQnww==","signatures":[{"sig":"MEUCIAEBn60kfG9Hdr5kHzQ0SIfvukKzlPcdI5rweu5pjHAxAiEAzwGl12L10eiG92KjaAkqzByglJ6uNaD9vZhH+GbYb+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUA1CRA9TVsSAnZWagAAKlAP/iZIjoMCyLJrhJk0tUdY\nrf6UQsKMR+KM9Xx8iKeSIIBEvxL/jwOH658ZRxY3bRasFyhO0WRpd8ENLD/S\nnwwG+n5swM+LrVZGoUC5MyTGXReOfJortn44o9IobxlQb0QUcuIK6wvnZx73\n2VW4e5JC/dCZe6BNi4Cf+AYQYxDIdRqH2VdAEJDWzIB1ytsKB56uRnuPS04A\noUkr3lFSbpRtFmiFyQ74JkUubZi6TST/8iNJJ6XcOoMkd0zG9h7w8VdcP0lz\nOpXRd1UB3qRI/1js8I0O95u30klK3VGuUN3jpYQpITtrycFf3l35YJYU/tAY\nwxlTw2f8DGftdnCmDU6xlsEtMGANWlNsoRsQDb0A35XYlYxQr6VFRvORnQei\nIppyfM0tgHRCZRBCIVBaXYojL5i6WzeZx26kUWr0XWGwW5uYIPpJLp/SDqnB\nRTKbONSYBEb+yjBv8o1Tt979GcW10X7N/qzwu31vFVwBRWI9nexk5ToGwRi5\nkatBOiVVzEpVzHNzE0UXtNVn/uRBKUxGhOwouGgbumNTHyYTEyZknmEMmrzy\nzreb7zQPHzm76Sh7q1CVFRsAfSSxI6A0WOF5e4Ltppe1xgEYaIIHSFbEnGvy\nS8xnXWMw8L3rG27WAmn1aKZwADVY6bk0C9jijglQg6YxjY3ExbUdpFJdg774\nAH4j\r\n=7mZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/shape":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/button":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/typography":"11.0.0-canary.f9cac96cc.0","@material/icon-button":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f9cac96cc.0_1613578293011_0.7136706423339001","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/snackbar","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa4b2fbd62e11fdbeb1f8874b306446a6ef391b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.79ce0878b.0.tgz","fileCount":40,"integrity":"sha512-Zw4gI76+/m8IpX8VRE8wRCWj7O6x1sZfDtU5A/KFO8yTc/K/grxGKMqRmomh7rgjBAbilV4kovk4qF3aALhvxQ==","signatures":[{"sig":"MEUCIB32kIUOST3X4NrOjzLyP47Y7rprDVK3d9HNh5WV1kGHAiEAgOCuJ32WPvZXv8A9jIHb6iMaVtU+dCSXY56ikbm+go0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW3lCRA9TVsSAnZWagAAcaMQAJIiJAnmcQjN3+XMgiSH\ncpD4Cjs2t4s6/SsIbLkK7aMXQmw+nDf9PGW0fXaQR2E8v0t6txZs3q+TW0mD\nJfjzOrge3rYEsdmGb4mJDBc2GJqRQ+UJhdbo1p5g+dr936rutLNgMslDXeQ2\n1kSMhyQP6FkWtOKkNo80rpXfVnOj6ZoEZnDo6pYxI5qF1hOhFfrpwzkme1Fy\nD7LHuaffaWtjzpoKj6G0db4DuyAUGJBOGaR3iX3WZ2Q9wd/EX10KEUV8sCdh\nYu+m1eAD0unfDF6GSbWVrjxJmLLmP71TDYRqu9k7QqtQ/M0aTA1jJwxzlFyd\n9NfysAzXGdeBm6xPSIkB+Bah4Fl3hpewsRyi3WfhGDdQofcfZtx8G8b4jV8g\ncuAhz9I/KxnU43NmlhpA8rU8WhthxzD8vGK3b0MYtu6JebibNepmFH24p1Ij\nySA9J+1I7BQTz3kb1eWL0gSMmhbaSvL33NPVAvxKo2XFJlw/XIYuw9VWEdJU\nYU2ZAU1ZSlXteBCu79NYwmfaGPKUdxmLg5cxofr7Et71NdGvmIOVapEcfO/e\nXdkuFGn4ffru2CS0YmYjpytTGJLHj/GvcWgGGHkzL8JoJaC7+Q/qmHt463fG\nVYleTa8s8coPcqpVkznYlBYZiZPRAz7ZCHCXWBI07KjpDQV7y+f76n86KN8H\nyzBc\r\n=yFQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/button":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/typography":"11.0.0-canary.79ce0878b.0","@material/icon-button":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.79ce0878b.0_1613589988967_0.8994422026892699","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/snackbar","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d85eef6d716d41079bb133a02dba960ee6c8e924","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.d6e507b5b.0.tgz","fileCount":40,"integrity":"sha512-tvLIEX9Rr6vbTnc7kcRG4pGS/1mD14TxIf45IagChg9Nu0oSe35lMPkdtAIJNYf/cA/Y0FAs2xqLvy0j1CdPXg==","signatures":[{"sig":"MEQCIGJCJea2RKiX8DG/5HrGxEZNRxjYnYqdxt43Kf+UMlqqAiAo8/nWb3+GP/CzZIRbP4oO6Jwfgk4r3jHs8ZASvi3Qpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXWpCRA9TVsSAnZWagAADCIP/0yN5ztKdchDzTKmg4sk\nnREOZ1s7cCmBhtjyie/vsgPMjx4+x4+L0hL3m8Y/6twf4eRYmIGFi7ZOTdet\nm5hiCH5/lHkbzrI9NxcaxPmDNSLEsStdWHYBWpdoSQGTctLCg4XvGf/4D0/j\nwaXfMuDvyW11HJJ6nUIsJV15Vtxu+EBF+n+O4a5vfp6HWRXAVDeOYTk5uZl+\n0ZpBq7NhKx32E5h0gMUOoVXKt4T9GUu10UFLYBFGkkkZJ50PDfeHAT8JQXt3\ndW0PPu3lkApd1oORVYknVpILxM4OM43818MhBdnbEJFpN5GheCWBYR0s1dPF\nfmehr8AlJU8Zf975Ula5g0QrbP0fEYsvKvPx3gOB8qc/KGsHxXKGhdgGSl3q\nY2a7Fz9LRwayQJ2xM9wNjyzXq23Az09lQCiOczEgDF5d0eXKq9V3ZjqcP5Fx\n5TRDTcJBXdDquNRUjbWarVnrmZL4jFAUrMBGjgtFb+HLLhys6XJfN4V6l5SU\nlFIhPGDN7Yq2B9XKY8bf8r7HVEhwALD/z57S7Dwk5/xKqm8+SWHRMeMkacyA\n9hoe+voiWC5YPtq4oYp7h5TOMEeQz7umEp06/GbErX+hW1oRKyaDdkmNyfcK\nfbd2y153s1HfV+7ipRf84mEJN+5SBSKNqlq/vaXRRBU2eVx4YR811FCey1qQ\nQqe2\r\n=J+LX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/button":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/typography":"11.0.0-canary.d6e507b5b.0","@material/icon-button":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.d6e507b5b.0_1613591976513_0.7458060185003945","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/snackbar","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5828a4ae5ea6a7bc21543f959653072216f8f5b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f2658381b.0.tgz","fileCount":40,"integrity":"sha512-1T68ys/zkhYpixxiQlJY2NMA1qvNLpubb5OnWiXNpKo3rXbZH00A2KvnRchEEFdoTYdESyE96s9v+zboKviReg==","signatures":[{"sig":"MEYCIQCh1g/BKycp1kjQYNjJk/50+4MAX5x4b4hiT2WaRsGrkwIhAN3XylD1OKmCw/zqw7SJ93W6tsujl4rjf9KDCS1fEsNu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZy4CRA9TVsSAnZWagAAfHsQAInlYNBuCZlEDqhD09VU\ncYspH4Hug0Zdzi52ccqLvlQIBORuEyx9rEf/V0P3xLiqIneLLn175DEoostG\n89TAOz6HOn7Qpi78p5heXWMMt8Ui2SHB34pbPWxdXx8gbFpMvgT0+ytE4DQn\nbJqGGZQWczjckC0Oo9wMQDVTWPrVqUnczbGs9sFdd4TEFH17+Oa9iNH/oxi4\nvtP38BlvEM+W7++9PcGgnQpy42yjr+8lmXoeC5l3rpTwPRsmPP/v/1ztTag8\nFTHZ1YbTL4Fw5uqzJ30lKWwxVUIB37W23xo2ugIZQ5xZer+QffWJ9v6GoetH\nPYmK3NfuKvrkwcdsyAwUNwr1mo5pJCmj7OFI+7L9dFEWsia0djv2LQvPmbua\n/Jk/b9qttS9ZZwJHPtf+wq8qTPfZph7+L4NUMwMKMOY39McryEO2J7gRuGDm\nSZRafb7jAkJ4TelRqgH6T280lAuDYVOG0Qxd15g8dHdEmc/CgRywfXzeIH7p\nJo7rksm009G0w0NkZoeRN9qNVLVpLywVlnZ3+jfPiVb2SrAzSuhf1Oy2Nz2O\nN3C+aBPXYAba9C2iZ9Krzfj0dYAWNZSz0p39aITaB6fJHzke9iCQb3S16DAM\nfMJ1GvhbjOkhyZskWTGdM1a5XklwUsIPSP+8x+v9Ei632+hMSVtj0gTjecVu\nBlzZ\r\n=UNQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/button":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/typography":"11.0.0-canary.f2658381b.0","@material/icon-button":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f2658381b.0_1613601976260_0.001114766658594446","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/snackbar","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a007f209680045ba74d7a4525a8d80b367bda16","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.97c4d4035.0.tgz","fileCount":40,"integrity":"sha512-dCye6HcdYAjnLt43HmMYkLfeLd36TEjAOuX6yGncq/9c7gcDmB2MDaxhX/reQBjba5x3PnsjfCSBx9fffy/Brw==","signatures":[{"sig":"MEUCIQCWF2IygTgPcIiyglmiryA+rpj+njozPmWT+VIElmiSCQIgHqYcgklgc0oNKAo+hejyCEK8DddmsoxDwo+vpLJIM7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdKtCRA9TVsSAnZWagAAY4QQAI15srXveuN95H94i31f\nfd6ntxFhPBJNZcZFvNKAJjgPc4uDc6iRJ2M4CHwYBaTD/uWVwgEbWzyTIXya\nQ1pW/Ti7Zt+7izQu5VHV8wZPuZiABTLPbjci2lWjREkg9k+Ct5ruKToI5TDc\ng9KCXapSUaKR65yEMSNuE+WxMsEwN4eaNgTulfaX8kODkD7WVx0p1V4dwbZE\nlrNIbxP20L1Yo8kDVLOoyPopduNJrbydy/O3VwsficCNtFvQDS+xeqBByoNm\n7PpVDTVi7yCn2RuqQXXkVJRJpvwS/uLS/qbiYQ5AP3y3zAscvjP0VEBjtVcu\nq4sFfTyLVXG5pCjbby/LZvOFze/OsOw8zzZJbG8QPjQgdsoSK2xURUrthqCF\nw4CRX0sXYadL0oaV43qAbt+30ylA6ll4+6jIyF0KTw5Pv7GUPRjvfHja8cmL\n1IpgL2xKkTZOQ2VveK8OqJsVkMHQe4KtohTnBa/S+X8D2nR5CG87+GSrRJNg\nyhrC/Gr1Bx0TkaFk7JbuFkh5ehknXLHME7RG5rvRphmklAnc5tSZ1NeKBTxJ\nrh0L63rejxu5UpyrjFDNEpWDhzdkBQbSkDagQkmzsw+2bJGqNawvXJvPsh2J\nGlXaZArbc4mDat/D2IeHep+pNbKqsebrF+UoSZ70//IMHGkLWDF1g9LwqQfE\nZxfK\r\n=An1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/button":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/typography":"11.0.0-canary.97c4d4035.0","@material/icon-button":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.97c4d4035.0_1613615789379_0.7310799679031368","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/snackbar","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca5d837b6661554bc19b04f23850470625f11af","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f5bb4648c.0.tgz","fileCount":40,"integrity":"sha512-bbzVpMq6jSPT0S+F4dhP150oaDcL6I7a0X8YH13yAcX/i2ijNqFlfcTCkQ4ihK/Yhb8iETTv7LSqnbd045EY8A==","signatures":[{"sig":"MEUCIQCF6KVqfcPAEG77EJSzzS4k1nA06aUTUg8MczJqlwWz+gIgdhFinu4rz6i0oDYMfNDpBDpjJdaUQGgCcFSYw/ixbFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpCoCRA9TVsSAnZWagAA8b4QAInNDlJbylIT81q0VT2w\n/lPCz0ekOpGKPkj80z3RTryoNG4ggJX8djT1YE35NuwXygWT0R/lIbJ2MLAN\nd2gkdneSYqPBoHZTK4GTPKo6WmxUeRcPRoES9gH7hONPFJkyFdYvW7nx+NOx\ndu0fuMDzIs17UOgTveWC6tYUbzrQyXgfslTNPvtEtWvXCgLj84qfsEOS64pr\n1L171vKRHzF6r6Q9tkKXAVnO9q58xgLVWhnw311nLkl/xE4ziNiumzcuBsfu\nzJZFomlomcH1KcuwXeURdynO/jCnxfnB6+vSjv3c620GbVKyidD/gdxe/UuC\nG6br3z6/E6YphSSrbpDZ2PWVwpOMedpmv4nBKTGnHYHuYUpdelauGSeGJECM\ny9kyKlfbfNz8KJMMI0ldinGg82ytmNWYx7Gut56htCithND5TrA29Dyeurob\nFIV7pvqEMquDjlaeevCXSIpvBpQ4HqaqXFwWWAZ3++XjLBqP/Y8ETthM2ker\n3n9AftgMlwhkdxgaJNQboumFxtH4UZgNDvHyCQjIRDEWHxOdvuyUbUr9RIww\nNzI9ryPHXOXcsh//W0guByd2J6dfjoTWk+2NjkhZJZTCFJmtQv9WnRTMWBZE\nrPRxJjP4HOHEbcXvinuAXaB7ZL+KUdsoQXkKj33tiH/Mg/jT61lQTJuYWcGV\nQBTc\r\n=ECEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/button":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/typography":"11.0.0-canary.f5bb4648c.0","@material/icon-button":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f5bb4648c.0_1613664424303_0.9652364168305338","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/snackbar","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78dbb1eeb683c59adff23362cf58851312db2c3d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.302c7a960.0.tgz","fileCount":40,"integrity":"sha512-6Jfvo/Qcplhf5EBQSwR+58G54hgJPhupHO+18metymdMrE6VIsCMc3ujqlRVPzH+aVX8FYN6PFGa6PoqehM1rw==","signatures":[{"sig":"MEQCICIJt0rWHLMm6ZnrKsFrqVefiUsHvCex7zhoQ+9QGRxFAiAViYNiBvii4xT0jAt69K+bjdRyPHjb28ydMRkuKy7awg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrRxCRA9TVsSAnZWagAACBYP/RI0P/kwhaw5hAvFX653\nBS5Jc2+3gAPjL7exBUzB0mfcqwqZtOdeJH8Wt8GoySIDxKLpoGEorrUJOqDa\n500g64thLCoDfgr+pPMU5ObKGwJSAaqynF5ckuo3Apu331QHf1EBGyaYDWfj\nwt9QzoZFBG1JTZa97N+cGoRXSQ5itNhW+XgL7kQqyNC0vOr/cbk6wNdQiupm\nvU9MdOIAnJxi5CPWJV7zue4Q0oiFXSVXA+cr0Ill1Yr9ykF2Mp/BAEOGFp5/\nQbFctBFOFWFaq9PvfT2CW2JmTkiFXw2+MfDSRthvLs0t5VlX7RarahLbcKRp\nuyIiRoFl3i0U2HOrC1vQxhMep69L0u4yYbK11kqXIlVB9ut49r5Ii7UJstsu\nz9tvZt9wjz7/oTefCIfIynnc8sQMSxv3mFmEQGBNNAM3tdJhuEOGH0npgDpa\nqPy9n/QVV3KyLwtDtwtRtzd1LDMjesbIjLp5MRbsNnFY1VaQoBPQg3k3fWfA\ndL12j9oBMQwEGM7DR6p9rrm4eG36ez7i229Y0Dtma3jbnsxgx9E80G3EMOcN\nHXUofxG4eolaUwEy1ob3jUdiCR/DfXFgMWUbUs0cYJ0v1zeCRZHYi4/C9RMf\nkBao9PmLXEH97koV0JIHdso/qkacNL2PIvgxIO7vpvBFvsb7OCw3s76nMbJL\nb+o4\r\n=6ATo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/button":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/typography":"11.0.0-canary.302c7a960.0","@material/icon-button":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.302c7a960.0_1613673584907_0.33519358790016907","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/snackbar","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ec02c526c5d2485c628caeb17faa5c141d52b73","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.aa0aaf026.0.tgz","fileCount":40,"integrity":"sha512-Dp2arQtkd/yolzeAJEmE4PbmQe0qEkDxsloXYauYK1jFN7UtGheytX5w4pv7e5InR+n+tViKOrJLSIGi+IetvA==","signatures":[{"sig":"MEYCIQDjm0lqquIi5C9GK2N7O2clbzoTN7QwX60vzjFXmJ7towIhAId9FIC9celbsfMJHy1FJ4WIlf0ECKBg58RFtF5URg5l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr8ICRA9TVsSAnZWagAAtqEQAIyus+T4vXyoe2r8oLUl\nLdRRB/RsiOGVbRvH3QRfdZfSDlzDwucrievee5FbKdvuKlZOrJQRPdlnoEmI\nq+j8D7qBgNmRRsOVY+J9Of4AKg4QoTrF9LYh7r+9Af9F/4QMOhFNwY3BiH8S\nFj53+9ccSndnLfwFLn5b0HAqwafS/TF44kMjZmXGW44FnVTa72oP+F0MAjn3\nDG90SpaCRT2Emd/I3MqJQAK+vkCNzww3sacwAjhYd5UAYBpFQDlWmXuF1FTw\nHMcmx75nOaYihGRqEb5VKxFyVhobvqEV8qOYwWabvaoaGN54utXVadLVDosl\n6HNtg/rgf9yyj6gQDgK+in1tb1bG7TvQs3uUiad+Kr2fY84OALMD5wTPTOLr\nE/wLI0o0Sg3/2TyouBvTk3GWuCVGZK/GHO6KU0jZ6vMPUlsw3rnhU/P3geYN\nvjk3sxg3At5c4EF7EHv4Oum2up+Fo2edYNcBZ5UzKzhrS2N7HmyBtFAZb6Hd\nrp1dQgW1xYU8tRgyuhLHCchcndQ3fRlaDX9fqYO0jkI5VMkh57AKbzcl+NwK\nWKb5sp6EMx+4oX2G6CTkGtBAKYmh4UZGNQRfRilVRLgUfNf8Mk3DsBmDtJ/C\n8PYwym4oo5NrYbjv6OENOgLteYF89WCYEA+/dclP1MfaFOGgb/97FV2XYj87\nzrMn\r\n=cpYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/button":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/typography":"11.0.0-canary.aa0aaf026.0","@material/icon-button":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.aa0aaf026.0_1613676295862_0.08501874582289193","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/snackbar","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75c74bf98243775e26c7bc7a84129e73799c3511","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.07ff0c452.0.tgz","fileCount":40,"integrity":"sha512-MAppd/gS4wqGYL+OTHUCRdZQBzmS1whNKWuWAbiNdy2FRr8pmRN2LDgimEj2MDkWNNhWnUr4iuzdWtQh0WsuEA==","signatures":[{"sig":"MEQCIDI6SjeNiIkfg8IqO+2yB0F03iPF0GzYFgquoVpPoSwBAiBqeJ935PxWDK9TBKGLRO9S0YwGmkl+qKY/BRvk810fsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsOWCRA9TVsSAnZWagAASmEQAINXA48SoEGfFMk3YGPw\nuGXQlwETrhCz2kz5MIAJ8ygf+JrYQJkg60EnlWa9s7LMddY7nczW1g7yOk00\nISAD7/sy/9m6gMezxOkMpRqvzKJwvGzNp68sF4rbMSkUMWgcm//8eD0u//Y0\nr67iVrkVFHF9Q/R8FMYb1YGBUqaFIgQ6jEdkMJXond3nBnPGnSPI3a0btNxU\n5jUZhGLbUN6fFRyVUbtZalV6Csd47Kdwly4h8vqxgInlt1DNXWznnto8hYae\nIiNyq0SwjYtsUKX9WUQ8LtKnim+1x4w6Bkz4JAbMlcKDSwIFz01JIUOfgMvp\n2jsYWqmcmGa1LgbMi/VX85krawYqqiF2v2XRr6fuc4VOjK1vQZVZpmuDqYRn\nRWpgRikb8ON/bQHetSURYzhFeKLoh1F7/u1+i9misgc2g2WZJ6d403UhOuJq\nFGj43r7UXIZrfcFk6Fj2NvOqk1Kwzh+vG3cEgm8RZjilTO5Kjf80CvEkuWsZ\nsNYPO2KgYwuNYQnflC5K3a45JcJsDwcPxfjnlhFEhj+9EKsFLWNe+71fgkch\n3rVLmknhcXEwe2iELK4xK1u5L57q4OmRDDAK29yfN32mUjYFXhYF6ou22PIH\nqoRZJ4wBmtTSaF47itranselI96F/V9eH3VasfK1lJzGEFGK+sDInty9CFLP\nGqkl\r\n=Uyy8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/button":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/typography":"11.0.0-canary.07ff0c452.0","@material/icon-button":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.07ff0c452.0_1613677462310_0.48927420693268364","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/snackbar","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16be3f8501d787f030465fdef11466e684ad263a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":40,"integrity":"sha512-LkbSHYIetyWhXYVwV2FzoIGdfS8yEwxNOh1TAQouP59AWsldTDm9KgIEWEYGuFKHd+fk/fM0HcPjVYM3ZF/ftw==","signatures":[{"sig":"MEYCIQC7t/k+Dgl/WJtRjv0v2qTv6T2Q2Sqqm2gXq66bzjjsdAIhALgJUTgU0KkPKYx2JlDnrLx2XBOwsyhUrwA/mPOVUo0N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvg7CRA9TVsSAnZWagAAJLgP/19/GVGb0Wlq8dHrUCFA\n8j7vX5h9N099xEBOUZfDzYVeoMl6lD2twwsHw9FoAOq1+XucHeeJVO9CrpVu\nHuawwjSRGXAQxa5cWsNCq29CLPqugokhW5OY/BtyU2usN3ZeipHqoFLCty/y\nLwYXK2k9jTw+xH+uP0/ml/6seBd5QYwdBAzglkUhHccrpR5DxTfe96NhVgz7\n6lOsbL2QU6tUl0N6LXDY/9qghYFI8t/pTtlcEdBYQ0esBY2t02cxCacDjxLq\ngPsZZBYlUKCKWbLkYDhuhJpgge56zVIPsxO5nZpWbcjoSA3EyXlMdsUnB2Ds\nv8xeFuagiV1Xsm65+6G2Rtueq8MC/1cJZvrulozpEANg75oI9eTtu6Z35ENi\nT1cpAE87gW78TqzQ98vurnU9F0JxVoeIaxypbUVsba1RixSsT4dQ/vBiUknY\n93OiUXwrc+LjKz/QHDkKq/mk0s3qVsVJVJmmrDlJwGlqM0Bi3velyMbGljCe\n5jUfuEDNtyjuS/YwT9JdScu39YqmV6ae90OYzWwJOlUKgL/X5gJOp3BlZALG\n+8I7i1UlfpP/q53e6LaU7W0BcfLeyph3yEl6RoqwkO2PhipbKEAZGCy35Jsa\nBBFsro9IkR1A0g2VcryVvx6Zf9lytVXuojguIt4Y51VahKrtAVL3ZW6zm91/\nbAk4\r\n=JtsS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/button":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/typography":"11.0.0-canary.bed7ecd3e.0","@material/icon-button":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.bed7ecd3e.0_1613690938739_0.34025490676876813","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/snackbar","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8f417f03bc107c4999b01e6d5f48ce160c59061","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.06dead2d6.0.tgz","fileCount":40,"integrity":"sha512-DW7FszBr3zkRdL3sfnmRm2mlwuZp3cQOvrchieh9p7CA+dxgc3S3Yhx9EVMSs5gYaq9gsg4hGsocaz3Mt6DjEg==","signatures":[{"sig":"MEUCIQCaVux6oZrmZvIQ9K0WEY7hJQ/U7bC/p+70dx2Ejr9DCQIgQL/4M10UhrAkGyqYquitAF4euFtYxgnnEJG/TbIV4h8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwiBCRA9TVsSAnZWagAAoM0P/3tts1fGREQeWCtjRziq\nOJV6S2EfJG1mYE+/kicHTWRpdznjKEbPZ8FNTvo4ADurFhbHP1lFf3AyZwq5\nKMYLJJsoxee6gbVgfjrbjCc3kNoxue79f6tX+ujADtZVogwQIOmY8O//nsaZ\nbQ7N0fgW5el0hgBMkYdDlQ04Ni4iV3baURn9z3tyA3X3v5sPiRA+jlgTaK/x\nBWlX72+EkPw41WYTTvhrIbh/92+QB9sw5Tk/LCsUK/bADdompUdzI3/qm+bY\ntVZgnLteQy4Z7kyiizOXPcvyz6Jve2gikXDfMOs8hLPJcAid7sBSdJrRW0vJ\nNHwhi6gke3FwUQH+WGuNG8UFPXVkhh2+c0hxbjFhGbqpfR0PO1yjqHyg17HP\nKlE7vfivfesmsx5yZO/tv9eIDbUgJi3RE+go+zqUqERWU+jvup7L7AO7UKVa\nzbtMDcWeKHRwUtjH/b99tTxB4/5mzIa8RQPTqkW4qcyKHuKzerO8adpzNtlK\nkTqEHI38xNxsWCjggwA0J8Wfia2tUlrAVzg8Uj3SD2W59+tWxjQnQdmDYl+9\nZURe/kAWhFh9V/Rd8b8LQCMQM0hpZYR8iGSu1gFbj9tP+SA5nkm56Efh+e5+\nRG/Rc5C+HB1VJkfMwuIBmTP03wMl4qWU2b5zLMQ1LgoXShwHFyOncyOOuFA3\nsq66\r\n=3/Z1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/button":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/typography":"11.0.0-canary.06dead2d6.0","@material/icon-button":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.06dead2d6.0_1613695105318_0.13044833118470467","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/snackbar","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c272c88acc675f5144663bceeb702ae62795bf4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.cddb03553.0.tgz","fileCount":40,"integrity":"sha512-9o9hu+parp0QfUUd+9wseHsDbexmPB3mQv1/t4aWCQdQYlS8y2W+jprsCtQ47Mi28IEonl7u6/Qw9uEMBeLcxQ==","signatures":[{"sig":"MEQCIG3aHbWvMG8RO/SX5w5YwzYt4KwQKiyHZfjCdPc+E8K2AiASk66+9kERWa5MNDgQUiAcOHv65rvE70jIbAg+lB7Ssw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy0VCRA9TVsSAnZWagAAchIP/ja+BdUjG1OzYOBXJodL\nl49KYiP1ZfbcKiD1qoA4wvA3DbJBWpV44mPxZcGH5HaZBMZW0L3+3z4jPhRS\nd6UmSDBGOhTyKr1gcHBmOnNRgNJDesWhOivtXWzH7gQNj9ZC5bS5DYgsRlsb\nFmYzg3l16/ibXDyf9lU6Lv/QHIXF/azgM9nYLHroOsGk9IRbSRLhVnkuQ5s5\nagcxIBod9OS5q/edC9Mh3Hkr68ERlGne9RS9kE0ElgTM4zMGQVoln2bpkBR3\nIRKYCZCbttCiGtx8bZ1RctkZzXHRuXfDi+kCuZYjqVDuhsgk0WrVYQUrz7kh\nwiLNjP/hf6fwgy6Hw+9W+mS9xJPSHozupCiJQyh33XlpGimd5f6inWhs97HY\nYNqAdEQbiysfesvXUA+MHnqiSe93sKDsz+SLNOlP9Ku1yEYchxcqafvBlVH3\nUsGqNGJejy0fRa8tK7TheBmpiZE5lWGN6P7slnXeOPCOWB2camKBPbgGiBJB\nwcpVD3iAnsfJZ2wUzkrvGLe0Rucazi+yTcgIkIaZy5t3H2VXWy5DO6qVl72q\nAj2wsw9aLU9X7ZC3Po15pwRBouFHXg8IBHl6HLcdelwG2HOwwO9oULdXM9z7\nASOLNqC56+Q3t+llVVL9rGabEzmvmVoedlj5kZUVyjSXGgxajFmGPHyDsbR+\nSv5N\r\n=p+vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/button":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/typography":"11.0.0-canary.cddb03553.0","@material/icon-button":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.cddb03553.0_1613704469386_0.25868556415844934","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/snackbar","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"641c8c930650b23c2b685a4120105aef432c6538","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.d6d8d0476.0.tgz","fileCount":40,"integrity":"sha512-W2MTCIAGhX9W7vHXCmUHdvuAOmSws3cAM6wGtsVVwwFxynjNAq16hg/GPFbhyNaA4K91AdedLkp8K4pXzg6K6Q==","signatures":[{"sig":"MEYCIQDhtjRnie1JHzcqG1sFTwIf9dwZnWjdL/M3A/Vs1QoZjQIhAOOQEtsdlj+J1QJnYGg4Ad9TtHpbiSy1jv/Oodz/cpdZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL069CRA9TVsSAnZWagAAiO0P/RIHxGWe14cv/fheDfRa\ngFjQppOfqbVonCCD4foZ+VI4NZVABB7trNgPHD2P+yOdr8EXQ4oWnR8NVC/z\n71bP6geELICvciUelnIAYnXIa6yAZuSZrWmbmCTf4AS01LRLcR7x43I/DtHF\nWapefj4/Wv5ylrL2Sfy6hdr83kTPP0deLW25Et6JJBCoIXf3zfWsJJcGpc4x\nZ1usGk/DFPiUaBhR13AQQ1ovRB6vP9khP8GUZ53W90SOFzBEXwjxhlFP/nRW\nEyOkcj6QMGt0/dvnSoHg+XJ/pqnwC/prhvKP3BsiilePCkRSrWjITgwpInAF\n+lt1uZOl+lOXgKtJPrXAhw33N+34gCQ1CPoPMLZXO8/tghMop/Px69gihqib\n6HI6Sl0rTkRwkQuc4QFVsW7HelaAT6d5Z1P26v33xlPtAas0dM1BP/S7ACxi\n01+cpGIW6SeAajx0N3/pvHYB+VP7VuTFVs8zG6Xv88d6KpNyeDNnWGe6Bjw8\nDCnuUE+B8TF3wD12WBkjOg8d4iNyPhZodtYwpxZkvtFw9VBTxslV9sBPtm0R\ni70dEz9W8izIyATY5dYeAFwX9G/6zdi5fWfVwXYuOzv2mbH5mJGmQsC4l/fo\nrkp5R4oSoeSYBe+5QN4SBoNMmblG7nFzADCKVtq/OwSJpYZV18ES3TlihzE+\nyp9E\r\n=wvw8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/button":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/typography":"11.0.0-canary.d6d8d0476.0","@material/icon-button":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.d6d8d0476.0_1613713084622_0.716378673828246","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/snackbar","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"236b52a79ee8309e04d8fd29ea2f89e087bae86c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":40,"integrity":"sha512-2teyibT/vzsVj2wbgjHkcNH/htej9H7J09ECpOrHZ+7FKSOJrYW1aCadRV9nivF70K85R0WRundADpbSFta+Yw==","signatures":[{"sig":"MEQCIGCQChFvgwJK/D2D0i/w362bLvikfqAAYoU1GYt7AlUXAiBgj2ikuD8rK9SYdnYHp/OLX8yuvjxgJAbJIC5S4Np8lQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL92GCRA9TVsSAnZWagAASOgP/Rl+yEBM2m1XoL/YqO++\nxPy72Wo3vbymSjHxwIr1p7FInfl8VR1RFkeiK39yBzX4fiE2s/qmUSwWBOWM\nzoGr5GihzlWpwE+Um9D39TA7AoKqhveer/YLOwSp/Pdxwk5VWQTNv084Sv7i\nISdGa9w0v2V0Tj7+oxDhnCSdiHN2jGQ4XG+bypUCaShagTvhdyXMHffLR4wM\nAxawGjCLW26m3Ofp+YAPlMfu8SveF9mJomBB/1Y4rYt4XmHv1BFH90m5JcTd\n0STEeK5iUShxOEyc+zyG6KeJFEYE3raINwoS5NsfdrWXt1ljYhjcrwMpnQQX\nnBc76XmQjsxwGl8jHZWY7vV63dwkoDcyz3XdYRkwdPAADt+DoLac5xK6lPR7\nJrXQf5UuxToZ9gmYru+kpYymLnVwhbP5FmGdAyO3jjL7w8cVQv/VxeoAcUX2\nwBLbl+d9l373uy/TXtNTB07WuHNsCey40JqeJlY5DwyghbA+ESNq1/W/YdqS\n5sy0nQJNolQm+YxUHYbo8agh3+7AXLwLZkNjv8kCnL6hx/S7ZKA3fDTkZb9l\nej1jQgjKgWSJXaoZQAwPuZqV/q5juNv8W2j9awjgUHBa9FDjjUJDPHStAIrd\nNIpZeiEdoNoFImr4dm0Qq/I66gzs5v5bPzjPmYJ7+vLCEVEBS/0lE4CUYvAD\nLYLB\r\n=HCGr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/shape":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/button":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/typography":"11.0.0-canary.0b4a4b2eb.0","@material/icon-button":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0b4a4b2eb.0_1613749637853_0.6389477596980082","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/snackbar","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d9a828abf7ea55023ffe5ec1a4a4ebef08c41b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.3201cae47.0.tgz","fileCount":40,"integrity":"sha512-Ecnh5sXe3zHAXXdSUcFvc/wgrZPVT2gRV4EKqTDbgOplAV0FIHeVMSjpUMM5B9hLEXiv5YJIDStw7nPfv2jikQ==","signatures":[{"sig":"MEYCIQCsKPidHOjSFAVbS5QYqw7rvVapzq1RbK5BdIaEkaQIGAIhAP1OxqYHrZQlPZZG16SQ/OXbwTYHusuZMNuMcVJy7dmA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMENwCRA9TVsSAnZWagAAoNsP/igK/buusHIXvOvSA4u4\niYX8M/eDoTBU3NnGVxjiOOr+fCE2uthMAJKjtXRp4n8r1ChkcLgrHmVHaeTm\nR3CM9CyVOgXRd+S+lD5LKrqMUiBzd1A3IBKo720cVAqNZGT6At+Sy1wYzSbq\nP3KTEoOugRi0eP+kOi/4nbvsAqi34+0ve+yC4JSn9bw9V4rJMl19xXHuYmY9\nPmo6cVBe3ZKTbeawqZruRSgxaIWDKEWVcwhH6mt96lJKVM3eXb+ojK1SD/jz\nGY0WIBWGlVCf8N8da1FgmUgEfwQJGMeQJgIcEWb3XxqJjuGJMEzSKHLKJx7g\nIzVGWMOIt+PmFt77HOn+klMnBBUsC6jOF+ry9eZy53m7mfx91gbAQlMogbrT\nv0IUhPwx+grL8LMuXpdHK9ucbNqtz+4Rzwd183JLJPe+pyn6gMhFGeB4dgEd\nudwtHxLYR/J89AgZ0RVCGnAvcaMEf8se296/U0/3KO+oQXxZ1XjyCKNDrSEj\nENoPpT/u62qWiZezjnf1q8L5UHgxAQRrzx/9Pw96becxdhPN7oCqYl4IMBCy\nCqCnwOToZ2yLDx99zjJXA6tQvqmFVG3qBsmxxvcXJFViCuu7YacbRfM29Jmb\nONb5y4wIpm4nOfS7diZDUSZta++ro9RJ1XhUnojXzAsixl2jxe5uKkRAAa8Q\n1s+e\r\n=vzN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/button":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/typography":"11.0.0-canary.3201cae47.0","@material/icon-button":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.3201cae47.0_1613775727496_0.38247195790472976","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/snackbar","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"590ec53407eeb33da232ace967e8caa209c4099c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":40,"integrity":"sha512-6ZNV+Kv5NCNTaMQLOODv1+RNOnjoqxHnmCTaeg1RbWbD2y7sFySQghpexG7ECPn94C/pWHgYI7JdSnVCNeOEfw==","signatures":[{"sig":"MEQCICEvo4yttK59GAf78c+TlhZKUefONqH/kcuwFuDh/68oAiA9h4SqiAj70H5b1oJ/8kiqjXT8ZDQJUNocPEODclv0eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAshCRA9TVsSAnZWagAAd/wP/A39jIw4JD4+K7H9OIIt\ndO+yGBLqAj3I8skhp2YV4h/upg/CEVeMjd7w7eRU/1j9R/51aHeKarvMUrHJ\nEljXbhnKY9BR8sai/1PuSIEyr99vPhAxvVsriTdVvVANeGRU3Bz2W9OJxN5m\nnvWwkSaxYH5Ebs9Gkdbq9e5+64sYmN0NKaQDHwXsX19bGcIECRLClGBhhXBL\nhdt+0J7AmjSj5OQe0Rp+7/EMIC4r/3PnxaEyvOcGJHQOvssDC/xHLKoepLr2\ndqOpEiHPPZweaNpiIws4Vyk1L6x0/SQrff/TezAlOIa4uTVlHFE5uqm4uObu\ncliUkBXlo4Fubu/QwcHKKm0wgnYYd5zQ366utjtg0S+VnPEy/DHIvPPyl1h7\nA0Or9WDlrentgc6DNQ+QiN+GY2HYO9j7C1lV7EHU/ou5u3EHgInWxu5LMQMo\nQd41BgOnKXjp//tlpEuv32gKYtZRWdfh1jg1mdRWJb+EsXwKMn+jGKfEsn2Y\nMu1TEfMYn2nmNQVrWyRntd4Wg48dPQiKTSH6wdnkqznHrlSE87A4LT2shWBn\nIdrGwMC2HGxPj8hE7x5uJg1Ev+CK9o1WqLRrOCwNIO+6AbxKZnlaU9EpKbQ1\nNTLIXvSQz77cm+HCTbT5LYKkFWGdt5QV/qCIc/ix+2gYcqSnGBOWSP5BirH1\nejb+\r\n=fxQS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/button":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/typography":"11.0.0-canary.f1b1fd5d3.0","@material/icon-button":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f1b1fd5d3.0_1614023456731_0.6011220918287281","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/snackbar","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e78b1d71841b8559c0d569f13affd70ea81ae0f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.7899e0fe0.0.tgz","fileCount":40,"integrity":"sha512-7V8NdRvSN7W/ouYmTz1fiPO3n19NSuizgddJ4yA0H2LAFWzbibb5cexzlbnGX2J22PP0sOqaJ/g473ch63eszA==","signatures":[{"sig":"MEUCIEz00zkMEQke+jmwdxB6j6UJ9ZZpsdkYgqnlclmfBkwgAiEAspuSvzBZdmab15EnCUPhocIHCUBGVGrQFma+3q2I+MI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRxCRA9TVsSAnZWagAAN+UQAKRMI6HcBmwvFHIdWrum\njD+NPqKLgvIuGEwLhAScLSBpYyiy7KjQkFlZtxP8SMpT13Rav5KAdPiPNn/1\nJyNl1Q//N6tPeQ6owXI9q1Q4yS/i3VdJrltd6n+ycM9tl++24obsxETdkjyH\nfuXbtMu8CpWJ3WdU/PM5QEI2dlvaS935H48WFLH0Q+NRxaXUQkl6TGVRIuwq\ntueT3pRw4WrNRwVrxzHxBVSPOswFbAgY7o4EhoN3L0Kso71uq2IXXF/p8rqI\nFi4Kzl7RH3S84X7lUacdOo1yv6tr1Jn5GIX8LmVS8VC6W1erHYwgbg3eiZ50\nPXmRkU2hVi9veeb7/12YA2wG29/24hKv6+61VHJ+AbeWrG+TAYY7chmeOk7+\nHFHmhHzaJV1+3sklC4lftYzKOWRg1THR7gm+8eNfF0FOD8J4zrCoq3RFGpEI\nf9x3zIUM1ACU50d7li+mdtefApr6P4U3EMu7YL/XBCuhx8zH6TZF0SsRWESG\ngzAF3MN3olHe4ExqpYwr7KUDLvQnSSArJQtmVeKK4h6ydsuVyv9XLslHfX0y\nuYS4HeJOlBmV14dbiW4N5/lrtLwXB7F9YXfkYHiIGtRfnAgRnpDX2ob3GW1m\nNvSiPl/0dfXwy4v7Bp20W41o+2Ao5Ao3isyKviBY2c0Dkpp04C+C9K2G+13y\neppP\r\n=tkl1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/button":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/typography":"11.0.0-canary.7899e0fe0.0","@material/icon-button":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.7899e0fe0.0_1614034032958_0.9697146296484687","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/snackbar","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912e4eaa8c0db9cf31159445fdb014c4612c58f5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f19c86d13.0.tgz","fileCount":40,"integrity":"sha512-kkuLkd0z0SD6X1INRxPlQBRHkCxlZ2hS0GubQ/d7+qCGl48g6vAWkz9MxdOMZVP8S+9xKTVa/hoGtd+4sS3VfA==","signatures":[{"sig":"MEUCIBxgrRuUSO2rsfxP+h9+GArvYXmbiSndVGfArfhuRlBnAiEAo519bPDF/8Namy0VkqdNSc0DrzRvEKtz1heW0Fj+wbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7zCRA9TVsSAnZWagAAc4wP/3PYSiduPj/7sMHLzY+q\n/LEzUCS4gxXGC+KcoB8HBIYfZ3UgtFvo6Qw7JTpu0s6g4eUFkx4OA3qF15Zp\nygdB3jDy5pP+/SDkwO9K4LYUkuM9mJPQaFJ44miUfohjbf2EK21A/idR/xJi\nLNrHv7x/mhlZf11iu7aN+sLtgZffsZmlbdWIdoeFxoeVnNhaDarcS2UE91xJ\nBzYG5Dnl/2cn2+i1l95K7Cm7YLvuukmhokLCsXinYgYYFVOvAzgcQPl+hR9H\ntztGUvmfLMXOZMGqXLJCJVLpXphNnk90g0+alyO0Bl4numAXXvM0sN6mojC3\n9ANjzDgkD4IBxj1RiY2g7yaIgN4IXqcXZz/9VnQn54iUH7vdrF704gJiDkcW\n4fKeZ9O5mZlXy66pWMDYkBuUb4UFUddfypUDcu+VlQyHDMcMIa5OdZC3YNkd\n4offlNW8DmqQd7WiHlGQfYMX4q2hcBDDHl2oiS/K0AtHR5nZELEWDw9H1mgZ\nsNVh/ivMQXDzaGnsDz1hkTtXU64rdFGlM2NBgU23Fapg+srhvpftofPZNQyp\ncDCMb6CN7MgtVsJdRmH7WgjyPj+/HR+1LzI8s/cWj1NfVF877/VNY9L/wOWS\nzq3RvDdlht+5swcOJ62SCB9E6pJ8BKGx4vLW5d5lbs1B7nK7Qy2pgyJNTnP0\nejVX\r\n=OD92\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/button":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/typography":"11.0.0-canary.f19c86d13.0","@material/icon-button":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f19c86d13.0_1614036723009_0.11037154046826392","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/snackbar","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eab060359f00e07137b33734c5e9282d2abc348b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.60e892d79.0.tgz","fileCount":40,"integrity":"sha512-NekXyWncRfPOuUdbRgi/fVF/IjVMVkNkRf+5X17uaN2lDenVZg5gL6SgyBOQZ1GOrkN7hPX2G+2doBLLG9Np+g==","signatures":[{"sig":"MEUCIQDKYkxv2m/kXvD//SrYT+OuEI+R1FmDi48+TwOuLuFe7wIgMUhuI+UetNIXTRM7s+PFrA8NjrLqdGbAM1JM2jPq8vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFc9CRA9TVsSAnZWagAAxhwP/2dIHLEyIc8ZhzHOPzHv\nXHtGgmFlSVrZaz1zC1T+EWgtPsCgQEjNa5uDfZfA+W9Fa+WMeLgCSJtVQJdh\nhyltpbiJSvjmISBZhBer4Ngx2B3x2/mPqj9Xb2CzWgI2PfCNT2oFlNinKsep\nHRyppyxTWRG48ylmrcfJafJ3U143KujjWh3PAKLgnssaQQtPdrJCWEYsg6xh\nr3cykKfRJ1SFveGbN16SSEWRD/fJOmv3rscXoflxGSeP+452awL0pY9thOe+\nAi/mno9hkeBRlNOqfB0KcHC6Xf+mQ6+SEyH8c+0JKc8xlhwnL+ene1l0o1dl\nD+QKMdIdqDEIWgesj3HAvNxClqvfN3fgogQ9Cx2aE1UX1kaL+bGPhQsjd0tl\n0xoGAXa+LHXtHx29ccZ7MdX+NwDaJnUUEIDp6IvtY8e86J9ghFltZvKmjOmC\nAl8Qs4Ov4u+deXeDxkUejgJ45j75Dd53+6zfyczXTTgHnEYpGA2wJPh24ZCo\nKCsVxYopdu3eCY2UTrGrMldA8Mso5Q3kbpxZxQTHYnpMUfTriqR07KjLHCqh\nIc6SWMeyKj6t0T7NgN0eSDTXtYNxY+GS6EN7kUs1zJ8/dmmgLpawdJacdBh0\nQ1laDtQV9tLKE7Io8CBKirzW8+rHKoXodEe1YcmhVqwkiMrCgiTtYC7eIYhy\nm4ZI\r\n=FPaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/button":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/typography":"11.0.0-canary.60e892d79.0","@material/icon-button":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.60e892d79.0_1614042940808_0.8497475667409595","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/snackbar","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fd5f9f5887fec89359360cfd0bc3f9ab14ad6fa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.c96bfa495.0.tgz","fileCount":40,"integrity":"sha512-C/apgADKrhDuybsTLpnTssYrJa8udjAXk72SABsinJ4zG72k1zlD5wvSCbrkHI4hfk7khQcGTU+lWFuQQ+9M6A==","signatures":[{"sig":"MEUCIQDyZ7PoDLHmXRQUyoFt7EoxFjwpeSpcXKyLvwVggRT/5gIgPwoGXua1tV95AHMI+4xf9/lkisT9cepsTA+aNzPBhRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjQCRA9TVsSAnZWagAAOdwP/0B32QFLgsq/kpi3dyBS\nMAxwgPY3KVEJx1bzLwXwMIS4MDvfQcIJb6ayzZt5es6RCt5onbezlJFf0WfK\nz1aCA1VhhhgzPvfku59LaYgWhnEXvaaWSTtydmGmS+gi1E65fVP8+OLG4L1I\n4OfSoq7g8YnV9PCAUlc/QEfDlQX8vE3ARmfqbGSqYFTMrvt2UZAo+mt93zRx\nSSygvTLiGxGUTMoM6z0aO8X2/UDmTzDsOLy32h2PTLfg8jdXwJHaNY3L2dZ3\n9QbRH8d0bEFMLkCfzI/KgdhWO8rz43GMw2aomidYqsHxEtWn1y3rziv6wbq4\nGRZVvXxjgCextZ3WrCpCY9EBBiTVE+nN7COSFbVhRoWyXTNDXwwXDA3aGlOu\ntTqfNXb/tJJ9wSARc4XNleuJ6QjAmcW3qATDPvw2PkEoeXYDUbkT9+rrh84j\npbzIOI8vQp745mSFzSLu1ItB9/i0DOq/GTHnnDSvECh2hLtrWyE0s7VgZbLK\nnW3LlYR8l5qJai+KPQyymRDIzNRvUP0CBXxqzB6g2BpWb4g2exT9KTyH2vD1\nUWrwMeOzEKeGtDCrzxQyGFeWI1kpXBZ2fMnR4nuuRT5n2zMKPkPPx9znuyZp\nD6xUmtV0o9X1iiTmRpoPKYZm7I52PUioxjhE4M26Zyn9QZbNFRz7iyTnHwXM\nlTzG\r\n=+Hv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/button":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/typography":"11.0.0-canary.c96bfa495.0","@material/icon-button":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.c96bfa495.0_1614108880338_0.7501318875716068","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/snackbar","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f84bbc9ba1696ed1e60576d87325d02c9168419","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.fa9b59f67.0.tgz","fileCount":40,"integrity":"sha512-JwifEiCxjeXCno2u13LQG9IMa3d1+SMs8XW+EHK/+yVCM53wmZU8ZdsK8c1x2ehZpDjPfNn1Q3gAJTRET3P3eQ==","signatures":[{"sig":"MEUCIQDSV9B+Ngyn4ziZpLr1WfCElNKLiNbZozhlqc2e609JzgIgPSHOhvPHWVuxJo2LiD2JhHF3b0aFTmA+DA4/NJbAkx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVkgCRA9TVsSAnZWagAAfnQP/2Y+ue1qX078UAK6aZWK\n9RBFSs8Zr+tyOaGze+il2+RMee+v3l2GZU+MZlH+bQNnmXn0Bk+jQHG/qzlr\nWVullAdsQg3rWwxMmBiJkKlaeIkFdZ3CKNHf9OWJ/bGOBd6b1/mLZtShjzjr\n6QXn+luIQQHMGYrziIPc5HGhB1AYqCAD0GanBkWeoC3y9f4qj2TVNRr7FRl6\n8DAaX0sCp5O/i6ZR8ZLlKpxyOYtsKctxirlBRHeA0IzruWf3CXVvqfItf+Ut\nEnKgMPCLosV3tZH3VI7OAqSKJyY/O+pdH3NSpy72YGc2MMbCcbkpqFUhJWX4\nTYEBeHl2ZWrDWee3rdluLYVlB9+vOPkoIBBwlcwxVCF6hegNhIn2wjBeUjaE\noqQHw2MX1mbHqZYxzNmsBXHTQxpUWwejWEw1xLfzDz2dOH4SHfOj2T4EDDCe\nlSy/ubvmhWDhOfPD+Z+HriuaAaVFi5IjochFrspCGSAe3JlNA1PZ6vtl9Dl/\n/MFHiNjCu25hQeX7jPWxrn7b5PFUeHCKMqHaHeZ+Bhpe8dtKXwgeq5ycr3iy\nB77r0MtWoem4cAfpHyXaGNoz23DD/2HsvzldL8wr3XyJ9mQuI2wbYEpRiWk1\nMj2KzQQV9tFC6HPszhLUlgObIlWOPCuMjG9NS/cZCxLhGnvXY1vfR33UCuPZ\nkMfj\r\n=KU5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/button":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/typography":"11.0.0-canary.fa9b59f67.0","@material/icon-button":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.fa9b59f67.0_1614108960076_0.6447644504796384","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/snackbar","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e11560dff42d6949f6ebd5f799d97c4ddc148336","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.869e3497c.0.tgz","fileCount":40,"integrity":"sha512-1nW7t0tlurj4oJNGquH3tCPBq17gF+zbbhQabxAPVc7LrsZSaHqDhZLBoc68ncCqHBOw2B5uZEyGO3xHrl+E1Q==","signatures":[{"sig":"MEUCIAJH8aIlqEMy2/VQS2vA4N2VN9M2mHZC1aU4AnP31Uh9AiEAti5l38Qz2lWh1aPodbmU3w/IPwg28LPY4MXpU6XaPgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVlECRA9TVsSAnZWagAAWtIP/0m51PYDwjBBXtmyvZh5\nF6zufN+6BD6iJeqSf2Wt60Q/ixSoBX8Qs+JsNdMA2EBCQM9/lxa3t+kUe73w\nLY/ocsLdXHSUM21fz8efLzRPp5wfOjrkpTIAIwHyn/3BZ+B6l/IiRkKk8wOG\nGpcqaXtgIkSJMIp2GNBdJ80700UV4Rk08hUSDVfRQsafxOmWzSHwOusPCP/w\ncBOK+tRMVc8F7qiJR9YskfaIklKzxye+iK80NmPgbzh3koMaYsw7fOeWSGlN\nLzQn4Qoz7epH2dd0dYJg932lsESSYAsMu91UtfYMO+QaEZ+Ifav20Q4N+yrW\nEw4Semod0mwWzj9X3fTGC440poN0IoBh0qYgmqObvme1L29xyJoMSQiwSx+r\nmtdgB0nkv6JNQA8b7YxlIVmE3Y+soVTaMqXutw8GN9xoTiM2w0/pQCp6cCWO\nN5qyOnIBPW/ec3qE/SPcHQMAczKEqLdCB6kSMEf/BXHxrNv7aElQcx7dhsJ5\n/kGnFGVTqKgAZ7/jAFIju4dsOsXY+hwokYkzCTL6G29cXJ28MpqqU4PquT6m\nZ79f3KylX6GL2DRdeeZcg2F/4WfpAyiX6nQisvNjZ3YxpYWKbEYypvFRgvHI\nfzON/SKRTbOsrHWh7WfIxuNQ7IUV4S0m92Eyrq6qChCLgjDL3guZ6lmN7kSa\njx62\r\n=gbed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/button":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/typography":"11.0.0-canary.869e3497c.0","@material/icon-button":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.869e3497c.0_1614108995798_0.5762714463183607","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/snackbar","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5f872bd69ff327e2fbd3164af58dc5f6eac060a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":40,"integrity":"sha512-CyEWN9mYNIvxMEfKWTMzIah1OwGcg7JIjalJZS1UWimaQUAE0YmBaPUl0PZVIWGgKqTXoUzZ2wo/btBNmZx/aQ==","signatures":[{"sig":"MEUCIDhk83xXNlPAgVPobUKLZSD3xXievON8/qrCWCrvOrU3AiEA7fnuFkqXMwWKfS0CBdNbWzNggFW7EdG+AajFyWzmxhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVzjCRA9TVsSAnZWagAAwroP/A5DzlnhjvAVB1RhJLGC\nDPjAOfzmpE/0dkAVnpKBgrSaVqZ10BE9aVGc2YFyM+tRhMQKNx/u5aIqHe39\nb+yP0MEMXt77Irt0sDg8XE50yBsznIZSt+azWXuHkiCUNLW5/8NtVWbFbNKU\nkMjhPpQTitvKq9qQwz077K66WxKYgILIx9SrCdigr+pj7ZWO6gjWnBZcK/g+\ni8pmudOolRzVKt3afVFHBzqLLsU38iwogE/XiWrYcn+SzkRUOzPEN9IFlLOR\n3wYkN21/YOZd8/0d7DJxW4yn9jeWqhVNYHoeYnuAKdnyXzkUUOi5DKmaSj1c\nlCe93FiSuPsqyoDPs2YG/08s8gSffrB2H47q6WwV8522TvPCuqBtMrhPEyXf\nfC8dqh5HmZZaUinWyZkWCMv4ptt8Xyr3lGnISz5rOZaTo6v8ofpsGYj9X25Z\n27Ksjrne+tYKo0h+pPdQZwm25aFXAgaHfGtkLXxV6N9GeC8rJPLGISzrgTHs\nCoYS3OP32RtjmpGuMxPLbbIn0HnsfqxupUOxVSAJ88WRdB3xaz3ySKLdTkmN\nb8X75TPVDKQDRNA3cOQdUsin/qcPXZmYk40qY8Su8mZSBtRmmi5v9lKdjvuk\nFtm0L9x7VfG0GKDU0Zkesoi6NrxbI63TZ8SSSqQN3p28ha9kLsKWBRGerXH4\niejS\r\n=XIb4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/button":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/typography":"11.0.0-canary.8ecd7c9a9.0","@material/icon-button":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.8ecd7c9a9.0_1614109922550_0.9783330328502182","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/snackbar","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfd2536580832172d8139f9dc5ae4070b2fe8b6b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.9c85d505b.0.tgz","fileCount":40,"integrity":"sha512-a4Mn7shP/Ixc7SBh/x+VZ+34YpTEwJKNP9lmx2wzIGkBA5/kjUPn18sxCBYnIRNVNpdZi++v/JQdaz1GWi7SdA==","signatures":[{"sig":"MEQCIHfUVC8s2WvP7N932X4n7FKOvGgNTUM4uUqg1ieERWnrAiAte+hqKXHjNBHChLgS/JCncctSN9rQUJFl/jr8m/lMiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX7kCRA9TVsSAnZWagAAw4AP/jrwvnuwgWd4m2PHMulQ\nnEROfG+nsn7g4NSvONLQnDDNAGD+9W0sBjmozv+9FIIYQuo8h+Y8PNFz6IEJ\nudnHj1HhJQhiiC6G8ec/0QrZqYHR03UTS72wandAChBPUgFNy+Uh3LKs+1zT\n/MHDrTDMoaLd2f0UHYA9bv67ZLt7YEVGMBDxBNvYu1sEYAHjxG/j2EL2z7ja\nXpCadHuzczLRTu28qsf92mJa3L8qOakQFKLslgKyGrPSeNEvc6yj1t0loBNo\nvHfdiAIbhqG3DrwtVWYmezi/zoM1V+T2Gl+sv23G4XKbU4KrK1j9WJacMtq6\nXw79rwwrSp3iNRpccOW/MoFdoE30r+QrynC7HATfrOUc961rukKVbkSYEC+z\nljqDc9TBBZ2/XJk2ANBoW86+dxflHHbCx0DLtkxXHmER3QVIYgkoeHiteEad\nCk9e5rhlq2ZD/+5iYarXXjJGV3ge1Xa6O7wTPxRgEQ1DyGfPaKUIvyeHlXPQ\nYLuQeJcpM2tUnyu60QU2c6DtxFNOyTsMN0lJYMzLeofvVO4EF80C/a66M76X\nybv1Y+YOGrzJffVqYEy/Vs++TUKjHsGWxBA55n7hEW79aJ339qBVdVjx9/YG\n7NdWEvDD4zsxohVftXmCrAfr82/KLWGtgmmItZkUSusqjnJHZejyXIOWqmUG\nOZ/E\r\n=9R6G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/button":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/typography":"11.0.0-canary.9c85d505b.0","@material/icon-button":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.9c85d505b.0_1614118627897_0.26318323870871274","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/snackbar","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff59b71212962ce33c93c89a26a941fce12ed4d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":40,"integrity":"sha512-awaC5UBo5nWGmjJ9yO9cIal7zZK1kOMDiqgj3gZ4hukZ4U71F8hya+hCxE5RCIoTz/aeizqzNHh4rwO81n9oJA==","signatures":[{"sig":"MEUCIB57+JyJVZlyE6v8c0KBmZYFhEUgDjKrmUZx++t3GYqBAiEAsp2YflANuuZR84bGmGcfdd/X6TnT/7SRhzonM0AjQm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbC2CRA9TVsSAnZWagAAZjAP/iY+LoYnlM2YEg8THSBb\nxDfT/WXFKQPcyriJ+3jCH8+Cj4UKYjyrbIvKkCJEP0XnXHUYGWXhXq5UfqRA\nuajHCmP4wxSsSKogBF8fshHnjCToW+H+OneNW7TU2H+5sBXWJqWFugHGJ2Zk\nlTqc4d/yVQbdP8Sx8pmD92+VRVfUTMtFKdvaL5LCcuSuDQYEs7NQTDKlkeKw\nNvYKuZT929gFiwxAFOnsHDwnGVFolIZayhoRfMJViM3/ANuM2lEm8YEtWEYU\n87FIgXvdqqc9gataCoXvwQzTKwXLl3IQi8k4l17rt5mXiLO4lLg6qHu3l0E8\nv0Jsu3wC7OHuoPeBUI+CceUgLzcz/NTY4e5H692ocIY0TL+BcGzTHzOohxdU\nRFXczOms04sYtDB+TpwpEBF57DS51Oaf/5l/PHFl1J9dlETw8RSmZzMZuBB5\n+yleEbFVQvt6ANdiHcRzI9CjZtRrBz533ePIE3AcrZNLqVFl6iuCSfd/Jboy\nQrkX9ALWllSVzVICBLMHLl9F9slJWtDicNZZSAkrzMcfips8Gh9+urMlheWd\nNX9MdOL10OGtC2z3aG3wY6i6y+HwAccDx5yo6HlX/IEJfxpAn2xn9+ZfaPcx\ne0tybVxEtA0gln5XFVT4bByTW6o8XtQEKBtBR2S5kVk9JqOZGbZMDGdFkXZe\nEvsV\r\n=h+bQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/button":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/typography":"11.0.0-canary.9f2e85fb8.0","@material/icon-button":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.9f2e85fb8.0_1614131381545_0.08307046151614683","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/snackbar","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1c8193b5fdff7ca67a5f2cb47cd2ec600426649","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.19c4f29ef.0.tgz","fileCount":40,"integrity":"sha512-xwAJm3tUJ67NCPkSK2jywVA4a5SJrEDMlwsmYnnKfqhYrg2TnUWsED3oR9oxOag0asCKWXDE05MGTg4n/opHrw==","signatures":[{"sig":"MEUCIG5+becBt/9ahL+aYpr7hGqPGUEO6Yv6thDs1UX9q9GBAiEA1pWg0wYCbIHnBP/RB/uw2VphjXajQaXJJyT4rXnQ+kM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/lQCRA9TVsSAnZWagAA+DcP/2qLbLhNREdrUT3mYqOe\nWKKgGdYrtGGhY3zpT/hNKEf4WepEtgrkFaAZPsDrx+QwGLsKjADkSqwv7hsf\nPKlCJ9r0ix2n8vqUGXWfm17LK5UVaeYjCENpY77ZvXYFaGUSPUZpOEzSmjGM\n/pZ3Q+EDKUwtUA8/BiZrbom/t9sb2nB9lWznwp3jscvFzjYDTlZvlNlAa3wA\nknRWFjHx2x63FKK/5WcX2zj+Z6COF8MR/XWTQiPynRE5aVKQF1xNNEL3hfqD\nkG1Iz5wJk6Gxz85kRrasp/yaY3orGOupmVTuKIXfFF2PEhaMcJKwqI+pye1u\nZYQ8CxtXG8ZWdEJXtOSVU52sGUpAPLOrAsWfPceXd5HtxcqIzuSKKiF+LYrm\nCOiUXoN7qLt6GYxpk7nE3oiS5fGN6bC5Me1qTENNvTv/gmm4BnVbbUXvCbmN\nXgA5woj72v2Cb0BqE8Sb/aK6Y3eTmGyc0yyWzDtEpW2h+Vq+sae/EkM2Z8ea\nWT72s0ic6Fhlo8rSbL8FtHF8mK7WxxRGqjtC2oscTTK9ytHgCe/tz57q4CVC\nYzIjhKLbMuK9jJw76QjSP9fhjjkhxRTvVvczImtZe+RZdj2XzxgwjkROCivw\n5sL2leS4+rMTSDxJupJKUAjN4xUAnpZMybuqi/KwV87Mxhd0hqAIf3Ffwv7D\nOE9H\r\n=mZyh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/button":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/typography":"11.0.0-canary.19c4f29ef.0","@material/icon-button":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.19c4f29ef.0_1614281039487_0.7081817788424396","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/snackbar","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac76aceb67f0a62cef47ef6a7b7ff5239a067dcd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.63df6e9bf.0.tgz","fileCount":40,"integrity":"sha512-Sta34PKCmtd+w1b6O15ZZd8kcmHPEitgC9JMvKrrobfkRNYEQohNyrs/HhwYRwO7XXL2ttgGU0xJ9vcmH4wVZw==","signatures":[{"sig":"MEQCIGG/TrKblgsGRgDUyZGtqnf24QGVKFJrPztilZjG/sxCAiAt/o5I5ESkdKOhMswXxWOG8QhvIkb+Fstea4wp2Y1FVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/y5CRA9TVsSAnZWagAAFS4QAKUjYEVcV7EcMRSv0Cr4\ntfljluvg7xarkhtZhN59R2MMvT2xZv2uOEOC1eFcxeY6Hb0WIW5jpoQ/Tosq\nFwXHhbIJvSHQqMYHZqUuzAf6eEF4zah1pLF6YuFSchnsIoQUK44UKml1+8/x\n0zQ5NCKjKllMIjyict+kC1ztmlEBkIqcS1S72v5M9OPR4HlMIXIhoSHUNB+G\nat4Uf0LBnuY5O+/WUcvpRYsLRfqfWVBv5f1Y/y6c0ap0b0Cp1vpRArUNpGAr\n0aeYOBnV2g18KtdAOl+2lSFr+wONnLbRQJJ3ssg+taubglhFL5Yp+hJFHOcY\nCrKCNGCIGXRDnoXG1DwhdVtKnH99eM2TcbCzwZz7VKRq66XTu3SOLvrlU5C4\nuXO1WKWD4lQsthUCh2bSXm1Kut+EKpsdTs2MsbEXzL3mZ5n5HJ10VlVv7ySp\ndaJZDinHoIGiiraoatJfmy9voMrD+osOXJdVB1jnYw8p1tLB1V1Y5nMtXc4u\nyaOl6u44JHwk3srWLqVY3+JRc0DcCFd10txzK6QA3aJoLeh130QWeirJFZI7\nUqs8xupiJeiQAMRoMDIw5BjZUnoiElPqfa3lkRCS090Vm56JnMfZFHLGR5kn\n/GJtxsd2PEliLRBcPgyKMuQrTSdxPyW3xNaIH3NGxliAhmeMvc5hg5t0/UWQ\npsmI\r\n=AMEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/button":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/typography":"11.0.0-canary.63df6e9bf.0","@material/icon-button":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.63df6e9bf.0_1614281912661_0.037817989305693134","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/snackbar","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6393d9b5a9b1c0c95c93832911f43fa4f7d2aa0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.981ad970a.0.tgz","fileCount":40,"integrity":"sha512-+uEYuSyBLXVaZLdQjWi3gmhUF+z6E6J8W3o2rFGDe4uHzpZdi3ZKockbM42bT8vL475gtfOOGnW+G1DUStCIdw==","signatures":[{"sig":"MEUCIDxs08b5tOP+XN5vls+xn04in0NMQDKg+UtL31XEs04HAiEAr/K3dEE9DgNwls10Gx6WSnTEZpYaf2lQhfUkRX2PKfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODw9CRA9TVsSAnZWagAAPnYP/3bUtJQC1sbTnnsDE3Ha\nvhn5Wf6TjgOcvaPcXnsTipVkLRDA2rMl1KfcRU2RE23MqCC8vRT2UR4FLXJr\nGV1jmEVMjLCaBeu6/e1G2dnrE6vlI+nzncj11J8yNpXMVy3Mp+am+LK2eUyB\ncrRQTk5smHTKIYBLCTgoSPG7N/cNJ2Pte2drf61anAULZ/UNHV67PlZN/YpE\n+Ncy6HLnIFvURplSx12V6s9QagGDy7hwc/0PMXp0kP9wlvhzLw+DCaaG2iqg\nj5rJJkfWX4o0MgzBABfQ97aO8JIG5SNo7tJVA+ivIAqNJwoSoaAeWTWv4qlO\nqSW3nVpkREIFXPnwwIl/F+VD7onzfRonBuoRxVk2XSWJxls4IMR8LlJXv657\nH4d0GZTOxQ1do7rYEzkVtV50SMBiwXkyAYYxmf6qhIQF6vHWEAnI57UiTwkC\nQu3+aPptL7Q/fsXa7HIgqDM3jgsBCclougr9CnbtUFgFZyzoFi2fCH4+mbXc\nyj6KPilnJnyLUY8Sai+tPQ6hMrriVn6v2J2X5tnPnEpdZh2vam4AADOgysuJ\nEazglHmUb0WHeo2Nmd/92dLLKhUl89PVIheQ4jyrx8+unaaJ6LZvgBu7OgIY\nd+vxOgp8qicGbaZNX7izdS5+xhYgYTQ6cTXVWrAIetafkKYhofjcraAGTwoW\nSHQD\r\n=1ofP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/button":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/typography":"11.0.0-canary.981ad970a.0","@material/icon-button":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.981ad970a.0_1614298173022_0.4300062046377058","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/snackbar","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4c4d556d310f5433876bdc1e2aa654ac1ebef93","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":40,"integrity":"sha512-/3mONAvV2y2Xc4Cv1WIQOvuFAxsZv3PcMP5uxykZ0itSw8yZtdteeyVIxzTIOP7Wkpve1MFEDqAg3sGB4E1LTA==","signatures":[{"sig":"MEUCIEHEYcFrUu0H23ngdWiohelAWY7Q1A+gQYjz/f4tcYGNAiEAiJEoKW60eMfMafzJFYhRUMO+9Q7mkDHhk85yuQ/0u3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUCaCRA9TVsSAnZWagAAC6kP/RhbaF4PhX1us0F5/xDY\ndLvqmD37NNFWvcFtvI4WEjc4pJwqWtNN8g1rK3kIp2rRVsSF8PhKPM03dLRz\nKU4RmvIkgOdWKGmiXCYCbwSle4EFCLQe0bcxBfFVKYXC65ur0rEnwRPIISJd\nCLd418YKhjPL1WZXiamToYsdsToP7gyA9MwoCItotvywENZ5EhR/h28fWq5H\nXXuYEk8C/FGIaUGUx5gS3TXGzrir3tGNOgQdUh/KlBUoK1XI1atVDDhXyv0D\nl+73w5cSHBjByRg0tGCSVvdQK//MGscLwdq7IrNCXbIibDlvqNMosGIfRHIg\ncqr7AreJ7fbre0WFwGCRTMKcOOYFQZ9FqKOMyytslgvn46CaiVvQG5dSqnVt\nbkS0ohQkDF9l3I6aedUHwv5SMn0Y7WhobX93ieUv6E1h3g1w3FJaaAl7Re7Z\ndyMJKsiWui6OOEdob8PxHXMmpTzgE4mNnDUbbygOWf4LJcL8rrRdcRZwQ0Z3\nLBuC6FbJl19uAXfEcDFYq3S5OMAsMCv0zfWPtmzQrUM3JVsuSMFMkg+xH5Ys\n06f7l+w+e+j8iuimuqHjHkeFX3B6O4VCwSfguSqWd1C/mDa5Z1sYcDZk5Z+b\n9sHFAQpkvDmg52g1CQ2woVn+0/InbhAM6FPhk+3nj+eI1h02aqK+YmjyPV0Z\nyPUk\r\n=deu/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/button":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/typography":"11.0.0-canary.f9c9e39d6.0","@material/icon-button":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f9c9e39d6.0_1614364825590_0.8868136641339834","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/snackbar","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d2026fd7b5dbd3d2e7398829fb897a93038e743","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.c97d7d881.0.tgz","fileCount":40,"integrity":"sha512-G+yGEuJrIIvX+o7o5iEvRXbmE8ybnWTX0R0BAi6oaAyLsEnDaFXL1u2RYaWpksYkEZFEo9jy8vb45ixw1C9muA==","signatures":[{"sig":"MEUCIDhDedcz+ZrFEjhC4Vn9o8wHWFqllPXQ9T1P+8itQnsgAiEAya3Ls8Lh1OE80mRHKVV8Y3I96/YXrrHO26lr2NRxA3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVSPCRA9TVsSAnZWagAAqrwP/3m0G1CbVyVeIfNpFdRW\nI5+IC8decn4FFvnS5jdVaW94Slosl7tA5hZNlzZK8A43naSERd0jpuY8jIoJ\nR/u2kHj40dcRKEBbW4zvQcUEMH43EvAIUTwq0IagWTIJ6jDr9IgtfRplqMYl\nAbkfczyp5KVkaYBEzlYbeqY8oa4rhHTae/FmTj92XuRDiNcZIl9GjL3nzTp4\n+JfyzP2R9qpV0zJh/VQ3OOZP4CGvHNavmQCQlO840SN9LJ483Sl+VcM7NWaG\nILY1oDjCb1k/Tam7OJMiCt/YpABwI7fkR5Jv7IGfn/RICpoXMiXCx5MlYjAi\nFrNK977pMOFJVRB/FMxip1cuJv8kpOB2iQPaXUNagb7SU98TQpZEaNHb8ZA3\nbOzDe//A35yikPh4rZ8UYons+gXxKB4o3giD442t3kOOb72+qDBccVeJAh5q\netOhplwkjhZCtcu8Lui1KlPZTW88NzsqESVUp0AxRzNzhtatuNL6L99Lm0+L\nsa4REnjahrthZmjXxyYWi+U4hCsWuSBOoc4ZRuYmsxBrErbvXmIr83rF1tar\nerPknfVPcPJ9BqqhlwV75iARd9hW7yaYevqwHhTRVfagxoZ3LvizyV7lE6yR\njWGkCsZW6SYwIBNBG3yOiEL5FrymrWPFPyMNMmkIyodVBTS68oSmj2TzADcJ\niSgC\r\n=cz5P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/button":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/typography":"11.0.0-canary.c97d7d881.0","@material/icon-button":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.c97d7d881.0_1614632079176_0.008798363794427777","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/snackbar","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"079b0480e526e3166579609003dfc66987f0d71b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.bf670dad7.0.tgz","fileCount":40,"integrity":"sha512-7BShL9jEVpt3hVQNdhTT13CP3SQ6C1cAdgqyusiv76VzFlhkY+b0dCQBr9tU97GnujPeyY0/03Y5NCxt2vS/iA==","signatures":[{"sig":"MEUCIQCY7cbGzjdXjTUp6ris9q4c9Di8R59jtzaI8mwBIvJEngIgWD0ja1qrhOS+SpO8WImJdlmnzbmisCmIxyiS7juwps4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtbGCRA9TVsSAnZWagAAq6AP/jXSHJHv4D1tbvqfjx+4\nBZG8oOPhxfqbpwzFJqsDAkITLAE8vJ4hPCLx3FbifWkb9gPNXfpblXJxHjEg\nsksGe8ZfHBPzmgT7Z6vf7U4XuH/ccEjN4amZq2YCq08FzT6QSQTB9YOwr75O\nkfebPcAa3b4zWs+Ivzok1h9XCWlzD+s9EjqpDTjWU1qb52t4RCza57bnbcFh\nCi73+kld8JDQAF7yM/PH58+Hev3rmgciy+ELig1SBfAXfnZDVq2BeZnBkGkA\nQwosWZUVQ97Jmpm/u5hPQtMGVDPxfJcADIKMfOsYQfcVtWsnm16dKtMoErsB\nUnDIJzrr/EZYyfBxKh0KvnIX/Jv9g2fu0YlbjXnLfmWyhjYK2SURgmXFrXct\nwbTI17CC0AUgmi51PlZ5YhpITt6VoKY5ueD5Gpx5bxq1oLleEmRTk5rixWWK\nMwY1tm9yTJPHClhfZeVlriF4U5Osu8ip3NPRynusaLU4NjJtQ5SiyKB0dm5T\nTDOYO8aA7xb+DlhOrdltD/XsRnynS8yYwjPfzOn6sroIpp48wtGomqoJ+NIR\niIEQzkEl4R58VMwVL65RcqYUTdDiD/quknx0C6GnckO+Ud/SQMa9tsmkB9fs\nHpaEQWW5kCJsGA3wHuEuHEPtKuY307/q+yETIU/L4Ntp/Uknu7La9tiF3yxb\ndknk\r\n=sdCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/button":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/typography":"11.0.0-canary.bf670dad7.0","@material/icon-button":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.bf670dad7.0_1614730950095_0.4755977457280509","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/snackbar","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbeec274fa3d5c93ba6eeee74581990079c297c3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.c7d98fcde.0.tgz","fileCount":40,"integrity":"sha512-fYIk02Sx3+NchLid7LFYwp2Pen4DnMQkElOG9gtLQQvTXwBXW66/FTaLWjguUI96MYDBxyvQlbSuhFKx52lPzw==","signatures":[{"sig":"MEQCIBP0vB976r3G4vwEY9IhQZ0uN2ROrz9kPVgG9pywsZzcAiAiL/TZfLIkx82K9OcvP0aMTD9HVrA687nkrFvvSmpABA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/KcCRA9TVsSAnZWagAAEcEQAJUaDOtevGhcFBGRNDie\nlwTkKxIsWz683jVQF3R0WdVlMOyG6brUmauQp5p21S7WMDNNDa9jE1U38eDH\ntafzx4rbZsIjnrGhVTxpt254MuHDCyp3ADeuM2XwSmMH1yml5WdQPdtnuuFg\nqufhV0ZDm713bP4d5wI7a5/G97rX72/codoi7OhomRqE/iV4IMp7Kn2Cb8dH\np/lIZuDbKWRVF5i2hXxDGbgmyw1n/TqoUvyQlSjCbYvdSmQOOvGRiUGexh87\n52nIai43Y68wOEP3fptowfhtX9cRSbfz9qK79JTxOMMfwCQs7oD06yW5z9GJ\ndXFAOAvH9KGtEUqa1taF5nVSjclVBuA6fmC6+O1jP04ZgarjuMJZ5z/Nram1\nVKEa2lYQd8k9Rj4UXk9IJw4Vh51C5rIiNnj9XBD3gvPjUF3ug70kBYLSFYM4\nf/mNjBHLPQi74LecdIPMgGpjDEY62aDkw9zOiTBX6tiN/91tifvYdNeWOaYk\nHgjq212JV9NoY6QrEiwbVkqRcn4NvtQNmKLdajQxOd5lXTtkTTz1lP2O0enp\nsSP1oFY/VLjCirqY74cIe445vlK/2B4ed9ehGFLmUd9gZ3qE5xA3Vzu1C15t\nMmyJEPA8lIZAXCm/Ple5XP1YZydwL9fZqL5tL/9vi2LfeyW63Jk1zdWghFbx\nGGFH\r\n=sriB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/shape":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/button":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/typography":"11.0.0-canary.c7d98fcde.0","@material/icon-button":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.c7d98fcde.0_1614803611628_0.6871270026676692","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/snackbar","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"022b574c903824eb8c4e26a21ee1a842e62b06d3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":40,"integrity":"sha512-EGvX4Hn8Qttd5emVgylb9Os1dlG4yYTAoUbR/otK7wJHzuGXl3QVlp231gTDfo/6iVpqm4Xexw/N5i9sgmascQ==","signatures":[{"sig":"MEUCIQCtBUW0wMd3vRYB++YOA2lZEx4pgW4Uy7PZvwHo2p0M/gIgRCQorTw74XwbraJbPMZaCJt/ZaVxd6H/YgSMwW29tbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBrqCRA9TVsSAnZWagAAVSIP/0Dbdj9+zGB/nt2XePks\nBCsve7WwDuxBh6n62T0nBkf1huUd8p04xAXjUSiJQ8+PmYGCGXq77Qoho31T\nxS9dOLrbMt3yU3t46inTMCz7sGglA2rIyRz0nV4JTej2o987f70kSrNjLBnR\nebpZN37vBpjfS1Xa6JpI44Vjxz0r/33J4WY1zdLXWQSt4FSIKXby+DnUWR2t\nnzCMpLncCjVHbwLbedsTjzgFCmKURAss8TU1E+f+4j/JVAqCYStLriAD9CAG\nMT4s273sm/noFrYCUY0+4R4cGPXm27gbmUlQ/dlYBWM0y41Aqyk5cysg6UD7\nGEhEuOGg6XtCeqtQy342eyEIwnoESwZGp4oOBz/LhcoACF00ckp+EhUArKWL\nTAA4KikFMOle9H8xJBdH3hFU7bFIctxWQLiwZz+5Au6IJmDuvFq9QYci+6yJ\nDkuZdDF19uzlZmoWDaDjsjyto5a4iHzlPBdF9SzHZHqirB0wNJe8olbEJeFT\n/2lVcOrPcGReWLMIwmjNEAAXtS5/RhJ5s/Y7E4dhhAt8kDxwPQaxUtrRRQQE\n5JJaupbcsyfyQxY4X3wHpaaUFTtGz2lM4LTRGZQXl1QOtj+cqGiagDVihc3A\nxvdH72FdcirlvfsyNHKVEZ7d22VP9W42vQdp1Er/welNElSMhf0IlnSfpRFp\nFi00\r\n=0eGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/button":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/typography":"11.0.0-canary.4fef8bc1e.0","@material/icon-button":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.4fef8bc1e.0_1614813930505_0.3437394897681445","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/snackbar","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edbc4549ffa77353d145cd6dfa7cc201127d9022","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.afae3a3ec.0.tgz","fileCount":40,"integrity":"sha512-yDSCFcto+pd4UoDIUphwGb4YyhMs5dhE+6MIrm2jLaIfMa2Tv6UD0GzyhMhkiP2uJt/zGysLLVBF2BJLJVIRmg==","signatures":[{"sig":"MEQCIErHvXfXwaRE1WqdhhaRtW9yopQhqdDr7DPVPNH7glpmAiA0041p0uaSx5UU7PcFciCw0yY0Z7yTPwMLnSZYuSAEhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB8gCRA9TVsSAnZWagAAVWwP/1eaGwpjokI6AWIgZMUF\nUVuLLEZcQ+v3hNRgwlBcy3XSCWd3IK98XNqJ3l9BejXwnQIkFhhTrjjx1HUg\nRbiGO+6JxTCEauO9m9Lby6ZJ9o3BjsGsK3CX6vibPkeJYcm+827DRbOFkOiH\nUoOxoLnqL9MUKfUsyW1L8Mpf+qFmlgNrHwW7SxzOK0Wg4HdRQ4ZL5mpvaQ9C\nzTBDd/wwRaHRx827A70ljoIJmwMt3Ws+cDcXua1xVx5AXC33PkEzqIB89JID\nZKGUaM7lGKxeY2uLoEZMMTHwj7JArF14tm09R/YqpF+6IROI1nHbYv9vZqmx\nZ1UUZTJyjSq+3Fj7LnKSow/C6ABZ/2W8MAe9by6584kWGjiarnsiZ4hS/Xx3\nxtTV1uXdHrSQTCWFd//tN9z8/d7QKFZwFKAGk5cLAjr6IL6JmGQbmWBfif1D\nrUvI8M43Mc4jubJ9Y635uUbJIpuKsjCKGrPhyKSX8Qxe/N7UsN7ouQ+UGOAd\nbsZ+JUw8h5WE70vtKpYdtbcs76QATYsVi7gGQUXwEK/WI6Jyeb2F1tOvsnIq\nAg0nagt63JLryFoiWLYJP1pbYp9KfNN5SCZl+7b+YJ6zsIcat6kau18OQzlx\nnftRdTHJcH8dui4iH4EmMUKHpY6AkTm9r2Tu7iD1OPGAmYfoUchejhMioVXG\nqsiR\r\n=qwBf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/button":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/typography":"11.0.0-canary.afae3a3ec.0","@material/icon-button":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.afae3a3ec.0_1614815007987_0.023179502393521068","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/snackbar","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfcf155b0c03ff3d4679b6692c8d5d8e6482147","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0a0b10f22.0.tgz","fileCount":40,"integrity":"sha512-z6q1SiTo0CN5cL/M3MLkeyytIr1CTt3vFeBaQlLPFCm1QJBA6jdeFWHMbK3waG1XC623htgESi3eRnZkHZN+Hw==","signatures":[{"sig":"MEYCIQCeEe98jgUC+qND/oWF4xMDPyNwrlzPdBN51AyAfmCxwwIhAPRv9kpITSXugsDcWa7UbdX1f2u1MsFZLw1gAgkYhLcW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCOYCRA9TVsSAnZWagAAcYkP+wb/F+37VY3SoEDsjEpa\nzjmHgIKqKpTc13VSoq4kSOg+4CzTYaEoFkIy0Gm9iDkwVUCDTZdzfR8fG44q\nkovsxuS6xgJjm39q3A3x3G4MQz9U1T5bahXzw+SsoVuyLVBst3rctTkhp2Nc\n/Dz3Tt3E/g953aRCVdO1Jx+AmKPZsZ8wjvJXSfxc1VaxoBw7DKPsAjoV8GPD\n03QRSZI1v1ErS/NpReXUW2PI/azuVAfyzATeQXBY1l3DdHsAwZZzQVTWuonw\nrqfdd6tvyB7yrBuRza+1df1pjLtxtL/EPdE3OoPohOzB8NsE/jSrn2BHRhJK\ncZj9SguMklaBUDeX8TE7NafJjVYUp3IJIzZGab5oK97zrOKBIcM4ythU4Ajb\nsSRATYexRCK030aIjVrVRu8YCxJ3UZVwFx7MB1aMz+36pQUDyuTTnJwTNIJO\nd6SKMkQw0691HBOznbdqFMZj/ej5v8nqafdhWkbN2mJlzS3tJUElX5gW2mdZ\njU7bbbJAtn1E0kIz0ST88o3dukSC/9qcc5vClbdaSyLSjBWWAkt0c81Ihu8s\n7vbJBWUP4fdezQ9QZZgfsnZkasjpLD2UEpYJDMB02oZFqrL4zmkOwsROTu0Q\nBcGLTrmPc1NFJGT5nIxH8d6dGqIJE0UpBgu1QVzHkz+mFPjDXgqbExCptBYM\nmn+V\r\n=GXvN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/button":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/typography":"11.0.0-canary.0a0b10f22.0","@material/icon-button":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0a0b10f22.0_1614816152086_0.5132361921728072","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/snackbar","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0762c1e8f92b32101fc8059720cd1518386bcb4b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.6f678a91a.0.tgz","fileCount":40,"integrity":"sha512-aFzulh3kyRaj9Xqm4QaDnJriiUdSK1W1Q7u4ud+tcOY9ltCK8udqufEDSkn4l+jPgcRNvUW3V8Gnhb/cPcYlKA==","signatures":[{"sig":"MEUCIQDpcxbRXCd/Tz8R/N/JRmdZQTdpSaRA6obSRfIcDjaxPQIgDGWcU4AAznWE0xN0EnYj04upyHH3zJWonTqVi/+dZ7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSnWCRA9TVsSAnZWagAA120QAJR4A9T/GBcowRRN+Av9\nwq2qnNGE1KeHYVono59INi7bv5d68qBW2ef/XfsTjdBnx6OcgNUH9Aqs58bV\nuHKMCMppa3xcGfAiqA2QKDyhQvEj7ltdoidhUsZ/PogBnEhZ2kNytNVhy0rd\nZRNJ73/AXQmlGvVNdARknYStzULo+hAgJOFbEtQdRb+O0JUPwDhojufWSm+1\nGdszdQRw3HegDh4VbjKeOui6wk6Utp9gyCW5QkdroOso+qjOnNDT6HEdF46u\nhL07+hBAbB7ZWlxYvACsi8Ig6XNYKCFdTqjEfvWL/RZsIuo6+cJ6o0n0aY9/\nVMNh8nJocUVR7W14mfyImSx8YAmvBRXmNMq354fC15UcsXt9PngfbSpSO6ZF\nh0XcTarkEj5UKF/pYhJb9k368Vr3tG4Gd4mqMQk7SYT1k3GH+ttS2tvAuz7C\nw1bpItZi/iLgFc/o2nJQTS2YDf47AQp+1y5ypFi0WPe2DjKalrbnYYdDMCRn\n4nKwjm868otcj9Kr9POdqA8GUwIRDRiVug5uw8NcrlRWv3pg+z8ieUiipFqY\nXgcs6i1AR21AzwZLxN2rguKHMYiszVEgpKPhgFnUSb3/DdV+DrIKO72t3vFZ\nVBRDe/OGXv0+intswPV5098W4QcmQLbfHjlPXrPy1EO7/RdWPLyjQuWsZ0hY\nS8ub\r\n=rYyk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/button":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/typography":"11.0.0-canary.6f678a91a.0","@material/icon-button":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.6f678a91a.0_1614883285839_0.16288292542035543","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/snackbar","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0cf3e78f8ffbd559592abb5f63cc875bfb4495f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f5f1b613c.0.tgz","fileCount":40,"integrity":"sha512-UWtdNi6T3tPvstipjHrAsWoXKQ2Zwq0LIcUsu0V+TqQWGVRyglLIXNVUmSINaqFAcFtkYxnVbLeqjqhPVM2sRQ==","signatures":[{"sig":"MEYCIQDyHHiwiDxdyFNiLEP6I3NLLtXI4YkKxut7C5mhpB0s5QIhALZGKaYPHkS4lHNeO1um/kDgBcvCJKAwOA/VVWRJnsMv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUgwCRA9TVsSAnZWagAAGwEP/Rg88UvzZie1EceaGhvS\nKlCQ5IgCW5Qs4cnuljko9iNNhh2uBBKRddnXbK62/RMjNfNwqAGv/so6zlcJ\nQuROWkDnKER8OdW6hMD5b+feqIkm8oC+4noqQ+jVWKU6EUTCW4xtoZrC/FYp\nrcf/BYexO4ANazhXqE2YB44RGHpMID9go4OFauFvaN1Fm1/Dn3gmKGmu4MAy\nfpDKxrfltzUsHXNfN+IGbos4WjUZWz/UQd9r53QtJltS2rkcFrC5KarnKepZ\n7+IarT0t5l/NQprDb/Zbv/exVMlRUn10rDcCS+Kvy/sGK2bxOwxjnhC/g0M2\nxwUcGJTuKHNXpzYq9JzhlRp4Iuh8Y7ZgNDJe51iXjfYzNEGHiOFk4G1Ex0qx\nPHnMpuNJh7F4ai7wau0MsUeqSn1Aon5lDhjPpHiOefnC/nL+d1QUJIW9OC7X\nDGHCxczO46xwYMrLEFbq615/aOZeQoDjj+yGcHS9De/rdfwgOoO7B+aAXVXR\nyPgYGKVhPbWFjtLz0Kbb21OpRmmd4DXTR460RHNFv2aH932LT+/vO5FISBAo\nkHu15vFKeBAo0g0AExk5NEDEHOKhx+3CLUIZdehXAQdSl9js4nPvCM5j1OFk\n+JGza6H7PqNXSte/X0lF580XcT7lCG0C2CYSSi1l2cND/0wenNRr0vobMLoY\n5Jbi\r\n=ARxj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/button":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/typography":"11.0.0-canary.f5f1b613c.0","@material/icon-button":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f5f1b613c.0_1614891055497_0.0021818409949729833","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/snackbar","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a5565dbc1a7e7330d5e55f694e918a07ecad8d4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.606e767ef.0.tgz","fileCount":40,"integrity":"sha512-pav+tfG0ZJtGNsK9r2/n4w0AfEdMWoWqAzhvYvKq6nkfafmSAQ+7F3ttRzooFh+/U7uovGPgJgAVIBK2eLJsAQ==","signatures":[{"sig":"MEUCIQDk9mna6shLtkYHkA6nHp78hoL4r1DT0tzHUc7oDhAgFQIgR9rbjRrfi1vn9rkipo8s/G6N5T4kAXo2R4JAACMkFmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVVZCRA9TVsSAnZWagAAZT4P/2laDb9L2S3OdsUmDhIe\nfJy++kfXOXMQBSkehhL8OmsSthVHTY+OT8hZUKdO9D0UXA38t8jTZNuOCExP\niMefJ6WSvji+z0hfo2RL4YFNj44qu3JQhiIoFtMU63BdMd4f55We5eyRz7/7\nZP5AgoSxzibPy2qguT6NmuD4xNDPn54aBwphdOnLPAC69AQriV1Y7EVl56d2\nyYab3NImXJkIAzFbN8vY6SVpRbH2M62pnHHp0I/afy0+jZZOBmIrUKti9Pbv\n0o+rTH04BgrHEPSAF9Zp3EKtwpJSTKiHn7tmgcz174BCUVxTfZeWHs7HwCM+\nlnE9EkLecygkDvNjvDKMD8OX+TZvauGklFmvKA/gDj1ha1jNw/vXqVQy/ybq\nyE+AIGeURrdv13F+Dp6wOhZ5hAbvEXYTsthmKCUyxHqXPbJQqX/mLjF/CO9c\n7LzTju81gpplt0xfBuXtBYmFCae3ZvfTlVxgOVP/hcMzlwxSZNiFYy1hsvX6\nrd/VlAPMnPlzvOHOE1cyZ8n+1Rhu9OEWwKv6KOzzMXTuYxMqwMxOjDYvrwxp\nJM1pdERBdeBQOq9VfYFN2whakuOnoUKYDVchN+SBT3WWG+MulBvbs0yoGlIG\nk5xScicSjnmU2sKDOsAKobhX6GD6AuTGjcsrmxmT+FblHQI2BlVyzt+0rALN\nRsTX\r\n=MVZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/button":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/typography":"11.0.0-canary.606e767ef.0","@material/icon-button":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.606e767ef.0_1614894424889_0.5628334241555975","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/snackbar","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3940e022e161c203f06c1b7ab4529a46b1ef187b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":40,"integrity":"sha512-sPct+J5LPUzIixCHbMJi3aZViDd74tMwAHX/aWddJQD6T8FgKDH642czblnQUntI1KmcgpU23lig1AHxPcZ39Q==","signatures":[{"sig":"MEUCIQDrdIx1ucE8UdxuEtnF+azx3jaJeBEjta3QzMGgV88jjgIgL7gL9BvD2fNpKnjs2vMpxy2we7BkCyqUqgBNfHluplo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwfwCRA9TVsSAnZWagAA3jkP/26Y6NYUJx1psJbnOhxo\ng+5/+/T7qrWivCvP9sj1W2bZ+3/0nVgZn25rt8sTj8JfMBHLOJex0J1VzyYe\njjfIO2071Nfed2MGJWeAkBavvx6+7+WgAzhYi6Yy67R3VNBg2JvNFGR+fO87\nwh//4/MBcXM9NSHpcBN7u8GIwpvAflac3O+Fkg8mSzOjfUKZBvwY+fc6VOqo\nzH1UaG+vJ7XixhfbU4s1AzHEZ3iZ9JWjfn6JTT/TRgO8y9lxndZgWnByUvYu\ncyhYqDKb32QAiN4xI4bFevXl3CCSDv2AJ6z80SFdSUOz4ZLooWvRR0frTHoh\n8ngC40LriYNRrmxk0iZiRTaDISPG8OSqY3D5vS2heCs+ZhFzzZFB4M8jgHel\n5iOG6la6gQF4VbTk7kIBgQzBW6VjvHsNtRBM6NCbJ/h2HSUpHlodfYaAbx1h\nJeC6dgQnZaUcjxkMBuFMrR5YqQDccZpnpSf7Vv3JyxtYJEEbUyaxgLaqbECc\nsYFlBGvMpU4cZRkxUijYTeEQ54dI66zqpcMUcJSqa7VHf75TucNloG0h/f3E\nOUMht7WV1/Pkz0JxYskLDjyl/7w4yKLaYLhmeE/i0uKtbnXC9WRWeS36pfDL\no54bZidYya0o6hRsm7IgcOM+ztMxupCjzwe9DoUOPOqmMs/oeunW/uY8BWrf\nZhOU\r\n=d1aA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/button":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/typography":"11.0.0-canary.f77a4dd1a.0","@material/icon-button":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f77a4dd1a.0_1615005680053_0.9975615666799731","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/snackbar","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f08ed69db68cd3dc59e2113d3b834f9a8b66b56","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":40,"integrity":"sha512-yasSFsqTRHjbtflYwDmXb0f3TdUVYyrTsABy7o8Mw6QTA/zUomZv+7se5SiN0CGTb9QrFEhsQJUpSSx6ih0yUA==","signatures":[{"sig":"MEYCIQCoS+tjPue7UlVFpY8EIdq/2TOftakLjLaV1mYdNZrDigIhAL9Dw9Bifqv5L1ltZAx6BZGMoIT4RyJJFXlTbHRuufQM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqkLCRA9TVsSAnZWagAAiSQP/RELmW1O/ue1zGx30xec\nbKZxvW630ss9rYCShRGywYDONoZ+icKS8nN1Tnr/M7bAP58SMUw7oGw08PsT\nCe6rCh9DqXH25ICX21ALAfQcdNfE6Q+m6J35Dpr37HdeuhoM4K5D2aiN22cu\nKKR+JawPGFkKTgpbgtHIZ0SDTfZqQFaA96Needhv+vwuihuavCeHKH9JWjPH\n7S/mHpgmt+avwp6GbbdK8/gs9EgqyUEyMJwTYqpG4l6GsFGPQ18c/TEs5HDJ\nV1gYf7TkcWmgltnk43S6obNCq6wV9MF3uv8CkRqq2BsYuFXtKf2WB1UPmB5G\nO9wWLfD0TV/KRMlKx/7qclkIY7mpBqFZaHN9Oq0TvrKnqGNbJNnOZhCRr/xC\n0nxUm19pV+fGWWf0aTbwvR7VhnxF2Mmih2nbgaWHc79wTZ6qbKXPPulRSnW/\nxlIYjF3oxK2g8dNLEDZv+wKN86JOIEuxTwHRGaQAF53emu4/G2n1Aw6l+FDl\nzMzaLquD0z4mqtiMoY1NvN42Rn6Q6jKrOS3y7fla7GDsC/Jd4e74C4hAyI0i\n++7sQH7Bg4KoOMnv8UMnyTK2eLDn0HGIawmB38CxpM4DoQs4ylcbhibOoDnY\nAnkV50G1oVp+nYT87eGr8LVj89cjJqMHr7wXjqLkEQ0R+YUR1yGbg+oPn0CI\njzye\r\n=4Odc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/button":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/typography":"11.0.0-canary.2d6ba2c23.0","@material/icon-button":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.2d6ba2c23.0_1615243531026_0.9170304104320943","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/snackbar","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"560c070b7f804e7aa6fbed421c7634e7a46b2b08","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.7522dcaca.0.tgz","fileCount":40,"integrity":"sha512-6DkL+zdxzICw0SO5AurcgptPKVqgGkS2tdGasSsbbjs8Vjz/AR8YxvQCBw12kz62SxlbLCuAQlRXy5A2L5o2Eg==","signatures":[{"sig":"MEYCIQD7sRzGMjf6K+mWVXj9nwfHWToQbEYgmkhg0wCQbAEaMAIhAPsO/gAqptiQeSu5Pqbva0XZr59GM+ku8DF8to3idcTZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsFDCRA9TVsSAnZWagAAFA4QAI7lIO2TbdOk9tvkM6Am\nkxWIxUfn0G1vkQ7Rh3hxe/SSLF3VobG75U2wANm36t86BFkvIH6iyumGRSBZ\n6CLRjycyMf4TRihMC7Ml/TULmBP2LCXo1JQIcqA7W10V4YmeG9kYAYoW//Il\nHHqQnYvhfPtWkwV/I/nzZiviSFMVvNSPoV00j2QNYTwUcDSaHz5hFruu+hxk\nEIp837qsPDOkxqjsuhs6u+WrfuUxsgSuzkMU0OUQB4QnJXPeiPo96+tX20tN\nJ2lYeUWs0Z+EtJxqsPAI9Dk5dyHxKXTog26QWFA9pNB1cfy7lS5dMR781c6B\n7dEMqgE6NU7LO1oN7ka0ajZYfPP2dtUDDZ0vHi8/G+pI35gGHNEYZ4pKO48c\n7rC6wQwC2C4dDomTAt5ztxG7YOXm2RHcNcj4Enm9HyHutAIPVq4sepJgvMA5\nwhSyXnnWooMqKcEsii8UgwB5tKQUb8hF90kYFPbRfvcITohGCduby/XJMGV4\nSeBfiw12/AgEozd0vCx8kn/0+EUaxbU9HFuPaknztC5ifdIBGFxegvTEhp4m\nnTj4AsXkPiIyBboUNMo1llChbf0LIHwW+2P73Ic+5vXXD13AUCyJd9uIELgX\nn3G5pbFJRmF/arOmuQXWIXF+/WhV2RZwGyKo269rp4oF+RMQ4SA3pvoIQaDa\nCxx+\r\n=qKeW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/shape":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/button":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/typography":"11.0.0-canary.7522dcaca.0","@material/icon-button":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.7522dcaca.0_1615249730837_0.04276657765273306","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/snackbar","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78d43bf4a28120ac7262f1ea12aae65a4d5b725b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.5c0ab7401.0.tgz","fileCount":40,"integrity":"sha512-iXawEqHiKWZprCh6GOffew8QnWf7n3Yz9n0ZTAJk9Pnv2PBe8kTlSP/wblJmzf4JskEmLifCNvo3kJBeqtjiEg==","signatures":[{"sig":"MEUCIDgF8JCkP4EcDCssi5Ni1QtQQKF6Yu3gzdPlSdcJEVREAiEAlAHm+8KkK3LfuMno9WIUzGJO9bomYGC4DYWHu7i8I0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/x5CRA9TVsSAnZWagAAF+4P/1o4iaAIXlIOzgFncD7z\nLQla3E5OnXFXhi458yfGDu38p/FlMmir+RZy5xgadEnzyqNduMa0cm+u7cpo\nwqUlts6D+uVwhGK4wv6thNfkcQ1FOqlDMTlo+vGi+J3AeE8mQZvC7uFOI2CJ\n9TmRWs80R5Us822C78nqIHJzrq+mcOp0C8btYf1Cg59jkHv2xJnaA14DA3TZ\n23aANSdeLxYqh2Piv22jAs6K+XhIrgSq6PQ842GW3K686wRIVX2PVtKLpD2B\n+qZEbxYmf8NoAaWu6A+jYJFXumZ0n0GEY/5EOqqk8kJH5so9LOZE/386E9U9\nOZj/EREEoYe5w41pzo2WnrK+r5I/lrshP64x8e8Ao+wULeb9td6TTKlMw1yP\nV1zV2pkgZORjQacYjyaI+TxzIZAMB2btIadReDDVbMuLRnG26FcTyxVXDXBX\nnAQp3nGzv+N5t5AF48JE4ixewZxgAvP5U9IsD5/81byeI+9ZtAn4BEAXV5O7\niVOImsrUkX4NEbcV+tV29/RdxDRqFwYKtb7SNRxrViSBfZM9YAKyEPqs0JT6\nt/fqKzh8lUot0uLufKTpL3F5A4XWyhrSt0YSN6kSA5fX5Ck/Ux4zbgJpnnQ2\nlo8RWVFMYcMsuEW1++9ws61hfYL5p5Xp1gwgFjK4PvAl16nIZHY4m+Y6wmgU\nLFxd\r\n=5R8x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/button":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/typography":"11.0.0-canary.5c0ab7401.0","@material/icon-button":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.5c0ab7401.0_1615330425120_0.919651440652173","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/snackbar","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cb6f4c44323a93ced5aeb79434187159152358c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.59010b6dc.0.tgz","fileCount":40,"integrity":"sha512-FTx5l/JJtpjkRqozO98lrURl4kxZxuYkCm8pMXqraR4yjQmd8Y1yO8iySm+ydZW4L6X4AR/jh7GzGroMP0s2EQ==","signatures":[{"sig":"MEYCIQCz3VwjlRxt0aU8t1VcRjjwcROip7aN+PwJ9kG3wkBEGwIhAOV/YhdMlnh7oUaXFrdABHsQza8c78YD8oNXtDxzXeA3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPrMCRA9TVsSAnZWagAAlboP/1HvLXrsq8JOGwWVeIi9\nLEP5FFMdcNNJ3tBKOGfq8riJO9hE1RnAGajv16bo1ZcF7cNCxOKPTVJ2u0Ko\nbNxtZtca97KHgzx81YeUi0oAk/qSFg3syoZtOE5dS0zrhlWS+KBi4ldGd9ko\nurQhdtAeoivGwp2bZY92M+vCYjixIGuUpWErT8ZJiEQOdpHR6VMqh36DvWdJ\nluWBtlXhuJNn7s18LveefsbAH2jvroZxBNVW6EXXjK0sewWtvLzhMXBgCqep\nmFklCzYkwwR2O4j2edkoONhPiWqwxUlteooOt4ngbTCQ2KcwVIIv4vEXefap\n07F6KamjsnWIaDQNzKkXK1cxSr60uO7FPMNhKwzg8dF+bI4aFtlcwSb/9yPM\ny94GTfXKCrXdstZ6yjrG7LrfDEgGnZdpZTRkDSWmz4UxKzfDPjXbVfdktxmv\n1VeDWzSpvKD0PZaSxRhnVuyHkcFgij/+zM9RRJ/k71q0QLiYEwgQFxidn7oe\niZJfl0MVYgJKDjuIPzWOZccUaUub6NnM7npiZADSJUqsZ4CW/k3R5OHgXhNB\nMA6BMpYA4SI1yGsJjWepd0XLpt5EmhVxwbdDZLRKwzLg3agN0Rpl9Trn8joB\n4UnhCEwa54hE9+ZyFCIZh80ozxtywZdnpH+gkHS6ayjcyufKpQjJknuEbRl1\nIE9h\r\n=8hyv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/shape":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/button":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/typography":"11.0.0-canary.59010b6dc.0","@material/icon-button":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.59010b6dc.0_1615395531751_0.05416119330193614","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/snackbar","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa65066abb2f14e7dd31f2816e9cdb937fd6db78","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.9e52f5544.0.tgz","fileCount":40,"integrity":"sha512-AVzXVwtJhVAyYFKI01t7x5gefsfK9WoWkRYrontSMFT/7TYwyg/MpIuF4+Ok1EEDTz3iOssgzT3XVmC99IfT0Q==","signatures":[{"sig":"MEUCIQCXMXdCLHHKSOptcNCRRgIVaKOhBGiWSXW6prIlN46VHgIgFffKp2R8tA7mgzAwHD/t1Ji1WzzXT+HLKen7PlXcBlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVWlCRA9TVsSAnZWagAAegQP/32kru5+ZlOxewCvkhEZ\n/KNGFV9Evkpty/c/SvbVZJw8uRhlXAI6d7aPqr2PHedbmwkTCl/V43QeeD46\n6P7yVg+oA0ez7GluumYCsFQFZj0Y4tp77pixVb87TBi4XeexWSQ7Qss9lj52\nl9jxdgVM34jM+tL6sMmuE7nFv2MRM54BQ91/2m0peqcjvdSylAcW19/RaPIU\n7wafvWeEZt33mtb5f8bU798PrnThuDHBoZQ855uQGfAndEpD21oetF7HpR7d\n7mWbnhT8VfGO/B0LxJ0L6wOL214bC+dIAsteNTNWOJSqDF9IirmalXEzIyNo\n+/UOKt/xt3F2+GEELBcfyTbtP9ygpExpBCEQYE3bZpU62IK5kIbRAapuqMTT\nJqKL3bfDmh0xDiGyCO11rabKbdEvTbcV0gxdfuoIqffVWZYdIG+0v/JHwfWB\nPxQfvqMju18ML7umXiSyzkIBHUX4BwXfQaqv0nU4RjGDwwgkCjK61Iz/63ZK\ns6PBSwQ0Rog3RKA3uwY5ayhV4q8vefLmX+DktSFdL/fegwod6M3u9D1l4F+3\nZv6B704G8JPE3a6piXJGO6FB8cGr17kE9ylymYPSnKTkstQRovU2MGTGwh4C\nuZKpHpMDwaa4XRJIl5uT7GL0jIt0OWNrhPqiy2QWH7Cs5QTD0HZm0uu9oN9M\ndeKx\r\n=Ymm0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/button":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/typography":"11.0.0-canary.9e52f5544.0","@material/icon-button":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.9e52f5544.0_1615418788944_0.1834351127158147","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/snackbar","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f8a82abdd14f3f491844ba8444a8a39a0af8a42","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.a678806f5.0.tgz","fileCount":40,"integrity":"sha512-1Q1G5EHsOwZAwvbo8Y89Yh9KUgmN2hX//UVDq4V4NDXAXexawhNciNE4UQQIzeSGOE2Dg4AhfRYFDMvm8l5Eeg==","signatures":[{"sig":"MEQCIAdcONx6CGrLPpuQA2HPV4Fio/7IVRavAvlA0hCtuCeoAiBZ6hAZ7EB0UmJWhe4DUYW+iA8FbRhyKtbhmzsBZ7XWDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXeSCRA9TVsSAnZWagAAxUoP/2mWImIYdPxNwY1QJ9I/\nuWJHxgdUtYIhfhsAkebZm4QLpKQZuUInsNfmlpuWQfgQAvzVPWTR7dxg1/Vm\nH/P9Y32+1HQSgM1C3k1xfhR86sGgDS1jzDqBg/lDup29h9uBIOSBIDGoMEHP\nK00gLjsdvR2yuF/NlXk3WjoE4mnSUHmwJnBJkDurPk5KHwLdylDZjPiHWz33\nUnoKpn5c+4yDOQiKFdun5TsRIbJACzoTQGjaHhri9GgaB8r4XsIOHOnVNC3O\ncgZ1erriwEdhHCFR51nE9A+gXc+Cl0x8Z/Ymlr1NpmeVSWEPiZoVAiyDI2RB\na8sFOUx02LY8XWkzzYQ8NAr+AL+VdOpfysD1s2/O5zv+y2+axYqMXZX+gtti\nWwmiqhHcWmMGOQV4R7dTwRoknsgk1tLhnrFrmMIXui4UNs53CkyyW3m6g0ci\nk8UF1vwOkn+Vs3ScEA9Lf1k4Y+4UzmddTVsTRUgrIzHMiGVbR9t4nGEmqxpn\nnLTYv8kgzmwIhP6UXesI2Zxr/m6v5F0bqBMh9ZXXLAWyrj9pXid5EvxDkSlF\nWNxZHpLKqFF12omOt+0mL0jMX3BWzYnmo8Nt4N2n37dux92PHcMPKZyYoDyA\n3Wq5MRaG1vRLvgw5k6MCPOhrtsw8wJ1IaanxuW5YMH1GCyfgqWMkmWz0jB05\nbR7y\r\n=IKKG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/button":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/typography":"11.0.0-canary.a678806f5.0","@material/icon-button":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.a678806f5.0_1615427473523_0.9756960764342077","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/snackbar","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93fafe826f7c19f2ae82c9dfc9b0a3f0e6ce5473","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.b2d22df5b.0.tgz","fileCount":40,"integrity":"sha512-FotB/v6dAb8aC6DTe0kXYau4McJHhg5S662U2pU8hXmehMF+PDkX4rzHQJb57p0WQxV6wvkWmTDyCU/Kq5ckHg==","signatures":[{"sig":"MEYCIQDYjSOld6AAIYcCvz/jjGqlctrGQqvEmGEPNyFF34seZAIhAM47U2iT8BFQDyeJqP2NWSpRJaIYDEsnQ2cmVg+j8gtO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk2bCRA9TVsSAnZWagAAmqUP/jBo8IbDCmB9NNoDyqxd\n/QaCxRoubFIch+c/L7k4jRNxSrpeunLXEGQgQLr2jltjIEG4pCOgLourwLTC\ncjrnvcPo4wV1qDopR8XO4M02jLxKl8FNdfrOIwY7BxI3stl0xi8mXeYuTJae\naWizj52ClPo1I3ep8X4ZegwNNHc9oLoq9wsFLxwfcd5jQ3KuXeH1qQ5xtokJ\nLibbNj3uA0ypKzBWy4v7OwsuA/7m0SdGwn+KSRzfvXBRW+H22hp2zATWSpMO\n0HzWPyx2Gkkn/qrg87LU6C36YEs1iLvGZckjX2uoQkwodwaMiWiaA+E2LDac\nQsQ8KML79Owy5jpi1q25NZ8tBgE+LFySAk2/R8PtqTQFaLqdwojfkUBioD5r\nM/RPyS/EZnQA7GgRiVWKhuWYp+ZJKoDlnhCegszrNOJlcGjcI12jFbFs7Ojr\nNl8ACBSOkWYXPRVVw0zGPtx6hMWBGF6YY5O4zfM8ai/Q6y204/GrgJGe8Gcu\nsu/N/4+g74rfYvcQCTvbvKQm6y67YEZSRvbpWhDN3HAEPNhXAW1KCRCJl2Jj\nfy0V/FS+mFKeMm1/98cg+zPy3nZiDIx90EVUKZnmdewl9juVwJj8z/BqqN98\nNrcQGNmdOY4N+Yx25NN3FMExd5rO69TfoD68BYt9gf+iYdx/QMpcaOJpTgw8\nljOi\r\n=RfcE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/button":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/typography":"11.0.0-canary.b2d22df5b.0","@material/icon-button":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.b2d22df5b.0_1615482267454_0.33161414693954216","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/snackbar","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d678d8721ace2385e8d25136c2226899e0fec2b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.81911b707.0.tgz","fileCount":40,"integrity":"sha512-p8Y4ENSTxZMV0P+cecfS24gk/NgGKoJaKIuW5wSAu7wYyJT/hM9KDRh9rBN4U5QPo7iFgeKElccELitVnwQTQg==","signatures":[{"sig":"MEUCIQDNzHAeXV1w8TZUWAQrXJmPAuIs5ui8Dp8Z6Xhn6CD6HwIgIf9Rv5ZODqJB6qdu+2/CBQNMtitnlwRJjvTb9aSXptA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmBoCRA9TVsSAnZWagAAg7oP/A7mvtOaKASRpaFkGqXL\neekIA22gUDeefXn8Kjqb3AL7hIkrV50N0AfTtW7euqsbFqjA9dD+pTBCy8nD\nbMBQWlP8eZVPqfTEuAAvqV0G14KiPewQRlae5tgRQpzn7A4RKHvHQpGqYPpW\nA7vMSCUWl3Lonv/BkyQWYpMdCG/2Qo8uQy6yVGqqR36VwzZBzkFzhufztTka\nTtS9YUCcsQFJBZPrOqJut12+QSV2OTlZSy10YoYzNkH3eQ44b1Apq5X5sqbe\nzP3yaf+URVnD+ohe/pqk9q4eEgB5IyS9x3bMRxavGV4hcnavt+Y5GQr2EDvg\nApOndfAIbHIre6nhOHneH63H7ENjyYwHuc1BeFMCYKSb6yl2D1hx3yBoIKNp\naLceDYiBSJx/rH1O6U+LNlZOAsVYlZg1Q2BEdfwmoCn6R0xrntmO6E4RYa6s\nfRD4iUzTNyXfwdGhetKfHx/ZA0W5Wh8nLMws2n9DqbiukQSGi7ymui9vqoWk\nO4djMW+2VM9XpjUW/3gPD/fHhh5XCFWH0Lv0bPxktdBMeH7B5rVTdElfV5zP\n8kgg2U68e/RckHwmjBIY7y6MJmnl7rWgTd3SACOf4qU//4DbQRFXzwrliupd\n0VbQtlO1Gqu2NVEy+5inONO6FehqEpczZk2KMBOo+CPfPHp8s53ZUTqnXa3G\nYzzN\r\n=fWAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/button":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/typography":"11.0.0-canary.81911b707.0","@material/icon-button":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.81911b707.0_1615487080386_0.14860404762194745","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/snackbar","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"876b7cfaac331d4c3692045b53217ee2a3990767","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.9eeb35c38.0.tgz","fileCount":40,"integrity":"sha512-SBxOgKUp7v5Vq2sa7wvkYHR3BqsGmTB3LI2/B2w63Ht7j6ESYvqCZX3mrex+ptPBMWkvqwKQxxhXDtAC6JwViQ==","signatures":[{"sig":"MEUCIQD20fKT5vEravUSgm2PJw0cbRs2LBXg8N14e6PoRMwdOAIgK/z0Hvx8tIyKbZZCRRS3qkJlLWnMsh7oHQxlbTh4B9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnGjCRA9TVsSAnZWagAA694P/jS2hD7cQkGJHDzd5aep\nl2w5u60xIJEL324uvq3NbYZaN70autU8aWc7Hdtdx1dM8x3VeGwLH0LqHOjW\n5fHWpeiHTr4qfqtIZw2vwGLnhGTJQWFXKQ/zFHYWyuBbhuvZxuxLoHxIJFOq\nh0L3Gb586dr9xxUW47WL0c+s+GYuufOXBRCTiBjq3ELQm3asocLZMXiz2H+J\nANO97p6QVXVdW10BN9XlyzpRdes3RdQc83fEn2mj8RGqIN8DVCYWU2lxcLXF\nBAytFOci93zcNEwl17PbI/+QyaHAHDcPueq5wCfU+HqjDXjRtjYD6zqIivlE\nAHqIPj9LuPwxzkozsXfMyo0IDf2LNnl79UVnq65+N5l0TTcaQKiZfJiB/oeK\nrPqwAVUH6SJnNTYPnzLiLntCP2YtCKX1ye2MwcvhiuIYijpw1z/vZQpWdiOf\nGOS0HUnlRGBTpWoXc2c/p6h0CTA2M+ZLyfKsBVIvz5I4hwlG4jMUrCKYslbX\nBLEDB+xxuc3OIyApzMdJESmIUYfq2mIpBwj7b8N6jo0HdJ4bAz+viZAQ2B7s\nmz4zsLYkHhamow6Bl+za2dexVDGA4dSOhyvDC07vFn7Y3bH/mdwnaAksvebY\nCT4SujpwQTke1pemdr1TFUfW3dpw33rn8hyC8dsAWUY65Z2DU+hpmqohRpa0\nCsUv\r\n=WW0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/button":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/typography":"11.0.0-canary.9eeb35c38.0","@material/icon-button":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.9eeb35c38.0_1615491490921_0.17248835084208736","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/snackbar","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e4f5b3a5244fe961a71ed19d3bc770e6f8dfa1c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.12be3e95a.0.tgz","fileCount":40,"integrity":"sha512-WsOqFx2gUsLRWJ5HtaL/dbDpS0YUMZeejsQbMWla7A9/6W+EAzpMZxqnG3g6GWGs8qLMP/Jf7YB4wE5rxbE83g==","signatures":[{"sig":"MEUCIQCmdiJuXHWzc8rHTqs2qHlrngna/riZ/bKkl+eqdFFR+AIgH8jeg6d115JaIrDCLrRHEUDinGTyqlTdqnWHdOZR/z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSndrCRA9TVsSAnZWagAAi8UP+wbu8XSToz/hWTBn+9j4\neYc/0uqecoBMofnBiGksmIxZ9hu48LDhm+VIC+d434wh68MwMWpuMppfgD68\nhLTVQV7/u/D3QGrK75Vm2BleaMONIYzvV0DAdNB3WLHHfEEvflWtVOxO3SeX\n3Di8y5whP4zdhqaxJWKChHLUdDOGcWlPQ8NCC3PGn5avfaDR/MkVwdcDzURk\n9W+b8pQmMWGvF93PWoeh0ojTMNSqzM8vEPLSno16f7kwrAvz8FquULREPeIT\nwTzqMzeXY6cTrrADGmeU8dHhriNMzHqvLElTubv298uTuFQyYfHMaOBdL1kq\nkGPjUEOkOgDUC5NQpBntD4G/eiSC8gHNltgylG7HtS5JEgKOBhTMDmCSmSoe\nAWVZ7+//jbzHcz+uOXSndzqIYrCdzdW8p7XBCnOmnoLQABd4GSn7oo+4spt4\nsmke5zLfFp3+/mRWeBkxl9R6JJaD2ZaDZUSobN1EGAhKZRr3cfeRpktUybKL\nqCZm2dKNYRNt/ZPXgs8CgOyeiRoAT1yK7xf8mR70Doe4Kd6UoTYguPBqnfZ8\nCx5DhNqYy0W19j4gSj1NYXzVF7bRpF3aYnxgmh33xIBnBZOv8hNLrIxeHRwQ\njW3oCGj2hnR/NeNr/MV6Zdn7Au+OARdPVIdudeAmBG3v9gs5TW0ucVED5HeW\ntbcR\r\n=f9+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/button":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/typography":"11.0.0-canary.12be3e95a.0","@material/icon-button":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.12be3e95a.0_1615492970629_0.5348820334834214","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/snackbar","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"695db2567d84b4cdfc746b10b4ce24fb713ddb37","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.e683bdf4a.0.tgz","fileCount":40,"integrity":"sha512-Qkw+L5Hv2F8Xd0zUtzblcrTqSG9lTQaxnX6uZGpM1xOTdukdXIGNiiUcwVl9Khl3T9aLegd3j1RumEvJebA0dA==","signatures":[{"sig":"MEQCIC2pR+8KVbWqgfuIvO7Z65QMlR6bw/v/HptdYwBA43l8AiBGViXaj1sjsyM2JGlSXkprfJDcr2+5LpdbFAhe8lysQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnk5CRA9TVsSAnZWagAATC8QAJRa7b9eqxy0k2aA00Hx\ns8Gmlc3/LGDoOlJHW2Md8GPX9WGzni88XGQ2+lZzMbqfOR8BX27rj2GvvV54\nhoJqaq3oLlKCt8ALunJZMXMtul5Jju7IKEPtv53cl+1OXrdxuGLLOSQsdPrX\n2emz6BWnRAECJcj/wuGAAfL5FpClQRsElv+rsE+tY2b3Onh/xxE4XJVQvhu7\nuQbt63iub1OEalOAWgYCtqi2mcBR/UW+xKmnsyU9+W9ff4ZAJ8PQS6yeEZmw\n+evBDLZv1wkkyvC1nsTxTqrXatiJ9wUKwUfyQO5+vmu4TmHvFChVIRrcDET4\n5jiT+rY+HtLJNKEcc3IuEOYyRGszFJVat9FnvNjneuQ7/aghjGW3OvRtVLpy\n7mDk9VU11Pojpg/noCtfdtAT+zF/3bVMj22S67EFA7aF+BvlkPlKfq2O83d0\nwZht+Z4qSLDIE+Cw5iEOZYGfDnoyxzfm+yRlrDttkXXVdGV6pdLowI3ofN8q\nlU+Zhmfw02JObnyTS/BK1GuZWub9ZaeSxjhXOlL5bQ640Db0F4ldK5Ros9el\nmw0OhzWdW2jj+y23WGTr6WLLcZT91zPx1aZlxx9iGcy/Rbfk7YJleXSss0N9\nVhihjHinI9nQiSnrNJ+QXq2apcHc/RPJbb/JNJluwK+CYq2mjE6z3iLE/LEO\nyxuC\r\n=Nfa8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/button":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/typography":"11.0.0-canary.e683bdf4a.0","@material/icon-button":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.e683bdf4a.0_1615493432802_0.6253346447718273","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/snackbar","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c399d34bd7f41ba439000ebb4ccb1261ad722ec1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.a07b6d486.0.tgz","fileCount":40,"integrity":"sha512-W+L0ADLaLrbOU6oL2RbgTNYnjs17du6KRBGQoXZlAucBP2zEXmqHMx8GVJlidMDXlSl4T5wBvlG3ytgEvUj4kA==","signatures":[{"sig":"MEYCIQDXWQLjT0eyMQ3IxzO4a0+CRNhJkCLPTFdmyNO+5L+TuwIhAKakPGiLEZpv/qTbnqPQYRseY+u3p9qKXlbUfb2DitD5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn7kCRA9TVsSAnZWagAAW5EQAJ9S8JaIV17lWADLnMhQ\nsy69RkcleL1Nm/gTdG3BgisaOMFwfmGitDmuUF3IHej+/GX7OItEcq7WPn4n\nmss84Gp9dg7tZ2d7F/UypeHjfD1GLqaEZLGssh+dq1J+Pxel3jKWdEn/0nNO\nSh/Bw+fMj1o7bj9jE8RXGbikgnyn7OeUaUeGE/7ZIpn6Lg0rJDBIerVGb6Me\nRwhnhLGAB/n0voljPM0t8gzqUN0BqFPtDdl0xgSxVNn4GvPRElJE6XqynHKF\nTxLS1EsZbJnLl0aq5MgrtmNUPctc01LdZ+wZeVcPv0HdAHCLkmLmYZg3PVig\nvIx1AQ53j2/+t8UwEz30pEu9T2R7SVjJWmmEdW0GFzesc6WX1w6YuZe2BOVd\n6M/2+vvbavqjMnM60kq0ABz4oX7AjEpENeADnBp6QGfMQTiO9GRbOCETCMOj\nR4W2uCgYbMKSqNVUXdeXcnZ853g1WMkKr8k3xcJBMcPm7OGY6MF1ZcxuVqW/\nxGcRYn2m9Hdti0mNLVKRZRqUQ/2/54H0NNE7OEQC2A0IWiedSwqSoU4u5b0H\nOR/HQzP1FH8j3hVtXxngcydd6Li/hMpHWhTEw6JIg5PXJ/jQFppGYHk0igB0\ng2uQ5BMc0PXcEyX/A5mzzsDb51eJBPDBLEIFiSqOAMZ3fRxlBKQfDJUV6Jls\nGP3N\r\n=4Mxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/button":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/typography":"11.0.0-canary.a07b6d486.0","@material/icon-button":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.a07b6d486.0_1615494883936_0.6668835819320917","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/snackbar","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19806df66f998c6e0c32dc687f008308e52d385b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.1e0653477.0.tgz","fileCount":40,"integrity":"sha512-VQ/l9pGHgKv4hp4mzPAEE4+k8AIB9N9839huWOd6gsg3uKn+2fGCc2TllaN7Dr8uq64F8n6E+9lcDbRJnm2WCQ==","signatures":[{"sig":"MEQCIDbdh+ICy5BZKmrY4y4peDDbTLaEtlMmyYCd5pZphHuBAiAzTJKqe3/+bIsZYbu33TipTHpVG8NoxVngZNRZpN5pBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoCPCRA9TVsSAnZWagAALRYQAIlSbTiyshuZVxBsV8JB\nt20DvFrVA65qr/U6Enw8DP/zu+qHsB2Y5mtiYNedcsy6rWzIKwjRUrxXyRwK\nvhu/B/j9kNYOHGCTTlQpPlmbO7fcoRMDknw+HGxxCIkG0YHMWROIYzGY6eUt\n7H+Il5Z2GEhjV50v0Q93kDnJyxXKHltOmkmxS0UnaDUVdECIRmPVKNqiewm3\nGokC4L2nlkdQhUYn/CC+1u782ZtDDDqWxk23Ww+zFdfwkUk7pBh1wectS/9c\nau8Ui/VEOvYTqLoGpHKhpYw85p7HVdbUfX/jOxPYBGkUYKNUHDg+0p/7GcGq\n93FeL5JXvgLvJUl4YdVdu66OUzZm2GVERzGqP4CXVt2MPY28PdrytgSGnlM/\nYq/REPf1URzya9l1mcM1MkxwR/pEyJLzUvbX+7HOQ2UF6aR7wQhDm2pGj/Ys\ngJey0x+TT+4BUlsFjYcSJbvs4dQYxURoIlHu+6hgHRsDCb1QwjQt/bc8SblV\nTz+wGUXMDyqx5OXFnKEdr556RM11gG3no8YxW7HVRgvplpBySoNuthG3CgSV\ndggAjXYEpNGXPXg97/VQBYUDINPrG5G3rOLzAXi00bDOsEHPHIl8gyN3Y5cA\n69xxlWn9VPMsA09Kzq7rQAAkN9/Ql9o4TaoOuF7ttHTetqvmh7yUV/K3Ku7U\nV/AG\r\n=d3DT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/shape":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/button":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/typography":"11.0.0-canary.1e0653477.0","@material/icon-button":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.1e0653477.0_1615495311417_0.2883605130388016","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/snackbar","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f822d107803dadcca29e224b1e84151ab2e491dc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.148e8cfcc.0.tgz","fileCount":40,"integrity":"sha512-E8zJ1Pww3X1cZl3LpKOXaYZV+0QxS74T3dFAzk9XWBkM3FfHq2cS8Tzz8zzKELEAAOqJpEDVJttIn7Q9OBfntQ==","signatures":[{"sig":"MEYCIQC3D4GmhFU4erewMaByF5TQNWXAHRnKtPJCNzdrxlP/cgIhANU0lR0eHhyQzPpLCwecFjjCZ0OvKb6S7Oxj2bLKWzoo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp2TCRA9TVsSAnZWagAA8DEQAJPEKDH/7TYOEFkMnolN\nfzH4Vbk3DhhaqJrSWaQvWUFHBhgb5xugwYyr26fBnoIRfBEONVIxDEjaKDzu\n3gN+UuL4euoB+qHx/4VUsl/csFweHO+QZ2NJepnCNHvCDNN5Ffg127FPkks7\nw1R/nljjtXCEvuLpkRZEyN0ioRMsS4bhXyqafUpIo2f4aolB2iITqb+u3QdQ\nFibq2aywk9IwBj5RdmrMoSMG4X72p6/R69Uk4wq3pppHe5www9wJTBF4HQ5n\n8EbhEfaFsqy93MZpLUK4hx+g74bm+n17Od4D3G+Z0+LVTKUKDC+AykTji1XE\np0I7OuYuAapJQSJkXRigoaJmom9j840N3JsXEvjfsKJg8E98mHRWEKBOTbFa\nxGFUT/cWvobaKUSdcqmS2VHvpI+tVR48Mmx5Sko55+nlWA3NpXjyicinUFmP\nOW1h2OX1a1pDwkuk84sgEQs03S4VUdxIhMXrTtUaayyJUAEPM+WxCMB4xlth\nMnWgQFxmXo7GBk0biySlKvZVQ8n8weG2l1rn3ryGr2p1X67ULa4hV3XODPro\nHgqxWZ2bwEL2Eps5RG6v8sXXegenMoSD5/htJm6Jfi53BVS5YQ777ZqsWZNU\nVE7HOZJ7iSqrpXCKB6kjpgszPptZQR1MDyBq9IV/4CpV+gYO4H5796gE19f5\nIgfY\r\n=b90B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/button":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/typography":"11.0.0-canary.148e8cfcc.0","@material/icon-button":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.148e8cfcc.0_1615502739015_0.46194025423892904","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/snackbar","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e687cc995c57c76e1b6e1d0135b905df146c5714","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.73a227194.0.tgz","fileCount":40,"integrity":"sha512-X6Hsa1BKRdi0CME5jzLiDxbBCdCZ3c1S2607h+LyaDJfX33YCs1H4IoR6CQtVbUKMAGfo4QwOjw80sAOe8pTSw==","signatures":[{"sig":"MEQCIAGULw8uyrn8idfXKm13AkOS/25UwtwzQRsE/WeUrr6pAiBg7GFlMIk9f90uWemm0TYFOwsm7nxPGVNkaFFiJXGCAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrT4CRA9TVsSAnZWagAASZgP/ArSJ8UMgUhRAMyHEdfy\nifwDqbyoRqAphsIHsWvAn/qAdnztW5i291Bg4M0iBduL8hZCQwEkNOo/uCpd\ndoUDOTTfGN/WsupXMVm6u+Og81nAlblGhaTh8CPYZyC9kCwYaUuuotNdr+Hy\nnEmVWgtelYzoav81i3CO7qJhFRwrO1fQyMNAesHL4mHFUh/7w/Zb2OMjrLoW\n6z3C3KijnXnmGPaoN0pJYOmmep5BnqO01qnYkROSm52ctvACMTn70NTGyT7t\nPjEeDekM2PXUD8I0BwZVxqpPwcCsM+QTK8kFw2qNIBiVtBiBlmFI6oF7f8Ej\naqSP2qm/jsAS3Uiwwxhf5dtyc7COKl3yottx0Ph0UJOJ0PZw2lUO8Vj3Ybat\niY1GF5noRQzlHgayAN/z5yKUbtziBwcrFYYkgbsUo6+Kq5NsvDmkb+7ZLbdz\nhLQL2si5gKxAmkLZ5RfQh9IAUNIgpFFkDzQz2OPgjLlv38qUqfroubE2xapO\nRV0YporG5LhIo3ZrYK3ViKdAcBaO4o44m/s76QrmpMT1ax9M1yoL0DvI0OQx\nv4nlX4lXOln4tCo/zP8kDAgogAyVgCuwsPDQHafIDdshEndBDSctJMo/GMfC\nkPEtgmPdXcH8xAJcN794Lc1wL3YYSMZliVyzdhQAv5tFeECo1ZUeqchqagAY\ntrGv\r\n=WNGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/shape":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/button":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/typography":"11.0.0-canary.73a227194.0","@material/icon-button":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.73a227194.0_1615508727932_0.17495138355569284","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/snackbar","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53c3474ded2e01a5100971a1dd1c67a6748ef784","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f8579b7ea.0.tgz","fileCount":40,"integrity":"sha512-wqqd9s4V4zhTiUvfcfC0lsWLFcqUJ9CbvLxoWUM9wOJkNuNeHQzDBOAtXLeA1LIp8IpESKo5quzJd3QjNES07w==","signatures":[{"sig":"MEUCIQC7/u8nQlUgViPVTuLkCeDvgNRIrji9TW7frVRPPDOnmQIgeaFFIH0KcV8gM56rm+g5CiFEytdFAQ4/4kHgZ3hTDOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB2sCRA9TVsSAnZWagAAb64P/0lY5yY+tYa03eeGs9/n\n0lzkDfJHtahwldejjdJWosDDsfSd3HFwmEwogmxJW33B7NrWUFtydt+G7eRo\nEQj0JE83r3OD6VUgbLt0ouR7QsoH7ukdENPXGojkODFjENqZl9My6P++Nk6Q\nqI/kSG3GpmAJyipHaCQY6mSMbJYtYPvDnaJyyigoQ09yB8ZU8IGW0FxQdK6k\nmQ6GsDlNMk5Rt10epYjQVt+K6IYOvRMLfHpSnWkiOKObTlPPYuKuMCtURE2c\nqN41m0gTG/pg5y2vdEZ/yyY2+FULrvGOqWQh7LyQGrdn/nKbgqNw+U5bIZGQ\ntEWtCrcD2P7GUpa1IVjGNcBZlyA7TVROHfeqAH31ePRhcRT6KxTHzer5lJnY\nDukPOrCbEI67DP2buijzq6DFOes82MSYIbAiWeBgekuq22ccMbtxwGSNoOCf\nBKEw2NOUSahwoBtmw0TnltVwSezDB3cP5bhuwv4DYHhmLYRL6hKw5kkR8xPR\ngcYV8rYz94NuaxW4OWvVtoEUIZzDjjqAlakLaJfSPTpBkLCaYbQZh/pf1h0q\nfuGbseGAQ38TMxTs883kp71HXMvwsRa5L6cfRLcBeaoVACi8xGBr/491r+3F\nVQ2Itn7sxmONzFd7ntBy8o0w6RVPEBBjXvFd3MRP6YP0zYhQdc7mOAcehbTv\nPq+b\r\n=yJU7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/button":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/typography":"11.0.0-canary.f8579b7ea.0","@material/icon-button":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f8579b7ea.0_1615601068043_0.666755858334741","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/snackbar","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3de182eee84a5a738f4cec60b2d9e67eca93408b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.d2a39d300.0.tgz","fileCount":40,"integrity":"sha512-LG0HnFNlbzLdff4FzjUTjAOM7SloI0bqnRscG6m7cfRVzGg+ICbEuQOG+O8hMME1PcGCTaSV+ppwQHLZ7Fls8A==","signatures":[{"sig":"MEUCIQD5Qwwk/NNKo1m4BcfjEA1+j3Fl69sJJeg963U86xBKCwIgNo1i07tCwLmjz1CSkuqgtNxHRYtKtQwTMxWQCRydKFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/2HCRA9TVsSAnZWagAAOE8P/i5BNgZGLEPTkEoReUAz\nFgtHyFBW/FY7vivCg91n/O0SqxvYhstT0M/HerPfqZ1YHlDNyKQ/DGBqr5ZR\ndRmxue9CbLJsIcXHxgaeHlmHC9vFGCWPToyBrcZUrqqyZfrDWmgvNny9u9uk\nqzsvEKZJZFCF/IybATwdS5Lq4/NSfZMCdL2/wcncmgMYeRVqW+L61HzYCRpJ\nQLcW5CT2JQWgxYit3/hqT1E/YHj3NwVgpb0vETrOXN91WOFyBhUiW8wSJXp9\n6jPDws36t+l2q/l6cjchr3OS30/X1cDZtkEutX4Nv29cqEV/OIZ2IPFaNjOw\nEq+3t6Wh5AnS5ONSvLh+G5gtwojY/Qkh5CVJeYLWnGvp/ckw7RjzBCzalCd7\nUgx+CY09stOh2rAu+5Lhkvii44MFKhmNIoCV/g+Kc1jqRKmfqVqE2HDdVnhS\nd6oUenDn7CRIPjfLEExrWm+C37GA8eftWWzt8k8FPpTF/zC9rNHirtLAXqMG\nF/mCkr7tWtSfvwQLzfVTZZ7k4qxfTOO2cV+Mo700Iu4w2RZEPJ47x0sqx8HN\nmq/t6c37gIajIIdtRv8RO8tZlD5w2ENb1b4PtmHWSMSaJVYtVH60ttqFxaN1\nek18DWPWrOlIJ/xv8np3HWX0X5PjeKM6NIRtgNSG/+Tox1N5hhbq3cq+56b8\nE7OL\r\n=zXUM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/button":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/typography":"11.0.0-canary.d2a39d300.0","@material/icon-button":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.d2a39d300.0_1615854982862_0.06952786153447121","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/snackbar","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bb975bd0066a9f70c04b46f6b5ba5d2040c993f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.7cf67823e.0.tgz","fileCount":40,"integrity":"sha512-k9+qGRCKLrZ+IYtKPlz7KYqHZa3Uh9vM9ahWF/wNTFKrv3JX0nhF6dn08wBPIzfbre+PoqzyDlD97KOh+pSBhA==","signatures":[{"sig":"MEUCIBt5fu8qZ9JJ+ieL6pQNmcMmaO7QFdNOV/hsMqnQtRgRAiEA+wQ/eYxgOYXxnsjFcjLk6/KvTs9Y53lC7k1ly2KPQP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPcqCRA9TVsSAnZWagAAqncQAIai7S2kAeY6d3gnGiVx\nsmqwdSDKx2EEICpLFqKZegVI4Z7066dNmyFizl0wkmFI2jN0bVI2KjU8SodL\nVwxXqP4zzHmkjneSJGxD8erJLTGuvjQ12Iw4EFYHsOS0zjIO2mi0ZLlsVnrH\n+JSVEBg/SGJ5sc1eGH4etN8ldyzvBX2Ivhz/y3FhcyE7GMI33ae6hP5TAQRb\n8MD29DO4gfJVzK0ZaVfI8ZclQAfu64ZbtOgkLVm8DACVAyNAadq3c+UJKkzC\n55W8atv8rOPOtfhJs7A6De73vtaZ4xmWMBjH1KtyjgsT5o4RSX1TTP/vxl0s\nLwNmTqbLTNXwvh8O1fp5sRMamXYqLBMRNsY8cJcv9On27Iyubl+dz+Y0R0Ew\nSqk5eytpQL0ui4lhHJ6fXv2RY+T7lCW7LDnRBkTcZ5RnKbQRhpYU1qgprO0L\nuAbwjnxsX5hTzlpBFJLXEwdyLL2bQa/4x+zb1jFwXM71V0cOkUVOWhgrw5Hl\nE86CIe026nh2cWPhriW0ZVTmSrh+QNqAVfSIM5HlwPqobrBB1Z5dNOYSGRAj\nlUrBHNnDsN//LpdmN0xffWk0kt4wFRVEYWg1VpsOhTpS4+KYaa5UrqgLEoJl\nByA9PImXkLCswPtwSXmk9QPGbDIvmKgQ3OSJs4Mr7y1nnUyfmonXa57ILOuY\nxESj\r\n=2Y4G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/button":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/typography":"11.0.0-canary.7cf67823e.0","@material/icon-button":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.7cf67823e.0_1615918889514_0.12932231247319814","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/snackbar","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca0f14c54d16143d97c238c11c111b2097562d7e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.67d780c79.0.tgz","fileCount":40,"integrity":"sha512-eS4jeNmoBClYa1ujeJce/vWq5p0bi/cvRagMHzv2QHe4cC/nDqd5W7EuC744oTIXvIX2SEVMZM7ZEzHNSMrf2g==","signatures":[{"sig":"MEUCIBmGi4uy6V4sk8wZ+j3chlsduZsp/THRgypjmzFFOBFoAiEAwob2Vjjhu8062tuTHAsYZp0Ini5/6sbyQb5zNlbbCZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQu7CRA9TVsSAnZWagAAHagP/jEUwveFdj+we4JS0eyi\nBoDe7UMuFJycTZvyNuXs3HbvN70tO65tuqSdW7xSGhqzdBxplU2UE/Zl/1VW\nvTdywEwhpiKxOdBtViAbz6vYSVxaNkVXDQc57ec6jtj7sFFVKlsyC+HzSnnR\nMaHBQ1Z1Oqd9gLhacxleVExCqEFn9Ie34LWGfc8Z9VTqRXWSbjmz+wg+cops\nEzVwYhPh8qaQT0AhEbAzGE7kuiKiGlv6TnFxOXP4e8NIQunFK/syFPk29fpg\n7Tgb3wMu5KSzZdEtqFJzLno1BJ2qpXXgl3oVVAQ3Sq9UgOBuuDOFrzynfUN+\nZBYGcjfkwJPshhbX89woGSu8GVY1q8yvdDhw5Pn195Y8nJtidTojjcNhE9Oe\n1ilw6yDnqYp55f78G+PxNDm/N8gIPtnFa98iyeG+n1i0zoe7gVj2xPsqA0PV\nsjgDVvx4CouJTZ/+1JiHtjtsUCWm7pcIyUKJ57WbwR71aXsHJ7xIEJ95M6mk\nhMZPGfuG57bpjspFsoEwNsQHz077NlM2Xfciwho5dM9qarEGgpGtQ6a6d0Ol\nr8XDONzvVcOlNMKnJuedkZJ2hyw7lj1JWpei0/Pd/XimUNAJT4EONDufkk2e\nVc/T3+ULsIO2b8jb8jpJZTG9ZPzGx216+dZOI1mJh85vyTKMVY6T0csJtvdi\nMbMQ\r\n=3uSO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/button":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/typography":"11.0.0-canary.67d780c79.0","@material/icon-button":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.67d780c79.0_1615924155369_0.39264760018395384","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/snackbar","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5fdf87badb21e088dcdae1c5cdca512b34a91cd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0f358ddae.0.tgz","fileCount":40,"integrity":"sha512-fS6LApKyhBJpaRE9NVdwWE1+tYHX7lRLe5giA1hZ7LKvibJ2vNKKE4DB7u6X6aDky52JEvHr2SrC1iehFg3zdw==","signatures":[{"sig":"MEUCIQDvYBsK4t88oE1UU8enIg/4p+Fm/kRZuQAWuu5OcnKfRwIgWOPi4F/tv8Nv/o50SE98y7SWmbP96JSkvF07SO5dxwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS2aCRA9TVsSAnZWagAAwZgP/3Gfe4j4AvPR+ba2u/V5\nz+cPDuvlRQm7/H9fuIMIZdx6TQF/75cj2TgfGDuL/i7jFXh6pucFUDalJZBy\nAht0nO2dKelwsLcOSn+DWoJBoxgpAhYpeq0YSNbLRi2CH5waGA39xhVMF0O0\ncS0XIMT9xilkj16CwVgjURQIcFMxa0OQklgbslPpPXmZ1jym4VLe3w/Zme7R\nvTcyvnu/T6jlIpaVIgeF4+nC8I2W/i+4+eQgWiursCY2W2BNWurHCtUL/Dw5\nWVBmxALYnPCumIyDH9lCA1bAVdWad70zV5cLd+bvZeh4VbjWmqzGtUm5V/Tt\nBfkSl4Sn/6H8OgLWrqWiqUJCDT2U1Aydhe/ofu9H1zm97+uWSmIRpeEFRDjO\numOOdMlZdmtjUJ9apLags1tTY/A6HyJtx7VwPSyE2so8oK4SZ9rd13tFKgLV\nsPgq+/Q6cRA7WNE3Nowsd2nP4C0nY0y+DoCA7gT82+vDYne//ZDJmsJbSBq7\nozyKzASM3C0O3PYLfhEZJj3f50cZXlf8jxJsuUnIVjXaH8ocuvK7hqeDq5s8\ndlSjsaTHXdOE6skMcqb+jc76O5r/IoyBJyrlDV/ZZgqAQnNlFNYvNRWT+Web\n6hxeeG0PmKFjSxM/rVYcLZicY998Zro5ai6Gz+JTMitdAjxKQ6czUNLNEntM\n+4jT\r\n=HUgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/button":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/typography":"11.0.0-canary.0f358ddae.0","@material/icon-button":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0f358ddae.0_1615932826129_0.7087003909795468","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/snackbar","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ec1b481de704c99159c7862926e52045adb5054","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.67eb0df80.0.tgz","fileCount":40,"integrity":"sha512-spihLm4cfVM2xOSWGnPRZMUVAJM45RAWdbSrErY4WReAFOIOu00fSHK2jI7hgHwtEb2e15Nxw3d3qDswefQG3Q==","signatures":[{"sig":"MEYCIQDn7vHVYcshpbN1JRtTLM1ipZYKYYuCTWPD42Tn/7ICVgIhAKve6so+6WNHdxXZKnVWIXr+y0EJV+tKvzGRaiOSuUZM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTP7CRA9TVsSAnZWagAAjucP/RrgqvRDqGgIFhoKUVRi\n1KI3trNcAwor0rELXA9CRBWGQXzoGM761mEOvBBQI6smRE6HGZVxvjDIjVAD\ngv0BlLRYJEiso0oVZo+RAbJL/WiYNZS/CaxMwULlkjnCxCDlwWI3c4jcmFgx\nk9e7mnz2gEjp8BhfmlCz53XPwOreOFezrfTd1WYv2/+woHcxlafmZoik4nGi\nWi1NKJJP0xVPDojFHGnm0eIOx7VAphwIfaZpJ45+JFAHUSfHj7bppfPPw3WL\nGdffvaPtiwRUpa+aUSE2x5fCeYD6vO2wSDLH0N02DK9eS9B1BaU5pIwd32Eo\nj6Cl9t7UtfVNj7BIObnT9B4uF+/SE2VxvAkwtRyVy6y25jV1GbsyO4yJEKr8\naVexxFtPl9PYCfTO0GyAQhi6E08ODfsUXjhjFAMqogyjaaF7Cxe8Wi9w49rJ\nhAVJ7zMJGdfTY2U1i7fler42fm7qOB5sDYCoGg5GWZm7GUKyT+fGPQwFBiLQ\ntbZQOWm3VVbqrVBnB1TVQABCqKYK/Er9ojG/Wh7veLF4fGgz/Fo45N18Kpey\nWZIMXdTUHUVcUPIwWuaiMhn3PsYb+0L3kjxTO5+x3ukbkJi8gemmsH1uqSER\nNnXVCr7FbtYGW27rhX7dndAnDqyrVsAgX1JD8S2gF85dy+bcNIj/lTuD4nEu\no1Q/\r\n=pt04\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/button":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/typography":"11.0.0-canary.67eb0df80.0","@material/icon-button":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.67eb0df80.0_1615934459129_0.6339724935568019","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/snackbar","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca9a84123b811c455dc4c6ec531df164318fbe2c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.941ca3b3c.0.tgz","fileCount":40,"integrity":"sha512-wJrAmF1YyhlYbApDJAcHVQnJLz6+PeKpsOuA14BJq+IPykUbfRzUVrbYBpZ5LUmGcYeBQ6JnhwhpsUrc24GSCQ==","signatures":[{"sig":"MEYCIQDJxiBiDswU9dLdFsMYLqFJ5+oopJM+7Wn7DRtAcCdceAIhAPOvkj/R1uL8vbf6Uu5aa6aZ8O0sS8T7Sk5AkWfd4gC+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTRlCRA9TVsSAnZWagAAXk4P/iWHquiUIRRZSHyysEiA\nbuD+0jxRYp3BJLV3l3PFuZa0CMCQWToVHMajv692+e8zPDOplMPXr6FgPWCo\nb/lvsFOZaWbyoPnZCf7LjjtZh3DjUX9Jw+CStX/dcaUcfrOeY0zPJrk1sHbt\niDXKquXmnNxXxOm9ejpD3PvgPLlh+AVTaon1QmwEQ1bq+atlNsswqCOPvXeM\nvRU9HBKWLA6hvX/NG+ZmdxZfYxwFiE8nSR38yTBpUA1SPAeAADBv4cGCdaWd\n4oTCLyhFCM4ilFLhQTnWDVLjlz5pX/YN9AkcfPzEFqDFRiX3aUPgHiQgvgZQ\nsw6NFn++uouunzAtZa8XGDd/CCDLHBltElMEoE3YAMD8ywVFNROnitBTx63O\nOuMJ/sSpQ7hManuxd4fw+ZXZBz+qj6LgsDHEOy1fY/isrbQbTrEMTDkENIJ9\nmafVPkVOVWcGxrNFtwfnrTq8dpA59Il5hIwtKlT3Gxug3t6uiR1Uy0HHbocb\nQuKe3jIxsdNTLj0x6XxkUbHlqjLBzPQbkM0UaItDa6Qv3acD/+NQo1r7irgi\nuhjn0+N3Fi4hVd2gr/QmTBfL6ux0Mpr9FsAK2dbPZQqFz/sXFs7CkT3hhauf\nG/ordJZ3nUJr0rMghl2nshkWbxsPY5qUWyzE1xZZ+ZFKDuf7amNsfiXGatwB\nPTl+\r\n=qopd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/shape":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/button":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/typography":"11.0.0-canary.941ca3b3c.0","@material/icon-button":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.941ca3b3c.0_1615934565272_0.21155248034541563","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/snackbar","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37671dbf7404832c1ea0cb92f7fa121f2cb40eb4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.3344d12ad.0.tgz","fileCount":40,"integrity":"sha512-C8bqAljh5TviHg0VwcHvSKARsOH61w7uDXq/TKp1GbEQiHh2tXrPEIooD1vWtz89+atEnR3VmDf0WNNtrhdF/w==","signatures":[{"sig":"MEUCIDgzYh0fFv0graJG9fvO0XFwaT3U3SLkjEL8EJ6LXgVOAiEAxqIsS3jSLquH0Sdl7AwXMkgEKh/w+CeS3KmYlt8lJ5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdPbCRA9TVsSAnZWagAARB8P/A7/R8/jJ4y4le9XKuEZ\nHvp3LaN3xBckNDqUfhc00VkUgRN2aNDg48qxbY1LSnAKJmdzvmYxICUg/ldR\n/OSaJLz5R7EQzvmNZA+djHSbwHuvpeYYU1aawn65SujqV7RRp1V5SNnz+olv\nVQgOQvKLVWJOJ3MhDW7LSrj9qe+7dir8kQR7oZLYYAWUhao33XTtOhvv5gI1\noPmeYBPUWYg5iZLjghEtfAp5CO9hWXQ8u6O9QJlUdx+xy0MBywNtPrBDPDw4\nj4z5pigwiZlShpmL4xmiD7hFdH7ipAvuYuFPTd9z9/JKWWA9+Vg8jdP+1njX\nQpx6S6ZGllW5iR0vQ43cQg9KWpyz+eD425Bvf/mm2bPd4eY5NgeN6W4fkON/\n4j7IgmwvUPB18UIpG2TwaSO5TrdzYrbR4NpUCDVQ/wKQmFxNZMtN4oGBDZ2I\nmn5/1eSAXT3TWSG+xbuSY+cl++n/oZR0pa1mPLk1b7C7oKbqG24Tm3oFVbD+\ntDN1CjAmQdJ11c5zmgkl9uleN6T7Dpdk2jTt6GW5BH0aSAEE9TKRisZUI6mS\nbU/w+QM+MtDB2D47hZmWYnUa+N3M9QTtxJxQww3svu8vJeq+dTYEBzgjIOdn\nizc+Dj35L2jXYAZA0KKgi6Sv3YBjsz1/OMiKnHbBfNLFf6W+pKKpnCFRsipo\nRq9Y\r\n=m/Bc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/button":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/typography":"11.0.0-canary.3344d12ad.0","@material/icon-button":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.3344d12ad.0_1615975386912_0.7018109004518809","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/snackbar","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e066c26fbfafe71a801370c362ad96f159e7edb8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.6072ed604.0.tgz","fileCount":40,"integrity":"sha512-m0mRRYvgNTwOYXxuZcg3sK8Uh2AO25JBV4bWZ8Izn5kAkwdGv6pfAI8NE4okH+Aqr/rjHEQzQpDTsiq2vUG5Iw==","signatures":[{"sig":"MEUCIQCTi79lmPFf2xYLVCVvaTDI/y05/U5YORi12adzldUHygIgOtZV+NAiBW9Z5z2UUN063cXpN2uGTKm2iktF5fBCtQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUooeCRA9TVsSAnZWagAA6N8P/RXofGqbz65nf8rpGqCu\n1OhHBV+f3pW4DTRBtJKRpltaiaIXWoUrHMW3eSiVyLG5iiCNSWNmogGs9f6h\nGMOxfuSmCBui2cI5O1T6Sq52WA0k+8sdPaggBkKX10zDWhuifR89iJmduNnq\nsMvyq7eDWfj0MbqjdyTjvw3NtwZcjzoRv1OKZ3J7Y9ldZu4wWymUsLHl7LTs\najQgmNt3E7Zy03d1MWRlzDJQG54gazIlfmdmgU7pBZL8gf/TUvfW0T8p7J3K\ne+S+5tjxDaUk7ODfZ8UXa0/uGFLeR9y2lzIoWgBVyiBcOVDX6n6Pd7r230hz\n6Oa2tY7KSXaLcgpevsMCL6WaC5DdVURmB3D+Wr+Ajt3HFkk71v08JRjZkmgC\n00Ku1L2QjMbBIP5dhfPz8BEljIjopfSxjayGvoElb69Uioejcspphpi4uS0b\nF8UMLwy0ejkxF5UK7GcaxgPNg5vyfCynYCYq8u+JK8NxFtojkNZrDsWydOkb\nsto7seI9FbjmEbUYt1qi+R9r9PmqxmEqc0ObI5pE2kIsWH6UJCaSCaND19kj\njTGtj9v8EOaUtpMJT3VQGQvoOKaOQhUJZpoNy0btXkuInJoHPXhinaxcw/3H\nls2aDJx1WOECpHkVWGeCaXUjAb/0BxfQemeVLBw/9KTisNMbaXFCfkVk/aKo\nOXg9\r\n=PqbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/button":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/typography":"11.0.0-canary.6072ed604.0","@material/icon-button":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.6072ed604.0_1616022045806_0.7696644929114875","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/snackbar","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ab8713db0bc965a92e978af764f7520a8eb67ed","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.d3a6862af.0.tgz","fileCount":40,"integrity":"sha512-bN0RUQAWpBrXB6zf7Gy5agXyat8FFJtvHH2XG3VBTwkF9DuvjPeJ3oReI4jHbSrtPz/2nVHTow0TD/Q0/Mokmw==","signatures":[{"sig":"MEUCIH9kqappgil9WNK9MYf5/hdZwityQQbP7JEAQr38ZeWbAiEArZFXDpQopYgqMN6LnJm4l2D5xi4npx+5RWE2FxX/pNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU34HCRA9TVsSAnZWagAAncQP+gNp9G/Rx23Z/CVZa1pV\nM8h0xDQr30h4rdlqtUeYmfpHvP0hc8rmEt5c3E1vt2F7q92m3DQDybIyJlxF\npXgAykTAOXzecocgkicYecczLnj7XIe+MpRTgGmt94BKrdoYgLWw017RojVf\nD77OP0Bz826ZTsPd7EnbWqb/yzriWD2dfyxuhBplHlauZHHssWB5q2gYJmEG\nfaqEf+EcQwG8eZIzKD8IH15ixvG3Tde87G42VjYpbl4GslUNXXiamP/3xyKe\nQ3PslNH5FYdaTOm0S7L0KNMbknOysiAoUUbsJar+ycEaJ9KcQ+j/gCbH4l6e\nRZbY2G+28wL/rIBauAhRsEex6TO4iODVAWz9KiOS8EYKb+pxCuAhDSWZ1eFK\nZxUhwOsQLCNGlRPVakIyNMky0b7ww5XOs6m4sKYcJi9g2n04Um3WZFrT8iML\nRT5zd2S3+pYeI4oQ87G2toLz12RwawSMIBAW4p85VWsmHirgI35cHmMWKYAF\nR/10cFUDbM1BkoT5LL0Mt5wx9AilZMq4jrMzPTW6mkVACjAFiGgNJzMIJlWh\n3cKP39n5437dHVrCCOtgNgf22ZOac/JmOKyGHtYGuE5k//XznIppt1oN52Gl\n35EA1HL+wOxF64gHLPo0bfrWcOp+snyq3VvLcecoWMDcaD6fRdmSNji6mF5J\nYhKU\r\n=12Bg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/button":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/typography":"11.0.0-canary.d3a6862af.0","@material/icon-button":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.d3a6862af.0_1616084487025_0.10402293210833857","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/snackbar","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a0106c8dee38e330ebc93f21cfb2bb4dab62040","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.40dd242d5.0.tgz","fileCount":40,"integrity":"sha512-VyVaOn6pKvk5n+32kpuJWKXnkVqw270suJnPfJ06jvKPSU9WejiwyEEmx3g0a8wrto0rfA/If6okVGZ80CZttw==","signatures":[{"sig":"MEYCIQDc2whlncPZppMh4jMoghuHEnpITbmXpqXQ0/rX6f619gIhAMhH2515CB+Xdan7bPQ7p4hYmpxHDBT406i4Am8UueyB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8OuCRA9TVsSAnZWagAA2aMP/2pK8oZBLTyKrbmRCCt6\nXHGUWOVe723f2ZluwV4oH418LWuAbpa3/xILbX4JjQAxVCNiqpLlQsat9ASt\nCdd+5Oyb4QBjBVPNK5boasxX1Hspkd5kHDNyfA2/WdzQNjR0vzoahkx6J+J5\nJgq3GlHjiq84INIHBHG7QbKnIdynRs4ovFv8HMTEkKVi5wM6O5mJhX+OE4U9\nLk5XZzdeiGZz34OE/v39L2QrgibiNSGeH5vc93pU6z4ZDrJDpl3Ccry5VYqQ\nlkMA5wl+pe3pXWI461T34EKZ7kYFw0b3L0VBkNTHu9Paflg/2zlbxx5508Nq\nWStoTKZaERmtl/Wlvsf4WNZpeZoxMEnUYdAuHvzTiOiOdVr3/AyDBuj2dfUX\np9D6KEQFEmpT7LDPGhMjBbf18mtgiB8TmaJQ31fgumgBRVy3429GHWQFAwvh\nQ8qKomNUt+4UrkKhwUjVvVVUsstZ8cAmcXNCpxd7pF0+O+ID3fuQDkMcuf0V\nSOj8iFBNNQ1kz/lr4o03r4GSgsO651FajmNktqkLi6+XGUf5R95gjfrouo8g\nmog5kSZy8vCWqT/E7nZlnYSK46WQq+/bPdFFVq1xkbYcR4tosN7A74hOlrKH\nB4MFv/aBzStiUdjiJ2TTNew8ScA4N5OuOL2r1n3QDNWB79WO63ZW7/ax1llG\nWOPI\r\n=6DEY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/button":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/typography":"11.0.0-canary.40dd242d5.0","@material/icon-button":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.40dd242d5.0_1616102317830_0.12268823078099134","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/snackbar","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a07f82e1121aaeeebb86e85e9a6c59ceb9ab0651","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.ec8f8465f.0.tgz","fileCount":40,"integrity":"sha512-7qMGLIl5YSgpGyCMArLkqKMJiXHbTA2NLw2XQasTIqyshpkykKZxGmdBwMJUrMa0bgoaEFqHgfTWX1m5+q6w7w==","signatures":[{"sig":"MEUCIGUKfUHAK0pvpVg4hicxYX5+6g7Ps6cm6nsTePn+J04JAiEAgFt5eYxDVXfmK1//GiB9hXdVK6VBz8NxvLGIoafzEmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8n5CRA9TVsSAnZWagAA5qEQAJ9ySpA9UjkXD8bSmszx\nyhm1llmzyxO0S9cS1YfoysPiUb+iEQpz9Q8THoGYXl1lv9vw5TsSGVfcLS+g\nPE87B3o/IpD3pgNuDbGavE7I3zJ963pN03pUsVD5u/PW4w/LhIf6G1az/b6p\neFaJ69UQmzNQUwkm8AD7602KXwOrahDXI+v52DQQrJ1ElNl1FbkNfm01L8YI\nXZlmvABnYNHwAVdUIlv4lwgDpmx4SIdhgmEsWyilRxIPAJXZIF/jJKHUoPw3\nKplMsbewQMcfYEcA8Yc1pI2xwDdrTYyBnSzaWwcJSE3LDWJlqppZacUpjdO1\nfyRnogtZ55jth32VqykmKNYMawVrQrlxBpQKL1UAuuAx2kMpfHCpnNB10ZkU\n1oAntZ+XOZLGLQnpkMIjgE2Mr5NkHQJMUgVvI9MeSeEePS/nqlQ+rGleczyg\nt69hygGwt45NqnyfwMm8qvYdF9kR9SEo1SbYQDNB4Ql3IddcGZ7hkeSOWr04\njmBxDoMQS9SX88GpI3YDLyGXYPb1S2T357ex9a+kqv9tWURijS13/uafuCYV\ncWQq5fRzXWhj36xdVXDg9QdFiqMTxAvmI5nnhGuukYnWiDOE7hddBOfervAp\nP4Ridyb4sthD6CEudiNWN+zWtbaq2iwwFKlO1UocH4uP5VhJ1cjshPBdX6Qo\nanH4\r\n=V1wJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/button":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/typography":"11.0.0-canary.ec8f8465f.0","@material/icon-button":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.ec8f8465f.0_1616103928944_0.9927214454075297","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/snackbar","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2f70936e94a6509a3bd1ff8b94c0ea16e0a3346","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.da38969ec.0.tgz","fileCount":40,"integrity":"sha512-K61NjAmx4aH7JNUwCkMTUoprN28wm/qiDEhBHDVoEwJCkO/2Fb0Vj5cxUHYdScy4y/TNQYELHl6d4GivOcR4ig==","signatures":[{"sig":"MEUCIDMPYbtgaLQZhysDWGVqE3UqrfmF3tMTgIySsKhOKkZWAiEAunznAWusdvdBuqzlw9GrHeobvnmoqmv/xx+vsNzmIL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9HmCRA9TVsSAnZWagAAgQ0P/j0mnKkmO932afAy+pjL\nFxHBieSq/iUdVnmDLhKTmaHe1iCXinGHj29SxhYp0eMB0lgvRSq/RrMgD67c\nlOFsw3sadVR/cBvXEHcI4Bu5XnefUcZ/8/AGnHZ4HaOKAyCuIsLFCe3Gnnwa\nifHTggACk43h0k6NEbBWlMYXYV6bspEpbsmbtgp+H5GZyW8TjjSvX3D2QGcI\njNE3PPsn0OoYpgxOWHr6ZEx+Ke40iRNToltx8Hlf93CcoVO+3gTciPZyW6QE\nSwEV8ri90I+vsMTzElMrc6uV/fGPzaut8e98X6/dg0irsqA0RVvonrPt5hnZ\nZmmLf0RN0pjhshbZnwfg0GsnAEw2sD1jz6PBb/yUIB2cQDskO92Gtid6NH4O\nTcvq6TCLqDge3ayChFADJDZxQjlNoeBgq8qpzjjIrRGskJ+tuLaEdcLcdwtV\n8mBYkwuYRbW90moi9OMG3mshuMk8BuGwMzfjRzOITEJZN9QCxfy8LwDZWBgk\nIL8JNX8SJbuNPongsD6JMqmiaUcELdRqE6BU9zKG96WKJs+Nw/8SPw6vGMbN\n/cBmkCsIGb0BN1l6LEXKhSIRJy5q2ZZtXUOx6pqBxxb6RjzFfdDBpHCyp0bR\ns9P8W/WfbIOg0+RdRRdXM9Pn+1doh5IiDTei3czdxdlDLWiKKcUDC6qQ3/yE\nmgzV\r\n=fX8B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/button":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/typography":"11.0.0-canary.da38969ec.0","@material/icon-button":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.da38969ec.0_1616105958361_0.3873675948253106","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/snackbar","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01ce5abd3d2cc2f4cd1c02c81663aca434b81316","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f5246264d.0.tgz","fileCount":40,"integrity":"sha512-iD2FI0GzbOZFfdVF6Htjyih3cYDlugeDhFVkLGQ/r0YZHP5aeoEbq09OcbqKzT9iEamm79IgzcOA+eBRPm509g==","signatures":[{"sig":"MEUCIQDeAvM6RmPEPOIBpuljGQdaDUqyMWDTJK/NMQK74HcemwIgRd8g9REIxJIREkuFnk6ztiWEdUWFigoTrSHivJrZrwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/LdCRA9TVsSAnZWagAABjYQAIpB2uP7hSLsvB/iCEYd\nJlwpK3pMqQijFBM6pToMwNfy++WO0jZ542z4GJY3DSjzcoGlidD9uGW/u2LU\n8ZqJ/zqdGPwp4u4gCyW9/ZZm+40DLC/5W6XlkXFARK9y1zjF79qFzTDlMy24\nc1tN9ERuTogI/7dyVzxFwmrbQ6/x302ZsWHd1F0tcMIJ1qPIIZq7S9S7aLaB\nfHmISpNk/He6RNByE9uNLcEaoAMalDKEbjFrM/ibNmT/rnYKmkANW7lAij1f\nGM8ZvTTRRyCICrqBb+B4jCtm3au9sxqsyl+mbN5pWX6rsS9XKJTPpkjXdmbW\nWkbinngvIPntOorOXN2ftBydQPoh2c0zX7hqemqhGGz/ASalXVBZE5FJx2VK\nX80pazHvvvW+6rEXgcDxoan34BYCT1QHmKYeLT+bBgISRY/3ii56m2lYDwCt\nFhP9D5xAywliLg0yL0r03LKL/Em1ryFP3smsfq6don8X4nVIZ67esTbQidaE\n1o+Oi7GhgieYuFIeF2e8MPLHLqxbhSC29DZhJuFvrnq9FaoylYc4cTADJxD0\n0rN0UJ0rr0v3sKjnsRNz/56EXaxX2g3cxlSGRi7jmxTp76DNEK9R/ufAfqWi\npOlVsHrFIvI7PVZ5UAuwhXHhQvAwDpHIxhzH5GV74Nmrme7zz6G6pYZhhJIi\npcHg\r\n=ztK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/button":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/typography":"11.0.0-canary.f5246264d.0","@material/icon-button":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f5246264d.0_1616114396950_0.327730211833944","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/snackbar","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e07c4ac1e79a0a36ffd30359b2ff5427d4c48df8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.03d34bbad.0.tgz","fileCount":40,"integrity":"sha512-vr+cNG+tWNEzwlPkjCuCinHL5LWu3XPgGqbopWBxIzBfg4y8GGdRB9TVTMfrXNeZMlH5gGkFcUz2PULW8hEG1g==","signatures":[{"sig":"MEQCIExLPlkrJUBQo84RkR5APk59OZdSYyqwFi7Rry27xNfLAiBoMvb9aoWnoBNIvi0e3F/WhJEzXy8mIn8DMg4dh2icJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/XeCRA9TVsSAnZWagAAlAkP/2Fwq0Jgpm9hr35/De+V\nC9taQLXDiQffZPokG7IaGg0uw4UiuIraNSh4GjZedaff/LGEJfmej6rTb/H8\nYWbbT2zyKx1Ria1vHDGexuWsjkqC9GvOTc2zWiundF4U5TMULaZdlSQIZfQT\nv1lgPh0MYCv3EMPG+sV7yj5OKsRecvpc8VDj8IKduuPSxrWQSH6YoomTZxGB\nix1EdM20ttG5mexR3QvPIkgY+Vpp7j252/chsxrrK0t2FPe5zxfGHGCC3wta\n1s0OJR1d9mp+t9YfApGU7tuDGljcgRIjdapZXW0+1r4SdZ/XR2XWo3u9zWwX\nrFOmPRzrq6npunKWsyzNzxQTa5qkvTUhe6b33p8kkGUJV/qtcinip6sIex8f\nTxJZ0nHtwFglVuhwhxHMlXoO7gZwWYLrW29liLNyVgUjUubr0ViwrmxHruXG\nuxQjgKSIoukcdLLNkCq/oQ0TrzAVbj+0R+v1M28tp03Fk7dgJ64WhqjFlqdl\nT/Fglmgp3Ixk60uwfT/Pcbo+7/QM38nXkQQrZB3UkduPlqHXH22gwa5sRroz\nNIhTxJknujvfaCMZPOKMfO7SVI/ZOe9PMDfVG/shUdXe0XROA3gJNHJQKpF/\nDOZq5EdQiv3VBCecC3Rq0rWOy8VVG7Ehj+s/25e4e3S7I8WTNtw+GMLBYhMA\nhDb5\r\n=7c5h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/button":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/typography":"11.0.0-canary.03d34bbad.0","@material/icon-button":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.03d34bbad.0_1616115165526_0.06478685928285155","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/snackbar","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5bdadfe19b75cdb3c7af802b71209478863d882","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.cbc57c600.0.tgz","fileCount":40,"integrity":"sha512-qYVwMICIJ1Xi8MOaJCs5AEDWvp5dl/Yid1vB5q7ritQ4RUDX8RKLm3FqJDq2e2Hzp9VyO4+qH9Edo+TOcXK1PQ==","signatures":[{"sig":"MEQCIAsqh4frgr1gp65xTrVnv8FWZzKZO9Ztj1mrp6dcitnVAiAwEfF04hRhNOUg7Xe5xSMHMHYzsnzChnS7f5doVcB0SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/fLCRA9TVsSAnZWagAACaEQAILnS1wBT1vwvFTvOEJg\nbN5tNHvxOJlGbtytBnVzYQ23OFdYSI99zc7uNFfmWjL0IKfMc6q5xLo7OLUl\nyb+dViuUBG5rZW6t/TReYyJuXH8aGJbOZpdcExQJVftUgM1PGAdUUO6eqUYo\nrpfVvBdhE71mi9GGEIojcwIMUAVpImSE6sy9UjrCfdma3VZLMe93j8G9kn++\n4yMYZRnnpLIntUAucEYqycE0tj8182/lc9L4Rz9pkDAe8MhwJV22k0y0AKlj\njJ3nYnLE5jWaTxYGwm2o8b00wgM0lFOiBd7chqsNyrcfeY7GJvcPDkTUaf9V\nQiscmvo/11V0LL4aWplvXoFeiCJ2OtyIg9HbKLGlRNTh4mWL9Wm1WLF9ZZv7\ntxvCAZENLcz068K7z1TgxGErRfOOyIts8/ZXoS6F0J5vXVPmLbNzv1VXY9uB\n9CIx0TPJVvMIWEXuivRlp+PW9Vzg7MZVwyJMS5qDA8C4V5tvMmNcsfNX4VIu\nnxTTazFoOFmr2TU/AcveOLhKvc4E65r97LjfoqgsdwVSuGMCrw6hT6BmD3dd\nwE2ZYSb6br49a/bqbWVoO0ErO8mkyGQajlHY6JDBwjAweat9YV2VBCNzrwOh\njFVXZyNOZyDYPQVpdWNM0SpOs9YWw5DLnQbqBg0ukKIjmqqtXbX3i62WnGdE\nyNPP\r\n=YhXx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/button":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/typography":"11.0.0-canary.cbc57c600.0","@material/icon-button":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.cbc57c600.0_1616115658933_0.3930108433753521","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/snackbar","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5648a7bf55a3e15903216f57d103c3cf8f37fec","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":40,"integrity":"sha512-etZA4ulWbv5RY6FSQ+l9QBNYqkJmJREkP93IGbg6Y3MeiFM5nH6Nv578ToxJkchxx7Q80zHEzrFa7LYNCPP1rg==","signatures":[{"sig":"MEUCIDGm6/mkCXnUY8yHEbEpjfb2Jbcj23wGSvLUprN8UP1gAiEAy8dIeJMcFnW7xSdMmV9YGM1ujhckCaI4a+vrMT9aRPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/rcCRA9TVsSAnZWagAAluYP/2OIZ62Kmli2LO5YrqHR\nAC52ws3dbpoMIX6l0e89PE6eCv5Y6WyL0MnHRaRmt/VC/2lfP1X8Nl4th4Y1\nafRwvg8VkguIo3Oc4nxrnhOmglcV3nkROeiV6kOoxWzww1wIFiMDg+l2bxDU\nrnfS9YjqX+GQ7QLEUjMzB9jnCJHgiLlXNXE+pcblOQXk+3INu2kjai582yPq\neAPOgrjs+PxN+gCU4tSqpIhcejnTCLQQdJI2L00T9b1gWoHu0jN1mszH20hl\nj+60RjB6X/jX30Fflu+zQMdiBEeAMQAsCLpWY2gFdeAv/MqeQVJgyaLaTO9G\nkG19/sdSRMxZuXdxjENfIAIrWAV1c5UyQXL/v0wW5Jtzp7GiIx+okq38EExZ\nGJUcTwj78D+PjlGlh2rYFX8dXf6EciHeai1oskrdWbT1NLEmdshypPQcat4s\nU62TFmcMz+bgvabkkebMz225JvnM5IeEbsJxN30XE0v2xqIjr1/ESuRz4l5B\nKwguNydkSjPlyRw5Pr/5YGTL+Q/113pMX6S4Qm327682egdGg2SlJodWKAEI\nFrd7SrHP29kMhBXAUYbP2TOhxBr5t4hm0/VkcLTg0/hREASyxHkXVz0Pr06k\nHyeavrFOwLXqHuuNpd9jsRKhbGVMZddJP3optb1oO/v+t/Kih/EKjIrIQ0HD\nkSKL\r\n=kABu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/button":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/typography":"11.0.0-canary.d6c5bcf37.0","@material/icon-button":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.d6c5bcf37.0_1616116443834_0.7416416519255826","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/snackbar","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aee80d720e66839a201255daf61971a1eadfb33","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.fefc668d7.0.tgz","fileCount":40,"integrity":"sha512-mJVfFSheTVaYDLc6eXqrGYoIG27r+WIJPoX9c7CB6l8rzbSOtlKx8BRDLgeTYeL1aCwnwJmBUm5n0gUda40Arw==","signatures":[{"sig":"MEUCIQDXs39NWgvyi0neXBALWROWE4QwPTG6CXl1agvJjhtCqQIgdnfB/WufoGEpOWIhqSmnUgtg576rvaM8rEalZc0LZDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU//XCRA9TVsSAnZWagAANs0QAIFpqXxjzIzZ6als1+y4\nUlKp4jLF+oAMRc8uBloxLLj5L61+ege2kZWWEGGL1qOsAHNPKp7A5/mMq0Sw\n+qrZNGiyr0+fuHcaagkQZpYyu6VYWMEgix8rWvHGspVOjM5xfqpqPC2L63fC\nYd6SUCyfKKGFN+VWyTgd03Y5Wr0D9zltxPAnnw4WWWdNLhvsesy2R9Mte++a\nxcg/G31m2TGIXj6n8o7ZAMHWq0HcNPOx3rZsJ0Y39gl9q9fXJtYyj5btkM3Y\no5aprMgckS0CQa/zyp+Q8l7QESKuIgmFrrSgyn2Rn/I10TqVknht2iPXoSQ+\nf11HGPB56OAExSWTE/Ry6pKSc5p6LXfTf4odEFttuT9hMeSwGHUIJWi03O5m\noqqMhCeEzjrmnqdytcbVbhAWqVvQf92qdgicOBd+XiJnk+eFKaCS7QNRIH4o\n8WJMwxUUGWJ/La5ObjJT6ce+txTPZjHT/nhHGPMjjz1C/db2t3Dbj4LUVy+G\nHgK8Oe4Y4HHgxwcqv2x98yd0zd463v4QqEgm5QfZBcOaG1z1N2fyCE0U9jCl\n8pgEjLwA/gW3qfGLJl/N3uqobUvLnLgma84bHZILtkZWKo4whXaTQGMmQMvc\nx0H7My9NrWcTXg1tOA3l8f4fdRi7rdVh/yDoG0lpIx2yGuvqpkl/9kyWFEvZ\n2AN7\r\n=x6Jd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/button":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/typography":"11.0.0-canary.fefc668d7.0","@material/icon-button":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.fefc668d7.0_1616117719276_0.16061560308804168","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/snackbar","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"541acb5391412acfdf41b8a2ccba0c6c0f2b3c90","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.faa7d3226.0.tgz","fileCount":40,"integrity":"sha512-DvM3HDNBuUdt2BPZhdNNE+XefJmPzVEXBDSpk0NJm1qmQthYumwHnPQYvQ4GLmLCULK8VenCqcDXWhl1ORkWKw==","signatures":[{"sig":"MEYCIQDx0/G4nB1jmmgnso1rtg8bSGpCjcrnkyGSdo1dJypImAIhAIGZm64l/XQoQhlEE52eel1I/RMzZJWV1O6jc4bkvxEB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVONBCRA9TVsSAnZWagAAlwsP/i80ZSYUPmSjQ3WuehEd\n1TFG7ZKyyr7f17O2kvvQBcMx3k/H1cZWbwcrOEwrvNKSArLiQvkpm8crgdXr\nbMAszkeuNKS8roj3sDKr8PWUR2GqGc5gC1d6nKoLhrqcbVkXZFxoqie8xAcb\nhMwu3i0xfkm33sp5MXgLJlHTSAlJHJFKoXomb+p2joV1Sr0tO2Z74ZVhB+G6\nw3xZdxqkpHLQlIoA5pAsxqsbxMU2YQ1R8DejG1wK86nlfLqN9fC9ZFVy8R8L\nCQGo7Q8kSyPxV2RnhkFaNC1HjEKQFAdRBirzWZ64sYTjkeTbxiytrM/Z0Ke5\nYoL3KgBlNB3oov91o28Q2/KHCR4UDn+R/o9vV4PFzhllvK8WMcCRlg0D/s9n\noeAhOQfnH41CB9Y1yyJ4NxDEVAtlMAvoSCpD6VywG7xkiAZe1HXYFrLeZGGP\nSEocvomx94FmEU9PwCjcMIyPbYuEgJlqicNYtuKmYbwJkWsS6PKDL5cwJkQQ\n0G7I7lgR5ylYCwyxWngPOxv/OpyJGtuEX78lWcMDojdyDDYCgtXEo2ZUJKW4\nAI021HWpEgurvVXQThmOKitfiGN1XJsMFZH8QGdtYZDqg/DuP+ZI9y4aKizE\nZxHKgwYBcxfnmvQZ75xyNziELW34wfriNbRT1I5RzMBBEkb/GRmAvUuEt8ae\n3KKa\r\n=q8OT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n Can't send photo. Retry in 5 seconds.\n
\n
\n \n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/button":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/typography":"11.0.0-canary.faa7d3226.0","@material/icon-button":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.faa7d3226.0_1616175936887_0.8217044066507739","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/snackbar","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"667fa125d1d9849cfd5d627ce0f8e50a2bc09c4f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.c60449bc8.0.tgz","fileCount":40,"integrity":"sha512-85BTsMRVzlxiSY0njeRMZbTzgrSGLpdYiP7kOnouXbVBvDw9gSP3hesyTAQry40I42wohM3tvsgxCT5jgLVowg==","signatures":[{"sig":"MEUCIHr2UfyGtc9eeYBsTRtKTSM8bz4crhG+QttF3nq8XKsMAiEAnG7w8hxeDo2P081iOBeD6acPggkv2Vj3Wiskgfy00qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOgiCRA9TVsSAnZWagAASLEQAI3BX7W3IiKZ7xtI55nM\nQubojPGNmuTeQtqrysw6J5cv07kjL1n4zgbnHE9attqShbcfAkBi6b2GiV2P\nw5oBhsOttO3YPssD4CatqXp6SAT/6+PjyrzctYKfInoZ4IjPmoEAEfoFTmGC\n73jZNJDNHkGAzmku73kwXS5HUUH9W2d4CUOHF76ZoVR9q36uJBZIuFHF0iX7\ngEj0+hfp6XKnXQ1geeXxcFIq0GrvgtOShrYmfoPlC3pcdjzZ+UEMDNV7t4Db\nFwQitcM2IhtPc4yr2J8nBshqpc1OFWULB7vxhxHaqEvRPRPoLVUQHY/mOSVP\nI7mdAAIF2qTUd4PD4jLXiHCVZws/02Jea7d4ss2Svjh4RFm8XTFaCmRpZeOo\nl04mp9ah8srTzdxzIVR4YLtA94vehbZ0Qu6J2YT++cfmQXmZZ9FdI6AbUf6M\niJuqJUCI+IKhRQ/o9GHGclQRS4Mg1W9+kc2ChMLN7XcIi/Pg/6MZhC4n58ib\nuOMxRjV7d95Sl/KkWwb7BzLIALvJlqHMu8kqpurrOdHAtYjd0RadymUDnYbL\nsFmkYc8t9lKryZOyjeu527eng24ZwRSV7O/CRJrUNoJAVSMZNxp1a8k7maYs\nLLRh9kVKlWqud1J/pwz5RDJTkw9JFIFB7whAQ23VJoJI7p2/IH7fABsxEKBO\nffRm\r\n=k1Q8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/button":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/typography":"11.0.0-canary.c60449bc8.0","@material/icon-button":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.c60449bc8.0_1616177186344_0.22779273068772965","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/snackbar","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0b8f7e3bb522408d864e930e6b687c6e24f1031","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.5f0fc444a.0.tgz","fileCount":40,"integrity":"sha512-D+Jq/T83HAI6sNDaMn0zmW8PmGJ6I6CmtRJLVerb29locKQ5MFn49vxAEOEQjiow3BcEF9qqQfaGpct0e2ChYg==","signatures":[{"sig":"MEUCIHxdT2vkYJDBCPZiRknrW+QXFJL+tKO3W7+eXTwXpoHTAiEAkuJA1e8wGTqEQWUUGIIbtpaOLOVdPU3Fwh4aKwaBzyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO/CCRA9TVsSAnZWagAANxUP/jRvKM2BSZWGmuPRgSt5\nqLX1I0fXkHuM8w198PyBW67J8IVFVq2tjRj62P+1BlMF8Ul+bQ53NELK3BCN\n17LBpsxfYES6TofSmwxLJLMWworrSLwDw5kmOUOqEXphzrrA0RBhKCP87+bQ\ngCuoeLtD0tndWr7scUP3GeAfs+kZ3n72ZlcdpccKwERNJ45KUFsq4V2zyPCJ\nk7p/+gbl40/hRXy8vl34trXzqpwuAfZ9MlA3+p0Gt5RM7fDcOtvkaZRd8M9c\nMJxiydSU7NUnk2R5N4mXm/TTW/oUNghONwLOe2HvP5hHZ28adDBATR3M8ctu\n6PFMZgf5Z/EGf79gTRmtLRybD+YGFGBRGg1kYFUDfkodkorUIKtx2Hzz7ZoW\nKHANRW/OWD7AqVheN39zS1FkXyyuDdHqHys0In3698jgTtVGxknUZjxakaVC\nVNvMupSsnbu5Nzbk9T++jRLluUWu3dcwp0GyWEMKOJ76GogJydA9BLfjTx9Q\nIPzgpkOU9+gouEP38NnIw3V/htVf/9QSGGNP8ZcKRUWUDLAKz3zvjtH/9VFK\np4XqyAuTteuz+0a1gUbAL4uCXIseQ+gRVdVu7aN2ZY31WRp+luq0mD4mFy1/\ne8YMlv0QBdT3VK1EWyMghLKN/o9d9BmCcJU1hLnZFoBiUqvj8k2bzy0jh4Br\nTF7k\r\n=kabb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/shape":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/button":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/typography":"11.0.0-canary.5f0fc444a.0","@material/icon-button":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.5f0fc444a.0_1616179137745_0.28293469203334154","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/snackbar","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a7be0aebca4de6903c517f7f2a36c492005229c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.4567a750d.0.tgz","fileCount":40,"integrity":"sha512-9dhdu/tlzgnbYq6tu0Xui6pQVSG+ax+kQnWjC52g+Zn+QUKg6J5YsWqsSXTfmy1FHa57gGOJwKJWA8cpbuaAtg==","signatures":[{"sig":"MEUCIQCXAOshTLvm6e8QxaS8Dus2kSX7VaVgCQk96m6CyZUvKAIgXOiBn1yPm77RRrMOyxVpmo8vhkYXDLtvXfWXkVDavOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVlJCRA9TVsSAnZWagAAK88QAJ3p/QnPdlcm7kyQMshp\nUt9YzxcsDuIqgwaPIuECxS5rR7GLwyEx8Dz68alZHl7/TXJWR/JDPoHSa0gp\nVrKsKJ9pF08+hHhm9L8in4rlK8yX9EQCUmw9lJVHIhqRpSIUyTokCgH6xzRY\n24+Bk7E93lQEIMc9eNs+GR595IRk05gPteLt3ga8bHx5tHnlhFiIzL8cpHtZ\nQBY7Q5VSjGT2syfi5BXbDYzqeIA6SFtXdm02jYhXV2DU8MUnKISYD6fLqJgT\nRmoKwzy0gnfCzhn3v3RsLlyESSbViVMJw4L4kVnmN7nL+4zbu1Yz/Nrr1BSC\nMqPMKCFf7ha6mioSoq6zu5gseHzrJyJNnkXHYHhSmVdmvrQDembIVswYVtI2\nrszXy71M6eDAIOMyveLCrooHdHTvmhvOlYzkR7wVkJgEESIqJAVpN6ypVtAL\nZrEhR5IGs6r+NgGpD+V7VZW/3KmAsxoQJ0hLG/c4Vcqe55/ZLUwX1weQDHUw\nVcsg5jzvKzr+nACZgp/R9eF1hOdr4ezuyY/J5gFu9c8wQF6tQGKGXmISltT5\n4DUWuiil66bb+LPPCaxyEtEmyVpZ1bXGz2ImTieKWv4ofQsmfYzeZtso94VF\nup1vETEyiTJQkk+QuEyL8DWRHgqfLpIVCvzgCqymUW16vj3wxX4xJXyIKVlw\nusDM\r\n=VJ3B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/button":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/typography":"11.0.0-canary.4567a750d.0","@material/icon-button":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.4567a750d.0_1616206152559_0.3158103493768716","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/snackbar","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"608a38f7c19269381af54ae98ab09787f250e68d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0cde52f5a.0.tgz","fileCount":40,"integrity":"sha512-QMZEUeKV1V3EtU6/QWcSWrfuVkrNp1OkVBpOYCKjqeVALGkYfemUQLg9j6XPFLZANx7ga1YiiqPSun0Far9Cnw==","signatures":[{"sig":"MEQCIHMPDQAMAxuaBFbRQnnBkpYsSb1F635u5iAzsonwaerXAiBLDcUn0Pi+/HnINrqKJoeXcq42UKHnueXKLr/aaV2XKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTB7CRA9TVsSAnZWagAAgZ8P/jK7eifHIyBLfEupXqUM\nDxCIXwET9vIdzimQ9CGbaSsEB+kFhFbfxp7ubFip7GCZyXLGMvP+re+I/7yi\nu2QvGL6pbC47CsaS4D5mqcpzfJ0H7eHGVTRfQWfGMy8SXRLj5JZjFiPg7TP/\nVFU3cLpcbBUnAE+9R0ZeEVcufgm2OFzhaBgHpssiqnGGYyYKkG7BvhDt2V+r\n3v6F6VBFmH5BMYNnbhnQxp2kLBWUsNFZdzoDkUdHktTTZEntb9dYDFo5umMg\n4uirsR6WwY3FChmzxRe6L6CYKzrMf6OsTNTRtOzSYzVVuYLK4njW+8S/Q4jR\nUfP9yy7Ijb/jHP8G/0Uf6hpkvBVz4MHrLud1V/5JrBn78d4RPZ7RgsH/vvEU\nMKxW5aReWOa3ltGH4DRAVZfBjt1F+0GJYkV8O16tMf97IrNZZBhhzNgcrDl4\nIDExNUlJnZ3xjGUsj/3Cfu/ZaXjtzbywdlwlDOiyM1u1v5DIoc1bjRjg0/8O\nAA0wtzmVS+wIkQ71NCVPB4Q2Pmk+2Moi4X0k2ekwEFbwiRAhqBHa6sGSiJ0a\nNvtjGtAtJ0/gzULa3KFPLubcu+t6cTPoAFpPcbVQVXZTNhhUxQDs6NOJibLg\nA+RtyZvJ/avlSpGbhrdDP1DUpanMDeUKFiAHpBY3890OYvIYLxiSlNbWvpS9\niRba\r\n=CT8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/button":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/typography":"11.0.0-canary.0cde52f5a.0","@material/icon-button":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0cde52f5a.0_1616457851021_0.2687499323181963","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/snackbar","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbc4f05b1dad670de0cb896d3320d8f2f188b66c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.48f4b67fb.0.tgz","fileCount":40,"integrity":"sha512-ecJ6RpfWioD3MxUB7aq5kVoHQHlNh/Hp6b3I6c/l+7grYbpY44W0TbUwmmMdcPxHjoE6NpK4xiPO/Z5vCyJQhg==","signatures":[{"sig":"MEUCIQDtdT7Vkv8beLr3mLQa68RrL3CEcRcYwBXEwkhHmorWiwIgNJejWvQlHbuWhcjdmdAXUras5eXRlNpl3wS+BXCwe5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkfACRA9TVsSAnZWagAABFMP/iiLzOPQYQCgb1u9W5fi\nHTAhTQi0RyxPN5kxxV/lVkgsylvW+TXEyBI+8jU5mU5coXbBN7Tdhu9TPqBS\nUVOUvk5nJHMknJTtX25Dd4LQgE7gN767nbO7k/o3TP22Wl2kNdJVmzZ5cM7E\nGNerx1Gb6/vELfWjRPKRM9dwlMdoOqmsrb9V1k/bY/Lx6n87mm3QtX+otitC\nTPs6yxMDfPc0k9C+hQvjWD1dOTZqur2rLwahRGx9Nqj+jBOWiW+Iw4jqisqd\nk2Y63VlC83Bz3tKLPt+Y6JN7T3T6MKmWVCoFXT0FSDhl4aeLj+sj2H4TBQAM\nnXPk7aV/5N3kg/laJi80Z0tFb0VJwCK1CNvzqf4VrYmbSzBBWsp7RBMCVL78\n9aQLICRQvuIrcllDRw3s0kKYGuj11qj+QkxO/+fMHdEKKknAsLQ6tAwdVGoD\nZvIrH2vE7HxVOidooECLOEfnv8Av2JUliIs4nhMbHgRuOoBXM0pxZwMzwML+\n8K/U3u+88LcVPiqI2qPZ0rLkl/A1cqn7oqxZeQHXaq0pqx/99eeigGEM2Uav\n68cYOJjiEp7cLKXY6h/lL3Od7cXQTMYRY7gHrdyF61+4SYndnEO/j0Ze6gNa\nIl4/1pwuXT3umXZD9BLHiiTPvBAZSYMJ1B+h9Zq6O0dpOdX0aDtZzfMILbtV\n5rcY\r\n=IusH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/button":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/typography":"11.0.0-canary.48f4b67fb.0","@material/icon-button":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.48f4b67fb.0_1616529344006_0.23884768086789743","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/snackbar","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"420e563fcbe4c70637ae7c67dc5ab6bcb6a12155","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0b8cff734.0.tgz","fileCount":40,"integrity":"sha512-cXdSWlNB+OB70b8zDv8MrqRel/uC+VPE+n7Qtr/OeThB009HqTZaH8iIOYopsQq5J9J0E1ceA4UzXN/TetA9Gg==","signatures":[{"sig":"MEUCIBPa9UTO7IwnGkkJyXcIiUe86FUwjdyO7VwYE4VCwsZ9AiEArBt8ptz80jFDjVm30unZA2MmrtGWc8EbQB0lzFH8F2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkokCRA9TVsSAnZWagAAycAP/R6WpMYUVVQXFemHjNA8\nK/n0phe0T0lUZrGNhuGslskKQbeKB049PP3yPQTmZY04GntaOdWL0xw9I2T2\nwfVT7RsozobzPOAGUJCYnu/jB6FMo6egShKAgijZ2E9SByWvwVjGj5MsBUhA\nRDoIi0bJm2v77bph23dwt6UXrmrsKs3mB3jJsldYLUcQ+SooBe0SYuHvPZ9J\nwZEbK1p/piFZkQrlfu5HTorjoto/5VVsdCmdvDRwuSIF+sUnlzRKFOrL66gO\nZi4E93oV9+8BEA7XvgEadJ6girXP+x+A1YGC7ygWKryC9ul8pwP73FPCjzdS\nVUIJJdr4vmt9O4m/+D3UNb2cbYAwqnTmAyYpav8Ordu2odqj4JhqsHfxPA6M\n5rb5JEnnacYkU5xaPutOgNQ4KbQYXWP31d9gu5Kf+nXA3Z+2l6/fp3xl2ydV\n2fsCH6kuhJzj3tktfXF59FQVuavIyOMN2xfEKiOiBL0L5If+QIz5SdqAtdef\nUbtE5aS8bjGv1d+jcWSi8FtMltinFnX7Ho8owd8HHlEZHeTHBvujqgMEg+se\n2wrSUX3DRUsbM/rnubS7/XCQIlI3dCn0dt3dr90nI9ogMaX7fL4DrF9fGghb\nGDdx6g09h741csgRX01gA05LV3yRG9K0onTqaCPbx+db4Gneu1oaqRvoOyUO\nk82H\r\n=H96y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/button":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/typography":"11.0.0-canary.0b8cff734.0","@material/icon-button":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0b8cff734.0_1616529956009_0.805319829713915","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/snackbar","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3b3b466e81160ded03fe035ecdeacbe3f95c7f8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.8943b991f.0.tgz","fileCount":40,"integrity":"sha512-T2+N3M9vCucz97EY8hRgjHbrCwq/3Ffh9yZNcCUa30OOmHPBZjoaeHWSmrKQA0HYh2It2RgepR05qnVZ5A3IIQ==","signatures":[{"sig":"MEQCIH/XxGeiQHpD0LiYeJKwBMrQgvhUbZc3Jg2btaQ4HEixAiBOaMeiKdzFUXXlavYggp6E8ro/JU02NgW2lhXEXAdtDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWlAACRA9TVsSAnZWagAAQ6EP+wS3eq1lwvtz6G9stS5q\nN9ccftysbg1+7uUB9BAlmwwvVgejJfqfxwrh29zCGUT4+OEX7jwL1yjtblzT\nouW+ZtDtAZIjh6Ef0Iq6v4hF0SHw7JLJcpg7Axil10iYd5iFE9Hy9s0FRZR7\ndueC5M0UGBtP2uDbgUey+wtf3IhLKBjGXHd5oef9tHTT+eeSzzy6Z1YKisdE\nuGOpSgitBaIeTOQXk83YsaK1rZUi+GX0txJeLWD0iFliU2iBjh8rWj15HE5g\nlY+LoQBhQGTngiRUZ/GeeQRSm9nXcsGD4XrhcgeWr5C88ygY2uPKM3bqghcw\nA5aiQKuiv+FNRtarMv7YYWnzprmoWrbpPdGzmncIoan14D2lSBkMXanCusm1\nSX2ayyzzVIDleS/8vwQKNp3cTbfl2Fk4kSMDr2nvvWQC8ttrFTSr3MZD51qt\nsdFfa2+wV6+brC//ifjGPxGvS5r3G3PETRdU+u5DN14ZCd84a4MnxLzDlUwy\njWrvUAGC/kqDUwrEkCYoZeXS8R+U8V8uMr0b1m8JmV1nM4/9DXh5dh0w89Ja\nDjVtO27dHVmHtMa9KZzuUNYaO1YutDuZB9ItykzD9Q289n9sDx56bQIUfUa3\nYY7SRmTbiol9No92+i5TJGnQbxorKgmvOHp8TnLPvtHHtn7eZJMoVN3c5QDJ\nCihd\r\n=aPZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/shape":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/button":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/typography":"11.0.0-canary.8943b991f.0","@material/icon-button":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.8943b991f.0_1616531456011_0.803986315177831","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/snackbar","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6905d7206bf660f31e9d8026d63ca0f2ab6d084","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.3955d8d3d.0.tgz","fileCount":40,"integrity":"sha512-hKR9W8QE7fuvUX30mAIHKI6pfD1VoFmVGglYta6qF6rgLQPwTHTWwTdPI6YxBxXW70ksTIES6OTnSSyIHw0E0g==","signatures":[{"sig":"MEUCIQCqW66lOJmrIiR3kfFa/IwfD9qOLAqjH9bzUStO2RSHVQIgD9LRKo5Q3PDKt1Z/rz3nLeE7LQp/wo+90c3bpv63rec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5BmCRA9TVsSAnZWagAAZPEP/iSA3pdN/yOnkq7rjzeP\nf/wWPxUMb4w6lC0zm6/em/uN6celjqujGH9VrGyQNy01tpKSqqHEZjYhjqMm\nL7oUhrgGzN1bLLTI0lAVmHW7q7ETrGngT32kxjSR6EeFuKvZfkdGmI4hFLnV\nlw4d7V2lhLRvqqCEPemZpup3MHknDhf7I2xVuEaPbL6ioyp0jA9VbJsjw7F+\nZBhD3zHOnmdRf4e8DYHxA9lQORLVuCxJxnakDT9c2vQk3jAFADanLzm0ovxH\nWdMqzGWT8H0xui+zpnahfipI+R0htcVggAx5rBtTn3aKLzbWDuxv6N05o5W9\nFYlrUNWaHGPmAJoX9cWEjtf+evbaP4pT19kqOPtDkIwtVBQq7ugmO3dOzkfL\nCAm2oAUq3l31rKhBbI4sE6kSlIAwACqRN4QdVq6dOA9AETtWaYzJDquyJ8VK\ndtXWoDPu3EFzu4iMXhqVPFQUwtXYwQgY1viTXPlIkYXEiRcuTNkxTswzViLi\ntc5mN1Y5qavkKNmgKQ+Pjq/knvrpSBMsIoLOM3uSXAq2bigJ0w+BlFKx/JNn\n3F2EjqBSQCvo7HaUbCZRNE4A70EdbpPEqDMo8wGJz3UH8GzEQ6IkcOMFMIhh\nlbjhEkm1GHoPBrnZu3iGsyHDIz5YGat4CCR13+nr/JGM3GxDPZLZFN+hvMwn\nNYRh\r\n=quyd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/button":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/typography":"11.0.0-canary.3955d8d3d.0","@material/icon-button":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.3955d8d3d.0_1616613478177_0.7440147796204739","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/snackbar","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38859a281bf77f48e4470edd7464e794319e518f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.23ea2d85e.0.tgz","fileCount":40,"integrity":"sha512-KamD38CzjDvJBKNooeNYdjP7lmi7Q5I7QToXbfI4SJFnm8fdvxOIdOutxxY9ssNwqfJg/Kf9NIwpEJexN5jMIw==","signatures":[{"sig":"MEQCIHfPTl5AJeUj2m9VcjbSqArZCjbWPG3mciDQchCfqkHTAiAkmVcfRX2g9mwPDjSdMS4CiR8KT798GOhTZ/EbpAcVyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMmSCRA9TVsSAnZWagAAIcIQAJstoCC5zN5XKZhT4rvJ\nctPWSl3ZCckIIjf7OpQTQ0mgVLkjyR7hUSZboFpsLuZw+l9N+s5429qEWECe\nZsg1cyua2MMUYHd8otzrJS7taDicdKUlziY1wz4S/aflNtqrUHU69+QiT1xH\nZLoo/KOkeRFzS95HtJ8TiV5/nvukYyV6rXYmZZakPHuhfTajC/YLudJcKrJk\n3kpiot6SuyyIYlqcMeAtWJBXCN15xnT5jS4MVDA77YtcG7BXm3XcllQy5ts7\ndKhOjtaYF8pPBvqCORcuhmupuRLMeGgeMOQtj67vEejG4wQLU/CzqRrqj7+0\nh4DYdBC8XtIO+eohMsItqckir+70muzyUp22oj3ByLFCYR5W8vqIIOc9QAU5\nfgUM74xZXTCCsvnpe5vQm4f0nlwcu/VNhYoAJCgE9xCvQGM1PYFN/bxNBd40\n1/yKd2jFaGdmAwwGmf6DICJooeAWxz8PkD8i0DshQIFmNzT87GyCt6r66I4N\nvTKcqA35NTWF9E5LDWunbVc8QubOi4DDagrUiKlZKfK4guT5pNE8I7WyF7Av\n3K5hGqkTOUfhWH69yjpUrUYYTrH0OH9kCLHV3hB5hcEEIMQKroyrcLGRfAbJ\nHG6rw79RqgZr060fiMvWfJCkvBI2F/iMx6Th3c5l0B5fusBC7OZ4VEEWmZRr\nKFwT\r\n=r6Mq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/button":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/typography":"11.0.0-canary.23ea2d85e.0","@material/icon-button":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.23ea2d85e.0_1616693649719_0.6289067828960151","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/snackbar","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ab876d0242c2eabb4b8a421f11de48fd466fbc8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.4ceb42220.0.tgz","fileCount":40,"integrity":"sha512-WiBQZW5hBHKn48qYnqquTM/xzkPELMOMncFxGa269hfip+pKYOlKTTlbetjny6r3533E/VP9Ql4Gb8hsRIH65g==","signatures":[{"sig":"MEUCIG7S11Xs7fCWRG0ARXNyX4QW+ljhv0ULuRXdOa/SqtilAiEA3vO1u3ZftQsw67thStNj9qwGPaCo4Yk673Ygd2eYmGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZQ6CRA9TVsSAnZWagAAV2IP/RgFo8t7tSsJqNeStSPv\nquf+EGeIyb2RnpFA1CkbZb9TaUqHph/Lkt/qJeMlDzO9F0PjmyjhIOwxPwSa\nmo5iaUCKqJDx4sjN6Q5RS6/U9oMWzWKvBzSzrmrU6w4FI8KqwbCxXMx3UKEb\neTAMvVw06x0AcWElTML7SdyZ8R3dmL2n4CVkE+KYWa57scltnW1frobdBGnc\n5sidSHDITqB9EF8qXlLWNqLpxMMVOOfTUL5NFomOv67I870qFiiOKvDUezpX\npGgN7KdezTLiqkKdOo85i/5zQjUI44Otbr7mFlIFSPKA0jdJGWLMc1fPLb26\nDI7VQvRr5y1CnTJGzIDgVa/F2gpNSnieTao8z9wr2/CEAZzpZALfeGGJ8VlE\nVM+omDD8h1UzGH0Xt1kuEMuV8VUDFZNdGk9bxE+Z3buZjTmmEU+eHhAj0+LR\nvklLEYc+5IpVYhkgkPLvpbgWPl3tAmnOnUuRgXtvDc+/Y/kOAWRp9FHXlw59\n7M09sK7JQNJkxtloOKu65HkcmLZFTrnJ1O1oIudhQOaMbtRC4B0N/zwZ8Yi0\nvshw1+lptWLoJMQl/GxmIrF7X1UCuOYvngQvDx7bo0y+FaR2eFOvdyX/0Nvg\nr6y+Y7AuaK7b/wWsRHDfSRaj6KJr6pOZhBZY5ryse+xzUJXDASxBAeBNJgR9\n3jXp\r\n=wZ8c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/button":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/typography":"11.0.0-canary.4ceb42220.0","@material/icon-button":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.4ceb42220.0_1616745530359_0.5964007572833214","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/snackbar","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91d0427db1cc674c592dd70f0c137ea03836bc61","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.dc9c84023.0.tgz","fileCount":40,"integrity":"sha512-qXTc8rAJn6avsWsfvPP12Ihjq/y75eEcnaX47fbOW0Ss48VN1VmMQ3QEyLafkzGQFPvG/uC/ORfh2MNvvvDWZA==","signatures":[{"sig":"MEUCIQCjD/4AxvBo6r3Xe7oereETVA+13leyFgwE3DoSu+wjqgIgLvSBKPlRcYKThLAAIW14QK/mLr6Z0JZLBBOVP7u8KNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2S6CRA9TVsSAnZWagAAxSkP/3I6Yt87poRxNEV69gA8\nxTrmoJQ6Nj6GLJEDZNfmqwChZNYJTd84/XNoiLnsC4XE4EyxFrBKORbaOEUv\n/MT/9ewHLJU039G/N5Fps2qcAkvGPTMIsG7fsIvnjTTovjV7SqKhGtFuBL/I\n9j553+9yIiDu4xR6Tq56M65tQTDyPB2brE/STYIxD25Kn57Psx4xxIj6BRJL\nSnzAHa6t/wMKDlk0cjPMhhoZjh08ZNlRLYhM+fevjEVDm+68XZcEKtwUpG2D\nQxqCG6gyidJaGB6pjYc8maXMz51gIHWZ16IJdZ1EoaEGwGzfHWgrlhlQuRoS\nFr/Df0L9bMV6eBkYxBX6k0wLltGi880UNcmlpmZVlmLDGZEmRhF5/sHql1iV\nc3Lv4kAj0NIQVSJ8ZnzrcrC6umc5BLhgJGLfH/hbcPmHx90IPrdjUsEE4Thl\nXIqgnaOePZj4OP2ffkniM0RxNfr8pUHoChT8/Sp2ur5ISEgm8WJbDC3paXN6\nljZFmfGQHQvlD2nQImw0zXcIssYZqRyS3sJybGjIrWjpvDY2PkkbmCt6sB2j\nQ1W0GHi2JIeE0ZoJNS11FoWqcbi4SQNZeA0ILsSHPI/WtDqU8w9GU1yI1Tfm\nRoktLGHRdbNk0WdLvnp/TAoyKefP6Wltc9A12MHKvWdX3r/2ODb//oBPz3/u\nmZvi\r\n=w5fR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/shape":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/button":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/typography":"11.0.0-canary.dc9c84023.0","@material/icon-button":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.dc9c84023.0_1617126585761_0.35667043501033446","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/snackbar","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ead9c266c5332718bcd8cbbfccfd2dc2a51d8b8b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.56fc26962.0.tgz","fileCount":40,"integrity":"sha512-m2TwhvbE2LWxLlf36tr0w7AVX/MnJtBTjTKlSpoSF18XDEIZ6hS0I4kDxxcncSMwLuuuwxnv2JYVzn0xltGrXQ==","signatures":[{"sig":"MEYCIQCNG7Hk5oPadymatH/tdSs3Zs+QbLVyEzV0JDWy3Pka5QIhAJ1B6M73rCyfm6BLvHArOOzRX4cIJTniKbyoKLuehbfH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8CmCRA9TVsSAnZWagAA0swP/2FD41ZuA2w4Tw0wmN8j\ng8vpaxmsXgSgK//tjDyqnizzRSkPg0nKMizcc/ZFT27Jfs3pSjzV0XCIbna8\niEiIFxzVdq3v9DyHb9CVz9uHvMckNjg2qdIxjFu10OhFizvUo8bQHLS5NYR0\n4Uig5P1rWdohuTXRh3gJY8WX+45WmsQ1MviF0dx6I70EY88C4fxnQ9lye/Fn\n6WqvisPDK8FYgc43Le1chrc8tL5pNSc95OkhaQMP8LkKFwncypv64w1D0hLi\nSIqcD/7kNJBOcm/0DT1WiMHVJqYzNEKgKTW5fhZBOz1jMhBRndjUyL/CRgAn\nImNgtVm+MzAC2MKSZv+A4oe+HOBByIVoOl6i0npWpQCavgjBde9ND5co3/uG\nI6IqhYEuFhJ78hiiCX5MwuR+38QWcKuYMEld/fpJNFxDydUeECJwOT0e9NKx\nDXl1KV2pFCmCNbM527HJ/RiUa3EKghWDOdl9BNB97uHqQOfkOjW4w0bn7Q24\nKZsD+GN+Wu/mdwHmr0zCy6kurTekaxj0UqOUcnq6Fzgy5vZRDN5sE9JsD/0T\n/6TE0PhNzW7uHG8jsQYdjHD5VjJcik/Ovmw9PPBGACuGaS3E48lQeQx0nP9K\nOuMWdhx+HjtbMva1/Ju3iCcxX6cUJEVu1uLShBppLauhbw7/1edcNig0swfr\nr+oD\r\n=zYXo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/button":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/typography":"11.0.0-canary.56fc26962.0","@material/icon-button":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.56fc26962.0_1617150117681_0.6276489616319223","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/snackbar","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87715d9e061adb27b9e48568d74f0fb0b572b0e9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.bc318250e.0.tgz","fileCount":40,"integrity":"sha512-vBLxCmXk4wOpsw4aWDHepqWdn5QiP6iZs4kTyHo2WrxxkxtfUb2wsoFWQO2qbvzBpzDqQfYEeItityEJKzsWkg==","signatures":[{"sig":"MEYCIQCRGRssXNOuCUj7MXX+ctu2r+KSyomjPqe+cRgaLdPRmQIhAKAm1jnGe0z/gsue5N1QArqHSweDo45v6TVnHq/tmRiD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9HACRA9TVsSAnZWagAAFFoQAIFsHRt1dAmAbW8NnhC0\n9/dPl+2tw9FJGOCOiZ1eoVHsuYwWSIKOaECnGtUKIirpGTDhoMohVTNFvOyu\nQg4hvWJsuFMv5Blgcsd9WzHGwMuxvsgUH8n9rjsmFwPEwhmaqw/ZqeYGaqoC\n1x6QSbyRyFYqxOFt6eGzhGlDYxwggems9shw3ZPKTIpm71463a6qXJhln6dv\n/rNjfOJb5vGgC75eXCb1IoUr5kzsOXjXBjEmAawo78NjJ6m+gBo8ix9r8Cv0\nnN7PZFK52ptfs2Gnoeg1I/fTtLVAdkbyJ1WoYVy6w9oLxhAkIiuVUfPtDLiU\nxOaM3Q1cnSEl0bu2XmRYElhREHaaSMzVrSi1RD63rBZHxkQoaujazguK9Uos\n6XXhvzV5Jnx26zKinSDk1sVkTsnTHquBuKl8dwTIYTYXAZdh7ELZsCwwlTTf\neDOKUO/ouiz+Ybm3R+doEJ/0az6/2q+rOOFEDGZBNNX6FYT+ZSkLyibfISfg\nUUNNbo6upUoRJNbs7YK1ejJ+moua5IBvOaOBewRov3Wr9LEnvCE9RokrsCis\nNlcjbXdJVpr/CWlSGd6lUgLCWd7GxDIkLguqEM9tQqKr3ilmgWSGErwVJNpX\nEPxZZmqNzzqQ2iYJa2osBFPaK1R1PvdZS+O0Va6jtA8+suuZO742F55NNM+o\nGmfo\r\n=zIR8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/button":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/typography":"11.0.0-canary.bc318250e.0","@material/icon-button":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.bc318250e.0_1617154496409_0.5754483701315924","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/snackbar","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0caea58ddf16477eac2d4775494c540ae30d2ad","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.edaee19aa.0.tgz","fileCount":40,"integrity":"sha512-+vkfW5ZrICkXYL74MDbt9kSEVrJocFq3Cgq+8Y3oe1RNnCyGLC6Nxzj4tXnVJyJyvb2K5mInQvPaXOFoebI8VA==","signatures":[{"sig":"MEUCIBemFaqOyyHk0VAilN7lhhI3w0hH98hHGpivG2KS8pEEAiEA+1Sc0QZi+u+YRGfzxGfGsAvwW3a0qLRKY24U21v+lYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qkCRA9TVsSAnZWagAAKdEP/j1aF9wcXZ6swkBwwvYK\nf1X7Tt913AtFKkkzPs++CwVY12QgqA8S3yczKYvFVyFlbx+Em1jWicOjC7pD\nKUJHo/XrgIuYG96S+fnvpIg9VHNsewYUxGV1R+9inDGtOFBqODe9WpinZi8r\noDDZhlCXrvJU8lxzbeTZqRHOs+kqKaWyN9+gds74ZtgerSa8S8rNEPyBGcBJ\nZcx3tSQF/l+4cl6Ask07ODn72QyvMSdGcMVVY/cpzXoI1WW0TTzuL0t0NwH/\nryIp/yONBmlr+PU8CvtaB265e9CuJ0tjSp0OLQ2aRBEs5NhhyQU41Ijf3sQ7\nEeDXIQEH102bm283Tm95D7aX/FO6LN465+ifyf9a5w7nuknJtcO9PSpfH8L3\nEMxMVl4XwgqA/CCKDBlUG2nGgA4lIKR5Erc7XKf6p8TgXnEwJznm262vWVHC\nElRJtSJ8EtlY2npQ0MzCxCX6eRWoFNo+C39YNEyNVnJbHpDXs8nvl6f1dJf9\nfObfqo5Hh3IoL2ovpJLKCF5XulH0JopqckaKa0BlSOl7EQYydAlhxlZcfOgD\nUEgfVyvBcrJedKpvEKXOl0S4J5GjNAaHtR25YVpkoXA+u23zmjJmmxXSZecN\nrmsSSzQS7yC4DYKQ4XisP2H108qQ2bg4aDKDtmIzxKGOdksc+j5RF06qe5Sj\n5l4C\r\n=Yu3A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/button":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/typography":"11.0.0-canary.edaee19aa.0","@material/icon-button":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.edaee19aa.0_1617156772421_0.6137573835069565","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/snackbar","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"681b58e8a1693aafe5ed3ae550b750753668e60d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.24609b822.0.tgz","fileCount":40,"integrity":"sha512-11AQzvwN5nOmua1kpLB4myShQgoJ2TW02JdcMr35vOox+SfpFPtEzjbsMrbTMYUR/RTabGanaZ7X8Ihn9jB+Vg==","signatures":[{"sig":"MEUCIQDXsqFR5tfu5sVZgTS1MnQbBWqageZlSYhWylQGwbQ4RAIgRLzYMzj05bz/EB8KRN7OXcnkDOHrZSh4AV0kJIAfXmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJlCRA9TVsSAnZWagAABs0P/joYY83ISGnKQ5flwE4v\njjmnsQ7/6v30Ot3Vg7esuaCGvyYzQcLBgc8KR09z/auPYw5GJHIlB/3lAdRB\n6W3duvF4eOV+dR98/a0hJXekBM14PYES9sk8zobse2vlY6nSbQDvLsyPocjZ\nPijS5YtxWGJ2ayAlNVK/N9yfc3Wg0N2bd4wstLC4Y1ua089AMX+0Uo1jWD5t\n4u6YjSJm1vm6vOTWT6X3GfMPHWUtLExZ/MFIP+XQI1yWEEXw9YDeW/MrABdR\nh2c9Qn8o2hUktVe12jNfByo0abKyu3HQc2h2ycJDjbKB8y3+ngEJ8tEVjvoc\nikTeCwXDkeieayVnJjP3WZrV4iypkOXZZNcZOsYOxHTy88YxKIaM5ZvnObeC\nXxBwxrpR4IelrV5zP0jI1GOxRxTexjI5Druos4k2okL9QmbFAYlOAtmndjkX\nWVw2xZWaAQh5MN+T5cemoY+RHa9+Sj83OM+b2i6YgDWpfgGJOd/0Ii33N1f6\njlTnDc54Fz+JEWd+g9REwY5mKCtitfQoS73ZNy91quSP7t/U0xi8v7iGDSnO\ni6xuwGtR1O8bXa4cKRkGbS8M64sa4/QxQxmryajy5bShniWwO0uiIaay2iB+\npVu5ybc7eaJSbKMEDTAjgk49p7b2UJ4ob1f3Ktd6ySdYPMfCB2VoF3koFOHp\nv6Xa\r\n=IxBZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/shape":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/button":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/typography":"11.0.0-canary.24609b822.0","@material/icon-button":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.24609b822.0_1617224293062_0.76791703601868","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/snackbar","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db637f0846cec024e4beb8555caaf090fb62bec5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":40,"integrity":"sha512-5blckTGWoo7UdRTjK8ukUb2XdjNFGSjHxf+ALcYR0nkHPjb5ATR1aD0Y+mqS/YxxjSHItfXitjefCXzT6clWfQ==","signatures":[{"sig":"MEQCIGuilLckTjPwcgCB8qCVgAITLTGPRp0rdNB8zOLSOzVdAiAw6Zz5wi8I1TmBRDS4vAIvitrZliN601n61baQ0+OXZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeF8CRA9TVsSAnZWagAACsgP+wS0gZefU+9g34rulwrw\nV6ogyLvUkZhsT9LnqjvLQXmYY0qzowN9kkkKVhqPbuo6YAOvsuPxEKEphAjE\nsC225vq+zIvXHBlAxHBSV/3ZwrSjWMmtBHQPu7gyaF8OBh5oupwTrsITK9hF\n/dGSv3ZqDiWLAC99oxvGx1AS2zIKAhjpRKSBmiDap6cVyOfCjDtfXNYE49DB\nprXbHXUzVUmRvhkv2woxWJnqQyPyc6/1O/m0ncSvhj+7OtT068vjnA7E3E3K\ny8LMQ8vRUHB4B5gUidAQH3tCvyouNn4jvb08v+Bv/1h4bxXbKjhOhG8rbuBz\npItVC22IpJVd8ky+MKpuLiaDPI5iYLaDHRz1x/yqTMhKNFS7KFYF58GKKeIk\n2ZObfF61a4x5eFthcvFtecgUMPVhSZO9xcdZYGrldagVo/OQ4nNWVfCny6FK\nHipvdMo/Ted3RTVwSKTzT2+8aWWDK1x++5x7z5VN9Qgt1t0imFzf8w6dr/qx\nkOpD4/A+Q8MqfGDGhp0o1rzdpSDKEQVWn43Zb4Ai1wf99VgU4sumLfMZ2WBW\naiHZ4gldBR2Gh488HLVBMRpOWNOLijeQYQLyZSMN9SAnj6somarOc5fZ22zR\nL+kHnV8E4DdWAUNEaaSQskBlpWpv+M9AT8PmnoiSSOXKDKBvNQM1YN1VT9Xg\ntAjr\r\n=FJCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/button":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/typography":"11.0.0-canary.b6cddc2b7.0","@material/icon-button":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.b6cddc2b7.0_1617289595710_0.4466975187336264","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/snackbar","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1bc88308ceed84c347611ca3dcb3ba0d38989b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.94937c78c.0.tgz","fileCount":40,"integrity":"sha512-rCK+Ft3yfMSdK8yE3VniIsRj5dlHHpIUoLAZs8LnpAtH0gOCPqGijLLvb3cuSv37YcuWehLj+Jp6g9bkA1Zm4w==","signatures":[{"sig":"MEUCIQCnj1Ol3D5cTJvDjDvPcWBZD9UDDg/ziEmY5AtV84O4NAIgfU8XJylhTJg/lBg96qyJqTgLGm3xWPXNmK34E6V930c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjTRCRA9TVsSAnZWagAABSwP/ia9c6nd3L1vd+n11MfA\nKde6GGaCVR7/bhMTabNaZVyjm6xJtwQrhN9RFiTvkp7ASCASIdWRIaHPhA3v\n8NNSA74DwTDrpPaPKZ/cxFsNGRSzRIu5bh4FkieT9fJgwrFusueLR88A+BYq\nTSf2eLqQLf022x9vpNQQ2GTwvthodSk/Sb1/nJ2C/aeimH/Es8Pk3B5o2Egi\nJRyRX4OkaPCE7CzgPLoi8i1e9Dogo5R3Kc7W8Y1d6Ave5O7crzez8T7x90bn\nEZ7QlKI81RulICx60CB+TknDb1iCGRlYNmaxDgOerYtv7QIepXXsYqXmzxwV\nk+Yx3hSKydgIxW4EYiVQ+IVAHdQNC40mBZW5BcyJ7Wd7jc5ks2ZEt8l47XDZ\n5AK1qRCP3wh7ctRGdGnRmKIMNobyvE6eXvJDsJSO4JFNj0bf2FOBuh4zOt/I\nA9X36jqbxQHYC9jCzWSzAuYGneUsJvJ3qRLunBU+ylP13xqdzcQWvohXGJhx\nP9eUfNsD0/xHd/4PF1alP+0qyjjGT1AspuJAstL9eg37VeCYrj1EsrC24tN8\ntj42jQQMrTzPTEZatscVU23ORohh+nWgGP9pec3kOlPa1ghGDg9RyI0TurRJ\nh0XOuSVJfKj5ag4CnLS/ReG+BTlM1FGQ3o7//FqExod/QxYm+WZdIVQsOmzi\nNduq\r\n=QKqJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/button":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/typography":"11.0.0-canary.94937c78c.0","@material/icon-button":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.94937c78c.0_1617310929224_0.2623303701977382","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/snackbar","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e871b363bfddab4be655f1f1aaf93b3983e09ce9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.e7202cb57.0.tgz","fileCount":40,"integrity":"sha512-nckRo82/3K0I4DPckXcufu2Gkirro+1/SBRuK9aYNnIUQ9fxAbZ3Y3OknpyBBzd4yHwu2dmw40FAgF3sZhadMw==","signatures":[{"sig":"MEQCIGA2uCdmgBjmK7Dyus1SOtZA7Lrl7U9psxaYUek8pHBeAiAU7REN9v8WYNXWOYSOme6GDyuMwawtyB7+g3DCMeSW9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk26CRA9TVsSAnZWagAA0JUP/1lYZ5qGNu7rXckrt/Eu\nCxwlO/98JsdcKZtHAySJyJr2agE/zcyWi1kfjCa102WjZqC2R+TMmZP3XTqh\ne51ZKN/41Ap0NqQBeoyQ5UYKpedOQz6iOzZVyuv9Qzubw/OWfFWfB51MR+o5\np+VBClpGNFNIWu56rIUxeXTw9xoRQAw8qg6RIgeMTTmvya2+SJVI2BJ91QHG\nc3X8oLfmJ+gCA1m3NISNzh3KaDaw37Wf4a0D/RJwY738cXw8U5wdgktVw4oK\n0G+OpuPDAl4s9y+xAEEr3nfh91uMzoMxlY/suGZrNzVAcQci9VIjLV/6hvtU\nlK4yrzMBOv+FgRTkMfPuYAm8vx1YOWfMCDeDAFCvRP5q6SwwkwJ/We8YBgFI\nSLNrFihXqa936NrK+wJqLDoqo14M2n+GeDf/uTeB2V6qLjvA51EsgK1cvmDs\nMW5+DP2o+OAw+VZwZMuercf3rTFUniiuh4iomXBXBoFwAfY4qH9SuRNetLgm\nN9HmEgnsr2KwvxUKvG6/ENQHeuGisLYuZeJ9P4hZkKKpGgLgi+cc/grX9QQZ\nxOgnmBzIYBKPpvyEHBmkOKi/JwhbA4a5RkZhOYF9Uxb3+WcBW0J/lojmemxn\nxn4NTTaUglZaozBhSVVTxExFnuH+d5LPW0qHGa80964FY3jtDxJV1R85ytOW\nVfjN\r\n=MTnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/button":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/typography":"11.0.0-canary.e7202cb57.0","@material/icon-button":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.e7202cb57.0_1617317305817_0.780023704078882","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/snackbar","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f470847b2d1d12b50968f8bd155dca9ce23ffbe","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.1f636b205.0.tgz","fileCount":40,"integrity":"sha512-zpxztMScHH8X29eifonFBaWakZL2ZPIng8Ia1TG8DlLIpnevnan2PA2zJd9AlTcHVu9Cr99ZPTaXBembsbxVgg==","signatures":[{"sig":"MEUCIQDUgYrhBAUw5lFnswPes29MJHnO/QEAKnb6bpKZMy+OEwIgYZMvlFToga8xZsJ0ocrUZxV+xarNWEwtEy/c+To/tlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5nRCRA9TVsSAnZWagAAOncP/2700FhtxckQ9zKLuTNl\noPzwua7cWgBymWyVyGfOD2hnp01VW37rHacnnxO61VFmS8J0e/H8XPUtqx8Z\n0uCnI9xLUubbR/0/yJkypN4q84FuTphaC8cKPm4j0ieE5jEyE+G+QNR+NBL6\n4vDJIzmtoRtx+SEj68mWivnyaj0HI3l1NZ5Fzx+6IivZDGYrhup7b1iEmShy\nROJwjLPyBee2SMWGSCvZUZQp3xL0lDMdTKrVyoR2J+G66ls4RXbV2OBi0j6f\nZZ/Yplcr6U5gA4bhe/uJrIdQwXdQNP8eYju0sIiURfvxblG11cmeHwOqtKD8\n4kMpmRYnEILRdARwWF75EkW2i2sVkpIGCpbTXmGHlmgMOEaltNUbJbyrLXB2\n9V6XCY/FCHURBd0P+qszjj66I1jFiHq5r13Mh4KRdqYrshh0nIp5ssi6Udqb\n6EuLifkI6UNCW9m+947sNN51diE/GR1UkbZdvSvXJ5sJnUseEYmbmRKcXAEo\nqP5pZ/9cPZMoAsCAm3R7AJtgb9tNJglC+aaX94Akwi4O2j3+S509DygEqcvf\nzSoBbLoWeHjVyXHhrsJY5MtfEob9EmAVtfhdo+Xa1x0E4VgwpW5x0XTJoJf8\naytnwm4aOS7NRhkat+0MzYJ62JM0RHa2IhEaC72XcZYM/oBf33gMhsyOCOx2\nAtgW\r\n=lKZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/button":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/typography":"11.0.0-canary.1f636b205.0","@material/icon-button":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.1f636b205.0_1617402321435_0.9064150904573895","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/snackbar","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39ccd608870839b0fe58bcb2fed4dd0984eae533","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.94f50b260.0.tgz","fileCount":40,"integrity":"sha512-k5VJKyhfMJICiS/nVjb7LRrJB4gUHTiIA7j/8B44dxn3pAos7wA7wBg1DTazETwhVwG7haCbj3e9h3bZ+GnXwg==","signatures":[{"sig":"MEUCIFVoaJvSHeBvwXjGA6F9xoxle/tTpGgzdGTA2zA4Vxr9AiEAxoZo3f7k7s/0jvBL7sNYu3HKTdlj94on/dUpdziPD1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydyCRA9TVsSAnZWagAAe8YP/3EAYAg7nMHzD7yCPgRc\nOcx96GgXqUHhymPFpe2llG+NUBp8rsp0ehz4D2pz1wJUJQMVwbfgYn/HWhAH\nujE/ihFwDkIjKF10uDBncgH7Sc7bYiQUISLGKHa7N05uz+NOnA7SlEmcqKLY\nTh5SJspDSfYEDxO4beSMTWad81/db15g2R+RsHBed5/boRVMyQx++91ssRGV\nbQa4lcF2cmD23/sCBPrMYJFPVaCKZiLmn+AtZNcLtviVKrGtiMhrj48F9vnV\nEMeHJutWS35HHDwuWKBNSRL25d6HT00QA8KS04QVYngNqiLa8DsSrlY7vgzS\nequ8Vd0syNxZ1EWlTh68VHg2WiI4pLGLRa+zl761rwCdTThbLZwrbynBTmpX\nOM3Qa+4R8nkX0OoGeazpqbtwijvN0DAfboR37QL/8aiv3ZHTxtmf6vLgb5rd\njDOKlLYXbpO4Pz8+HOCp2YASkT8PdAQpkYfD1DyW5//5WsXota/ls9A89et4\nOGXq/ZCexe5yGDFKVHMJtPI1MiC9zO1ADml0dWrnWGkRyZ6OpRzJyg47nD11\n27gF/qqqOPCUCyanrnllGrgCXq6h4TShcY/xwa76YH7suKEr5Nn9EIQjTGeS\nVdf++2UDR5nK+LFYj4+SlYOaX4UgbWVs9yRPO+E5XENf8VrcYffsIqr9zJiU\nkcuM\r\n=oPbJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/shape":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/button":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/typography":"11.0.0-canary.94f50b260.0","@material/icon-button":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.94f50b260.0_1617635185821_0.749117798327942","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/snackbar","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f934953aec40ec0a42bb4a322046abb255d97ffc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.a4009b80a.0.tgz","fileCount":40,"integrity":"sha512-cb8JbWmJ27+sQsjbrReUnfHerTrrkAY7URZDYJiVWcJA6dqE+IYM6YM8ecSnsjNnTQ2d9fU1Wtt0GQJmPNVyJw==","signatures":[{"sig":"MEQCIDLSxaX+uoXP++zELuThZqCrYjRs3K54k7UM3WCjDd24AiApL/h5CyXhPqDuoW0mWLOw4mvZB5qo6+TrDZJEdbKi5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4jLCRA9TVsSAnZWagAAcJ4P/j6jwJtnuBHChQLOqYZE\nY+qusWtYKSwOpl7RWDZf4Vg73n3oGjYXL4ssusnsHIN65Os6GSVN0wO8ZNzc\nGvTTSSEtoCDvL7S93OBtqKKRhQXuDYAXvFjcy6ySyEfn5Xv1vmFKtATmOr1G\nHIg8Jl51RfaChK1N/GixMUGhNtRFYEpUUBIPJFQ2QGQwFfm1XnT4qDoEuSSY\nH38Uj0vXaUoQMWSOE6SXXV7HnrrouAA72Iv04VbkzBvzT45+55aOqmaetRpL\nMAVL8V9bDtzGGmuVCVQYV1lVtDkXpGUBqm5t+awj/wU/MU7quxQ1SSHYt8Qn\nGinl88CF+8jY0UmjtY5g9cBtmEeNj5xDB80QiQgaqYQcjdG4RD0EGgl3iWvM\nv94QSv/cPm9io5VRJaDoNgbl5IdFewe8wA2BJYlFAKvIdiF6+P6nZ9urVVj+\nkKZ0pr5PqJADOtOlWt4tx3lnJD7l39vk1GRqTyaok7CEi4pplFC98kS1s4+r\nJCTYqyMsdWjAFmo+fZSK3t92RPJP6nkHr4mdM/iIwDsQvKOfPvrN0dKkVITg\nX4xqyYWVYfYWU/gPOJqamisMAu0aRmGPVDWlusgn27DwY7AWUAoO4UUS0M+g\nL4Ne3qGT4EhE+6qGFeZtWVERANn5tZR8a7SG+ZVX+8bb6JeKNv1SeoLrX4JA\nemTy\r\n=6lHh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/button":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/typography":"11.0.0-canary.a4009b80a.0","@material/icon-button":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.a4009b80a.0_1617660106866_0.3278002699898026","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/snackbar","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c123cf2b3e1f564ad7dde68d7926b7f8e440b8f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.15604bd0d.0.tgz","fileCount":40,"integrity":"sha512-1Mk0qVxr352i5d0+XhbpLFgHnAkNnX0S46gooy/TguinxTN2UkCIe5Pbdne/ZCAmiYy9LgL4DHgeV6jWFLmN3A==","signatures":[{"sig":"MEUCIQDU0an+60+e93GxsmLLhPxrwkt1dZgsvttayVYgy7luGgIgDamN3KkAFD/YI4FT56Mp+TYLzet1f3dlfdBtwnJwIvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5KMCRA9TVsSAnZWagAA5EgP/A+F2J4CWrzWaa4EXv2M\n4zbAo+qo7PUesT9SCiIp9n3xhxvPtfGhW4XwEKxoaZryXtkVNKH547B2AVMy\n/u24FSc3FKB2LZKtpg4SUcY2YtsYh4i98SH4yFNm1uJWSbBRRhGmot50YXbf\nyTcv3gE4TZ03ZrI20aH6pO1TMEy8hWeCYye5pDhX81toDmOpthT1IdqieOxb\ntccpz3YHK8/5KfxiaUMhtgA7pjCMoR+hwjdhdX9gNA37TJY9c3hSWIHTm0Ti\nhfSTmYOx8wWCAPcgAeMrMjgkHAuKMq+XHSMrAs1GBSTwRjjWt3622aS4wKLA\n1xd3ed1NbjqCNBFy5VgHtBtKCZaY0xTOnRWuCG2rBfBf07LG8fQR9urqhBDP\nfNmE2nlh+5EkqofF3wNMLQRvCcO6dqNxhZUeAct9sLanA+1IV6JqN69XP5T4\n/3+JvsrAa1xAwWr5I5ceOHt4pMar1yzpJiorYBY3xYsnZFaXJAelAtpLSDPR\nzZi34z8ntptclVC/wUGPuACJ/YPsnvuL1pvsV+RokVRWLzVNRX2unAv41lKO\nKjp96K6xT63MZRKqBpNpQ7PL5QtxmsdyuV32d9GK339zCGKDgoWsX91UQO2h\n4H71lhVc8RmY2GxAC5Dl/AVEnzOH7I44IsWAf3ae17umCmQeX/DKpPRla1Lj\no4ya\r\n=iGcw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/shape":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/button":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/typography":"11.0.0-canary.15604bd0d.0","@material/icon-button":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.15604bd0d.0_1617662603549_0.5294884991185742","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/snackbar","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef12ddeb9b292a1d5c5a957882e1c34fb475546","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.76da7876c.0.tgz","fileCount":40,"integrity":"sha512-HL6z4rC95hE7haLkFzgk+CCcpoiEFZESI5cziAuyAhNT3bUHIr8B0r4mbf60l+YbWDgFV1/85+x5o/fPcre3KQ==","signatures":[{"sig":"MEUCIQCqz72KLVWcw/icRvPBQkmikmKIhyst6DttJSejkkM3wAIgCl4maHy/H0Z4V4OEm4HufsmocDwLsoX+tcMUmCBtQ9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ7cCRA9TVsSAnZWagAAw8AQAKErXUg9s9X1wGGJcByF\nvk0mG4orRmKanqqaFZzhP2k7ix+Y5lGuYyWI3UNqp9n3el1niCxmtstVJuSz\nlasGOKmRj19ZbnWINGZhgqlPpYqTSlKl7pWDm8Z6457zQB7izgv9/KzBD+7J\nUCgS6COcJEGmQrodyLx4Md3HwQxkXcv3tkQsz26hjuzBFgUBK9qbOfXjXAhZ\nBfnlQQu7ZrHOVhxKiCNP5bqEoW79Q3Rr/tSFftt1K3xs91QM/tx+GGso8pl0\nqU/A2N6Ws4GboPPQNfL9o7o6HvbTVt413OssDcRe5B61Kd1PSWIVazpIM0MZ\niPiwAEX+xidnqKHHNwphQ9nWbXrL3xpHJWkrAxRBTbIOjJit7r6OKk75QTxn\n8vWyzoo0AWPcYzuZMxUSQ6WIMRIkn2/3dS6Hh2T9WaeI5jUSXNHWO/9CQl2f\nblSz5vPRBe3zuzyxUq+MGV3YA/klaI5sI/CuMSrsyR2FKlPQH1cNwef6u7y5\nCenAvT0oVa0HRcMGCaj/hWMi102hNiYnE5mAywap6Y5u+yf3iApABVgrK+th\nfABtZPlqNrtjA4ba2/KVZ7+iNPxBQQ37287Iw+351uMqzjd+tZDUI6J9SwI5\n4YIA1zwIsy+UbnzpFSr0R/PsouIqe/DNVbWTAneNNzCIyM/VZMf6ZR2hqIXb\n8Qpd\r\n=lbZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/button":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/typography":"11.0.0-canary.76da7876c.0","@material/icon-button":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.76da7876c.0_1617759963635_0.37583004685461563","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/snackbar","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"638f749b884198cbd74302a354d55ddd3582f36a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":40,"integrity":"sha512-6y29r5dYjApjanLRhK1SYeOw0ZSqQFGFe+qHTY+bpA/XfYxzJnXYWpiA7hiHeLWGwvHL98n7WcaaQXyIWs4VJw==","signatures":[{"sig":"MEYCIQCHmNT3rPjTdYK7cfo1Rv5OZi6KsEqEhXReMPmIgNq0HwIhAOsUF19yCVnyeyc1zL4SopDIYjadA8XmmgWGqlSmz3VK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgAGCRA9TVsSAnZWagAAOf4QAI78THLXGXLxfkX9SVbP\nlzh1L7EJE99+qY/v0NeSxbeQZnrHmJBBJTTtkmb22RdGun2LMyiI+jvwNcol\nJi/kSK3QTy13NAMIwHG97zF9xEW8WZh0Nxaz4ja1vWDUYs1wI4qGabdjGkxE\npmwZrmhRUURlaw/rnzW94JyAomdz8NW3CmO9lScAwvexsP5VzoIxaZJDdUad\ns83795T02g+fBN9eQEpXBCT8Gj2gqx6wnaenogCX/fmr7QM/YPQWcU0gTV8w\nxyW/iIrdip+uBSmhHScIi3YqS7dMF7yp2PwgT/vmP9OEbFE+Fvc1pEZlsxUD\nVjxcdXKhTAdd05lFKzIS/AuQsKR/iv8pRLjEYc8OV9UiLQWQ070pDAXy3/52\nh7rEtvzskK/i1oITsn4QSAwOO2o9mVvKW1VNAxrOC4DaHVAU0aB3BuZFqc2k\nzS03HxRnsX8Mkh+iRCm8/uyx2olV6SXJH4xliyJmiizA1bdX0XlW7rkRdlQW\nJhXnMnkyruFm1BsminiAdETrr/Bdz/lqI224e/8eFDpdybM9e8+dPIDQzv29\n1m2TYlqhNi4omDegd48AcjM2C4n9sNBhp7LYpqwV1/54mkDJCuli+YUTgr1P\nJ/55AZuZsbHZ8k3UVoGP0yeuUMGfer/OpB2SBwM0pvNRmXEm1qo0TbpJYFPU\nM7FA\r\n=mthc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/button":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/typography":"11.0.0-canary.6bcb6cbd2.0","@material/icon-button":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.6bcb6cbd2.0_1617821701996_0.948101389547898","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/snackbar","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c94d85bc9c7c196f0fb3b380efd577368aa2e0a5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.c91e8d141.0.tgz","fileCount":40,"integrity":"sha512-SF3GfUJlPyhnbUPlgF4OmfP2xvHm/Ggt7C0m17TYg5itOFdnAPKSN8Ldrp9I4JvpqBiu/iSWun4ZCsbK4A83Fw==","signatures":[{"sig":"MEUCIQDclwUQbLU/+LtRjCXcVnlZNH3kHDqT+Ai5Z3kzWoQxWAIgWqNf9Bo1DiDlGhfPFQLmMsmLhiXwvBSn9+zn3Vcok30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgD1CRA9TVsSAnZWagAAA30P/0cKZcMfLQSriHpqYIph\nz7MVphKIasdoTeMsub6RrnhSgvxDaYGuy34G69xbqWLvxJ5bDHz0GgbqXAvv\nUId399lWLsJo/q2FBWMM7zDqDb/O8cvhfO4sPrVwoBajNhff63OJsMmiEoK2\n8hAuhjuCA2fdEGf1qTlqCmo45uNHMfdjos+FstRxJvsF6Dak9TxiIzm1Bftv\n8qlHt3eZtfRWEmlRJePxx11T0GAgxobcV6u02enm6ifpn8CprDiYf0MbXPiR\nMvHBJC1CJtwQ9IG9GTbWLNFEN/TKG055+NlyH+z4F2CO2PJHtyfCkp3LzTHa\n2QupE+WdpwoYvJMoDUt/jbbIk5MaJE1gwDwDfK42S3uWDnUc5h1LU3z3tSxV\nRv2qA619YXd2LztqZoTJjPTeT+Wab5T/ZgUHYXw72YOZHGE5P8Ho6dYd9JTz\ndcnyuwA6lZSkKKgQaAXWXjHoGB/NqjcOuenOg1FFLZRvxRtv8p7Q6ljEFgiL\nbDDXF/EiaOdcj5IVePPkrqq2rsoT+lJD2dxsPkktTWw10lD8fPLZJfiwRTlX\nw7gIdzl7s18lyBtRnkTC3iaLhSINhzs6YWb0Oem2j8Xdkz3GP3ixQqXJvY4v\n+D5btk1Tku0g/AXnmpnVAkina5Wv2tAaeLtfJ6S1Qq+KEwO5C1jrT90BKd29\nKO0p\r\n=V+DY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/shape":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/button":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/typography":"11.0.0-canary.c91e8d141.0","@material/icon-button":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.c91e8d141.0_1617821941287_0.7245417750976892","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/snackbar","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa9b59e17252f38dfa898dcd71182cb23bcf48d7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f77c50860.0.tgz","fileCount":40,"integrity":"sha512-3PYbLBDHKUl+kHziatTLYky51mqJuEdZNooa9GmM6CHAeFMsnnz//07UnRamtPIztzr6FIWFw0o4ZjPeDXDw3w==","signatures":[{"sig":"MEUCIQDzSYodGPnaL8CiPbxcwhl9TAc9uTfUHCdJ5eMX9KOyBwIgRympIy9nGOJCweNvfnN8uRTj90zMYjiiV2NW+tupHBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMhCRA9TVsSAnZWagAA9xsP/0Oay1Ch7OV2xtSKMj96\nxoTwTN3CdILbgkOKUGEzw17xccFOPnOOTS1+WllMgmWClfvEfh/bivWH3xYT\nvkaKR04f594Jywt81B77B7reWjPGM9ITVBWS4Irrk91DHNvrQtLoeeoekdw4\nj5Yzpi34A80X6U//zrHMD7MmiKcVu5JFJAjzzizzRKYepTYdHSgv4DtsMkCT\nk3eKnes4ssWUqLu7GcmK5Z2ugfxILkW3q9VwxeDLzTxYOyYY7F2rYFnTrB6d\nJDo5Qf/mO9EacawokxV3cslcnZLMy676f0HyJC5ZCmmBv4xQFEeRWXO2Osiu\nsM+M1XtMM7Mng7Ure+rbbT4W8/UIKjYgFxFL2mltj7cZIMMBhMfnxhviTuqB\nMkzNkW1zn6OUWjK16d5LE9tnMdVj8GPSpsIMcKmQOuc92oNpn6vSWQn3icd2\nRhLQZgEm0o0RyHNv6i8iXw5Go5Bf3pXoyDgidCwVNzfflejH9mGKPnTOIULB\nNh5dVkUUuiI+51dnMLH2PrPav9IaQfw2cTeCjFX4zaNhq7I7kGIFj5bcekvU\ndg8Yc6IFRrbWUzWrKm3W2fRG76sBETEdgx8B0TbiW9KIgrXgY6qpib9ll59q\nX3CKvw2mhmCWaWCUOxAyk/Q4rPCdBIRBpQgr2Zwbp4u2Ift8rjG+MXTZyYJx\nc/FD\r\n=jT/m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/button":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/typography":"11.0.0-canary.f77c50860.0","@material/icon-button":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f77c50860.0_1617896225028_0.7094033807473399","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/snackbar","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87bdc9ec29307d21ad368422e0f7ad5ac497be71","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.367d88bdb.0.tgz","fileCount":40,"integrity":"sha512-8qucU/Uw81sgDs2OJ58hFaK89jhVdAfvWJ7F0CCsRvmCr573fnLUOHVJSD1nUjaCklS5H6ww0o2m5JeKui6Zcg==","signatures":[{"sig":"MEUCIQDtTnItylW6pUp83PzvuVK/lFKkP5Zw4MR70t/vBDqh/wIgH6ldn6J7oC0nlO+k/8cnqe09SDKcu6tV/PgDz0SacCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzHWCRA9TVsSAnZWagAAx0cQAJcHnlWMNV8DQ5XytDDN\nLhAfPLRyyMLta8K+o5sNXZ68fsnSDYpXg+ZyY4vH0FuR4Rj/GQVEX4mMGKII\nF/Mt4w6ayg1AwmFXVK7Qx7PuLCKp3PFEp+iOlpbNd+egTzFMiVMu9lVX3x+x\nQmWaSNP0dkzQEDkx9OOF92cEBgjQYPHQjK3SfT+QB5hHLD/QFA2XoWw37L5G\nIwiJsleieWtcaDpcYqcL2Q3MZgWyEQW/jRRaalV3iAz0wXk+4cUH0tUdLbVT\nxJgXi3h7mmJGhxHO+tn0WSIR+2nofZn+8pKNEf7P1ldQhahG0DimC6j0jY3H\n0aUspFEjVbUTZ2mMFdY41ejbHySwsJNTE/v+K6qi+hPQOo2NG8ngxGTql+bj\nnrxUfdPdi67y52fMysUXMsdG62z1wIUw6rKH5n2AsZ+7N5w9cjUHrkU6pes/\najZ1dj6cYt94MEPQTrXfLwJAYo1i2ZHe8P/ysCWjOzgi9vupT+dzsV3Y46Rl\noMzbtz3aW0Bil9DxFIce8p6ReNviYtXOUQvWVhURvWiRVNwLgG/NxdWAvsoH\nk4cDVWveUVzNsyEyKXmokidos1qQgy3kwCS0flPEpvNXKmuB5pjXOz1tICno\n42F9MMK3sgnz6RiU3wnyBJXqcss82HREmyv4pAzF1FhgtTC+GOHhH0rSnPDY\nVNAJ\r\n=9hnL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/button":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/typography":"11.0.0-canary.367d88bdb.0","@material/icon-button":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.367d88bdb.0_1617899990363_0.30918236460221027","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/snackbar","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"899d1546fdbe150db405e958f65ec741eb22bbcb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.0ec437d3b.0.tgz","fileCount":40,"integrity":"sha512-6toMymHFIE/CeXVJPnnD8zqraIwNB40PF6yEXnqWtFbVm6ZRNk96w4wiVc06GA5NZtVDtClrG12s1l+UuZja2Q==","signatures":[{"sig":"MEYCIQDUmtRKgmhVX9hek3KKOmzKJjfCP8LY7+QDX6DBCY3KrAIhAN20F9DJd9E46VvrWuGOleizrpGpbgUkxVj1p0FtbLqJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1tICRA9TVsSAnZWagAAdykP+wcwT5wuf5fLESN1kU7P\n8X8rHR3YsETlavAIvwFUQN4L7bTJukRSqSHrWWbrRwG32n4UgsU9j1aKVjq+\nRnD6d0xd3Eh+/M+blRJtIBiTKhthAVI9nPFgkk1r5WR+4HCJ8sXMTyHpMhOo\n8g17/4R9tzKjSDFNoifj8J2U2gVb4RFAosDx20wnmcrOHEH1xEKg81OB8GXp\nI5EgzhiGlqF8AsokLvrXBtHMWHoHD2KJBsUAdqKbObAkJSUBtbF7m5er+pwg\nfWTY8B9Gn9l52WofvO609jM1/5xC8a/JKoxgZ4omN56Jrx2m1iByrbbOWB7r\nAkzj7PEPOAqHjhuXhYgBpmQkLBjig5qoDkKP3Zjd1fSn5Q6188NrX4vyZq71\nzav39l3GoSU43dUMHTyZhlbqpenrsoc6FKwV2ynzOmDvXuquEsYNIfnp6xpV\nRA9r5L8sv5iHNfKJwQK35nZ7bbgYFQoBQ9Bf5XsaEe1M0Zn4bEYoLtMZRSlu\nfhAroS6O9E6IHCVW50VOoF09Avu66FAzxSuk3Hj3IgLKKB2Y42GLflktuFlm\n8xFzKyRLD4+C7RVQlJEYt5h9f5/a2m/D9vNSEEKHiCrvzbeI16JhExuT5aWs\nPMZwdwkqFGzWkrJcgZuAZS43e6ZoNwdVbVxi/B4OzOSvUWWaxmck2ZKY43lO\nnMkn\r\n=Csrv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/button":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/typography":"11.0.0-canary.0ec437d3b.0","@material/icon-button":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.0ec437d3b.0_1617910599937_0.6711303289622967","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/snackbar","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"716fdc2fed0034884e21523497ed2411b46912f0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.b2fa996a1.0.tgz","fileCount":40,"integrity":"sha512-0KNpdsxLsRTwB4hJvj1NhNbeeTPXUgjLRfAnioQA/aQeeiZgSRojLJWqZO72HI7vFH8BrfVg+C/O8l0e+gaG4w==","signatures":[{"sig":"MEQCIBPJUVxW6GD0xN5lyfVtV3T5OAYdJFnBzf4yOKlROTNaAiBc/aWKclU5mS2YuaM3BdyypaU/Os8eR0Cfp3BZW5sCrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7XCRA9TVsSAnZWagAA7nEP/1sEQoDg09l7C6Mdc+Ed\nNvdpZhlUIgb+Dx3eTV+3m1ONOnNJ3vREbeUdr/C69bkawvLVSb7Xw1H0bcwI\neXH+Jrs+mn3UhpUXsGOd17hJzOiuQvKU7veDHjtHcMe4ljEytX+yC7SIIyX/\nuKQXOOoG5885xy5jf3kEYuh19XOCZrL+6P62UkcJWoipI/vjBFGhPAxJ9PgK\njxK+e88qVOSc2oRvpgR3ZHiA7E8Ji93t6B+cAbaU/lEbKnk1MgB9Zi5fHuXW\nugvnYBTnKsI+/anzoyilfFH25F/DAquTvZqkouaBfiqJk+XrrCA4aEkNH/iu\n+xlOzJzJAU2cqLB7roa6sMSpSVLQtk6fEmR5iGiCu7xyXj1huKL++XP2nJOC\n65p0ONOtLGAZCVPxd16Xk45eKlDFGp1NMTixu/6jkjdMjSZMjaqulwP8mlf6\ntSoqxZ4x9qMCNX6cNx48S1YOr/SzN68l0Hgj9VAsiRrYSYcheIVvp7QCJHNl\nRPXJ0Pjy9TPZgLudNseyAZclfACZ8AoQVR1jyWjvQM1/RxcOI9/vXg6ChBhM\n2qnKraPmHCxcv4Dyc8SjFlcPuR9HLdUfDF3igziTx0BjA8f/5x3uElUcxEd7\ns82ZiJfFriNMEUhngHUV4X3q+A9p1ojMn+ybE4W6kuYW7fbCP9QZ9lXalhOI\nSxj0\r\n=VFZs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/shape":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/button":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/typography":"11.0.0-canary.b2fa996a1.0","@material/icon-button":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.b2fa996a1.0_1617981142542_0.12130952996413158","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/snackbar","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22fb159564a9cbccacd60de5e74a85b3ac4532f5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.24255c408.0.tgz","fileCount":40,"integrity":"sha512-vpLG+ElU/v7R0dAlYf01uYGl1y24xz7GDq/CuI+xYf+PM5BVafZe2ZYblL3HFqdfQWFhX1C4Lrb43J3gApRiBA==","signatures":[{"sig":"MEUCIQDHLAOfit9mnVUUKjF/ZzZKYlYHKb480/v8y6EAkFFuGAIgZ/OVowXNiVP5sf+3Oy1DvdCyn72jsSyF7opDY/50INo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLV6CRA9TVsSAnZWagAAkDAQAIfvxU501mDBFAGC7jTI\nb8i52zlfRuajN4foMx/NNoiWPbER7mWYZME6wQ44HlNRYyxO1up306pdfSD2\nCfi6Te2ir7d0HqZegGWIBX/QBaiTz40R1/ZPkeB8ur8QyUyp4xyRyLN2IFTJ\nsHYVJs68rDK0cZ6HAnUEBKftOmLDAgF9/d2AAyw3Fx4631689vpaRg62j7u8\nPX3EGuVrb86Drr1oV5ISdaYmo/F5qsxVAD5Erzx0Obii4oIhu+QR/cW3IEnH\nCdq35+iuicESlYTUMeFCbojF6BSyrCZnp6Yc9SszKshSYsgVQ8hODNsfrCAI\nvKhMgWtUjwwqZYW5e8ohBz18O4dhwE1+YhuLKDyYfhpuEq1VxivhOSzKYEbf\nxgVG7JLDv3FKv5r/4mXPQMxVdWmVxtjYxCyzV/VkW5kiJtXhfIqwyyTJKaio\nuzWKzbTSWJ3C7LvsS3Jmo6uzJ39pG/pp/AaI+RXXLYImiXXBEcFDGjWNOmey\nlbdDusur5Cro7xMIWTnmaslbbH562lEW3QQNIsSTy52+w5v4DUf07c0o4A1+\nglXYJX9WKrP9nSDMfWOUDqMFY41KbykqXr6UWVPeFchoN11NIvFleY6KHtuj\nNS3Nxdqko48pcE72kMPn8vIu97aSlAALBOypWXPTTK+bKf+mckHYqZW2tGRL\nWnqn\r\n=ZBp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/button":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/typography":"11.0.0-canary.24255c408.0","@material/icon-button":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.24255c408.0_1617999225269_0.9241416464630323","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/snackbar","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"803acc18507063df4474e1ba55ea459a442db4a8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":40,"integrity":"sha512-3rIEm0ngMS8TvhKbVQFpbD8q6Re9yRaXH3kq5MPb3rkKTHPmRbbTelQU73ySei1RxXRWEnzW5gggfqQjrZJpTw==","signatures":[{"sig":"MEUCIDZPBSLvsRaD1YwbJeOHxNhj/YvVB0/JB0+rjCo/gARlAiEA+FfESJev1lzI7XierDxA/+ZaYgDhzZ+rxHeKHQAKue8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNs1CRA9TVsSAnZWagAAAUwQAJH32O2JcAsJpw/hdlXN\nqq0/tix/U4fz38FpUHq2o+DAx9YFVwAqAAJc0mjddRLaJw6lWNFNYGGgG4si\nGdhwgsEs9NBhRN1vYhcl+70LnV+c4MqiOlf8QOz1EFGiPtz8chhFvLZ00qOe\nHdRrXkrdBvrtH9Jnl1ZNjxpVlduD2MMlY6LnSNhE1pSuIlaxFatJmmpA3aYG\nWxzIZEYKP7wdJqOCLvgxWvT/K+rR4tGmxq/quiFO0vgdNLHknJJ+rf/T/+DX\n953IFXSorwrRfy6SoS+EhowskwnIjQ6qZEk201884cOmKhc9ZTQ6GJZCc0Dw\n2w25Gjf93ziBVw8V/yhio2lwTFjl2Qur+HA4TZTttyCsFAA6lkd2Kuo2qJkG\nhZnzht8nyLxPt3o8BYCccdrHvc4kgOd8KeUJYox2kqDSIo6JckiQw2frVdPH\nPctLA2N/miVLJ+YmTttjnCjrGWOtKtTulxTw6Y8aWxDLIvzPXi8V1H3csd0U\nACXVyGF42AcS7NcfL3L8DnUWbx/jTu1XG5DEJNCBktnRctsPtlTYr2LMdNkc\n0d3tjWxvon/4BXyVKRTn8ZPeSiaymQW+/NM9cZza36LkJM1/KVrtwTdCgRhI\npwO87MidNUQj9eFZLiiEz6H/EfegsZZsa6BdCvESoHC7CYHUokZgLJOOMhUF\nW1/8\r\n=o+jh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/button":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/typography":"11.0.0-canary.7d6a4bb72.0","@material/icon-button":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.7d6a4bb72.0_1618008885310_0.6518198255905652","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/snackbar","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb9864cf8fe9904c53549d7760df3600b1d4b780","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.352b295c1.0.tgz","fileCount":40,"integrity":"sha512-AU4IKPHR5Ee4KMNSTQ1kHruyNe76Gu037+PoBZSSDGMn1lb6F2Hd+A94Ss7+fMHphC2fGXmxRFGMRiXIAMo1jw==","signatures":[{"sig":"MEUCIHDYxofgvN2vPPtkCPVrOaIu1mvWyHSQQdAMjMAtIfY+AiEAukS3xnxx1efsASeO+LTMSgtr8O1yMr/LZbFPSh5o6d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI6QCRA9TVsSAnZWagAAAaUQAInUFQ5Hx0d0Jk4cJgBp\nqkgu0zL5st0mBqXpw2bxxy4ftcFkdl+akVKEl2NoZw6FyfIVw0tLW4QXIhdN\nDzSn2Te02VfJ4rjgmV3nF2b9Vy5FQyl+350zx8KmC4pW9injVSZg+y5pD6jd\nGVrVLYN2p97dTG2ekoO7iTs0yZRVLczRzyiDvMC+fcnohJYLmZkoEqsxQUNL\n08ZQIH2IdtXL99Le2ZwxzuxCaA0k6kllqbQS3aF8EHDk9ejK0TNQrii84J9R\nr1hNRqA6VNCArwilre4Vb8g0k5ScnyiRv0h7D5wK405kRjLgaG3J647a7KNX\nizdXzJiiDDQLM+PLJ5HXzrWpb5/NUoKClYq8PlzYaH7QuwAEFbLqfkxjNzOH\ngll47UYXUCZZ0vG+U//wSzp08cf+1NIbS9IFXL/oLgymLbQiBn+4/iZwsLdG\nul4pjRv92ZRB351FwvvFIqYqedJ1U+ycXqwuwyziWkAeqp2U9F1rmnaG8kht\ni5h9nXigwG10rLR18avRW/+E6zvX7ZRv9NKZNcmX64j5BBO9c4ig5SPcSLSR\nX/KrMOTqIHZ6r3I5mP4b4WeobOMkRIRZbla6lN57jCMV0WU+GC6JCa5DsTou\nj4w89fQ+uAT4w3JwFb6S/6KYk2cbxU95CiLi4+5TMuRyK/xKAJ3o5gM6Gxlp\nrVnL\r\n=ylPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/shape":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/button":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/typography":"11.0.0-canary.352b295c1.0","@material/icon-button":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.352b295c1.0_1618251408242_0.16196884867552197","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/snackbar","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"518c94e9a6a183c4e73b86bee091e3e9863464c8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.ab99b8064.0.tgz","fileCount":40,"integrity":"sha512-/0QdhX8obSZRcK+ozdx7XGaVKXGCxK8FNxtj2Hdw3K9PdyoYFLRgQ5ZuV33s5PZy0oKUPlY9D7gAyvPWym5yLA==","signatures":[{"sig":"MEUCIAKTbRyIMlzkhMvKzwysMNkzV8x5GjR+KA2E9h+K/gxAAiEA/Kq8JcQ7DE9CcRbletfjoWPuUOrFxcFxdFkzcOmqvis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda5XCRA9TVsSAnZWagAAtJkP/3n6+erZ5MCI1kHi+mTy\nY7SKv3LQAdqHYhKPwhXLeIOXuqDemyak9083aV5c1rM0XkESdGkqVYXngBOl\nLw8rbUPHahAnHgZIClgRI98/L6Q0CP6FdRgsTZYiywH0Cp9/HvAAQIbugxcY\n/xBWtAvhLIvZPvzaJ0EJwgD53QTfXhTb+KoKxrFpxQ+FvO4+FbBheYzzttiJ\nAEKX1A3rkITGX5JjgwJzamM2YsMbdqADe/LYcHUfRW9cIMM/peD4jh6cte+x\nA2QuGIuW4oDgwXJ+yK/2cVt1WgP13wxl855Zk8pY7izb7EscxTz/SMbzsERB\nv853RZa3Zl9tdtDQ+PlWrQec2ci+U8kg+kF28NqZz65VUJ9bkkUASzrvRCdL\nzZzykGClUAhEI/SDKAjb8/XfrlHWK48DhkWFp16n7X2Tqehsd7CX+LbQUHLP\nUhUi0gkQm05fZYvkakBX9jDarLGmKvx9JhCmcKfSOTGiCnFn+IfZZmRH4+60\nz5RzLOuMLsOEfj/m0opILaJ6i0kTtEQt73BYZbRwE4vZKV5W1Mi6+9f6ICh6\nKMv6mZJi1a+tvaKbTLg+LuS7Ff98LdPJE+TyodTGM3wD/qkhsTaouvtYAqFd\nHhTDA6FOE9LMGIHCzhLVm8PS+fEaAzyAK73TmnbOZGrTEFBYSV2kHRU8ZVAh\nZks8\r\n=fV6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/button":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/typography":"11.0.0-canary.ab99b8064.0","@material/icon-button":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.ab99b8064.0_1618325078643_0.9816161769984992","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/snackbar","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc0993fedad31b0bd511f0d14f41c48068c8683d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.8f0a11e32.0.tgz","fileCount":40,"integrity":"sha512-VWsFjN43GexcvDM2wuMXoc+FslzGf+kAujImaBWgLRFYYbdyye2XxB1VsYcYzMv44+qjWFagI350/Z84WL+ZtQ==","signatures":[{"sig":"MEQCIAX9SWcCBxckMqXaleHx40sBLSTJcZ6zM1t+XFnOotjUAiBofauX96c3ba+yEYEBj7o6dS5YBdnHc9dNDZlcQ4Zj7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0q6CRA9TVsSAnZWagAA7P4P/iMtJ7N96mpr3NmLTW4a\nR1f16kP2dLE+QQrZzN7CMs5DcBIce8TkR2OrHKCq5W6F+hm2igv2jyaNsUzt\nHpl5KG2ZgnuQO6z+/KmcGaA4DYtgXLE9E7MgclvsNM46rB93gdFbOVEMLWG+\nNg1YBxok+lFELnRHe1/hC2xHbLA190gyomHDCCQHxb1snFxLlqekESMGo/S1\nyeXzmogoq01sGcl3bnJonv+YZPrZ2mhK4GV5logm+dd2UEVa2x0zPW8OYnha\nNrRJ3gVGMmwqzJ082nZ2z44uE4fSTKAWI8tBJ/HwjJzePi3cIZr7TE0kOGEE\nDtRrH7GR0ySVY5wtYwGauiKTKTzWb3XEYBWksvr3NhzYMF4mMHgiZJSqJ3CX\n3CuMzCbpIHjX1ocM8lAGGfTuDhqSDNCayxScFfuvE4fhYvHrutQebHMeKGtG\nifcmn1q0Ap/ROMjp8LdZlV4q3bUc46xwRiZKx28YowJsNMplUc/zYbJZuXmP\nUQJVbJK//0cFvse35YPn3oCbBk16CaKsCQQO4Rjg7G5KICwK2Y3hOH9EdW1m\nZKwXwa5RimMxp/nJgGfUT3SSQjKpq3oUmXmYue1ua0PUGUZrcx3UcJybX7+V\n0GqV+bgrtbunYBqPCNNLO+KtOLDUbn+DySt8l+/LDyxD7FHffkZv/BLHj2pN\n7emo\r\n=oUvQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/button":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/typography":"11.0.0-canary.8f0a11e32.0","@material/icon-button":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.8f0a11e32.0_1618430649950_0.3987759856647026","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/snackbar","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05bcb340f98c4d6b346dd1ca7c679ecf1a233384","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":40,"integrity":"sha512-G0cnZ9qlFoJ9P8EXrCYLXYG4FKdaKkBjZIcfup1vBGnZO6GjbZA3oZKCrAdIBbNLrIh5MKFT+QWKRLtGu6lHeA==","signatures":[{"sig":"MEQCIDXA8cmdqQrOL8K9eAQrg0pEUeY1iwoJGlSG4g+1htP4AiBYQ51VJVDY+yUoPqYRfG8HkOMR+9iGsSrjuFKLOh6qOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIBeCRA9TVsSAnZWagAAyh0QAJNfTcn/JTGoEIo2lVbK\nYbbjyGy4Z9zaTxi7bC3qFRzI7r4tVhrILWsRemNDFMKVtUJJGer0p0Wb14NO\nbCg4XPnUJP/3MQS0vPDjWMpO4yNRhEWbgbW2O4CSqU0RBMflZmFZs6iLby/6\nhWQhluPdBsXvBmxj92PZk4yQ8hEF15GK7Hdf9PZ07cv6foIJPielZPEQ9gfw\nKcKt49KLisguHhPnDR6TkmOYXBWhWAAVVgR56shxpfCKWWanxIp0VKvtmviH\nRWJ4//UwkW9kW/Ut8ap4qQwHyaYuNobOvi577xIYH6idPeewdNPMkGA0Ejrd\nvSO24RI/MO8BNTJZGmwQ0EDii6jyGU8mhtEwwLuiBBYwdfh3B5zP9ES3PPmZ\noo0EVcu1950FvKxxflMPY3bLQ6GEqPkxbYNj4lNeYrXsRDMeq1SW/9n+8uNX\nrJ4H1z1eoCVHbzmXBmk0a4dnAmo5iPyxxfl+7vntRcGTC/NPf3V7B8LnA+2H\nrgwYrRDLad5vYMraqiq+JXhqcClBYY1BeELWaZN4zjrg4MnXIg8AyBTV3/4A\ncKhjKbOsJ7UXevWKqqwB5z47Tgy8dyXuBJyxjCXUn88s0OUdDRE97MzZkTxw\nKLWGsQBPpw4aT1OKufAAyvlVxSOYQRNdM1vbHxCifb5rQXRGqEn4c1eW0NEd\nNSXM\r\n=nBsS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/button":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/typography":"11.0.0-canary.f5c6db8fc.0","@material/icon-button":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.f5c6db8fc.0_1618509918132_0.5404751957607257","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/snackbar","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5470e47aff5d229f759733181054a2981bfedb1f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.3793a3143.0.tgz","fileCount":40,"integrity":"sha512-N176zl7/OgQExCuDpoJazR56exx+XhOLBQvOZ7SzTJl/aK3hZwoXJSZxy/qwTJ6tzF85/TR75RtWaMO3LW4JLQ==","signatures":[{"sig":"MEUCIQCokJne2I+mBTTauTUDKkBFXPqYNBJdNKLxckE+vq6hPgIgECnpKhylqFYQZtW6+XviBf8B6M4Y8nMoiwtT/ix9m4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIbHCRA9TVsSAnZWagAAnnYP/2SQquZiqn986WnRVIGi\nEiC9ba5RrxSectLyq0WVSrYF0mrr+H286XK8tqlt99IV0UPykb0NflYp6iGL\nXyp22MajyI4Jk211OVErBjnupxlFHKv2E9dK4FSl/Br1j3UmKIe0u/9onvmv\n9nJe0zgsQXdmwpb4RUv6XDzAwWmh//8Kg9rb+VU7BbO/ic3dFJ7SeVHrS8ka\nyoCCXwvIr15g52RprxiRSqr9c9C/awZ11eavNdSBeCTEVvTwCfuN6OnbVErR\nkCPOn8dojw/9pW6pZ/BciQxa8gJdrAvm+9Kt5aUkV4pTcaXphl+XZLZyX9fu\n+hRrclpyy9v9kloXUtKh63fV2P+kMSga5wlHHhU+YrD0PZiunjf+aHMiLXQu\nnrwFYZjtTjYBGSCQ9Z4lT90I+NkkTh/ZJZtOZcrEWO7ncHjX5nqVmnm5PeJF\nhx1EW369kbM/nYxfsPDSWuOm63JV9ubZ5zo2TJpPe4n+CYyBH7D6ImsQ987m\n9jIk7dnYHb7FL1qU8nlVHKvDPlXDV18YsUBfgFbc1eoSwFdPX4XdKvyIH6HF\ntrlG5LgjlCvDeZqogjvNlMCwRoOPQH/yyMlxLQ2Yzb0cnnxcVr9w+jEu0VCc\nMWvWTQzEWeVgkJoplcegGGW6tqi2Y8SZVY2PSoxoD5SPEUPF0qqcCD1+SEiN\nriNR\r\n=bmmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/shape":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/button":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/typography":"11.0.0-canary.3793a3143.0","@material/icon-button":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.3793a3143.0_1618511558636_0.1689305392965923","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/snackbar","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeb23745f00734e7466706c9098e7f8599997ee0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0-canary.bc104bae7.0.tgz","fileCount":40,"integrity":"sha512-8Hc62zMyUoscTRMCCMITG+zSmz8B4fjpFhSSXch7PHrSCfVuF3+rfhYwPW9sKditOUSGDOGbB7El/+3pyURxig==","signatures":[{"sig":"MEUCIH3s3cvoSnn8MXwKPbqkqFFzF7a4nqvy/HlXc3dYy7q3AiEA1O6hpUNTBJsEBDhnhhwtA9OXGJNfOE3sxQQHq8QFeN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJhLCRA9TVsSAnZWagAAEi4QAKNU+/lzIPYhft/zbF/9\n23Ilp9yjvtOteCo3j541FajbIMWdLhWW/KNcDjlVMtG2vFBFobHvczn9w++l\ndvZAQSXv21tD4/OoCUrDEUEcSIrP1/1E9KITuGEDHRsmTrRb4i+KXlW0bi9p\nxsofcqbtGEEN7k/Ty4jnE8ic+1+/H3S+Z3AQ1SQDzPGEhElS4BvJX4Djw5oV\nrbnYP+5Z4yeHAhR0CCUipbme1imFecpzf1I/7avrYeXg6Zn7peNbGpi9pi6T\njucwpPZkZ26YivyWqQNj5QmBdFmsFE78/VhSbBN2tXCuG+KpXUbFOfuPCMqn\nc/Qjah0ACHIBsQ2NdAhj/oso9fVnfUulUqOZaFdFutUpp3iSzy9pPgiLHJJK\nD2ooqMmw+s1GYTZ5pNhjAX263qtIvI43Dad4hDmeqhZrA3l7LED0tomyyKVh\nleRhwbbMnBORZ2OdSv4kBhnW4Wi3KNmy0fitzKCfEXjL8WT0sI612A0i3dT8\nVuAX81Taf7sGXvq+R7r/SB6Xm93ZHplsv5ZRmuyh0J5do5UHYkKAf7guc0uq\n4pBdI7wdtApdRPrhW5RpP4CLLfePpksjaX+uHHTcY276Vmtd/XaU1Gm+7vqr\nYEGuCaECTCM4PRlIFahr0v9ue7YJjJ2rwxXJK0l6BwqkxjooTRgcFU4BnJLX\nZuX5\r\n=B1l2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/button":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/typography":"11.0.0-canary.bc104bae7.0","@material/icon-button":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0-canary.bc104bae7.0_1618516043454_0.3913019736408796","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/snackbar","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c1d0adf08fbbef7683f441f02690b6893e58997","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.3f342c3f4.0.tgz","fileCount":40,"integrity":"sha512-Y6c4rU4j661MCwBHo2acstSQS012FykfDTXeIM2LLnt1TUedL5/6/7g3Bz5p2B6OrgaQo+ZqkslD06ABkr+F5g==","signatures":[{"sig":"MEQCH3w9fgL0BlfCzRVuWCd5fzGmSO7TirFCH5i9Co1mCLoCIQCVNmvqH9wheYoxj0Pr4ZG+S+7nPod97Y+qGlN56iB3jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMRgCRA9TVsSAnZWagAAIfsQAJQ3sGQQInEJQHCrsVsR\nqcfj9GKj+e54tAow560mW3lcyli0kKOhMEIe9W9Yfrnc0uZ1Ei/JZJ/xE3lc\n0NfyaLdLdJa8JfYG3HD8oX3oNht3WjfX5Nfru5BkCITnhAO2isbf0KraJ4V2\nmtnuimX2K6QVfRcOh+1ZDcznQqHUyWY0FroYCCzERwuW8dIjXsU6VwPH6x8M\n8rEYZxQTBLZBgxILFoo7qm5d7EOFXVlri7wiiSyhuUPzzUwIEjhmTL/0JDCl\nlXIvS+P4ERpc+Gzd4I88cIRZiqA15wE6wk3HhaDm3IWUNSl4bUBJjN3SP8BY\n9YAVgVgRxpwx6sZGvtvortZ+vpotZ3dWnVw0mx4Yt/59cmjajDDh42kUyiie\n5R2p+BWXxD3XLxsZooLZqM7i/akgRo0uXNDyMGUOFQTmV93iKP58KwK3Dqle\nuS347W6+H6E8jb6pBMzUwU8sMZAaNZGQZ8wMtwefeai/K3bygVM8VQIjaVRB\nRSIlqjWeEOFOsGiBbBeeV17lwj4io7aDuGoL3zn93e8Ix5KEx/AUs4kfVqMm\nafZVJZYnIK98yFqrQrrAyu89qterodfIQ9hXOPp7ZsGmPMGEYWIakldx8vsJ\nwZ7lqgD9t4L1vYl9Va8UFhQlfoQI96F2nVOr0q3JzTqzx7XdsH8nUL0oVscz\n8xnD\r\n=DnUY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/shape":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/button":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/typography":"12.0.0-canary.3f342c3f4.0","@material/icon-button":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.3f342c3f4.0_1618527328462_0.10514538339796697","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/snackbar","version":"11.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7d3d9af874179c9e0cd79ff9d8f9f4961bf5f5c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0.tgz","fileCount":39,"integrity":"sha512-VRvtPyazknpMgoCG2FanSsThm0YOiuiJGPgpSYDRYQrQDyOb1Z8pft3ae9I85U7qYE1YXB4peDKjarBmlA9+ow==","signatures":[{"sig":"MEYCIQDhsvocr65/AckxlSNCH5uqGeCEhtSrNdABiu832oRv6AIhAOkSSlLmHfSsTsY5M91AmnWA0Dhpwesma08d/2koYQjd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMVTCRA9TVsSAnZWagAA80UQAIFYEYv1rtRNAO8HVPLL\nurr3HbfnbHHUzEtz87tJa8UmUynkpIZNPV5BPpVDAbQ1UDK50xRW+MkFuSCP\nZ608BrxGIyzeQ2U3FoBGBFOyYOemv9iKzhVxL9Rke3x+gBiihZQDZoUsBzBu\nq5YIxvm6oRT4CIo8+77BQEtlOcCyf4kZ9Vq1X5WaZr3en4DlNPj9CA73GH8s\nexrF1Suh7yL51Q5hni4I0PPOXQIFuItrjoc7yzUyOyqcxySDnF4MVeFJRiyc\n/jWpsL6l9L1QzSMlwDOwGxA8UwxK2TlmBGRJ3D/5W8463Unu++2+UOZLkCkQ\n3+R+BrEMNL5ox4GhxvpyT0ndUbAOOBsdTyF5WOJF2OmHoy0GFsQgqRU0G1hc\n6Ai+GQr2mjcbFKhXQwvxTmCpZNPk1G5PaTnD+XtjNUuvoYdibdHcOO24Ytr+\n0CNZtMzubmiltEm/yTuMf/PPmYgT/9D/vSJ99d4HzxiBWV6AGNl80lsBLH1i\nwENlI3qDAKtZ6mavp9MgN7X7RIMh9nMMTBvweBVKsVw0ITZcvaE/HnJY5IOr\n6ScyvmTzwL3aY6PvZxWkH0arAjHnGaQrVi7LCsL9ObGpcNHa2nuHWxtfClSq\nxMXGnvx2TTQma2Pq3iI/naY+lgmcZU5hgp1u/jxOyG8Zj8PUPCAhd6Cn/bq/\n6GAT\r\n=hhlq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/button":"^11.0.0","@material/ripple":"^11.0.0","@material/animation":"^11.0.0","@material/elevation":"^11.0.0","@material/typography":"^11.0.0","@material/icon-button":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_11.0.0_1618527570861_0.409242724038527","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/snackbar","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4645953dddd8584aba1e9fab4a1bb079a821b399","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.2ebfc5374.0.tgz","fileCount":40,"integrity":"sha512-hluKdYdWMf5heYxznGup2gLmtWw5DOFllV1vmbWPsMi1PRKy4kp33TeeSTJ5/S+xaXiT3HMxGa9ChgfTzLPT/A==","signatures":[{"sig":"MEUCICRjQoLnKIEDs7smqWmgaAME0s72z9+pEudy6VYLbuQbAiEAgDfbn9TcAUC51tnBhKZ9U3jX2bUF5bn2euIj+ddSSws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefeZCRA9TVsSAnZWagAAnmIP/0llCQMdB5fKiMrLD3dZ\nF8BETv8iWLqNRAS6hBs1QIABIwxwTFzPvRE01B+HrbiLhqTdKrktvcOU9vKk\n9dEqKo0ym5Cy49f1/5qS0HPQp84PQ838juek4wVql4MgW7f6i0I6405jTr3E\nekm1yGms92D7kvySaCK25aq3x2wqNQe50VjfQnetFCatG6J0Hh/5WFqMRY7S\n9cTszyFybK/wHsXWpWaxvAr37c3iMJ6TsXkYYBQIHomBIdebg44nLBedBUkv\nZP7KT9DkSCPIEudXXQq/vdDJY8YorrH3jFyjJI7CgKiTC3y2md86tzPUYpWY\nhyrj07f2s1NhpKWKIxYJ3vkCGCbuVHzv8jqg4bMTc70/+4AG8wiZeqhx3E1l\nSxZGM2P4R3Q13vkmLudz3DDoS69N48HVypZG1HzQ/GKnDX/5K9J0QxkoyOCi\nJ0JShwOswpadTVaPQ+jogyP4YuoqA2bA6a0eHbhgvO2cm42B+Dggq/QXy2+S\nzSUpmHqznm+2oxKQYTu1zrokAVMAraTZZuHx1E6FbRX9DjLiEbX8/8RPeJnw\nPv9eIHNBH5aJN7lIVovWhfdlcsq2d6EJRcU/sGHKxZsdu/hQhclY8keJfnrV\neFvWQBwZ3wxwcS9QcB6dqWWY+WyndSK/HtIL5eVmXZBzrfZu08PcN7Ww1xad\nXCEI\r\n=ZroL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/button":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/typography":"12.0.0-canary.2ebfc5374.0","@material/icon-button":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.2ebfc5374.0_1618605976580_0.13223320685332518","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/snackbar","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf8012da2c46afe1fd13f5555b96b7e32afa4189","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.5631828e1.0.tgz","fileCount":40,"integrity":"sha512-NJP5zGyHpPyvIiGSVTHsxBB9iBbzPFPZxDTDzwUDpVQUnifjDZCNc+3gDiWrtN/5Ntqa4ob+5ZO2Qd9MQd4J1w==","signatures":[{"sig":"MEYCIQC+2lPIxjJb83YHkZ5xZimT+6r/oLrrwPKHukzAeuuUAgIhAMT5sv36TIgjOq6SYRIlPg+B7fDbwuDUWZh2kSknucgL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepK6CRA9TVsSAnZWagAAAR0P/iL/kT1yuYMPSEhnK+4t\n6jqWLOkSdRVbdFgIDMPTVYXZXvtlEH2j09+UIVng6MbdtzgrSuZtbxcuSoS/\nyh21uNXKC0CvOvnvpakz5X+dBFWaKa2D+Ubmvg1G9zwJfNx+IsUfxpNAnnqS\ndvowcU1I8bLhqStnGWG7wceS1rgoqcxsDZ+ZjMhuDT0OKjcig2LJBR76cj/S\nQKQ+tDWAaJWEcBFMn+6kKuXf8IrUb52RuBkHkYZFbwmAoEL5dQEciBcCkeSn\n1sjHvcEUlue9Ife8zlExZJWaTUkBxF39vWOH/On1fhJQQH6NHByonLnTuSVG\njb/4xtMb//wSSISQsfMzVB1vQ6l03JJzJNsbccKsdRpAreUQxuMSVzRz4Y8Z\nAaNubV8jywmlbXe5YWQQeYrxTHYUyKNFOIr2i0ieeiqcnRpw1YhefhLWkc/Y\nCZxqED/5yTURys1Eq4ij0G+TVETxK8e6J16xyzQAMkSDDCdDgSe5vSFgUghZ\n8Dy6KHtcGDPHo7nGizQQIjBu3KY1O72FqkO1b8OOyIJQ1NuIjTLxJUH5IBXl\n6Lz2lnQ2XoLkhhxdFc+99jxvgMzz42zriYCgmtAUKjUIXtf3xlnxQavSxOMD\niA/fUenux8N3tYhYZOgEMTL7dPNWDfBjO5DQpIqd7yfllsikE0Afa3m5fKm6\nmIgt\r\n=6Dbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/button":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/typography":"12.0.0-canary.5631828e1.0","@material/icon-button":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.5631828e1.0_1618645689710_0.10569970215359947","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/snackbar","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71dc7cada871f91ff74a356941ca52abe66d5ee9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.bd685395b.0.tgz","fileCount":40,"integrity":"sha512-uv6TWGL/jpjXWH4cbUv8EHmhYIZZJqgvZu+kNTY5saq1u32dZk+C/X+QOrDpAtyKacM0abHJ87uEtME+fkCicw==","signatures":[{"sig":"MEUCIB+LgQF2ojYf5pRZBY5BS647NLUSW+0EUP8Nf5z+zLmHAiEAs1A3p3glEX+i8FWH2Evqu6QcAO2f8qHVlPhlL6ObrMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc8SCRA9TVsSAnZWagAAd6oP/2Jt8mGeVkFtFtmuxvAt\n93rZ/Dmc7GqQLsrPiessd/urhIrCMvGjScMPAiO72FI6I2SQyQ6q4cNl597i\n+3qEuc8QCAqX7fAOBoV+V0AZgXwW+W5CjmPMf4YopWIvPbxub8Mev9aWGS2P\n30uq3ym3uUjbVx5efFKhLvanxumVJbEZ+AWdeBAW5VBM8AJrIbwvV7mbbRsG\n2hk8UZVmVQmC1SeQAhk1ul6EOkpjsMWlZfbeZxkYtuI/+xnM5akavyQ4Xy+g\nZRLl+PkfZ1PHdYf8ZPB9Whz5NlEfKTOmuHFJ+uRz0wTqUxrn8/jIa16I+Grt\nCoqfSN3MyRDQEju/GpSihaL1o2rmSiUOjTGGQulRfMebUyDtaU6uTPzl/W41\nc+xssxD6E93Tf9WnsuXuC3Lh1z2s+e7WxQbgTSdts4+0CXHqo6quR7dEFZCF\n5SHb2jO+G0/TyZYXjS4VuS38ewChMDu6kH0vZ0965xRH7b0ZgXNJBC5lgloy\nZb6XEDT0uDXtQfVh4Lk31qbc40KgUH9HB5MAZKmdG1YlqAD0+1bpCShw5Cip\nHIM6uwkMsi97HJG0GYSSjkgiA7HDaw/XRicy58kI44MxwuG7Kwg0wQkSayhj\nJBFu0mFiLPaUgdS7dbNVWYRXf2mwOx9Zrg5aSpZF05UkWuWYhZONw3R3Wo84\nDK1W\r\n=12TZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/button":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/typography":"12.0.0-canary.bd685395b.0","@material/icon-button":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.bd685395b.0_1618857746183_0.20416769334769458","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/snackbar","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54e4c9b5d8b62ffdb64071ad339818b5d92f5c4e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.b52196498.0.tgz","fileCount":40,"integrity":"sha512-qnzJmfKmmF1re9gDtN2Ni5JduE0Qfhn75TR6iaASaEDwmYgeDFuA7Y3j4EhxDBZa/cyK20AZ1v25zEJhR/v60A==","signatures":[{"sig":"MEYCIQC2flKGgwaeQtlcUi9crVvKdFA4M47DKfXTFHABPzW6qwIhANkUFH83IRT/8On7ZxRsLq+wR5ZjAOhwGltDHK/Sw3ch","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeEGCRA9TVsSAnZWagAAzUkP/1kHBsvFgX9HfyODo4yE\nSHQFDlFomTZkC4wTXigu8mUigR3ZCJqg7c21B9YesG76by0w++1a/FV5VUut\nW8/XzmbWyzrHOYcTnkQaIUurB/Ny/AMEYPiZhDoR7lMAG9S207T9wysMYge7\ngXdE74OyP+RFBxpwfq7vBH1oR03QrHsgP8vt7uV8rB7e/CQcn6e7ZB5ikLt8\nFub2qKZqa3r6E+kA4wocx1BqwrOyIvmJhGrzclxniHdSVug2bIF4jz39ySza\nDX9pb74blwGuo6gDdhdBSq6KLeNYfD1G4GwddtdTYQeHIgD2XIRUgkPOHvFH\nsfQh7GUbyNevlE0cRigcjVxMFEFtPvvypka8l+AvIPkAF2thlVL6Wz+UTrsV\n5Yo3sYKYDCuzlTFaHhQglTdziORhtWkf6rpi1mwk2QcNGWlrrWt5WdmtCQb2\nHsuvzUeGMWuWy6nbIwfr3b7g1aVaP+2U/xVaAMRLDgzxr34zWNp2HSOn7OZY\n7xC/kAzPhAzKbKYd/fhAYu2h1Mzpt6jvMTicJPQeP4LGon1lEAJwi4Szhfnx\nLh3rq+7M7VVFJrA/DPL4UBRibLa79SPNWF9LDV5pDQzrUV2cozYeiSNCFaxY\nCn//Eced2NLTqOHNoJwlZx5Zf8QgD7q7dsngk5sx9taCAPI5+TGH+D2LItDv\nFyJF\r\n=WwAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/button":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/typography":"12.0.0-canary.b52196498.0","@material/icon-button":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.b52196498.0_1618862342372_0.008443264321364108","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/snackbar","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ef8ff8ec09502a9fa1dad5bd424929a7dfb469","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8ba3e298c.0.tgz","fileCount":40,"integrity":"sha512-CDR5Bj0J2fgK0xmabjqX9SIVkQZVcFirc/amYFEwirgK9FyjawUreeITtSc2MphhRSm8Ig9rratk5P+tMe6Qmg==","signatures":[{"sig":"MEYCIQDwSqkznM98hgGHW+Gl7sNoCRroyE6X5O8GUtkxZffFXwIhAOkspz7KTjKUNExjPhvavyOW2ryNs8Y6ApbHVtGW6ps8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDIxCRA9TVsSAnZWagAAXzcQAI8jtPpLbQVNRHWfTeUx\nrM//mHdbA03rtjhCfiXwwAyjwAu7JtC1qvcQjw/kd3P8ESPbDIktyAR+o9uv\nkTMd0Qu5gWj1WyawL1TtZUkwaudXD5jeU0ZlXXuBBgTlbmdov7vY0JWHhQKS\nwpXjn2zOYYCIPIFXCDGWnemd1wL5snPco0wIQTRYurI09/hhc6wA59Ff3qk1\nWUN88T1PegWg0FoHpo/HfMEQLmVXV1H0omqB9RbXqe98nwux0frRhRKrg8DK\nleh23aTX6NmBai2nCNU/VUukxm+m6Gd9z4kRNNSKzdYCgDzEgCKkitMdXdH/\nYt92Xxbr0DNG8AxQ2JcSCItvckpB+P3Dp1W2pFW3A9WKPd+X6G9/MSvqRdPO\nv3Pl7yW9sZqbJ8V8WUbL9kkBPkCEsyo30Aqb348F97TBFYRc5Xv5kebWpNlL\nOaGBYOyuv+xA3phcXaHytlDN58lIswClQuLdAXbCOR5lqS6LjD3OM+sQZV49\nCAs/SDGScFKIiim8wKlSiV0oodH/SsJ2g3A9yCrNlc+2lIUYO5mXy8Oi26gV\nmdgTitD7RKdu6PCAXuj8AkN5W/uuD0P1wPR3L0dl6apmVkTgeJhGMQjjc7m1\nwVT5z65Ii5XDCVRSi1QShGlx8T5dCax5jwiJHXUiguRJ2BMG9jz/028gAijh\n1tWZ\r\n=5oMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/button":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/typography":"12.0.0-canary.8ba3e298c.0","@material/icon-button":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8ba3e298c.0_1619014192890_0.8050081751637235","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/snackbar","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34defba1edbeaa40821107016748f9877a8ae7ef","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.c629eab71.0.tgz","fileCount":40,"integrity":"sha512-KhC6Lt6BRzAq0Lvxlx0HXK54diaU0Lxk8lj9VwnM5DtXk2uJMGdovG4HbhojhSTD7IWEhdlqcDW3DtIThjcYQA==","signatures":[{"sig":"MEYCIQCwGuI47bRXGK+73G9WgpFEC02xZS51bPtJmudH+o8tdAIhAIsb1hpN8/dhNWPshe3m7ncv6Y38QzIVJOOkR89Iuqzo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIPiCRA9TVsSAnZWagAAiQkP/RVSStb7OxYDj1SfEuRS\nZqYUsEtPA7Ij2N6gUFvgtbA98scTJ8xY7uV/jXDWiayBG4hPiSRpI2UcreBF\nFqs++oy8M1WvSIAV2JXRwKZhrI6aIQj0LJoOgwAF/RklN/343xXyvxBpcTGV\nEkPpxOUG676GfedQfdTjkJcTn2uWr6axxGqlsKub3Af4coAxdnz6gdAqrv3u\n3CgPDvwNbpnNkekAodcp04LVEScerefZ5TBahMG9iN0jZOGWeQ+mOxecU7bw\nMYcjORmvph/3dGYacrcbI77NwJLblBkW2x+xgyE+njf6dE5UkDx8B5/TDEge\nfAk1Z99lxyZ3MchMQ0FWJ0X/Y8WJYBBUrQ87IXBOaFtrPm0Ejt1NhPXwQvb/\nx+8RWR3VHpN8wF3NNiGZz90AhVrVRIdOskaUjqR5xW3AyVfe43dw4f0p5y3N\nFq2l9YA+81ety25INS7m7/XnbVJ/AYLoJbk2Tl8ANs7D3orf257Bv8BAnLJK\nD9Awn/bLA+9N71d75EREpiby4GbQqnnPwpdnFxdPxy2Vm0JnH9K96UYzYFet\nA+B1EitSXY19D6W7YpptkoQDHNOsrQSd/ydJ4GZ0tF5s8awwCe26mcgtiJFF\nc3DkqubZEU/giqTweynC8DS684Ir33dylSuexNGtj8SXIu8lKfKxJPIc8Vo9\ncfpe\r\n=ClxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/button":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/typography":"12.0.0-canary.c629eab71.0","@material/icon-button":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.c629eab71.0_1619035105703_0.6959293933710413","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/snackbar","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acb23d7e0c88aa2428bb01d1afa1f30f7f608c2c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8ace3b810.0.tgz","fileCount":40,"integrity":"sha512-+Bk/xm6Ts19/fHE92ZWfbpju7k1PIF6bPbVpSROQ5wEH7AmumJSxCJ34KfomkrrfJk1UhViB3Ol6/aKe7JzkIA==","signatures":[{"sig":"MEUCIHOUEo5Kb6hYU6PSUhadzg+33iHTFDuEEJrPd3dpwIEpAiEAq9nrZsNIZ/OLY52H2+sgwk7C1VN6xu+qmdkJ8jCgII4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1oCRA9TVsSAnZWagAAuK0P/1t4V85aBskReBuyv7Rt\nuyHpmt92tTkHUbb10N6CULMF3GH8dqRmWGrbH+RUkQ8PCyZkr7S/R2V/1Qzt\nX/pIwxkdV6OCxoTIvohSgyHet5HB3J9tVIJPGlwO1i/ZLDB1d1OlmgO0EmK1\nLUhLh+TKhikvy9guA7wtjsZkecsHq+mCOEQ8Lu6eReFR2Ik7PqL3Q0Ig/jJM\nOX3AlkktZYvY8XlWvKclKdfxaz4unbMQQYUypY3yBcPwFV+Tv3qWpSdaLNTb\ngh8jx5kPmZRZX0BTMwl+udw1NeDEeIqGCyqXXEUc3fRf8oM2tz0T45U08CSA\nA1WI6021h/EQn4TBlQYXzEOM9bs+aes8kHooPLpa+NgLsfdoOsobx9Ajqo13\ntOB03fpqFJBz2cS6a7QS4uN+Ar3JbDj1G7XC/HPEWmmBXbV6WLZUT6iXu0WF\nxiNHugICKwm07bLKpGfvcgS9Hr5gjkB1gJBFIWxRVLZGGg4xTfTZlZXXx2ut\nSwdKODHp1oGe/ziYzuL0zR+2nHmAPvI3p9gS4uYvHvtfcv90uGBb9gVrHB6n\nLga+lboiDtSkiApAMCOASiqpud1CRxRRiTGHQU3ImfbRhUZxWYeudUSm4ci4\nU2Zz435FscnemrEpqlabiK3DH9dDI3lQyUczwIYpH2IsOOL5Teasini/vxzY\nzIlU\r\n=XWrt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/button":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/typography":"12.0.0-canary.8ace3b810.0","@material/icon-button":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8ace3b810.0_1619037543795_0.5828263190000695","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/snackbar","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7db57c1b104e8b7f45894577b4f828bf4a854cc6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.70beaf42d.0.tgz","fileCount":40,"integrity":"sha512-Vbm6VE0noYFnMDFsSImpgMOn0t3sP8m1Eigku8fUATWXu15xyG6RJA+WZ9PxmG/nyLT8JGIGly9BONwkJfXdig==","signatures":[{"sig":"MEUCIByt6XLcVi9/a8yeIA2B+ym8OmqrFYiMqrHPQHsxAcg0AiEA9Km2XS4mlNTb3IoN9YYwds/1SiE0YLtoh6feyEMka78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJAbCRA9TVsSAnZWagAAol8P/A0uxBcy1zoHdHn5gcEy\ncau4Ra+e1vLEikTXigjACEx0MSWuSC+mINsm2UtGLpjJQBl4IGBREM7HgBWQ\nX4jz5jemcMga4qu9+UPPnaJoTxf29cptB9xVg1SYKx2nV2phc/Hk2OBpoyzn\n3wb7yqeaGjKvAF+Ivcidy9WAP6ftSbUkjgZd15oiNKvO32quZ76H1TzGBkfp\ny0yZ+B6cFZUdyC0m5rjDQDDOKOvzWPmeZxvLssIW0tNcIMqAp+h3iS1YiPFP\n68Q/513Kbzn2OG4jsMEnjLTUucyUm/tHGJYyiu5WocG7WH8PvrkNUrl4/wFN\n2bSFNYEZg4nqNqIRzOGLA7+16uIDUQjsEtvjK/42sh79DJwlw6dOaIExAZB9\niJ03csdROQ5c691/TphJ3chxVGKWNOERypQWV3TSNz/AgTleZ4hESNG5ohza\nGzDIfTjzrzSUlaSX8O5phVEQm3QsgbO3QXAAbk9g2moNT/cHhlHrm1nwSz6Q\nBgvsicNwaxb4Se9pzauuPT/HyewdJQ9rx/D1tYl7nzGVe/Izb5/48eRK3HR7\nli/8r8PEssUBZSK/TlhnyRKFpqeOy+8ljYGjh4wmSmSHUZjcRUjWqCwJtCNo\nKt0sITaRppt/VKBJm0d2lBU34N/mUzls4vNm2OAFY4jdlXKNBl03jMelBbu0\nhkAx\r\n=0u0C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/button":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/typography":"12.0.0-canary.70beaf42d.0","@material/icon-button":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.70beaf42d.0_1619038235201_0.04619457497818469","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/snackbar","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b84e5047260c7ae289ac12474bdcdc1a8f0fc83b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.cad489689.0.tgz","fileCount":40,"integrity":"sha512-pKRkcvPG6ivYRBZ7/wRmLwxpYGLJUoyU42IxW3B7JqBqYQmgFcH+1iDOe2qvkPMzwFfG0yvjT4NbpyE2OHPQCg==","signatures":[{"sig":"MEYCIQDRkbokoHVFX2q0i//QCM7cbnyxwvSLwBagVsIky7173gIhANUhDw+nkMnNg/oux7jHzR5SiaxBW6yNgh8I+iXPk40x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggalrCRA9TVsSAnZWagAATp4QAJbGd4RGrcIGJWWGsihd\nTaBN27vzTcw6oRq0XZ8NzShO731tPBYIigmRZP0cTleHYYBUQgruVwc/yH5O\n2/0JPQ2Kl49OHYEjMbcE/lRG22C+kPMrCwLpXetDX/7DZECNfN36ovbegPBd\nqWG+dPaEMXcIWjDS1ItQHi/pSQKwrpcDpRiDwiX8nKBD+N80KLhAZP4VVGos\nZPorGTusNKF3g7Ad3FWtTyNL10MXf+uYOHyWf7TPFOMrjXGYYPXIZp24O0tn\nc6c3aT081WKAA9f9qEfJMX1lRcYPZIASKWQCuGVxh239pIxIs/FY1JxXmmWI\nrJhjqGz+xYwBVZvOsNkqXd7GKFzPbxOSJCf2KZxtt5AhM/M1odqZ/A1eR5ug\n6QaEkXLWG/jK7oNAw9MU6PDQwf3Op5rteI+23T+KU+7vgzI89ComUWgGuVbD\njf32fMtzs5vCb+Czkouq7fnBw9KCChL0NqJc97yfp+4wiy+fKfleNNK6wXp5\n5v76pOy3xxAoqhvNGENAoW8pyBTTmr3VU8lP9jmM6uYvcmdKFpBNm3qBfC5P\nzJJ9cvHlpXgmCDX9TWNhOA93PAfw496dHn9eiTnj15kjBKE/JuOyCATrVYEy\nlsa6jdn8tfAYpFB28iV+id1XFCmf4wnuqit2pOZgfKDCcTtfGkTGmAIJG/w9\nO/Sy\r\n=375V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/shape":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/button":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/typography":"12.0.0-canary.cad489689.0","@material/icon-button":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.cad489689.0_1619110251379_0.19220139173316975","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/snackbar","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6146184f7d0f1e2bc5cb5b17aff841eef6e2e4e0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d928692b5.0.tgz","fileCount":40,"integrity":"sha512-OK3poRUMp1MVzFoJLB6H3ASOPpQRPuMIGsb5UOaIbK85Gt6dqUB4i246Itx1fioqnFBOdMZOUIPO9JTjagOzXQ==","signatures":[{"sig":"MEUCIBfmClm6vzfCiijFmAnn2RaaLEDS5vmwdVT0h5Syf0w9AiEAokW5Tazn12e/uQaSHJx/SYlFl4O2Q0XoL9c/NpzfCHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwVxCRA9TVsSAnZWagAAkpoQAJUTsHwgLuSFBM1vI8Lf\nnv7U35vD8BFyOsovgbT4E5b+dUbyflA91NYFNQrbwVpg/sF/hZuMAavGOdqp\njyuAJBGzXxaSzbMG6jPQyRlPW2H3u2pPukhUMk6aRqN9XUf0x0fClof2zN0W\nBwjMC4ghJBqMXZYgFEzLaZJDAsnxm7gcf9CB2XkuCy4mWNASnxBoGBQqdbSb\nFgbngBQOBQ7uh0zzTGyS3qjdBQgqFu9RjmZLZg2sDeJGM/YWoGU9Qxe1JxhK\nwDtWE0xiHRquu045LdOoPkUnoKnmPXCdDEUhlX5hfVfDM+mjGkAcvCzUnSzM\nwkcfkaP7bWm1+S73IeQrnx7FIz5GF/MOKL4elLOAjSc0UGaCp6NJgwmBg+0c\n2TtP4lwYOt0CP4S0g/O3pWAWT8A4Bvxc0T82OmqiRkeenHbvHm6viMFq5BKj\n9YWcuTCrpAVMfmjiQyheSID/IKSiQ66SIYuE1nOJVCzgixpMmsPfb/uM4fby\n8BY450kACoKie7NLGfxSt6UVaH8t3edF+PZNJMG8Mn+Fb/Chol4uDkyk7ON3\n3A+w2RPru+h45GEK8QJTErsyxE2gslBst1y4NgriLsX2NbKt7XOuJ3DjJ1wB\ngjQ+zyHMFiyhYw2Og307AXphBEmrSdI4XzBGXp8buve5+QQbv7tfxfv+2iCR\nR4B8\r\n=6jdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/button":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/typography":"12.0.0-canary.d928692b5.0","@material/icon-button":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d928692b5.0_1619199345038_0.9244423409856415","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/snackbar","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb4bd8ccf1188bf19d29d969bd715066c726dabb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8f68de8f3.0.tgz","fileCount":40,"integrity":"sha512-mh5CM760YHNQLMzvfehKWAzSPeNUlX8V+l30pPKgd8q7Hr4pS9LwF6HII1MGRWr4qGH+ZD73Xv/mHCIsst94+A==","signatures":[{"sig":"MEQCIHJrvAWVZNGjRYsLc39e8c3sglWKtW5+EVTimpSO5TB5AiBwomVoyQKENXsdeVyJASy8bIYcHFrC6eHuMF2QmOpd/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw6ECRA9TVsSAnZWagAAoPoP/RBDYsUw9U/aBx/X2z/j\nB1JH5iGtBqM3pzn6Ti3+wFoMzzxRHtFg+wJRy/fdqnuEFcnbKESEq7kjw/19\ntIpL0e1gnIagHxvu2ne516kos/7Wf/KAA+lA1VkZL8Ay6/P+YeYngP3KXDeT\nEs2k50Yq/37GJ5OuYOCV8XfkNB5i6dhIkmI535XJmAzjEJEudwMsx+FQihfs\nf6zzDNtjKvqXDEOPPlKuumeje+b2XCeGFoDGDpIqLiwZyrOIbEW1qf0s7fV0\nRJ34JMN8fPkq4bmh3V2IFBrSw/McAi69tP0eHxlj4W1PPc2fvwtK5R8QAnE5\noJo2+uu2T120W/BHr8muK8PL9TtGQ6DyfT+XRakTLAkr/jkdIivle6EQuxhn\nOxdG8cZRN6W5Et1Xs9nOFnJ1ztTeN4FJ/WOGytdq37hd9AxTJbyKLTO3g81I\nIOO/nF62jQkNnE0Ag5UDmC3GUMXcJHnA76B95I3SFy09/AHuR+6EeGdXJUAz\nKBHgSF2We8e75f7Aln456IqgqxsC2S9gVjaehPeI91DWnMM+O+C13H0BcKdn\nW3FTEqjKJGS5WWxUUYcY5MYfxbHbQzCsUz7WYq6GQ9IMFh9WaTG+CfSISkCe\naOe9steteXfc4rabmJ5OZJQJgRKAM7QmxIFmAHt1phS53r2hZl/cRTs/QT9B\nKygH\r\n=3eqd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/button":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/typography":"12.0.0-canary.8f68de8f3.0","@material/icon-button":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8f68de8f3.0_1619201667661_0.8375897989413481","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/snackbar","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a00fedc776b1e811653c3bbedc95c10a53f2755","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.05753cf77.0.tgz","fileCount":40,"integrity":"sha512-N2wKw9HKaVIEYZWZNzDUIZN78uEwu+935hmORIIpucmvIyBSNNXVrHEYYI7jJms00XRuQryptBGMliJV4ybnKQ==","signatures":[{"sig":"MEYCIQC8FWu4othUH00AQzpQAHz+5UP9hLGztKzYK4KH1BqAhgIhAMt6qU9s+gXf4gGVEBobBf+sVOfEda4Mu0YsCgZmqr+Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1vVCRA9TVsSAnZWagAAnNAP/iBdNKGFoYgucfyX1vZE\n4Rj1YO2KCqUZJe+clPB2OfMRThPL57DzYIqzVJFm53kJcsVNBXxmMXtbZdOE\n7jI1ZW88evLgd9iRxi43ndo0z4fdyqniQJPzDSW0kO2WpJ8zgRiU9U/uWxWQ\nZLarr5VfbtlfxHfVleUsPvxvKrh2fAiXO9ZjW9D8Xyc+PAuq1oiDqXM7fwbu\n029JGpTWzCg/pC8W+rt3UU8aGwcfvwdcBfwnUXGEaqS+i1B8u22wQ2tE+SSc\nFsec2r00OJ3A+xknNM35W6blCNBfsBF7OPYrNqWeAZU+eaZ5rKJnaX7whctn\niqkEq1suXq9iPDnfdeck/JODUDEcQ6g2fAcnZ7/aSRbvcxbFrBWKVto4gMdC\neza6nzySC32f6EA3zNpkiC5VHY2k1NN3jTSgIR6VZGnCw/SeljV7+8JsTigT\nRRHuChzN5Kda4kFZCF75Kt0oQ7alc63aPjhj4qaaCMvqPA7MohdHMy3zotkt\n1H/Jcq95cosVpDmbHQ1tSLRvCoEHlSwY6z+fTgyEeUwbuYtgiBI6/iyZPl4B\n7JMuEqFBh0JbhEVWMkZfBTJIg07WsGNZ8UfcKP/uD0LrG2y607cIKHEqKMi4\neWn4p4TSZNF285IjwISjf63awpX8KL9hFWLTrqBY1txur53QvYmDXIqyCkNt\nJma8\r\n=z4tO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/button":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/typography":"12.0.0-canary.05753cf77.0","@material/icon-button":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.05753cf77.0_1619221460811_0.7906163219618731","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/snackbar","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf940862ee51c2d63e6a0cb2b60058cbcde93dc6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ef43e6d96.0.tgz","fileCount":40,"integrity":"sha512-wvan8eL5ztINS1GnWO0h0F13rK/TXjTbRV9BCwHieeaPrpQ1K0U6Ngya55RiytT6zjX8/3SQZnL9dmcDDP80Mg==","signatures":[{"sig":"MEUCIHChQukjulgr40NJKRH7qVYfHlzwk1KAVgwYwL/Mh+z7AiEA+ZYvSL5xYFECKp/iX2uOOFIs6oWQv+7legBHIJyBBT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg11TCRA9TVsSAnZWagAAutMP/0GK2m+32ppnPE+aQJlW\nA8vUva7v6BAG84RolXztjcZ1BKWEn+OSFxufcjEsnOTv8JeKKGc6S1ElMAvJ\nGUVfZ4jbqo2W01gDTTUI9q3Mkd/pHzbjuKfmdXrkMq/T8N4YWJlv/j3ZoVN5\nEGxEUmOK4kChpQLIIqhvVRKUG3KG0q7APgxwlOP81wAnuEvRWf3UJHsbSHFD\nw2y3DslS8iD5aUJDvM+e1S/j9AlD40SkXUeLTWY+nDAwvpscUZVsuoptkwSi\nQ+Y7OBDuYK3k8nl8USUsy/B7BzlAQ3npQoo8pS0pjDzIGPNCePUn0ggdxazA\nveWmEgY8jdt548NZXV3xB7QQl4SCkn7vat2YQSF4FtklzSDR5UFTJAbBz0eQ\ng01q1wRgxIDKDkqGy14bKNLgVZAbeu64tl0o86LL8va+RVRSXmVMc+3KnihJ\nQ9ysvjuOr7K0GPo+bjjwRutbht7hsl/eVRDK4h/maiYON5WSIqtjv6uDMdp9\n286yH+Jv9mkJllDZGGjQYSAiTwcO5YGcH8vnX2j6WIf2yEkfMgJrgvO0hkyl\nVsRCkB/QiBXts4SwDj2rL/PFQ1RGgd5LFKuVOqzGpi135snQSsnKP3/izu6d\nmjsugpdnMhTetdCYZItIkrRFgIU05T523S47N5JWXJbfPSYTMob+K64Q4wQl\nYJON\r\n=Jh1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/button":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/typography":"12.0.0-canary.ef43e6d96.0","@material/icon-button":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ef43e6d96.0_1619221843311_0.7004776988700665","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/snackbar","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d0942e29f29213f8daa6ad78c21f94fe0d001d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.197f64fa2.0.tgz","fileCount":40,"integrity":"sha512-fwiR2fRGNIdBsKqyun+Yo4SYCAt2GooRz5GCu/CadW8gobPvpxfOIseUVNAv1P4VpB/ieyrOhGKNZZVxEbXsLQ==","signatures":[{"sig":"MEQCIC1wHnyv/HU0mm6Crtuzwd7HVja8H70CGFcly7FGpy26AiAubji+q1RZF3p2gOcstPCgJpwGP4bx688v5cTfDQsJbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQtCRA9TVsSAnZWagAAlJwQAI2+r2CQdhpPHcx34rxz\nCsOJTrziFQ3PDncdu9zldw2qNXVqBjcbr2VdW4cJGR4jg3+WW5OzXa87+h0v\nsP32wUfpe/zwJDVuqABwntMzTsRm7sswd+u2xh1v+UdaeR307THeBa2s2AqG\ng4P96WPPyKDF2FRu54bUw4ZgM4vE6tz6gfZxk9rVNo3EN/K5zAczlAg2hNgT\nhLs5SwZ7dkEH6T3WXod7q4pBhzis5hAnMMKLCiDkblKv9+JsU0O3ehuSooAY\nAvqxHI4b8T8t4jnbEitNpPSFojgg+6HO9hdVpo+RWY2kvrh1drYa2wbde3kp\n5eIAk11ah6OHCK/qW/DmwGOxh1K+UZPG0K5huLRo94XRm6Se5xezNd7klUEF\n5JoQ5YDqeRRGzLQ1wANhF02BpUKzbuF5NDyozeCqQe69wjbmFatck8UoINjo\nLPD3hWU+PKiEH+fQAL6iExY0Dvb2Ryt2IbIIjJzJ3Pb67fFAdfeUZ9zXZ9lf\neEXarStiwejCf0X/5BY+EQd0HoWoQh5r1Y//VZeqbWD3H8vbUVsulCnFmt6x\nQiHAyee6HRZaM5vBnNH5sTSW3lFb2vnhr2GRCvaMnkoSHTsXiggmPphOaqhV\n6xb/4UCZBSjoy2gh/ua7INJsfYjlXg3doRE1M08wqH6+MvLMKlWeewFSrRX5\nVmb3\r\n=DYs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/shape":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/button":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/typography":"12.0.0-canary.197f64fa2.0","@material/icon-button":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.197f64fa2.0_1619457068773_0.149449185608183","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/snackbar","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ca495ebf2f56edf00a8bc6a64e968a4cfe0c5b5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":40,"integrity":"sha512-uOG/zoCCm1TRtYVFpJBIb0brL97NQ+QeZZwHDz9RWYrGvPX8ZzP2WR3hPz7bT6iaDjkck28QbucSUcg5iQ/x3Q==","signatures":[{"sig":"MEQCIF+qD0mGy2rja2XcZPxSGH44fgRxMb0nsAN/+VnJSil8AiBaVRB7qlmIVYN5o4keQ9fuX9xEAAS90eRe/JSPvfDbtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2cDCRA9TVsSAnZWagAAA7QP/2bo7njYQOJ16JRTnW8z\nzzPb9cA8sW+PmQF/ObQWDhMdSL9363gkTRFwONdjMMrFp4QOUi5lePToqg76\n2NqYrHqEayYriG9pVgOC5++j9UtsR6e4Rse5K3uLbhLfPpALZGgiv/XvZ333\nXK6LaJY+vJuT+x9PB1HsIbWpDarvnQLwlc/zg461X8G/ku5QwxoQkfNAUNqR\nW5ODiwjHWlvMTm/9c7lM312PCPaEdx6rKRhptICZDrmHPRgqCzEVUimZ1Nu8\ndSMmpotYU4RcR4LT+af5V1ZnYs5Yh3cCXwbbIq3zXNLr1jodphyDa9Ap5CIf\nDXHvqQky/N4szYaGH+6gn8So1Zina0WCHY7XrDANpKTqXjx5bYF7lBaXLKPP\nyMcZ0T53D4NZQ0DGiWeb2hlZ6729P7CwfwfNkk/aGY9PTVaqK8zQfK9iJ00u\nUb3Y2PCoV7rDgHBpENJjT3Islfbgc/6vWoCFGpjUmhf4Phqou6ntoax3MnP0\nEvM//aRW4fhC6FlAmOEidW0vWWmH/Saj6I1I0hLjw7WHeEVfpEPoXT2PcJ+r\n5rMmXn4kzPoaFHVRiO9rJqmDlQTtu6VcPfksIXw97GLn+3mSW43UIsMknLHg\noEyJqhYXEMSg9fuOhEhNRszESWtCxHAf3n5KklrsjYeXJZ/to7kkPSu3Fb7c\njhWU\r\n=UXs+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/button":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/typography":"12.0.0-canary.55ad2d7d8.0","@material/icon-button":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.55ad2d7d8.0_1619486467012_0.5999768000262993","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/snackbar","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77be0ea8d9e8f3adfca48621b3976d36dcea5023","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ec4ac5234.0.tgz","fileCount":40,"integrity":"sha512-4cAIVTWeG2HqjpvjrYXwNgIG7qajUZvZfpMubpI6rvYe2GpHgLzoovd6+ZRE8Sbmh66zxYhNrk9O7RNcBq9ZCg==","signatures":[{"sig":"MEYCIQDu5QASsvRc2dsyk7iVbrxh/otDrAeVkywfqSTYB+y3JwIhAOcdeSECkA1sI1u20DwH7lmDxwW9gz99CKeUht/9dO4h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8R1CRA9TVsSAnZWagAAuf4P/2wjqrdWHnPN4LsNeFRY\nhaXgXmWMu6ryX/e+Q+TMVe3Zj750uk/YQ2ltjmocqswnOewBNXtQMYpTS7Qh\nfHPTKcOX9Lz8DH7Yy2KSYxd9tzQmFRTDKYUnx1u6ZFAgBRHt5pftJudLt8+L\n1vx3rvfTL7IT/c6cQiCUXFZsEFRzqdjtrxp4rVzwT/FOkRUR9vIS/KuwlPu4\nFTdbJYAPDfSncYAE4TZMV2nRZd2gjINQw/kH/fo/gLCBGeXxSwYhN9VSrMfX\nu7Bh7aFzca4cg31Uvu4Vq38AZg3JRmTpMHj4dHDuEFfpRwkv4Xe+FgFoEL6T\nH3eG2Eq3VquzSlH+encMs/qIL2IyS1GwIbX8DkjsPhpDAmFa85nichXSgAuk\nZhGU9RM12M9/ts4reRzitYfMJjWFBH3Y/5RrgueRPbQDNP4/k9RGs1t2EALx\nCPjmLVN3EvxvXqCBJxNwWaBCKJBhwzQt/+dBjxIixij/9PIvOaldOkI61VxI\nDutIzWgFHZKljLQ3ppYaGfgAvYSNx+RXrnNvp26bHBdvQjpzHvQZDRYd+OaS\nGVe6YBaVjxwERazlRlMRsSNQvvRVqPPHeeeZxtF5pAzqnubiPNqpl7v3auCZ\ng1N/N9nOOrELzMJ9GueDaMCX3nd8MEpwmuDp2nsca8mugS/+TP7BZ9B+YUkF\n3cRV\r\n=nD42\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/button":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/typography":"12.0.0-canary.ec4ac5234.0","@material/icon-button":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ec4ac5234.0_1619510389045_0.11117804880226756","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/snackbar","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a29d0ee3eaf6eeda1c224a3bd1bba9d018f8b59b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.b0579acdb.0.tgz","fileCount":40,"integrity":"sha512-Sry4VdfglLFLINRhe28e/Pu70K4lSwzURyCo7UMmHmGeaMYYGCR3d8Oph7N/DSoDX4DZJ9w9RvjmOiwCOgwvhQ==","signatures":[{"sig":"MEUCIQCPpWfcDnQin2gmCxWjvDYafFijgayp/7drTlV/qErsHQIgIZXwTwYImuR03pUGGdsi4HztHbH2DO8Zs00Wa9cMJB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh81YCRA9TVsSAnZWagAAoVAP/jUxaVlTIStDsxnE70E4\nfQ53YeYIplmMWMApAGNP629afrPSxheZ9HeymEEdwQgKai/KZUXc8nWGTmko\nEd7m0aYw1M5MslK8PRYtv2b4If+nF+BoOC3cvANKyKE1TGpvP9qwK0kbX0RK\n/FN6uhnWO4CTlpwsWfXIDBswxbvY/Mf2nsAUg6LtQ4EG/Lpn6ra0pg7A7837\nCOYVy9y6HZO1OguDnPFxVAiwVo3NS5Y3SqdAtJIVzox+4TwJGimDr9Fe+AfR\nXji2RY3SGjAmfD5owNow/yrSpGpRQL3n0IIuHDewThtBiwKGCaS2vZ3CAgZT\nkyZuHZTg6FbYaMXZ4v+Bqh4mcA1ABCV5uzfIJ3tk4vFM6k/FnMB5BpvlzFPz\n3jgqDo9ePLsuBcX9XSg18UArTPqDQ1ZgrfWCHPiJHVf/21bdYER5bTPf4RXs\nZEkm+Zgl+ENKz3jTtnGjuWHm/z7Ff3B420VQnqIDNdK3fuGNRij9DWMXxHiK\nfJmgVM+1CGRs0hIw7aoB+p1jBW+Z1P8z4jgvLDscrep1D3sxbPRP+Kq2BimN\ntjTk5mJH97zxYVFItpbly+gqBPqjJ5abHTJsb+CYC9ndV7Hm/FKU5tR3KZZz\niTbni0RuRB+J08uyl8Yuq4ICDCa15OkBQ+6ad+KQmkZEkCTgIBbVICMj+kdZ\nXg5F\r\n=DihA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/button":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/typography":"12.0.0-canary.b0579acdb.0","@material/icon-button":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.b0579acdb.0_1619512664324_0.6366545016539675","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/snackbar","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4e5a5c1e0b82aff4a62a69b0272a661cbdfbba0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":40,"integrity":"sha512-kOffJfNlRIjtMXPzYgk4b3Pqjbl418+zyaUnO14SJNDBhdKzQXCvw8Bc47bL60sHquBI9osiNjlKbMm5Ce2jCg==","signatures":[{"sig":"MEQCIEvGLDnnnVEQ+2o6N2GhAWyvHtRNQ/cgDHG+ELU5Qe8HAiB40wJpKVtldfiBHA5sSbqkOowwPa42GX+vQsnLIBnKPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHslCRA9TVsSAnZWagAANjUP/j9guIQJIyCjjTrALMek\nG8VFfMZNLJ8+gVh1txbw76dNptFqIQcAleTtiT5XU3VjbqdXdkKZjr3F8SQP\nJVa8vDjO4c/Qa1NlyOz/qdDoZ2Jdn55uChcU+uYQJFTu/f9s3Eu1PKq0JTBO\n+rLzYgJgEw05hlFg9OZ/asi4MP0VqXuz7HNOFQnnqNXgKrgJBJsDEPRCafAZ\nF/MKdkAv7+lWKbX2L98oEbbWbXmqGoj4Slb1bhb3r2o/jH0kTiLzNaUyUqHU\n+TIjpwL4d5ACvGtQHZvyxAI7fvxB23qRCNjVX4Mrfs7PsYiYWUg0V6FQXUQO\nHf9pgs0H1zhjrefL63tLRYtFnsGIjT3DZieYuqA+UmJG2ij7zPy33WrcWZEc\nJX9DXQ4b3jwQ7yU4CjLH75w0VLC/IV3nlcYgM+Re0Z6xwZkKUSn6PBWilpBY\nkLyvUmave0XJW190KgLPkH8mwUcnmpg/L2OC58npj/bQFb+brcr2GdMIwAS9\n8xEELkAwKkGoxAeTN3Hxrm7PlUnUh+BO1Nt6rErizPRSWu6CraJpv+uf8MHJ\n6qdSXxrS2xPaDpS4WOrNZ8mLKRb3bQLT43B5h8hIq7jD/VMtVDfXXtPRw3H7\n7epwWdnoEGfihDJdt9XIRQUMouDTVZJgj4Pp+ggG9yW2iJC/XCSWw+uF+Cea\nZ7HH\r\n=BpVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/button":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/typography":"12.0.0-canary.81e2d4ff3.0","@material/icon-button":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.81e2d4ff3.0_1619557157404_0.35137813239462456","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/snackbar","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"100f2d00896c55a31a2645dacace3cd7c06431b7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.c8edee52c.0.tgz","fileCount":40,"integrity":"sha512-ZQcWcUAR4UMRcHWAQKMHlWpdBDS34h21ic78c4eCHD5uzQH3karaUCHycxbRpFAZz2yqJIot3+v7H17sS2Uf0A==","signatures":[{"sig":"MEUCIQDYGDiqu/fZcvftd7HGsXu5OWVyjNPUlTN8nY2L5Klj7QIge9qjX52JPMmcMt+u1SHhIy9cFqXYoLWG9moNWYqKDPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZuCRA9TVsSAnZWagAAdj4QAJocm7/mHvdOmgrHiGek\nfYJku7YO4Hf7PCRWGqYdhvkRkueYPYECW7e1KhsPdVxKLzdG6bsVyb4yq6eR\nbJ/gKY7RUfV32hR2ucETqhwJb3y6syVmL57pHL4CnOQwhSmA8bcORZlCv12z\nvIL+Cy9CAHp8acAqvdCENMh1wYVXAlJY1xlxxQiKIDY2B676tVWRKZbqD4Ij\nJAHT1rKK+N3oXxtz4cLte7TogXxtBhnMx/aBMv4TRM7ttcSXTgClnfVvoToZ\nlvP0dXzI1drJ1kdF9cB8ZTXVAJ1xvow7RqT/nkUjyrZLBhj5sHFWtGOQ3Lwy\nxVazPcPY076XjT8JUxxp3AobT+PPu6oJ4fBANiWxPbcI83N++aJE5nZqCI/H\n5we5jbzWwPz5OIIcN7HB3lY9pIt8E7NdQkQ3C9BkSG30p+fH6+YJT2NR6W/1\nVf7c76jJXLfHhn/Va0y7ah/rfQPXXMwYLv50cWd3ZAuK0cLjfT6zOtaFr8hC\nU5jvq8RAURhno1gpb2awQ8vt/3lwicN1GUxTfBfWqIxujKA6Y8bZIgJhHBvh\nBhnH9lKeB8aBUFPuSLP6daIi+sRhtfizylD91gwTChRf2mcIg7eV5aMJrF1G\ntDEU6xuwmb/0DZOCyTXf3N1gwwK0XxWtX2p97DAqFN+8U5XzmoCqMSOqEjpX\nTmBa\r\n=uRWS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/button":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/typography":"12.0.0-canary.c8edee52c.0","@material/icon-button":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.c8edee52c.0_1619560046345_0.6523727002530493","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/snackbar","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"304cb169a14fa958006d7ce83f1bcd1f55697af3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.f5b6110d6.0.tgz","fileCount":40,"integrity":"sha512-7ILIPhOqwruj/X7/yAh2QHWevefO3kIo3MbQ69An6VznqjI5c92cpM85SgSjPADQnx253vytAQNTmutM8aZfRg==","signatures":[{"sig":"MEQCIHdnUsdO8/+Br9+33sn9Om0m3mAOeIA9jTaHrP1CWGneAiA68ZuNeWlS8antfylJp3KQheLavuZpLL9AaCcfTBohJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiItqCRA9TVsSAnZWagAAY28P/Az2XyDgvk8KUhlWRnMo\nTbANYOO+NXoNocXehRx2zT67s3ZUWy58L+UvFTra1SL/6EaEwOcAdmEFl/Lw\n5ibeV7TbayfNtaweHtDK1lJlsXw1d3dS51X9ichVYntEIibhE3xNlYPvRSQO\nOO1PS3mLCt4W4/NIyI2ogFQ8RYqvLzuQmncD5KxhjN9rwkYIXcfn2rT14fj8\nb1feRGC9BBGDBsJ+uAu43btEqrX1ZDfvRBYgcOKOLrVKaCDAowKLC8qmFMxP\n6A1/MSGir4Tv4rCQhQ61CVipuOZke+zrmIR3hiv+oOOyGIso1EDEd5gukzku\nesWFqmd8XmSbcI/JswLqkS1T3vWl/+V85ydmdLs7GTe6SpsQBvOcLcxuZC2/\n192ew6SQzQ565MmdImI/U7ySrtk/kVJ2XZ217cdy/1IafngwUwU4V9deD/It\nmQV+1CbBcskNZO3YRhhmOGhjmdZJeYmGgOhTz5ozWU2gLhD0JHRE7Ndb8LNv\nO4GzBCtxZTHoPJbKfHGNDeTMpg25G6WROy7girHhzapz8J1Pgi+zFG8P1593\n39mBjO6r+5+0OkFn5FvhaXDod++46/V0zkxDILxSpla6rs7PBWrqXN78Qm+e\n2oGD+TbtLtAWRfnYmkFw7ngqvS3lmLJOzM+8IrKFIx89DBQAWaVOMCMLu9lu\nHrvk\r\n=BeIQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/button":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/typography":"12.0.0-canary.f5b6110d6.0","@material/icon-button":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.f5b6110d6.0_1619561322100_0.39050840950934695","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/snackbar","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39fe7f00c996c5fe8849744212a11a7e6a19bea4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.cee9b9e22.0.tgz","fileCount":40,"integrity":"sha512-SAEPWf75UJxDOpZbcWcrzY4nkvDqJSRQYERxTX7HKiBzyYu/tgbpA8XOWPIr2+cquvKVDTaFfya8v0cVSLx5uA==","signatures":[{"sig":"MEUCICoG7bkvycC1OhOgjN5n+N5jj9Fxb6+FJTLs3GYF852bAiEAwxMfm2IR2x3sduQK6fxNWIf5I70j2i/EIgWsmGTX3Tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjbCRA9TVsSAnZWagAAAUsQAIwT0Rgw5urpQqvdBM+z\n8A5p8+E7wGJxpsFFgZAd3qnSuXdCX6cOg+nz+HQAR98X/lFVUzHs77MzHR29\nxvu2XqT+wjcVIaSFkymtc01bdBtSJ6O1mHDo+t36Gn27QDrI2oeoLVd9leY8\n5eGFfnoFhan05RAdtpgHmT/DipxxgFfFyu1okdZfIFjS7zhHMVuQV30ahtPF\nHxhKEgTiJG8MFkYWxODlB4uWpeY6kbRw5Eihi40hZFfLtEFVKVGEn3pOTuXb\nEOjMQyZsfC5AY5BhKBJCBwkIzcPEpR42PlIp3Om7RujWOOis0ZFt0uHT1qsH\nJMV1+gwgPuJNx5u5kn11MuiXT1ZkjPpAq17EedvU/CR4+mXtfHGSkFUBFbEN\n4hOABYNMr7As+uo1zGNZF3V/zrN3Ob1cHcMBv7xBE314Oq0NN1drWcOquu+Q\nuQ97JdiUw8io1cITyAZCfbay8YwQj4Y6Rx7ZFEy7mX0qV0AJLN2Jrse5p8AZ\nCYVCa/ClHMlZSwlvLPv4plbRXtZUBa3CI8aKewkLiZJwLWbhZEk46SDTgvny\nO78HnY+LqWqJEvAy5xGBXtRR3YBGFendicI8vhPXf61YLJKlFpyfzzDEgT7c\nMWJkitaGhARw7YkXPke8vKQJCiSYjr7zrdCxO0TQv4KIfNiSSLo1Q8OYYy/k\nL4QR\r\n=2hF7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/button":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/typography":"12.0.0-canary.cee9b9e22.0","@material/icon-button":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.cee9b9e22.0_1619568859173_0.8714272341622211","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/snackbar","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"948bce7b9577cfab1d2ed3e56f0e955dbd0fd9e3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.96e83fca7.0.tgz","fileCount":40,"integrity":"sha512-46sSkJ3RBBshaIEuNRPPTHFPfiHSDf+P2vVTaYwPz3MF9SZw0CdElbsWPM9jUeD7IYIKEh0UKPcxvN8HKJas/A==","signatures":[{"sig":"MEUCIDEPv5qpGz6zeh1PBaoPQKUjE1G5vMzRS1W9+LCLtSUiAiEAhwyk9BOOmA8rtcHJjHtcmQXhZRiLQwxNnIeBOvD7XNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM0kCRA9TVsSAnZWagAAfWwQAJJ+4EdqikEWnm0jiv/S\nAD6OhAcY4p4hoCmj6Y+pJst7Ndm95hHxGfAZj4P851dIZey/DmoFSZkm+uK1\nZdt8+Ur3JR1FDgRPKEchN6C24ts5qpDvst/DZ0NPuDSSsYfrbb7C0zfz0zVi\n+7BEviqSl/sHTzMnhQXDRMUuoiA6PGCVFPqvhCAlyGHAJpd6t02JhDDVRymU\nQY9jw5Whv44ORvET24NENkQpCDZA9oDPbmH1JbWlttIhDVwk9Scnf7hr5PSZ\n39sMmK2yo3fhmJiOvWt7vrunjae0IynDNU/fQ+AP7BkkQzBNkuDLnKZ8qzVd\nA6aGrusG4/2rQ9priWxbg3S+gBOYw8+4HPMSLz8sb/VW107GHOyy4AjRVAUD\ny+XaF013eJkEqSlGvTVwIPM5PvLIz2qgVFoRgDWPV3kbHUaVl3o3MKW4LULp\nHddLmx0EUXvMWkmPsThlLA1GIUtw8aV6K19h+yuaZkevsQ7fg8NIeaUtTCW/\nDutGb2GPpuRz0MNTu5JmgjVBQidCYAVtw+4FTgDS2fiZr/Ya7Mw4NKsVJkse\n7KcKkb/3x0+TEcA8uFQscn5bRqpnHteMnQNtlR8PsUjRF916E/KUDNvn69kL\nrOAfb9zv7BLziTQ4BJRyhioJZU5Iu7esOx1MdTMH+JI/V+HKt413319x6gES\n0Scz\r\n=W6pj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/button":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/typography":"12.0.0-canary.96e83fca7.0","@material/icon-button":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.96e83fca7.0_1619578147864_0.5525532005967111","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/snackbar","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0d721e72f1d63799e6caa332706cf267eba5318","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.4c497bd19.0.tgz","fileCount":40,"integrity":"sha512-PFbc3fw8acjKB1kY7IMm1g+p6jiXyiIjGB/hvx90KYWtSVNPER9ipaf/zp67jN/GxJwQs5bs9rNb0kbkNwfgLQ==","signatures":[{"sig":"MEYCIQD97L4b6sesrMui4cjhCKjl3tsSRxGhne2Q4k+Rm4brKQIhAMtcp+QlZTgKuZXFMP+HR46nxvxH/YC2wniGiSPM8Hi5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFwCRA9TVsSAnZWagAA/R0QAI/tSsinMIIcKmWRbDFE\n+/0SFel/F9b1GgQiAUODcnn4sXsVJU3ylZMfgmtZVrd7iLgBszn1NxHb8xOR\nBwOF8NlKevLv8ENcoPYbD/ez0XJ6kROIavXmPz55EZsugUiUxKF+2hTNAXOT\nHhKrDcVqlTi8Iir6uJPXMY5TWFsdmog3gueFYMkp2/N5Rh1g8wFl3kFKZOEN\nwNlDlgIyRsq5LhZooNxq3P2Oi6SFl1GMcnAX90bqgt7dQQosBaPf5wTyoQEP\nZodAQiEpS4yKDkYHUxslq95P9gdGWvn5dXE6+Rvqj4Hig7EsehEP9CW3n4T5\nqlZ1rs49+FWFccxXscDeu51DHvwDhBoNakKjJqxwgT0ew2BpBHDPac7HAhDk\n++3HWfycMkVpnEPDhntYgja7iGT1/4UOuJCfvXdcF8SggLePy19+swL+TMPd\ni+WCkWzTwIHAaKmjCu9E/bFRJycNWYmRtlYa9jYs1y169onRz5KBel7K1cKK\n23QMUOssQ5y+scwdXzG6hUnYO/HSd6rZ78hJHivLhBzfcHWN1RLB0TwEP4wP\nIzWTysnURcQs6BYaGfpLs9nGR175k2R1mLeVEeVBRWRPpIrCwvsPG/nJBuH+\n+uPi5HOyw3EVZKMahiF10XLT9e7RTpWMvmoYFy73V8svDnRb3mrCpIoA8AfF\n6KoK\r\n=q4LH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/button":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/typography":"12.0.0-canary.4c497bd19.0","@material/icon-button":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.4c497bd19.0_1619632495996_0.7340989024967439","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/snackbar","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2ff25bb35c3091e893036db5411535f28a0670","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.105b15b96.0.tgz","fileCount":40,"integrity":"sha512-mJvvc5GMvfZbdfo6Y0D8RKLWXI8RW3oGFZ1LvlXJD+NxbMNSLi79k/bdZpF8A+uXa+ccD3A7HcmDD3mEu9d2zw==","signatures":[{"sig":"MEYCIQDaMjhnvk2Xn5vfDmzp9715lzg0TSmUM+scFTQTKEyaMgIhAL7WQs3YJrSr8u4tywsK2wFqX2OeD/qqZDfoY9zALi2W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidedCRA9TVsSAnZWagAA0zcQAICltiD37EuHqAdfkiZT\nS7wcKue0BD1qHFWKrWbgwk4/ypAvMGNhf3RouJvS12MFXVD6CQPsxVKXbwoy\nZAax4IxakJb+zciHJ0qHB8XT0r9kd58H5lsTPgws00BorAigPLEFxYMqKnmy\nXOEd8+Mrt/VeCsy7te1iIck6eIHClXKaIisrPY0AZXKbdlUAD5BJRiRlqdth\nT/rgQenLJb9qEAZXFcqtx+5KR6tpoDbNHNmZ0vTBUaFrJsUHcnELH7eYbhX7\nHWepef2gno6wbyEZhr6NIeqUUfp9AqYoBEKUeeahCeTj2y5CX4gOUkeQwfSD\nSTOlJEXZ+L513Ci3Q7+MmpBr2f1h8juHLpP9YLCO7AmrnNuDnEuUFx/4jEy5\nWb6y1fFSu9fQPCkGyKwYl482KxKY9LzqqWbfsUWV4hTe+1cTyoHl8YsSbpBN\nR5h+Naug7JS/e3QJ5EyW3Fv9F1s8J15mZj0qHDHeqkzpFLmmTTLm2e2i/tAa\nm+iItgpm0Jt+ht78Iqp+54Sxj6xkqXBYH7o4RuhtFoS+e6nnfHN27fgnRau8\nyC7m22L3uTaVkSWchCw5kGumwGhjZPrVLyX/VhBUH3NW6yFl5Ks5hFdYZjmZ\n1R03yGhsn0Ai+XJjHaRjeG4kpLFZPOxt7QuQdudAo3MiYBEDNxhBrxtdQdMp\n3+Rh\r\n=lXCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/button":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/typography":"12.0.0-canary.105b15b96.0","@material/icon-button":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.105b15b96.0_1619646364981_0.9046842369772083","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/snackbar","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a96fa1fb45f10f93859d9bf5bc662c0e423fea5f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.6e20259e3.0.tgz","fileCount":40,"integrity":"sha512-JPwNQzpG9mz64huhrtTRHoKoP3Z1hIuptjGkHQoTXzS4pcekaVGZ0Nt/q2TBJR7TIaYMzkPXPM/nQqBjE1wTEw==","signatures":[{"sig":"MEYCIQCIVKpBhFW4hxDc9V8lrZfUm0tCD6dy2KZy51Z2XccBIwIhAIwAldArOd5p2jvg71D14V7Rs0kF6K44zeUML63+9Fap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidiwCRA9TVsSAnZWagAAJloP/1ksAekSq9+xfs5RN0sn\nilHYQESbfbPWX9yQ3FMqqI2PgacTfmLn2LSxRWC5QGMqd6A1dUyEwSSywA02\n7PIgE/M7PNvaE7kPfZ9Uvq4vFhmB+rmP27ANHvqeqvuNLkMb79Skb3IF9u0T\nQ/kd+ba7AXMTdXOHTO9ViALSPMvoGRdDSljsICy3njSTdjMNFjxzQw5kyhP8\nNAYvuqjgq37pDRQc7GUn1qvmvIXm+V/w6VSi6CFDYvOeNa13H8yT9F+xpYNI\nolbQfMqEhkNzdMb/migYOCzbZNjYM9u7Gv5Q9o9yLB8o0fYbzbNioGa/fYFN\noTbIMTWB0hYj9K0GrgMQlauzoc7smKEQm6yhtf6B6SZfNTZU60mciR7856Fw\nNjWBMv9P27OQ8tYdh/qw1FAo+faWyaCmkimLMC01HlOtxon2F3s4sv0P8T+n\n+zSAPXoLpMAoZJoeFGQCwGsy3CZgJNLLT00/naxkrjC+Pu63ijIXVO73Fyg3\nns+39WPmQi7CyA8wKt+dFrZMTDCxC+mBrR3C50nbwLpJP45YtJ9rjqpw7mH9\nZWhoSnS9VRvjCkuznIkuy6lG15NZevjLBuUd7ydymfopcsVVJNXrUP8zd88G\n2gO53XcogZkA8s9IL7UdGMv7KxBP6upBzIbYCAQSWSy504ukekC1ajnkFzuK\n3w3C\r\n=cbDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/button":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/typography":"12.0.0-canary.6e20259e3.0","@material/icon-button":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.6e20259e3.0_1619646639546_0.9103706479632041","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/snackbar","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"361512ded8534217df9030939dae0eeebd02bfa7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.0f79a5d74.0.tgz","fileCount":40,"integrity":"sha512-n+bUIII7Xp8uSTaWjeme6lQSppk9VVrkhqH1RDXqEEPTwHCDmytbBDcoYzI8CSlGAgE7IWeprf/IHde8c/BLxQ==","signatures":[{"sig":"MEUCIQCsvl0ttrrGVCzyEmaf9G02kg9ZNDwbQjEGw5v3ZBxicwIgeB5+Dk5d5Vwau/TcCjt4kAZQrWqqNojKUyNxXTrpzM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieVECRA9TVsSAnZWagAAJYAP/iczU4bnbwJ7CtuS8vZ+\nQmgC/DxdhLFGewU7lcMGruOWNiaepPTQev0jo7bkHEviAX2ihPPbWo6/UIDP\n/SbWlZjkqboTtLlscN+UOk9tIgmNIEUPVsc9q381ZOeFX71Z9qMvS1MwjIrZ\noNsqhTMh2bDmqYXBtdjAQHEXMB6xYwC5TwAE9OKvtFvL63w17GQ2c6rpPbUk\np6o8gsxx1RtUcdmo0n9QfWYO2H72z/JMDVs+cBCihJRsWp0BdO/YFPHWqUgc\nmibUPf2VgqLL9qi7pFFPvQQwiy9VjMEs43JWYyGLPQCBS52Obj27spjgxlvo\n0NppOcmw2882bBe+R4yi5GBN/hNC8KsT5wncMxWqNoiH2VmLeeJOsbI7usia\nABeMTOjG7QeJGP1aXeyr3nobzkvxhJypNbkb+Magr+iJ84sbQqhbwl1F62s/\nq5vecoUxPIwTCry6/sjRzoH6PknbPQpjpjWgwzF5He20QfWBq6WOpVhC4M+t\nUFh9JxdKbnNe/PidNEVOVfW7Duyt9T2M5m52fNolrf1/DIOomgMagUU+grIx\nNs0ZRHhdpKFLcCWxGFc4J4vq1QklOtZe9bnTA9VybwxLljH0n2r2F5tSWMau\nduOu+GchRKPwU4GuQr94+gulebiB+9ifACOQ+fkcu7MDTzpDNCLjEEXWOexJ\nyURK\r\n=wpZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/button":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/typography":"12.0.0-canary.0f79a5d74.0","@material/icon-button":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.0f79a5d74.0_1619649860121_0.09640850835699855","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/snackbar","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c55b995d43dd93468b29a88dc50d13b9bc1ba1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.84f3db9ed.0.tgz","fileCount":40,"integrity":"sha512-Kt4e3qik+YgUUr1THaQbIqE2VuohpGegmFyhQ76ZYIcfBLldMPa0ULjFBDSMFs9rv9F/eJTCDUXYWrN0Gib6sg==","signatures":[{"sig":"MEUCICIVL+Ebc2X39FMzOkLnw8iLBuDcbhZ3g6NQ5lwb34laAiEArGz/bHzhizehwcJLM376Dghmg5mHFhmpAJsnVWOyBWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisBnCRA9TVsSAnZWagAAeCIP/1yiURIlzkzqwNYU5uyF\nUVmRpwKyKhU89mkIVu9g8kTnKRsJMas0AD+9hCKmrMKuiqhAhtt1tz1HzKbU\naofWUGkGbMk2DQYnOrNynsdtmtvAKvdKuY2KjDgyfG0zHsASRUg0v5D3HQpm\n6AxcnreW9vefTQAIHamvQLTVPFEGNwpmhpfb4m1j9vZ/KiNoNtCLaQZdRwls\nQrwtXjbuaotAuRELAu/Som8QV+cht8NsBqvUB/JBV2+Fu8mwjWZphXj5REoO\njRTu3rg4QDynn/4s42Zz1Y2yVTPtqEMgUVppL+2pq0oBSSPFJZFYEC7zPCL6\nxpfH8MG36dDHEix558IxxvmhfMtAtQlLuF+EHSoX4wAQM7zGf9upyssdxrE4\n6DX+s47UMsvYrz123SGzlK+94ERK9K8wOkK5icD9n97cBrB7wujqMrypbQoc\nToBE3/jBbSR1STyK0gXSXfaIv1HF2vZOemeKe1KfcPGiilQ35h33wNZ8dp7A\nKBrOaTWn/YlJrirekCLChaf3RUrjIpHbN+zocBM4j5PXxsoFRDRJ7au0U1YT\nHBUfBcV6DAXHqyoTwHrq/mDqZXgi4TM1X83FER+LSY5qwie3wfySCVt6+jNz\nUwvOratHjTe6p3fGTTQfWgXVCDJ/IpFpe5cF44iOY7bWC6p3TZ0whlSqtfIQ\nXwQa\r\n=c63Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/button":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/typography":"12.0.0-canary.84f3db9ed.0","@material/icon-button":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.84f3db9ed.0_1619705958647_0.1855642065153713","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/snackbar","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e3f2af93d9f61a82bd4e4122e421bdb2fe04957","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8fc29273c.0.tgz","fileCount":40,"integrity":"sha512-uEv9DlT7esio9f9L2kPVbCZPgveBBTHC7YeWkuSFQOWj8UagNtBzapdrPgeGr5Q2xjhRZ98k344aftI4433b/Q==","signatures":[{"sig":"MEYCIQCVr7XaHPxgXkGj+GW5SbZbj4oqNRn4Y5EviaEekVMvZwIhAMamvL5t4uSRNm8JyI+wbbmJ6tYJU1E7MsuIFWSFG++N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":439591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQzCRA9TVsSAnZWagAAmTAP/1b3CbYrdGfiUfg184K6\ns1p5V+pJyTHra9G4nVWWA58/+WooyTvfZGjEZEVigglr27ao0d78Bqsim6C3\nd8Gv9YN2hsiF+nDud8kLgCvn0mUU1JuosckeMfxUEokg9XV8ufwytz/TacEk\nXTUE2dZiU7m9myKsbfrlK9wKPPvZcLeFL/AA8Ni42kvu2UkU1aLEYikwZea7\n9OQKUL5AapXy9ImEV4ZigFY0xH+NbVJ2IvA0uM6srwhsZxafnAPVuXAgnn3E\nLqPNXC4zPRygJdy77jtsDxe1MrAggKDC0CJDeMMEizAbpoVIyn2ZCXHQ2J7C\ngLgG2Qyr9BEUvH4ouxaM16vv7O3MxfarxnJUqH+IacRlTQXccoGwyO905KkF\njvCPXne17fNsR+mSO+6lpwoGi8ygVCmfHz5vTVnEinkQ1qzIzD2vJJ1WDV51\nutScTt6AI+214YE6iBgwqPFvlvyJZad5KGEvjbeZJo/WBBEep5VmO99wKcos\navdV+lw3NR95wlWK75fBzUbC4oOmLRcoeGA8L9i0Fyft4ZB7AOvK4Nx+dr/d\nH5jDFNvkLLy2iiQTg1u9UARU+Q6cWipoyL9yWz9BPVDolHG91tTiR0E02+8p\nnIecs4TqVbcztCSmPX2xFnr91yKyD77bgjh/YwR8988yNVxdMhCU9QlAK2kX\nmLZo\r\n=Itmp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/button":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/typography":"12.0.0-canary.8fc29273c.0","@material/icon-button":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8fc29273c.0_1619731506792_0.2307177770841542","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/snackbar","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"674bfcbd6b08317d1d72dbbf874ace0afff67ed6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.c50d20bab.0.tgz","fileCount":40,"integrity":"sha512-EnJIl10ZF4+z6W02B5iPR1ixoAXNBYHfPizt2s1wIDHm6ylkoovrts3U7xcyD+wWToxtQUA85tBEV/6vZOo1AA==","signatures":[{"sig":"MEUCIHrT4YZ6fvFJtwHemiUNV62f8/NMQuZLt/QZCAxRNLLcAiEA6ht6hBugcrkk7IkyCXtEL8Da1g1SwhN2aT7HZPqqu0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizs4CRA9TVsSAnZWagAAiTUP/1nQFJ9K0CWNTM2xBr9b\nsV8A/JEvY0CBJ7kD2gtHDNgmFlOUKKSHxN/dDnwFPx4z8CgE+95l2QQVy1TH\n43fy/RDCabjTbbx0MayR2T5B0UxvBKmMtn0auHBkbQLZX2whPjxfCAaTZJJP\nyDF14XHodFeZ2NBUgH+Rl6hdU7n1+FcJkw0sxTG9QWCIrC5gUNHPM5J7HVLv\no1lx2D+HcF9y4A2CfW0EGtEaXVhXtQFMdLgGEqeN0b68uMiaB13eG19dwfrK\nJWwB5tFfs0F0Tt5UTGoVgUp6/XOUrZbnstP8oHr0YbJQrvA0Htq+huw/EKUw\nHeGjTjmfFjHDNHO+RJYZXSjg81rQyR1uiScHX66bn8dL9tScTkandscbS3es\nem/FV+StSoiTHpEOtZt84UF4m8zV71d/xs9oZ2Si6nS2nGSNwP9G1KSpPzdh\nF4jLF+rv2h9C4oIlDNFVcO+xrmnpB0Y8JQBsHSMqu3mA7oq0W0woeDbsmZtv\nbC0Vmk8qV9R0PHskSSFva0ufFV9acGJijc2/Bw/+XmrzYLiMTnEU7iC68L17\n5CkaPaFoXAN2ZhGZ3tk7NIg+ydVRkL6SEmAi3CiCt6QcXYe5YXhNmS/lTShG\nSVB7eueXrbfWMBHqp4dGTGSVx+Bou3rPhGuctE6CRq0BviHb+YwpdF6QXYFf\n1sng\r\n=vS0d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/button":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/typography":"12.0.0-canary.c50d20bab.0","@material/icon-button":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.c50d20bab.0_1619737399933_0.18503151632629455","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/snackbar","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f37bde18ddef49172fe435713e88462d34bbcbaf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.474836ad0.0.tgz","fileCount":40,"integrity":"sha512-rUOGsuorz0/s3PFxR9Y68YQaV+RuMDQB4Ktc7GFLvqgmGhm7/sztAvON5MFw9KFyz/wg/anHsVcIibgx8C81lg==","signatures":[{"sig":"MEUCIQC1+9TjNZX8RBSoh5P4BMt1IMRPlgr51ufEXCJ5R9sCigIgS3Hn+Cpihi3w/9QVaKkiP+Lp3QRFyFvNAjBj6oCgw4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM1XCRA9TVsSAnZWagAArHgP/0gP0lOI0HukksVX+oCx\ngQ/5hlAZHY8UNVILSKmCExyn47rkjTU3MClxEhwAppLPkmh7QDF1ted6n/rf\nrrXWDODWsAhHA+/kUfXce9saOSnjQNQmpK4hBSXuKR7j+H/56WKdUVHHgFNe\noW3A26UN1l9Y1ew2TYw0MfBVavWniyAsbKea2jy78mcZVtly4/2yKMMUW3+h\nL0ES4Oac3TCz1TcFV4cqyZCy1HREeGpCoFY8FLtCtxpkTyGiYp3aCOqlhsed\nMKXpkt7CMOf3RG48ZJnZdIANdfqnuraxxL6TGG8VQgUq3i/1ZxYuyiMWhf9K\nG5jXBsy2xMVgbLJizL0fKmFRgEoKiXMc1U6kCOExhhbDjoob41CoGwgMJqv0\nvQIGOk45faJdb0QL3SlSp6ys/7D2JWJM8XmXLw1p346lQW+C5Uofv8f0EySg\nrjW3otIRpr9148+RFYEK7r9gum/me8o+XPTEvMeNyQVR2ek45K0Q2SLOLpXq\naXyvfRYMAioIsKCGLQSVOKXxsCsafSZy+fbOjYJAgnkqTj79YYCqNN2cR8BD\nTiSle2xhdL/3tML64bnrkL59/l8qDsKZAaxuSOpm1DWi18oh9LNTY1oQVWQx\n6S6PPI7RneobSF5Eiyb8lDR/aRrGzjfij5ZLNPYnkYTfSxdk7obZIUWyyK3Q\n9/rC\r\n=nNzv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/shape":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/button":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/typography":"12.0.0-canary.474836ad0.0","@material/icon-button":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.474836ad0.0_1619840342985_0.9041690643258218","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/snackbar","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"975da769213b09b6770573851eab46b2d5371b21","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.f5ad92287.0.tgz","fileCount":40,"integrity":"sha512-3vdAPWLzbDH81gl7clPTZs1c0t3G9AFNREh8zRZWBId6yxtcwP5DgrArsNMrgAkc/8deV78zI1HO3vz63WXrrg==","signatures":[{"sig":"MEUCIQCfO5+46LClrujj0jWhi+P9kuy0OiGMFDT0ZyeY++UdswIgfuSmJQ0Wi78jKSa88eewyIkjz1sOwXag/WkULDUQvLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+qCRA9TVsSAnZWagAA+kAQAI59mUjE6Rzf1HyExQMk\ndigxTkSVxQ9C1Ic9CGHkkufJr/T3dsZVI1oy5vVu3SVZkwTiwZswcxAI4ENh\n9KSn9qjFPZ/6M7pnC/Unp7xZ6RTqlJ5QRjL/2oGnGk5f4fFuPbHfKx/Q5L7u\nmIz5l+g2bceT8/7II3BXR4IqMFwcVbS1YCuQpGeuZVMJaZgdC6nsiJAvMjJI\n9LBdhj0Lu7op+sFG1mjNWCh0EeYAxLH1OrcFy2d4mwzKBFtUpSoYvKx5UCpJ\nqd1dWa2eJddyHdNuBtTo46z7OhJJQ/C3auru/UWIYDmXHq5j9iI2Q8SSDbpH\noMT9Um7VFKIkXo3PIWE1wN4LyOJxBjbZEe040yeQMXQtxucyXqKvamspQ4aO\njR+ZpoqNb3axilL3FJjrgPBvX3NO34JYxmAZ+OdR8nK/jlO+8PPwgipzzGYr\n5sNRrH97igEtcLAAUeZUUeLIuHF0sF/fPPQGZrI/htmQPrehDG6+Fg/FIxGM\nlHdFowDY5yM4EVVCYOU/DJcAA9a8LtvlKUGADn2zaw+0HWh5RbAX0cHz9yWk\n7GsjWviFpdRfQ+Fhqv6Zoqom4i10mpfTOXpvSyHUFQr3/xwRMRiLqLfdntf/\n8+bnYUhWpbUIjdG3jfkprlFH9lKcg3QRGG9r3ZI6RuP9xqM7ABR3tRAAxP2G\nfPtM\r\n=AI+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/button":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/typography":"12.0.0-canary.f5ad92287.0","@material/icon-button":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.f5ad92287.0_1620066217877_0.9808260732146417","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/snackbar","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89f9d62d0b365eee7e54311a4ab3d3382d33d32f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.af453daf8.0.tgz","fileCount":40,"integrity":"sha512-TX0rtRUdAysHbZpWJIcE+cf+q9yCYh7zi277U/R6/MY1AX/ZEpdpcs2UnwCpZDH0pKBRvBGq8pZHdsAVVIdYUg==","signatures":[{"sig":"MEQCIBTRiZXhHsACOXHIpCqB3aXXlRxsJQnzZVXr1MqdAHHpAiAmANQn5WphJ7YEGHEFFzR6LJz7r6jFTcVkkoUBSt8XJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEb7CRA9TVsSAnZWagAA83IP/1eHAHl0bzHzvz8yNPZ/\nfFHBmM8GaGakyVxvs4B46N+xK5XJH0qQbVa7KdA1MvdvMj1RGRwZLiULiRcM\n3vGP7Em288ztjx0Vr6Myd2Vriq1w7UCNYa83eD/rIXhHXdh3kLUPkWjKhzMv\nm9vgLiI7KbpcStl8Lm+tdgFMtLrb99vozJv/88+P59CQ9nesvo0XLmswteLu\nF4suo0YlYpTLo+4QKkFHOtFsMOgyp4SNVVQQrLnlJs/3cO41A0LyeMY3h9AU\nlE9ksI7tZ+4bbqEPv4G5tgbV2ldYMY7S+mx46IWUfEJ0QG0P+3gpauOmA5XN\nab+9kSquW8wWOk01VbJ2H2BEEuffGdd4D0WrjFIPGPNcyhb7qyg2y8bUAzOD\nk7ZKV5gmZRY8ghQhWw5u4tvlhLDUyRK+eAoLDprIhibXI+gdjYpgjj4khFHz\nujQDiyUGoC/Sr20e0mcEW1bwo1GFM8RRamMi9KV632JpOQb5pLkNV/jobueS\n38j7GlW8ZghWJAyV3sOSdX+Jmft7Am2htrZujEJRDj30eHmmpjgt+Ae272mR\ncluUZ+dFjGBR8jzTsYB4ZPlSxq4ndcDerAFc1+ahOHvXm+lutFXso628vfcY\n2NVpJ50WhDd+b3McimEfUNN0wVVoCCJpbKiYPLDTFWe1+2xfiIbNETO3SPm0\nnFpC\r\n=sAWC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/button":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/typography":"12.0.0-canary.af453daf8.0","@material/icon-button":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.af453daf8.0_1620068091229_0.5156966372290845","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/snackbar","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ded608cf5e0e357efa924ab940ad549bb89303","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.1f1918c24.0.tgz","fileCount":40,"integrity":"sha512-gixatNVAtsdOKnEd1VaEa/MtglILdUdtjvb4jmY6fyqlblrD/f1vazWZpcgT4VkajA8m6r1efLEARz2tdAJp5g==","signatures":[{"sig":"MEQCIDEqH9aKE6CFIGFYvlwNVgnWwsGGqp/6QdVdC0Xjfn7EAiAJ2qojyYqR+TUDAc2b8Q4bwtWr9vOzQlCpfPuM4bZZLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE3RCRA9TVsSAnZWagAAQE0P/j88wKj+5lZvLZSEmxi8\n212qSxKp5KNd2GN19lbyVEHrgyrFMUgy7Qjh5CzNg5BRtYwMobpjsHFMNkrg\naSac1aWJ1UrUBf/wzOQKXnmjjL6FVxsvcIMcQBey7pHqzmgx98L6LS6pmdxU\nv21dVBixbcDSsdb37X2BL2xL1O6d2mrIZiPdkFS/4ByMVt9CtmtkwOEl/OMV\np+0Ju2j988L4N8vUoqrd70Wl9bcx8SonQe0VZF7o6RPUngsw/VDpT/O9Yf/n\nQW7cq2N6tfpNYdqQnSkc89FVu2l1tzvsVNhIOIug6Yc6QI+hIO/AZRJdOepP\neVw5/Q1BDpten6xmPP1wDI1kUmGXTmz2eod8gOcTVcBUZVD3V7xeA2CC0XtK\nCKKfSTpMaq0Bbhvca2VvIC1MLPd5EtKY0xUap5/V/al/1eQR80/VYGuaASCZ\nHV2wgZpVgaGRbgn1ZM8KVJE4r+PPrRJ+vdU2bjgvQSUnTMKsSkz0b2RIq6+k\nUzJKlbPnAUC8YgG0AMHvH6KG6PHqQfVctvQMS6gZSZZTlKyNNVkivy5nsCwv\nblrK9UyaRJwvANQhmj8by0cu0v4F3aZ3tKCNjf7rCoCbOBtuluWPZaoSd6DP\nNO4sHv6sWlg+BQLsKQ0Ih9DnUY0pGd+cbVpFncefqi8f1O0gFtfp0H+ezHVF\n1ndI\r\n=CNTJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/button":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/typography":"12.0.0-canary.1f1918c24.0","@material/icon-button":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.1f1918c24.0_1620069840957_0.49414459382273623","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/snackbar","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1d23063ff947431fb21b3f4c6fb12166b9c5a6b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.33148231f.0.tgz","fileCount":40,"integrity":"sha512-fv/iQWJuLLtXixRgGf2NUevh6StThPqF8XpToiUDPePWbm+CtrFvlO7a6HoRBZShlQaQRqAZAU3mYOY4BosIHg==","signatures":[{"sig":"MEYCIQCSdSv0BWz596V+Lt97cehx/PCl4s7XdBlaWehLuMDzKQIhAJqUfFik+O7nO9BePmPFpHbZ7YCrnTQncwEM3/BE85Om","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFGTCRA9TVsSAnZWagAAPIsP/2dHlw7Tz/xy3ZW7HyeC\nGq4qhEy87JcQWDDwe0zddUmymZuKVjK0fZ/x6V9BKgIwXCNRjXGqbZ3xRedO\ntvI/JR4LIieLQVK99WMDIUOsjsIThlFKCP+Jh4ylUEu86fWn4wyoosLS66Fl\nP6KGtJ92QHi1MKceAGv5Lu/+E9z2nt5KOdkkmHQfaK9k7OmLAIvuZkkbR5aD\nWeM8m2PrMm8G1wJ0ZSctVeBA+ytGXQi9kIhTOhXXAaKupAJ2Utsp9e8b2J+c\nh2fEjalz+WmdmzZKJzFIv8GTC2C95+rfcC0PWCovzjrFsVWTA4M/EzhB1bPQ\n8P76yJ6obJRN6SdakvRh2YseJVzNKdUi3jZJ+O5oSduSyxEIbNfX1OCerE1P\n4CGUDISByQOv6srfLv6qlTY3kITPdLpQeMlJXpST27oTWjnDEEU4OTJyGzNE\n51t/SaVcS66zhiCV79QgHgZjsSjV+8gzCj3x163KptrWIj6P7a31AoWGSrQr\ncDWTFETZWvn8OfALmnek5UO34fc8FVhnifyF3BpVLxFxRQoMaqbpQgbB7o3h\nxiQ0D142Sqb0PzyfX+jHs3L1PBgO9T/7RJsU6yXz2RFz8KkmmLiQ9uQ8nmIt\njAWHnixa78yp7Qi04aCfP44hfdBF0sdUDz19rEnykcB9Jj+C4fA4peRV8iRr\njcoa\r\n=dEHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/button":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/typography":"12.0.0-canary.33148231f.0","@material/icon-button":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.33148231f.0_1620070803340_0.14931918738016825","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/snackbar","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18796529fecbbe002cf11e9ab90faf69c0f64eb4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.06b76fa74.0.tgz","fileCount":40,"integrity":"sha512-IguG488VT+w/2vdZ+xt1PGfj/g0Bh8i+PZPfZTS7wMLm6fhdfNrDKJDHBYupDYflNi4+tiIj/wKurLgNvsObVQ==","signatures":[{"sig":"MEUCIApQiw0pHoxWcaD9+NCjBkbqAiyq8e4Efe6l659COd76AiEA0KvcVK7jk5VCDxMPLarXiuuSZc5x1HODPRJhRh2dAsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFM9CRA9TVsSAnZWagAAnU0P/36u1eYPO2Oqvt8rQBbr\nsw6Ii7ieW3LApT3GxZ+UFHP2JuO840opRtBXpSg5c2J8Krj118EJ5rNScJma\nl/6qPqHsJfNNQkadNR5gfYGwunlEGa4K64m2IMsEd9JTkTC/AQNcmTLv0Uc6\n5l4+dpDy3Tvnwt7rri2qpLbc9K2JB1eRWK0XNIvhRCf2OKqsJ0fhmyLFhaYf\nmV+KVhrxYh6gt7tOgfe/67KbB5y12PtyHM2OoVeQlj/EIqypbwOMYTZg/dhg\nG12POx3rEcAx2rsOXUmdNky0wcNZGgAs8iy5fQHHZls+d67PH5InG5ADBLGd\nfvW8vvCwJ/RcA22D6ohGMGPCL9ZhF0WwJbNO8v4AByQlxz3aeXnFoiW0LFjW\nFEjifVJc58yehqMbb5vXb0Yc1sXo0jG/5YHjuwAjamayy3xxvZYVV7YtTiDi\nPTy5PJgMvb516Wlba/eO1c8gep0LtFyq+tRth+pm+oL7XBFZHw4ir857Ovoa\nZ77OxLCc4lObQoEVpU9ousNWNGi8JpsijnaXpxX+EYty4ajCy6BUZxXIQLjr\nhZOVtOhH/lMnxMKgZJ8+7e/KuxJUQKP6oBKWikXvFcFYABeUwDn7Gr3jzV3r\n+T9jiFwXTmdWMHAlHFX3ZcMX7d9+Q8d0DsynujXvT8AEX4mizLpo3Wog7gDz\nA+MJ\r\n=PkVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/button":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/typography":"12.0.0-canary.06b76fa74.0","@material/icon-button":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.06b76fa74.0_1620071229379_0.8942667761851222","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/snackbar","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d0ccce3b5446853760b4fa5bdc94d342c931d38","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.7c5000473.0.tgz","fileCount":40,"integrity":"sha512-1NMcoEgkQokpapjpl3xfde1kX/1nv6eybv8CX6GAdXKJHCq9w0s8S2bhtt3DnqoL2ZOYdwQPYTLQOwMRB53UxQ==","signatures":[{"sig":"MEYCIQC0gRsQohp20/OiKglHXc5znkojfZUxO41tuXi+B/kKgQIhALu90Av+5/DaItOjBS/pEovLAMM/eBZLt/23qzKZyqBT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHx2CRA9TVsSAnZWagAAoegP/3dkA7FiLO/jqU5yXbSp\n1n+Q2orijfH3O7R5Ok27vzVmyvde86sqJQlQOjpBv1cthJ3nIayNjAKHLXzR\ngP/fnd3pPJM7tIrIrZIHFppEGEp1TjXyK3BVSAIoqgcVKSfwaIDmH6jjG/hM\n+vapysswOSxCrkcG/CWX7EmbEutTNb9OJPjs3FvZGDmaDMkh7cPMiHvlv443\nAh7YslrxroW5lfbqn4KNgQhxQhW0ZYiNO4ZeO2t4opuSUx3kUT8MzejfAwA2\ns8z1IYUAhs482OUrKOBtTqot+ql6WIu8Ne7qul/DtQgk+4/AeJpj51wfadvK\nJtI+I9CUsZ1FQl0O7Wu24hNMxFpxVodNNLtUDGbN0jpfnH3CASHf7tjMC9bn\nKkYZ8jiWGXjykwOQ7y5ofdgqBdEibCCLcevEU8rTcz40Pu6hH1qdil3q0Yi9\n9GnhNSIFbBbULBEmkGXk82KObOXFGvBAcs0sgAvtxvaoAmfO7G05HerIhEgV\nKx8O/8iIroe8Qt70VKSC+IumZi/+A4UMnhtF0svNMWxWoHD2sfGFNXXg91KC\nCK0zQSaHOjzrS2PsKPXQJgRHUZiEVtpyciddwuF+fuXb9TIDNNysfkJjCJlw\nChvXhjFWh809Ow62L2U0ndiyc2XgwMlUnFl8z/MgiCPKvaHzbDxE8VOCCZvo\nQOUS\r\n=NAJ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/button":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/typography":"12.0.0-canary.7c5000473.0","@material/icon-button":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.7c5000473.0_1620081782396_0.5587511185068115","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/snackbar","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae476f75ada710bcd21f93e63e0ac0b74a646cb9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.de997644b.0.tgz","fileCount":40,"integrity":"sha512-/+AwblIDVoZDoNgWUSIAuDRAWjxTJjnUQ03Xry0RZMb9qTZvDLObbZ2ohuv2Nsm/zHF9KqC3DJEtMe5G8+Z90Q==","signatures":[{"sig":"MEYCIQDTpBA8Q7U07V/blgRsUWlWdL/SB9pbOFCuL06FpaXvUQIhAP5ipBfxW4gtk69xz2besevfb7ainlJjj7FY29yHwBP+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYR/CRA9TVsSAnZWagAAqwYP/A3jjnmKcJNbB+4tNLnB\n+WopJkdGdkXao9EfgKRtYc8x8lmH7pDZU6mA1eMPQxOFzG1vnK32EBkDn+Xa\ns1xhaGELvfb0wal6aQgSRZHePzVezuyAyVAPy+BAjxEONVJFG79v4U4whLK6\nKSmp1zje3s4WiTg1pzySc/+DAD1QNDfV5bnw01InGPvgSICMIkbmSFoODaZc\nq4N4ZyCCS78EewxXhZUmZtsAxcN9lfzN9Bfs6GLtjaRogW5/S7indjA4UeYP\ntXTd3z0AlVmadYg8izR0PdApckHDJ6F+r52D653VP5CGEYSdCAMXbnXf2BKH\ns38kp9w4ku7vuk2NmaGetHgho2BDBdGnWMa4FyxUhypaRA/CKVz6rCPzcg7q\nU9HWGf5Hlnic2QT2VvCVHCFdVf8I/hkpBS5jqWXnC0xqiQFj5XsVTQvO5o4F\naEjIYOtL2HDhT8BeY4UgiH9kJxp2sv/38dBLqny5hSo7esgW4DuMhMSMHKyt\nrEoI5f34Y01T4s8o9Qndl2CvAl7wmmADxN8tVQ58HcvhayzzWD0LETkhgcAY\nTITiRcshwy5saRR/1mMHoMGb6fpI560KFATek9/SL/Zb42Oy2mwSVLU9mcCY\nL7Ea0SC94136n4PMm2l/DQ2Mg7EeLlchtnn2ZlCZTXCyUddHKgeFPf8bLkUy\nphJI\r\n=zqwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/button":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/typography":"12.0.0-canary.de997644b.0","@material/icon-button":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.de997644b.0_1620149373598_0.6189964692904373","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/snackbar","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c419e4758d0a2e5d00dfd4835c89f371de0c0af8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":40,"integrity":"sha512-WNlpPu/Wy4mvmnXmLaWsgJtUGH4po3vr3msSuJ8txXSZgTMjDJfyYoSBruoXXYTinqGJIqwjOLOA3J88N/tDuA==","signatures":[{"sig":"MEQCIB6ZSJop7TRCxKHEzfU2xrrlN4SJ1EfJuzByvyNlBesWAiBFMtfYz4wk0UrNeWVvIU8Dc/7Yi0wL55mqk4mBf+P5yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYrQCRA9TVsSAnZWagAA4q8QAJh5oCCTqsTT14sLGov1\nmWeqz3sEimNdiW/cLjUnwbxLdtnhwAs7nvsiKcf/LTHunWL02oJVZvstqpZ5\ngSUwW4Oa06tS2ZKCmi/2MFAkHy6FsFHtuSO0nVczNd8wPuHGALXBIv3BQnXI\nBgxQI/OPxI9KoIVS5EZ/cJ9IiGZ53w1Rnlo0zBp6hcmIvHhQWeVnbT1dWzb0\ngAjs28JQIt+51tFkmPBz5dp8QNfPHvStqeITVItSLav6PxjkKqeVuoAw0+g/\nC1EAE05GwGDL18xTbxGaptUXr+RYPWyrDUiSQ+VOI9dpEVVMkS7YoKXT6PvH\n7iNDjK7TgBa+oEYPWFNbdevq5+c+F9UF41/wGX14FeJgpuaGvSI7pjqWwHDt\ncTnKEdXR+lPYv3+UUzJsX6Oj+lh3TiPmX52Tq45dwwLJkdI/zeybq7Uz7m+I\nPKuF3d8SdO1HKIM0Ymy2TzPAxoWz7qtuVz26W0vVQGmGUW7mprvIXzyXS/1k\nbcxYPm2VjgzglwgiaQvOhotn87VuUw1NC6IrHayNO8uFeYgsQY9Kd/Gqz1pc\neTl/L36sXZArSv4Scq/sIg3tGI1qGhj0EQej+CDLPTO00CSu9EK5SqTTgADB\nhWaEE7x0nAkQ0GKo/s+FkNfuEt9TNrDBFg6troFXikOw9amJI01/AZ+69pdY\nfROX\r\n=3jQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/button":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/typography":"12.0.0-canary.d4d7f1cc2.0","@material/icon-button":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d4d7f1cc2.0_1620150991996_0.1970581149584978","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/snackbar","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb9b25df448611da0bc5b1cd0a4ba6b07ff4e4b3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.be999eb08.0.tgz","fileCount":40,"integrity":"sha512-Z0lHQafRDwO7OzcL8Pwvi4pCVSOSPkGG4GghZwERd2aDfvJxQNkLVV1RwRu4cEG3lBJCDVBnBVOclD64C0WAng==","signatures":[{"sig":"MEYCIQC4S1Ac25IuVjK9jfgKXj9b352jDxDSaF8K70wYMKW8TAIhANPTBc1OmB4+2M1orzWJsV/zL8P3cgN81WVLvY50n3FR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYwGCRA9TVsSAnZWagAA5PMQAJpb0oJv1dDDupxAZG/u\nyzw6+RA4daRTJAsBGQSJryIXgYcoqHunmZ5iEg/vwTafbrPYqccYNHjs4iau\nb85/FCEWBwQzKnkS6GjNOC1q1pUIF6S44pqT7WT7fyNi2limyHr5XN7YRO/S\nQTcJCD/wo8QPLFTxzAkzdTCu9VPRegX/L0jp6Ld649LZNJvOBU4RUWIDNEbq\ngqm18l3c1pDAxLLQbx29Y4fT0bMMNQOy8WrkHx7skmBTZcp1pNBE8rgGwVLM\ntWHWZmjgG1VlMIVTdUV2pfzL3/wR5JrOyT88kOzWRIKlJWTGUPXIwY57ce9W\n/jYH/oKZDDKhXwLqY27bm7mBOtjWxhmxFo/Xbo3M/Pm2niRfokbG4/OcSBCc\nBrn0XTL73n5ND0qV+up788hzCTf/JRW4xMM/b4IRQXYG329bag9PZCeZOYJA\nEQLq5yEnKHOUBfeFbTGy6k7Q2SsQE24FSJn6jiA2ISXHzk06nIvcxZs2b7dK\nafsrQeANM2pY+eVfFvVNJm0Oqwss73w660UyifQqWr86cJPoaGB8/47JED/N\nvz2nNifacRskCDtzpCgawTWcuH3h/gIhA9j71oKMQv9aeLwd0iw7cUnK/6gw\nkKQ0QUptZ7Ua9kRLbfiUKh6ZtRGUbcJS7ftGotQ80YNiKgjrvTN18lbUuZVu\n8+HL\r\n=UJL+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/shape":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/button":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/typography":"12.0.0-canary.be999eb08.0","@material/icon-button":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.be999eb08.0_1620151302168_0.7346670903350345","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/snackbar","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef164606037cc202b7ce98a9fced5232eb9240b2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.eda1705fc.0.tgz","fileCount":40,"integrity":"sha512-g8LEBRUWxq6+KlXWFge+B4plFyT2CJz/BXyI/HZm9CyqatoiTQYfDmSQoOSVt+1OZOGoWYMZhN2r8i5vlf82OA==","signatures":[{"sig":"MEQCIAZDTs1Swsypg1TTxRSeuBPTRtzSgv9QSM4OXNcoFo38AiApL3dIhQa49HevUh8YbW+PXrcmW55QZwnIlnbv9Abw+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxwCRA9TVsSAnZWagAAt4IP/34ubbXAIu95FrqsiHF9\n9/AXBrUqQjwv2urqkSuPxBeDDpgfe1QVi9Sal04zDfoMiIwSRTgBiADyXcmH\nM4KMOu59S/3yUVwCIGCgawEzt41WB+l9yRJ93Rkx0DaL2Bu3EMNuTMJJFL7i\nxYlNVDz8Kg4erlkOQv8RdLj334ve0J6L13E1GUiiurOtKFckV+kSyJtLGR/C\nWf0aP+Z9gNWLKV8njxEKAhM1zGIczEPOq0E0tfkjb7R9956wE9q20+FJf14k\n5f3P3NZw56N5x3YDMAjFmCGy8O+9hcKKXeSkkCrQOrwsAZrrNcWbm9XF4NIL\nlXox+4Ts2LdCkMAODFKi1KI59GSYOZN0qqyQxVVL7Zwji/fP/rTtUi8n1iRc\nwFwF0CZLWGwwTWaW6EkApIsrB4onrmZCsYSmzsFUzlov+fczrKaCC6hK0jvg\n+oYVBZ5oc+dSpWt5fzos3Y54qRJJfu0u2+18YaeOVK2pBEh7diBj8XLggwK8\n/kyfyr49rolSbuWxEWLJ1GL0A6ghxZu/3OM9jQclWsGRXYmxZ0tUfnf1WPve\nuP/142gT9afJJ59JhzXr9do1LPsKJk4tmx/7uvGklAycxRYB5wNk8AD/10x1\nQ5sJ27FHgE9jQubH2A32ronlCzYTBb8QEwUa6aBO5MyDYchWcj1PQTB3ASat\ng0Gs\r\n=bEFw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/button":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/typography":"12.0.0-canary.eda1705fc.0","@material/icon-button":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.eda1705fc.0_1620155504088_0.35579291605209495","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/snackbar","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20f78fb0ddcc81f68d0a913a5c6e795425e645a5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.718c90178.0.tgz","fileCount":40,"integrity":"sha512-bpN7ZEB6xM3sUF87EEzVtA4juUFc1XF1QeeCRc5yk0o/IKSDnNcmwNL5buLkv4FcllBV5B4lMkx2Feahe4ghBQ==","signatures":[{"sig":"MEUCIF0O7B0AEfBb1BqXkz/Se6PnD6ANThxNE/JX0cPG1B+aAiEAmwCm2z6aMtDct9WuPEJk9HtfSbJzlE2efLJ97zv74Is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaCCCRA9TVsSAnZWagAAVi0QAIUDl1Y4t7KC6uwc+Pvo\niKzW20eQNqfNC8WKAQhTXAkoQRBk7SyXmEsqUL1HGECL0hSG3K0ByFFElNHl\nIS+7z3ZHPo4qw6/fGzYWwSUbPrnd7MtFV+nni9RDwT7TeYJ3GfYE4QvTC7Nz\nkFrSmnpvRHc0JljJ6aLKH33x4imGkyOHt718TCgGl5cOledXJZOOehDRUoBq\nZCAM9ZVz8xNejbEV80H47KPS1Z1R1nXTcUyP7n9ZVewQ/49wEwkJIKbI1Y3+\n/GbZXh3Ql7op16oAfZS+slfI3brZ0PS6ePJc0vHd6fO5ji5s/XvbweHEANBe\nvpQNh/NZjKfcUucaHVUPSrSFZFzEj6l+MArpM+iWcwBkSmITHetKVG1zXd7e\nrTW9tipZZibyEzd2Hn8LmfvFGIX4sqjSCmx3eRetTqxAG++LTM7ohR8O7fZp\nCGOZK3AjERtPca5vHNM1IO4MceuL4ioYsq+/ArnlZMk+8kaelgY++mjoNTge\nsQYaI4cDc2y20sm7wGJvVZCxSIsf/hvGVtBfLqVNL7vfKFicZ7VVbonnrY2b\nLlPYxmwqrI2UiCLs70IjOl/NrCkYBgoljoMtgCux2uRKyTImLKZ71YWX7MCp\nzobnTyZ/kqp73f/mJdPOZlBgIW85HyUGcMv3OdVOr2aAs9KFInFf3MxbdFwP\nkN71\r\n=1h2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/button":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/typography":"12.0.0-canary.718c90178.0","@material/icon-button":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.718c90178.0_1620156546155_0.6376752518630682","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/snackbar","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b101c57d15fcb35c8301cd33ad8aaa01bd6cd8ac","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.0e3917299.0.tgz","fileCount":40,"integrity":"sha512-wA4gwMAYNHC0f8v+3Mt5eIF4V++aGzvLLch5I7txKESfK+3gQAXh3wmwwy6a4KeHjUccvsbl5ByG/Q5th+XQXg==","signatures":[{"sig":"MEYCIQCJEomN64XA1IEAskE9KpiCs91HRNYacvWw69R0stz0zgIhALW+5q6RJy6PkH1J+GZLgQ73MsUg9MdMiM7KN8TFUTZX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaEqCRA9TVsSAnZWagAAD1UQAIVBb73P1PTvf7yTvEv6\nTfjm8lv/P59VhZbvp0vfl7O9M3R2IKx+iS7RLI6WDmoAoEok8iOBgaImGI84\nKPEmZVbU0thWkCvmzm3H0tO5qa7btGAsym9wWRxXCtaswDJpjLL78wZsAfjI\nczCLnEyxdstKauq7Mj0zWuWiNiXgJ++Zy4qVqsqvR1hJdb0tIvvp0b6XZybk\nLPS42aiLnFxQ5dd32FXKInTBYkRqkFNBGe288oWXuPoLIIjiPYyDHWRANw7H\nbOpGjfsLnOHdevL2cbo4AwpZV4dqb3J7TXK6oGJJxSyhqwRChlV+xULGippw\nf9h3b3w3GjDpJwexzlwJGiHxfnj2wjFdFpnsbLMp6m57zZwTqcoaAzmNjgbQ\n1ceneZa/FPwkHPFmaVix6FiU/WtNyqc4ZVcijFWeQXyGBjWdc/DTAYowmVCi\nohbdnRVhsXY7XLBNUHYS/ySnbwTNy29XQ5d5TE/gVacoUNXMDByDzo7OLQZg\nMyYKfGhU8yjraLAwFiH5hcMN0+APlJ4x6o40EJay1ijoD6aFjJxW+uARNgNE\nBk+jE7X/98OgC4FvZ/HR//1MtS6yr+pe2mnMsApHroUUA2KnLNZ/D7G93V3i\nmDM9LZeBuYMVgt7GwgGv/VQnKvfQe/b5tneJSj1Jvickr+h9jL88+6oIaNBt\nSiBE\r\n=t/lm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/button":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/typography":"12.0.0-canary.0e3917299.0","@material/icon-button":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.0e3917299.0_1620156714138_0.8777983940052785","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/snackbar","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c367a38effb22c87c403d615f8c92f02ffb80fed","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.836b3c7db.0.tgz","fileCount":40,"integrity":"sha512-/YWn1iz+/el6RJUDmUihgLk1cDTT/eSNZ9GC5h3xWT3K7Sp2XNnZTKVtRah1ztOuVyDxh4n9sFQ132hlBt9Ysg==","signatures":[{"sig":"MEUCIQDVTRwkC1yWRwPzyCnbLWNbjF0pOXHWlaeAY0h24MfHPQIgD9BGh+5b+AbaIFWnO8yuMdd0w9hFzp0q8tsv02uvyL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbABCRA9TVsSAnZWagAAUcgP/1UV7XWo4XFC88EoEfHA\nbrC4Lh6QkdChUbeUKEjY5Ksn5bXq7BXqWTlJ64fbgxEBMGwyAbGKp8t3zW1Z\nsFSJg+ZP2wKUPVxgOGsqykugxYEjlfwZcgkLTzPjHOb/VupaKJG62AMmCD8l\nps0UMzkcmfazcIkRMn04qMM4DZK26pV/KlUjsi9JN9lmwOvQqbJnfClL4R0V\nlbszHMA46O8J7dLVBINkOIynx43pwqHcJtwpofhZga1kQnGBux1aKB0YuLkc\npj/lQkh6CD1esgZUea6wAwvvKHG1j4rieFo2VMyWw7jPFwRDpHjo0up56mkE\n3+UbQHTQG0U5UT0p3Cu17fnGLC4tkvD2IvdelUp0E5ukytwySORzhtS5xWGq\nR1GTXe0y6gH694sMZkCs3dXotA4j7ja+OriNhkj5zxlbdtIIMWo7Kjz3Jl37\nsRlqAmUp6YGA9Z20FN/Egp9p/q8oG8xPcAbs4tH2PdtiBkfh4U8xpDJULnCe\ncboMaxWlk8RvZcYVAM9H6UBkRI2NY5DKHPA9AZxX2hZ3/BOvQRHysZf91IS7\nJqkakU3GiTUKJEO6snZQcDj7gMMhR/I2Ap/ZRLv+LYBbErkmL1scTZzaU6J8\nhGjb8dkvzcgwJu4t+IGrYKYrF3HuvSzN+4iqj6E3SDhNKkCmWg+DzoSJQZA8\nBppB\r\n=8r/P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/button":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/typography":"12.0.0-canary.836b3c7db.0","@material/icon-button":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.836b3c7db.0_1620160512612_0.37081762531577267","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/snackbar","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f20f2d5f85e82675cd8ad1139f23189c6cbd7679","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.53d4e6d59.0.tgz","fileCount":40,"integrity":"sha512-SODs3sI/MHZTa9oUs3kcO/+coqaG6YxKzgGrt2dQSv4jXdGqjDD1GZsdawjbGANU0KrtDGhYcgeFvJTJLTzrNA==","signatures":[{"sig":"MEUCIByA3a5U7e9ZZ7ZwBJ8c9ooazCDY6qujJOXm5+GmSXcnAiEAlwFm2OTHG/hRbI5rlKdzFZOgpDDuZhL9shGQMF0hD4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbOuCRA9TVsSAnZWagAAL60P/1lEkH0K0DeDfAtIDMUZ\nk6lcK7OQub9GwG2iOzz1x1QjsfyytF6OdwMebk1eEn1ypagrToV8BVC9v660\nEhevij0YAeVLcoQgrBHcyLlyfRiF4IIK35CDRVq23y31dXSnuB1BkQW0uHeJ\nyHyCXuPyKaAfXaOo7j93xJI1Dqabx7qLEy0qwbdTQX3j/aZXgPbzM+WYGQWm\n7RLjeH+MixI5C14wa6ycWipH03vj5AEX68gLIoixntc9Bdg4GHvhRAzQu+GH\nr+u43Tw9mCUkSyoIPnKSTGi6VddfgkJiYqF+m5rvP0UDUvqQEk1ZLtedTqo5\nImJZxd8j59Fu/l3wqIX0U9QWkS2L7+q1QxxBL4z9rnfRUx5Ll5aZ1Z83HqU+\nm/Pvx+k6d0Liiej9BGMxYmOuirqtdKyWHh+56n2xcnGlAduVbAS++G3V3ZDt\nxoLdmpQ3rFMbp4Wuga5mZt5fe622GDZgmQXaG5hIFQkOwwC9Bs/mbXmpPG08\nTm54cXs5XNoNoYhbNg76qPlNHkE3eMnAJB5Wx7XTCTxZZDiJVXAPM77aU8MK\nrebb/kvmF8Xm9lJZVes2VpywiFNxBp7q92hPocyHQ2pb3gthTScvdU7sDFxi\n2KbLnqb1DbnJKZtBxAKqjWNxuSuSWEq44K4u4bjQS1/Bribd40AxpyP931L+\nq2M/\r\n=wGsy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/button":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/typography":"12.0.0-canary.53d4e6d59.0","@material/icon-button":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.53d4e6d59.0_1620161454445_0.5063171781406774","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/snackbar","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59ce18438e44869ae906b596f6135c2addcf39d7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.18d147e27.0.tgz","fileCount":40,"integrity":"sha512-WJqriHfrQE9ix/tkK7LqpyF8O/m8QMnIN+Y5QZuN6q8fwxo0b+xlP03U6osKuQ2wf4LUTwCgd4Voc1HjxFUrgg==","signatures":[{"sig":"MEQCIGCxX/7hhr4GqtWyLNn3NxoazU0GkgAaKk/OHZYaY0tIAiAhrffwYtsy5/FSo/QoCMTsyUmZcqbWY+8se36opSjrsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWqCRA9TVsSAnZWagAAo5AP/2cF3nyur04GON0TB51c\n9QUDks/DYmQPA7wFPHCV/yqd9SHhsJlSwRco7GFZAC1kGrwlQJ/xDchAITJE\nPEMs3qRJhvM7Btltmmiu8jD++/qcQn5QgRLYdTHy1M/TYH9lx0LTbJHh73t9\n6I0ZsJyWLu277X3OMV0vUTvT35kDldqAHixuf1AYpl1+MeOK2lg9uJQG8gWy\nZqeWyerlEl0URSDtFfGvjkncfKPveBVd1ioZJ3RxxQZ15wfJffbSMRYqpk6z\n2Ps7FJAeaVQv4JRhlV9QQX5CZdHwOCfbm0iHHwb6TO8R13N+JuyNoigpxlHl\no9mf3tyEdEciP2RwKGkrgIQib4tkWtnaAn2YiMkotuUJ2Rn3LuBVOvjXMpNF\nxpDrIgCLW/heejpkLc3EC8SBmqlm+RrTY2uWv78x2yspce0XMXWbqoFu2ulc\ngtT6hTXQRK5EntlzuWEZOO16ligbKnxkX+bwqaJbnIVoGQO4QHeh7icTRaCA\nzs+fv76SxCHrnT0CM5Z7RcpIIp5+UtzqWP+KQMETkXhoQNNHV4VcY76V2u4w\nGmf2z9p7rGNDMWGLfHTkqCpDwtIeaK12dgnfRjtJADltV9x1t2iU+2jw1qTM\nQkgc99dNXJZYEfbrGA+LcnD2WPquF4ynpMAMRVyuGcwdrWwEnV2VO8wZX1ju\nQB8S\r\n=EAJl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/button":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/typography":"12.0.0-canary.18d147e27.0","@material/icon-button":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.18d147e27.0_1620161961888_0.7267728710010313","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/snackbar","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ced92194ecd09e71771bb80b40947a64f43deb5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.b9984794e.0.tgz","fileCount":40,"integrity":"sha512-5xCHFDzFicaDzSvVwQI/sJUOTu4ufMxd1LKBheNiuF6rapATSXFrpLac4kTtE8CleJNWKhhG0vUOkMGLrjHYeg==","signatures":[{"sig":"MEUCIQDl001hELKjOu1cGVCCc6MTIM6g5P4hh4FIPXW+isTIVwIgcw3+LtLDkg+suV9YaHpWJFn0bJrWmeFMQppIAo+fLMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdL7CRA9TVsSAnZWagAAyOoP/03fHiNwm/JQtz5k/rLK\nYDpjLN3VrNsUI2q56pscqcX7/zaKjQeo/YdlPeHqGsY1neWgRMLH4CNHA1fZ\nXHjDYOHdMHxpkNMeWZSTKOmfI5/LQAh0rI1A2LueDy3LS+pYkvDV4wdThHGR\n+tdFhmYsKRGszJdWCf2ZwghhACMDjdek7J2S6vQuSSVZnQJvqHzo6Wxdi2Fv\n5K1muT3VZiD9nleMIap2SWFtJubIazSaUY68wNxzGHSHVKZUNrYVnqT9mMre\n3TzLKFgqvargezx+llViIvtHsyG9vjeY8lCES5t4CO/THa3qLefqEmZzVMGS\nIiv/d/qpKv85slEt+es14qFEAU3Pt7NxpNilEqxlIrJA9eo4xrKEJ32WQFMA\nXQ/mrqBQBZZ2TLtSsSSjLPk+sTNtom/PGu9zqjxNy3kBDwlMpxCL6ATYisJX\nGOu14SiUXjeonzbXVKSv1mOLeqQEHbwGQJWnhLbtsFYCZzAidcMQw8EgvTZ/\nXWZJR3YSrIU7qc3TlSHe6eOKa7kJz10xTM9D3RRV1ki8lQQ+3/+JFeRCkt7G\nXGdZz7EB9ofzYJ+n6bttqBu62A1FkrxCpma2MhOT0jQprpLBMe6seAbP05uE\nYWfaTCIW6uuBnqW0d8n2rJ425k/Q2BoZhmtPsVyABQifL6MpoKd3cn0xXGgZ\nCr9f\r\n=dcnG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/button":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/typography":"12.0.0-canary.b9984794e.0","@material/icon-button":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.b9984794e.0_1620169466807_0.022657963042218565","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/snackbar","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b092de39c86895366f32d2fb3d2c54dfa8c11bd9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":40,"integrity":"sha512-B5MxD5WFP2yxvAIw0VcFbABXa3CiL1r++hL34J3pcWRMqCfgIWsNLg/hDVls9VNJxN2vo5a2WX8u2+n5HqoUFQ==","signatures":[{"sig":"MEQCIGRms8fh6cMDBDj6tDTLxWXeWYvdql1V4w/9DY000Nn8AiAIzx+3t7zS3aJhMeKzsDTvcXIVYOHNrVKm6S+FWoKCQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdPLCRA9TVsSAnZWagAA8+QP/2YZOhZTsI5TJpMSyJSL\n0Nnea+LADG171tQ1iFfdtckXnaggSG57XN/NOngj26mTYVaf6hZlIUWR2aG6\naXrn+FneAn/K7Bv4CgL9e3RgIebUjVbv9Y5X15+uwgXUX01UqB5VUbfddvCl\n3dqjd2qM68e4JSBa+NZE/Hbq/slyXXfbzzXhLRgtzYg4Cv00UyCYMOR5Kiw1\nbVTIuflHl4vsBY/KluptQh05eLPLLTqMR4hPZMbMbAvaUhJAa2Q/cfjwovF6\nXlPnRMAo6ZLivVsxrm2b54yQtIZv3o9c8fpQ9jYyd3SFSSErvbBXhQ62gLC5\n/Jr4wfaDxiEU5D0sEOC3biASzAIms5mSmiZmifGzqovRT/7y3I9xR6N1tvWS\nK9/jfUE29x/yJQAJLBEmz4cSLa4Ep2OCECBXTBCfMNauQq0+kOEvZ9gNQATz\nLLYe9eLr6JoW6bdvqMlj6Ut2BtWjSy+YGdPEn5ntkvbMd7ps2Xg0mfj72z3v\nJkGgxnsLCfcYud0IhEm/yrBuBYSn2XKXJH75avlgtgedk5u3y7u/jeLVT3BO\nkqa/qW33SDRWh8uamJ/h1aYk2pq96yZBk8fyMqznUTYqOLRdS2ry0c75onbZ\nc+xwcr5AIHvWsoEBbdiJrncxdY8UzMGYhTAbhkzFL6lI36rArxu+TiiR24Q2\n23N4\r\n=2av2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/button":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/typography":"12.0.0-canary.b76f5fc9d.0","@material/icon-button":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.b76f5fc9d.0_1620169675376_0.03993050234397377","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/snackbar","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7b8ad7f69e842b469791fb2b8d14cc2d45df228","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.055d4f10a.0.tgz","fileCount":40,"integrity":"sha512-9xFQpeotqbhUmAiG1N3efd/52G+iNRMIM8ZDFPd4dh1JZ7eROKSvhWk9nmf2rm3x8cXRf1ajpICFfLlyWJkb0A==","signatures":[{"sig":"MEQCIDnHZsqeT/RXZrmKEo8xqoVehlVunLlXaxiFB7iWkCToAiAPiRxLWtqrpnfDlLmKxhpvRrI+qlKHINlA2mJS0Hnsfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdddCRA9TVsSAnZWagAAnQMP/1h1WSfYN64QyB9n1Dpz\nMvdhXja1SD+Eo0Hx+A4gBrtiaQLv4uni/ftRwtS//HQt2QTuI4mgmBjzr/P8\nJpacbs6JJB3DKWsy50iEkOhRnjfoVnQptQSfzP0jZ+spholAm7q7WKUX6sn8\nk+ff6sk6Iwgzn35fRRrnRKl5Wv8nrdFXCR7h3KJr76YCOJc1nh1eJzEEVYhx\nDA9ReVj2Hq+OOMQhtUUzgio0SyGRN84c/s0Eh2Gj2bpObNjI7R+9GSskXvUa\n3giIOTd+HX5SLuYGXAv2PzjpZb04/uz/FZRtvAoxHosmtf3BRM+xyQWB5p4F\ndfU7xKuSsgJRu0kHCUpuJjhwjQbVDxYNgXFHU3Ac7EXZJwont7jubuAtFRNE\n2iRP/MN/ZSIml0ZMatb4eGliz9+2BQvF8/vfnBYWEjyDTL3792jbhWUIYwR+\nFs/OdOtKv5PEFjEUF43iKbTvUPjPRFjKUGZOimOoXmoVZDFZCMv+Ur9QnKxR\n7e6dgtUYBkeJ2ABq5/c+dnJjaPm+MKIauudSVo1kizsHmcJ2IGupWLyM1EXg\nR7uLFjTEUNkUm5zWwVIQRJcE4AXYPbZmXTWLgyeULN5liP8fvOdUoRyOArbo\nK3M3cXXMfxzUBh9DJoTVSd4z/sRwUBU7aSzQBrFXrzEzfCxSy4aBvDpxwdSa\n4Z6T\r\n=6WSH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/shape":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/button":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/typography":"12.0.0-canary.055d4f10a.0","@material/icon-button":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.055d4f10a.0_1620170589225_0.08767761952170638","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/snackbar","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bda7d44d391aef6bd53e907d6cb50ba0a8e0056","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.5b6a46016.0.tgz","fileCount":40,"integrity":"sha512-+8NzY87AdQmjD2prxVQvXxfM/KFZqnWFyesNTuQIHEgfuamnoRbFjsOoArHD3RVhVxEVuoSq1fXHTetj8OdDdg==","signatures":[{"sig":"MEUCIQDZ3mkD6gPRbzRe7ubtf+cnc08zBL/6wsRIpfVm4GGqFgIgL+L/R1xyy4zkoDu4qlseQup6aBXAMyANsD52cqKtquw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksUkCRA9TVsSAnZWagAALUoP/RapAYSQ3MDQ11fysF5E\nsyo5/Gb8WQbmYcyvWOB1QDBsBV08kiCIUKBFRux5s1xFd7iwgBzCKJct7a81\n1smhuSCzJrIiyBoFMp2gKjWBxzlq0n2wY4796/AeNFfRj7iEyKsIpu1VHePq\np2TiFJV4K4FOwC/JkvxHBoCsMInfSQZU0zkgT4d7v3kKH6wXmRBlXYjMiGBR\nHNcWRc6SOGyq4eWGiq2JXjFhopmTzQlj3T5taopqwqLn0E+CAHvm5LDjW9tg\ndFh8VnHsZ7vcply0BEgnLvaJPpVBBP1W9dI1P+H6HXtKRDMAnN1DD9nEmwym\nti2o86T6lmuu2KljJ5OtUF4fzeYkm7rDG05DWJUWiAqGFAmPh8DkKSKfg7RD\nBiQgPa2LKfHdkUbzeTKidlTjLkPijyaR6ErTE0kL4bV8AOCXP/ALd1IcPGew\nW7KTO2eASpad/48sYVsiw9RgtbfOjynu1RdfXYCdzuE5BnUwSLMjbP+GI/lc\nfA86bxTCPeCn/NDCsvHZXa74wSHHIuSGCqahUcUcyMhI9tlJXQ8Rh9v87vQd\nGB1lE3zhLMHMsnPuMVO6NTzZtIOaPA+oILwvcTs5zQwxxjIz8NdbJV0d3UXf\n/9KQg59ri6Nwq8GMAP9xJFRaHt/QH0UxOdc1ylsk2OCOAE8J0TWWNPSAZwJD\nKimx\r\n=zUwG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/button":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/typography":"12.0.0-canary.5b6a46016.0","@material/icon-button":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.5b6a46016.0_1620231460102_0.49553907802771535","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/snackbar","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"083e6d80f46e6546922514ec3d52d55692b236d6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.33c9a737a.0.tgz","fileCount":40,"integrity":"sha512-0DXQezaE7blJif8w2A9pla1vcuanJ3r2JKG/94WHLLsybKbb82znjDQpcJ0Jqx1Ppm0v2Q0VHyd2A6dhLRVbXg==","signatures":[{"sig":"MEUCIQCG9/xSd5ytcZoD34PqskTd1HAAyZSsJl39xz97SZc9OQIgb/ALS0KNKtdKBWO2ROZowe/1IRvk4WmksMZejSyyEiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktXGCRA9TVsSAnZWagAAqKgP/3Sex1uO8kta5uV03IVU\n9dwcMahBq39rUu3bQIpPhftYqsEzAow2Go6PsOMfqZVQ4wHaDospTQbD98hS\nomHtvKJeeh1ZfOoO7bQe5QtzAYavSNV54GWeq24Sr/Bm+3MPjEGIOFBTlUHM\nuFNg8GVaCrrzg3tDrIGwAQs3cYuZa3d8STDtKWjosi9WZ2TM2vkClNDpY/x4\nh2ob+s3csEk50jjMpbQbvjXgYytGd3d6UG6GuRmkkwGjNNtpbAjuvnR2CQdv\nm/XGRO2dutbgYY979rmMXqROb24BrCQeLXlGB9LUA3pjLToYli9RfOfYCBnM\nty3p4kfyKhk+q/xAqf7PQJgaAbYyHXv3Ecmc3Ir9LbNjWf4w4DQZa4ujE8Nj\nhANC5U69I7ZeW3Nm72XaL+snQvS4ns9fY7Sbk1b6/DumA2E4UaQdKWLttGeb\nwV9IRD/iVJGSwE67aPUcZdGH6ebiacrp0BHmPEVpjgQuepniZjzCPClB5Iik\nFgS3UbFtrai3tfRjpGK2ZdkLgCm3KmFb4q03URvblgSjOgRQ9gSPB7hVAEmj\nbU7Qy2dYPSVd+w05viFVnRa7CSlCEnv3U+vGvlTiRRxyjtuPzsZo7FNGwyiI\nSLJ1LQrxFOXA7ezdTqnkwFC4VVIr14BKZnVOdC0L0ilEooXOeoIjd7aqGF4W\nWFXD\r\n=wIUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/button":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/typography":"12.0.0-canary.33c9a737a.0","@material/icon-button":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.33c9a737a.0_1620235718045_0.7653474418078856","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/snackbar","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e39180624e5d5730788787db1b83dc4db9c46372","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.9bc0effaf.0.tgz","fileCount":40,"integrity":"sha512-f6zvCviZhIqnueSQCmzPEfhTV/x0EMARewAoKjsLpEZXEUAmSxqfoGXBLWhZdmGLtxDdhWjJv2UORepLL3D9bQ==","signatures":[{"sig":"MEUCIC3dlZPllewQk3jUPs70BwAuWKSSy+fiGm2gUIJjOTPNAiEApeYO8J4k5VkcNA3+qdPvw3u+9c2jP7YmURuEfRPiN3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwepCRA9TVsSAnZWagAAGzUQAIYGd7pwHuD3ZcHK1jOp\nJ2xeuzGHSLc3Az2AfLAJPvqhnX0ZRpwFiW1cDVoWJXlYpZd0HMDiU3N4+XN0\n9daV5jerK5Z//OqFrP/n/M8TJgIeY9YqdsEgHGwl5JeSC16i5Gi9/09pXG28\nD37KDazsHE/fcAUlim3l3jfG2aCm71MMXalqvZloeEpN+O+ZrnxYDAh1wFjh\nGAlbT1COIbaLxPZFcetwLfPzqpUdxHpEaaEgh04ieR6L9zFUFhgd15pYB7oa\n+COG5fGO93m0Rdcsvuw9wqALg/ygdm7VlO+0PK41gZgs6LGv8x3hGu2wF87+\ndq+kM01HWAyqiTYMXUmAncoTez9tYxPGqXN16Fe16nhmCfxFZPmZyWSxVly/\nEzuM2jMeYBBu7MdXMEqAX7lj0btdBCayDJSaPXOhFuqVLnwqXUCZ2en5R8Qw\nLfDwtEsD2Sgs05KCw3SSWlgyFF2t8OXWGM8sY8FDiYFUIU4oZQNHivfDu9/J\nBFJu3yNtf+hqp9oKcJ54mGriJqXvVCOmuqzz9+9jZjyXpjX5AQcqzE6BVm4l\n0hjPy1uyodpdsf+NbF93rDcTJ7vOyQWcOdlTH34/FJfNBYsEorNUlKxYCkQv\nTIOfOi9tiyVHrsGsHSKrYKmagf7TmY/aoZ3JGVyfaO4oVbLMIhAOJlsjHFYG\n7Ig1\r\n=4qMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/button":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/typography":"12.0.0-canary.9bc0effaf.0","@material/icon-button":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.9bc0effaf.0_1620248488572_0.6681829889465807","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/snackbar","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed1cec424befa4ebe529d2a53c97a141ac20e4b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":40,"integrity":"sha512-Fi4ZMHmQnt65jkWqLITCDktp9oIwaDTwjZERvnvWHSFJxMvjYaeF6aotrWQV4dmC/3Y5wE/A9atIgWa4LoLlAQ==","signatures":[{"sig":"MEYCIQDWibBJ3CYalgTiTc6TeGztwL3leoTs02O2dN9LxVPNTQIhAKTRMBNUph6+3kVbgQexmoWABaJLDaEshTV7uBwX73iw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxE+CRA9TVsSAnZWagAAmHAP/1OvIIQq8WxDv03zsZeN\nZ3eSVtR3dSLm2d/BdexOK+SJFPeiZOq7amT7+w+Xitp7lCHZycwvMNttcDLC\nzVmCnXd5wt0aB+pwsybfraEDCex1EH9qSIzfkYxd4WKUCKSRWnCM0YCIHX/J\nDMt2X8anmb7faowPEFtTRpZJtGz4hkWWa2RTpJPWSD4/FEjUs8NPL1RTsESy\nKEXiOkdCgWnt2AL0Rz3FmjE61urDbcJhptC67k3p6YTZpvz1btCLUg9/81jr\npnHK5YItGB3UKua70IzwqGk21dYrDraqEZVFX+WfTWvs8aHUiHExJnSw4Vc/\n+OtEJDKT6ZjUA3XHPurdyxxzCxKphqN1BPs4FHrpe4X4PS5URTzTXGaSNbAd\nuGuwQE3dSdalD0cH7ZYMIugDrn/AR4YI7gyZXvO0pZ2J/PsMGqrDHpI09REp\nVB1pcqOelud4+ARs6owIWuUg7Tsh7Y3d76vU1Sefgs9R5R14LbbI+p0s3Szm\nP/lcNuwSGBS/Z4mwV4Eop5D43hdbbabZ6Tqj7F5u2ZkelcYmRPG2TWfhEmPM\nvljWfiJYlL9BaI8N8y0EeaEUwlynDJEdqroWpawV9JU5cWCQUYQg6TFVtsVM\nUJ7QFjFHKRMD0IzWOAhsbbzBGbow7tkx99fx6qptauMoGTdnlFUAKBzOgtp2\neLUo\r\n=LWKP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/button":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/typography":"12.0.0-canary.a1e0f2af5.0","@material/icon-button":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.a1e0f2af5.0_1620250942262_0.6372000981961019","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/snackbar","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"882af99f66e5f9bb78431034ea2f9454c48bc1cb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.06930c96b.0.tgz","fileCount":40,"integrity":"sha512-vQ+bhYMnIUL5Xv+vd3Ljv22iaJv0f0wMl1kM+MOmwNoiIivC6pMz4S2BLNArqey5rIsoUrTHTW69CIbkkUY4eA==","signatures":[{"sig":"MEQCICUaQH5neRV3kboeHtueLe8ZQGbPPkdgakH7LUKWYl/9AiA1iERON8hmY+Ob/xgec+YqcwnPsYle4mFqqLDdaYnxKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzxCRA9TVsSAnZWagAALiQQAIKi7O/J5ezTsjr915FQ\ngF+7Hm/90KtoUvA/Dfw42y0A/iX28Mjv31FdNLlXESrFmPl24/0f1735R6Rj\nZ4KxPCws28MdUZUo5T79kPoIPBYKhMLc2bfUX0AdU6Um/ebE30kbBEbZ0in8\nvajeujDkbwk29VCUHQpWnuXkzwpQYb0ZV6K+pfauwoqcch1JZR3XCqDaW96G\n+HB//qvLHL5hCY09uDO8NTHhYR+s/wwVKEnCoDThuRYHZxJhUM2NUc5bI8Vu\nUqPXRGdYlwop4ClFQDOk1H3Y/ti88fykZPfyTGegC1jogf2LtrSwGnyFmbUa\nbTa7TTKQG0dk2+4qBunJr5TQJSsq8Hti1GsMhBfJiuYoAGQIuwuaUulWo5SV\n9IlR8/wBpDpZB4cuXMgQEo+wW2LkJGpmEoTnMGCXHn8JPDUV97PmJN6vdxBn\ng4SK120SDTdJkxXdWO7oc2+ayglTbBbJq5ZO6wVmfx7T42/LiYEiF0MYt/nZ\nOjKpQH9IUWAWOsQzuTv/Yw22XR7Fqj+gDGVXLo7Rgty5SmktBEjh047yMux3\nxPJp1cMlffkD0ZDE9d00uPtUvv9tjj2naZOs5n4GFgpVF53udcB3Tn/vLr2A\nT8ydvO0Li/D82T9+4nTUzYH8Wlo2jGHpl3JOoEvSy8LKx8wAaDzmcIMj9ia8\n0zIm\r\n=gWB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/button":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/typography":"12.0.0-canary.06930c96b.0","@material/icon-button":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.06930c96b.0_1620258033176_0.8841983921774319","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/snackbar","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1828b45e9d74916ca918b63ec7fe73692a8e7103","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.03f525f9f.0.tgz","fileCount":40,"integrity":"sha512-xDmayIA7hQ+LG2489bNUKlxNwuxvNAd+gSjbG+DZvk91q9xYI4nNHzX46HM9FZeQghtuk4fQvx6lrBQi6dgNBA==","signatures":[{"sig":"MEUCIE8tCk+9fEmPJOObHTNWtpUv+ImK44c62owaL3Mge1FaAiEA6du38JO57Zn4lpHVHLsFzH8mNU7xh42hW2cfwBaahw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzjiCRA9TVsSAnZWagAA3WYP/1loBCz4nPj+X0s56vkx\nC6gHMyJo9NVLvGz0khl5Hl9qxpgls7I1JlhHKIU27lg8rQJSCNJW+xH5SQjU\nlzGZsz+buv6Kh23OD3bQIMzCDuwZwVxiElcFGZ9sA3abua9SG8FTWDvtqp1B\n4OlTAfijWgcYKQSmdPShYGdK/dChBbxrqBNSYTKZ2emg9RJ+vmWVF3GkTa0V\nAwKhv1e/9Tdofc2UQ0qK4YhA5NnKNUA+IJUOcPw5FjDF8wX7ihBCSaRVj67f\nfB3YdScyUnhPEi440RQXr1aMrPP+vgTJQRpf+q7EXtKXuIrre4R9q80MEL2H\nmeFZO26qXDRoHSkzYorhXrpe5JEkncIT/3g+75pxft98ULz6coCn4hwGc8Pr\nbI/cT2xdtIaAOj0GqqdF/T4HH22pj5Lmhj0EHusqaK0OVSsUTjUci/epPYx+\nV/3sGhZ2G2trDRDlWiRf7OuotfsWS0oXR9rP3HXa5bJetz4Ai4pbZbJTjyor\nWlxZb/LYGS+O0QrGIbp71ZP7xkI0emo1lxBN1hdoibE30L29cHBdsknlEaxB\nzCklrqaewn/ycT5/wZs9jD8VnIF0YLgzxZbgU3d1nPaHRt3pI93BFeJaUSrV\nB2y5T0sJLA8okb7DalE/OWm9/1WtVX2s7nEYyXCM4eA5tJ++5f7OEfNzXZrv\nRgH/\r\n=jUaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/shape":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/button":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/typography":"12.0.0-canary.03f525f9f.0","@material/icon-button":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.03f525f9f.0_1620261090525_0.6631296320774598","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/snackbar","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5252b6b01809e8c0caf1dbbf6018ee634da28250","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.e82ba2a26.0.tgz","fileCount":40,"integrity":"sha512-SuFgPKRl0fAeB4b9bu60A8O6mGCLf4ZfJc318mtlat6YBhdfFA8icxJKNM7v5m+YAFsvyemKivgvmY/mNWYPwA==","signatures":[{"sig":"MEQCIGKLOB6qBnmNIs+NbskX59aUpFqn3Iew1i7xXQgoG9KdAiAzYMFmg+6LSnnrCJJkMYVvyHNVp8NL7jNQcPwzl6PCmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBIHCRA9TVsSAnZWagAABMIQAJswk9C7F7bbMPriX10E\n9Ay6a4Ku9U6YhmdbaF3s92mREs/Ogr1rWoI3e5EInvxPk91G7JdUEpWX9PLl\nuwhC0AgCYtgpjTZ5LJziuYzq80optXsYBN5+OQgvrJsfsdiJ1Mob9sUe1ux+\n0LGnCnhLqa5ZAJVI2YzI4e/gZObiWQ+oN83XFAESnE9fHIvO1ho4MvlnSbsv\nLKGkllSAJMkgUDdK8J8CYE//OpCk51p42K5VF9meNtCczNHUHf2iw0U2HfOJ\nvQfysuJlfW2VST89BXLS4s6boGKtxaN1taudVjSH9K9RqIV7+F6foS/y7o5K\ngPqcx/uMCI6ueIQu0zV983ciE1JrXmmkG7PUz7debv8purIBWDhGxcR2JW+b\njIttPBKisZIPe0ZjDUJC8CVCKs2ZWpMLrR7YKJkoXS2YKr0JIDSd95ToKnbt\nDxrW2DoErmvfZnptuv3usKJvaKUVkT/9BOCJh7NAsUFGo+KZLd6m/DaGc/sY\nIC9lGg2YTcI2jiDHWt4RjN/RteCLXnvwOL0GiK42JEF6DhMJKOhkVKnMItp2\nVcvdcD7Bu8PauVgD9MNl0Y/Tdw6/eqwDG2HQaoutRz9SgrKLGIdc8z5MgRv7\nHLmRG+znexwy3XWjM3AAAYLDNqgh7ZcQDldlm1dPzBvDslksgqsOnVQzfaJF\nChcW\r\n=pD7J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/button":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/typography":"12.0.0-canary.e82ba2a26.0","@material/icon-button":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.e82ba2a26.0_1620316679216_0.27644210339254527","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/snackbar","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e58e6c156a46b6c031109237e8e31ed03c32d91","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":40,"integrity":"sha512-OPTFEqAN6HolzStTSYxvV1JSgcsibz7IyPxbEckKGHUCnWrF/6pOsLiPWUZk+KQV696cx4NQiWwxLtvgUoOyPQ==","signatures":[{"sig":"MEQCIF158kipnHbxcusnbjGZ+YJDjio0vIJ6tqGF0Q4RAoUKAiAYdkS1LcH9/9sK3MzjI62axNfk4KdBo0FmUQ3EkWxfZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCfICRA9TVsSAnZWagAALhMQAJCmm2o++zEZeGTWdRxz\njSoQIZn7uPL2FQ7C79jOAmOJpjvLoWRRkY2C4nCQ5yh5qqx3HzLeOwFI7Zev\n0zXf53Rr+xx1Y1NwrU/yHuBNICaTBRHIippnD53y/T95bKeIFYLKQeZYWaMm\naMcO39FhEaQwbgnQiCtpjYNJIqjrFxbEBoOQYxXBou8DkX9sgGn09XCgw4QV\nhZhy/0TIBrd1BtukbHXyz6ksrz4kdgRikRHq+FX7YkaCSQJFK/LaReu4gBXI\nh1/n3XNlqxwv8t2iHla/wbI9YgVZsbQKrOM7ChpgxQ7l3cPgpnUTchJBkE6I\nEOwK2f0ImEgUx0D5iHsAH/Q7zhIYLAAGMmjLbvVEJ2UFNV92liKMHSbnple/\nuYVP+th5xETlZmeXa6r1KgDwx7v55O1/an8kMLa/7vgIIgz13tve5LR/pUpo\nOWWLtx5AqizfrKaulbkTm6/7ezvxXREDR3cFx85x1rytPeOgM+4bVjheAZsA\nBlqCqalbrrL2t4INO7KB32WxYjxJ9/5Ah/SMwSWCtQYIvh/vt8uKXtPr3c+m\nbCnB4fIa3Kko+KqSbY63yToOSSt53RjA/rfwK8uBRs7iw8ZQ6mxQ1TiVDNmP\ncjNiFRER+NzarQ4VMCk348yRcCWl8mt76y7/wne34zhLv7/nGfX3ih0ykJp2\nByQ+\r\n=zcH4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/button":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/typography":"12.0.0-canary.fc7c4e5ce.0","@material/icon-button":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.fc7c4e5ce.0_1620322248589_0.5180504794632363","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/snackbar","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f14bf3f4d52a012cf7a0d2e73cb120ff3978a8a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.65c04514d.0.tgz","fileCount":40,"integrity":"sha512-fOPbaa3yXo5WF0R1TR+CavXxRatOQbfBPqmKOMeUPcRsH0lO4hAHR1k/xmuLsmcKX6V0CU0Xtc9nl2EQl2wPMA==","signatures":[{"sig":"MEYCIQCUljvzuJa0oFqFHvAcGFDFB/v9mFpXAnHuY5+qGm5dkgIhAJJ3PfaTqEJZG+gZY+Hd4U5O8ghq/2FYnSNls73Aiz79","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDlACRA9TVsSAnZWagAAVmQP/i7YU/K41n3yxSReQRmG\nhHunQKrp21+MKUJHbr8Wf3Lks/cMYMBb1iXjF/J9EExwDIiuojqklmQrrMpn\n9YKPqyFl3ER025qxEGtxjACnAKpRJbRM/FPP7vFGN80pH+lFYSA/ElhB1ii3\n/xMm68sdqb5W0x3ibLIWKxE7/nqjOIzTyNMhexvXxjw2SzMAHRqUR9t3mJBC\n+kxrmxj7dTZEgLCoyuAySjqzrSAPguLPxzh+wH9V6lyv4NystY3DMj6Fdgzv\nRHgiM9EHbtOI6nIEKv1OfzwLL+C1ZD54ldfXg2PgXXpBIyCRBt1mpNO2/A01\n3BsqMxEA2jMOYOHu9Wz5EIKm4vPIojau4Ab+z3e64zlqL874o9Nwi/72SVlS\nQGOvyr0DAotQ5whwkc9ZfROTZ4BN3B0Csxuk3vUd9DNEhPI8JME6PiKm8IrJ\nr2zkBzGV6llibZ/d0kE+xfLOesYrd+wKQ/tsDlx4xaBv5axpfDF+B8SPjXy5\niYBO487/v8IE7HR9qJhYj4hnOinL8gTsZGmi+a/7j2J1DU34H2j4fwrq/2rQ\nRasGeQvnlv+QePngyh3eUr5EhRtgKStLyhdXDqZ8GEM7N0iphii3HgJl9CZW\nefLH4Ozc52OQbsWKYmgplkfkTa6gVa9bJqK4IBBDwuZxN5rXPkmuTFgU1jkn\nCi3h\r\n=dgwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/button":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/typography":"12.0.0-canary.65c04514d.0","@material/icon-button":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.65c04514d.0_1620326719586_0.36634706206431855","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/snackbar","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0559335c1792829e5ee80b7d4e8f5126bb68c3a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.c97779ca6.0.tgz","fileCount":40,"integrity":"sha512-LGURWaY7k12wyywemiOqDP4sE4jTmyxq531+hKhpYlNkNIYUN66eDINpdvlqoJa17pWqB6Lih9WcQGqVtn18GQ==","signatures":[{"sig":"MEUCIQD2SWOIpk/0i3hghEy8GfutP6tlwN8R3W3aFPUY1uEIlAIgJNASbREJ9nDGTD/K4B4SPAJphl7GUhxMSr29OtGG7Nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGNGCRA9TVsSAnZWagAAmDMQAJXy3Ux8U0KHqZcPU+ry\nFyLziARkGkVijoRsr/qPcXZFZPY6xH/CmwSe77BHpMS6AvYcjzFH3tpm4xy5\nuUxEXvdiPSVRVgc83zDkqVb6JstJnm7M3F37ZrVBAs6xRnIh9iY2q2/4WQa0\nS6Fsf41c6qfIqGoWByrvuIN4tRhmUWpATixF7bJlMKuB43dz3zaj5RPFuanx\nlULlszx55ZF4IoRARzCUvHO04AWIl53QLxJcDFSLjB+EOcjyBe8qH27bdQp9\nFSG0pO4J2P2+bsnfcitlTIZKglpelvVwTd92XV5u9rmtfKALXzF6ClH49XRx\nR7ZWPE4ElGEwyRDwcGAvN4qi9PIuTN0Wc729fC7LoS/Xas6Hhbbkk0pZjZBD\nLe1VgJ3fCOvOslj7rw1N3mscB2POlpiKHCrtpB+07WsouhBFAqW1gGBGZ0np\niFPFCHDVoYN/zDdOnUz0EJAs+qwh81pL5jJgMshfoD2b+2fgSnSdlwIpoQrJ\nFBdMafzXrfSHXiSzK2AGBhEAF2TGXXdQ9r18XXB5JlujP9BhNlP5FIyeuYMm\n0dXnr4XK83lNnTG8etYUDZvjywsewT0OTXUzOhH3GS5UKXrM2aLluQ+JBGEL\n8mXI+yfc7+5cQSIjjCBKQsfnJrZZs6ZJWNnXWXEJwKjcd6wgm00Saz9pTzZ8\nNkm2\r\n=aK0d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/button":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/typography":"12.0.0-canary.c97779ca6.0","@material/icon-button":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.c97779ca6.0_1620337478344_0.553915692950981","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/snackbar","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f361dcb58432564690feb5676c7e30197622fad","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.869d890d4.0.tgz","fileCount":40,"integrity":"sha512-/s3sddIoWRjoOuUltMxb5/Ez/sI2XvhPvuzK8opj0qrd8cpOFLRPqRmiPXxRDw8gWhqJic/XDq5UN+Wt9v56Tw==","signatures":[{"sig":"MEUCIGu8EZn07EEEbJ+VCsoy4V/PmePu3Qpnb0BLE1mDe7WZAiEAg2gVHys5DmzM/DETZZdDmYGDDVwKpgk2dxShEM7MSl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVqsCRA9TVsSAnZWagAAea0P/iHocHmZphSktD19IqbW\nRy1aSUqfSMOmorlIfXohETr8VKzfwd5uG8Izd8/mtFd0bHzh2xfvI/LF2dhq\nV6OklNjQ8p5ENjr30LrPPwzbaBIUuZwIfU+XcyN6kdQWM4oz1VOyRYhkmIB8\naVvMZ41YPSDwNRTzwLZ6q9eG/ONDdxx6pxjYTMyhJx6P2WalJuce5M/IzKy+\nKRdF87q2EkUW96CpTVDbmVi8aoPMdpoHwU1h/3numVkkU/KqG8uuYPRyUYUn\nvyrIh6JSYY53XfAhqXk+5qBM+R/oj0cVJbrhK+1k89Uq/MSNPyHJurdSrv5v\njFbwFloXXVf+/fyjvvHlQpeLdoyx4mKIFhaG0h5CEgPEdaGwlgDPN0axPe0c\n4NKEQaet4BraxzKXm5wXt2BOexI1HrRE6h3d+VgT8Y7uuMtFQ6D1HAB+yVNN\ndkU8xYrHR/d5PULeR50cyhPf6O38chWwC4LgCwuXGco8bQc75V1yXHY/2Plp\nhrazfuR5E61jySdzOg2T9XnhzwOXYbjTCTXxCSppZbXQBZxO0BbMLh+zSE4I\nfli5fh9HW/oLR4svRyA1G+em3hXqfLuRmbpApdvQVlJ6lhg7SUvlFZ0u+t3I\nGEhcKGN95c0b5nuEoOhud7Sq9AMgWAJxvDZMqw3PZmAkgWYSLLSydY1ohrfu\n3asb\r\n=GQz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/shape":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/button":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/typography":"12.0.0-canary.869d890d4.0","@material/icon-button":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.869d890d4.0_1620400812349_0.6434273257651957","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/snackbar","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41feaa7267f28fe8319a8879cb5f1316df23376f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ec22e1da9.0.tgz","fileCount":40,"integrity":"sha512-qt2z1nUYs0/JCNGXP10eyBHkA0ThJrIj+H92lA7lpZpLNi+0f4LvBbqn567EjuJonqynAIv4+LF9Rt7FmzEx9Q==","signatures":[{"sig":"MEQCIClzisLkHXSxJUCfysKlX0Za6e58KWUaLKtfZ5KfszBZAiAKhSKPA+YGaST7dc2tGaRuja2IiIq02kGcfNYPm+Xz2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXpzCRA9TVsSAnZWagAA2UUQAIdLplKyF+oL297Ug1MJ\nuANZDMORFyXtDr+SmFqiLXriYOCtKcjqSpDwobTVv+1/OE7oQ8HBnXsATEu0\n1gDYt5/hLg3ELsxLbD1vx1AkDaC7dszmetjOwWnyrw5BrCoUd58CyIFcFBRK\nIyzqbzSdx9EQnpOjEZP/46HezmHrt8JPpuMUo8O088ty4GTPXWahToXsZNqX\njqDRI00SyVRBLmsE/wsa88XRfQovVXQRIk2+mA9UskDDsDoZVEnRs8eAkcFk\nv99PaSbZSnVhBUqrvMRTN/otpRlZN0x6XDRY8w9/nxCbUg69RhQLoEZmdXWT\nUjl2Jd0u8QxB7wxYxPDz170XQyY+z7Lfk0imWhYa2HKq3k8nwMwUZ1xjpIPL\nvsGX7lDyKti1NE/p3Gg2Ad2Pr4kMHby1xtCQdjPbnF4zInr/ZymDpUR5cqgf\nQORIMUOP/IYKnZFDl1y8wWdKWYvBxD8kMJfiR4Fod+y3AIxAQbRu9pzVGhC3\nosAQaLok0NIrIHCpZkXDG7HH6AetxiufpRYGu2F/mHwh8q1vmID7oH32knLQ\nW2jJCmo3plJ44/Jdmk2wi25WI7Rvq+ICUXjdKs/rQlFz/PlG7lWEQbv35Cw0\nBhXoEeHpJtdgGzTeIoxxr35WrwH8OVhwk8rd/3XIlmZxILiNU2n3rCL/gdI1\nZmct\r\n=UaeL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/shape":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/button":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/typography":"12.0.0-canary.ec22e1da9.0","@material/icon-button":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ec22e1da9.0_1620671091324_0.3946945002333764","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/snackbar","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3fa99e253837103dbc302390c3f579934e52dc2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-nightly.7427449f0.0.tgz","fileCount":40,"integrity":"sha512-nuC5E7PKoy5grDveQNOuI2Pi29ioZ++s1Bsdlw2bnbgnMIRMkyL6/n47ZTyusbzQxiqHcFWn/3aH2fpv/usYlQ==","signatures":[{"sig":"MEQCICtHjooY1tG77IOTr3NMBuPI7bR15Y+GZGievOesK1h3AiAkljRNnKWfbGONNSSH3TuJ1KVE77I0W1b/WY+STOTq1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8+CRA9TVsSAnZWagAAewIP/ixl/c3abQ/99h4/d9JN\nje0I7ffeD1Tv+vCMgUXoEUVU/mXGpvBEcIorRQeCuizciECLUB3AA42W6KI9\nPWw+rP0W9pSDDsFYB90MwROcXnaHTGAFAon2gfIBVIdaEHNBxHE5nQ7iScoA\nguruDkrLj+fujClGHgfFPn4WAixK7j+PR47gmn8byC/GAbhvQ2wiPLrNrnaY\nSOTeoprEZldjsQU7KrVXGzsOcYqGUQm2nd99tTOEYz/GqYgVI/g9a+hofdaH\nAmWLrSZHFYiB60GKqVlM1wRLNNwngx+0K0ImwB5ZcE6EM+Na6Kolek+JwtCl\n6yH0scMvyNG1ZckIV2jOft+55oguKJlj333QEYu4LbaJzWVltGra7c016UqI\noqfrbyc/FkJOnOzISqUXXD6kLLHsv83gEebEkOpMBKeZL1m4s4tLCKDEuO8q\n+0bhrIRnk7H6IqFiN92VeO8NEZNtTu9LvQIkogdFgrMS6I9LM1gNAKZn+vDl\n4GZP23NGkebWXrNbo/4P2xW/eSq95Z0o5KeIEtumY21/VKfzHFopTr2gQ0Sh\n1KuI7j+D069fk75aGn7SCUcMdE8MyVzwnmTeWOGmmnGBYPI8WGfLhZpI+0L3\nrW3CYprfq9eRpneXYWeFGheOK5CF695/7pItxbpNOyi9JTTaf147YO8b4yfS\nLb9b\r\n=5I5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/button":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/typography":"12.0.0-nightly.7427449f0.0","@material/icon-button":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-nightly.7427449f0.0_1620672318237_0.7175754810568788","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/snackbar","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"935abb1999f271bff6f7077e90c116c86f145af5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.957cc3bf5.0.tgz","fileCount":40,"integrity":"sha512-TJJJLvGASAKW6BUZhvnnH8orS+eMEqxc3zZLPpz8n5Fj47fyBK1ly3oUONQstUmPxPHwDQNpb1Zr3HSVvqwlzg==","signatures":[{"sig":"MEUCIQDKE0vVapoIlCj352S/vaqEyVTusfqmt48UaYpeFiFnAAIgfA33g+7ItDB2xVXQSxKkOXhyp+3kUVKdssitzLODWng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxzCRA9TVsSAnZWagAATVYP/3iml2k3Q0wNlJi/QGhf\n3J3RfJe/6Fcc0lsATqGNE+kZ9u4s7HBuTnqYcteJW5ZOv3qDoYsBiZlWTdWo\nfxE7w0MQT8u/Ll62CbGqmobnJbYR4eP/Yz2DZP2axX5coESCgG66xjJD18Xo\ndzhkrnD4EH7KX2NiNI87DNrqGZ6pXNDlWDXIIqJg60sP6t26TKXdXth0siEz\n3+aoOBtdDOitK9FSan9ee1BedRj8OA2wNAWmc11io/Pml8E4ZsGzLU7XYAUs\nh8JT0nP8XRux14EKJNU+wqcLDNdrHbeSOwcjDAn+haMUEaU52V932DJch5/E\nZux+sMAVb/wknM7t9GgFhV4OCgvz4q6/fmEgHuIiL+NPZ0DLvgFi0jmJWuq/\nxZ6UeUeHjHsWuJEvxOCsxB2sm7TmmAlDs73+fFmKUmLlyHeGEXblqFFMHbLX\n1ltocSnlwYkcMZO0gDIUe9k95fQ5pZE06c2Sc0d3xXJH66oCtRdLZoHKg0IR\nA7yCDuohxyi65y29Ruh4MUywG1NV5ljYZA0fRzboli4b5e8xLVbcKzR+U4L3\nHnJC1XhZbbEYgJlMYR3qQcxjA/Ae/bcaN0gtvsc+HZQQF0bvzbugpl5w1s5R\nTe4VC5mHWwkPTsssxznCSolUvahK8HSafaSDVn43xNAgPa52B3DPSbO7NS8E\nnSwZ\r\n=eyfU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/button":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/typography":"12.0.0-canary.957cc3bf5.0","@material/icon-button":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.957cc3bf5.0_1620683891003_0.4536666580660338","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/snackbar","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0deef957de8990768a8da5b671b87ed9d7bc7d19","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.88a33cd70.0.tgz","fileCount":40,"integrity":"sha512-+11PNQmnB8usTYEclksdJggf2sP/dhyPK61vYuGPulqD1FGyTS4C7PLP0olZ7aDQARyNf37uCxwQGF/dJv4hqA==","signatures":[{"sig":"MEUCIA0I/N8fz6Ub5V0JqdUxaSmvF/SGmX+bqPLxpNNPLiVjAiEAu0NxWKN3M8oHtWm4vlGQyNjqD+OAp0Equq3qUa3qZ9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmctmCRA9TVsSAnZWagAAMyUQAIJzhh88k27cFbmIt8Tf\nA/QYBlXHuJiZzLi/fvnGUsfFF4FS6JC/l5Lvm3jSpsS9+aZC83PpXzmU+kRm\nHumv454ouOjFBysou7wRz/f+2ySCLwkLTcu8oH7nt2OMiY2HY87Bh580kiZd\n9ZH0N6BUAxW1BG7QDkO9O3wH7AHzPkYUXZIjeD/I24dIar+oIDQnwPKtnBzs\nxdHaVA6JL7cL/ewMJGdTFEO9GYJckaGv4xmh/cJO7PGJlWw9W7y5UPI3cc/0\nxDcLgppfZ2xJJDnNWm1WoFVSmVXfBv+N+8LS6cm5R8WcJfIzBimdFi7xwl7R\n1aKtwPOKjBjeafSA0TjdGMSQHFXfRtKk3ZCxSW/QcyL8b82M40E136rnw+q/\nXac6dEMv4mO68JPAZk42/DZEkWu5/LFDRVBniyZyee+ofJQeTwcifwck+F6a\ndvD+8dGkEuNn5rMKiNgO5sQ92KElBPIZHXntV7XC9pU5IFofqKtBW+42hfaK\nxySN4yQqLqCuh2zBSumO1DfZgoyD9g1Y9fmr0ebb0dKL+VplntAHa0OGQ2Bl\n4PykZwdk+HNtQOZmvSXVGbKQEYNxgLfrOxsNwDMq73jaGz/v1/mSE6XHypCc\nZA/WbV5TTt5qn42+7ISj0vAWirJ2j5JZX6cF1wyiSuB6jDDL6DlKzh7+3/ol\nb9rk\r\n=5SMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/button":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/typography":"12.0.0-canary.88a33cd70.0","@material/icon-button":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.88a33cd70.0_1620691813611_0.2056298034723747","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/snackbar","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e4ad36d827cccdd8374dafd0f7a131cbd214d8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d20dc6dba.0.tgz","fileCount":40,"integrity":"sha512-B8t4Y5TXDIKVAU8rB2o3w7mgEdqa69KDx8m3kw2GW22i89vuvgOSZ1C58HxOPJNnHTKRb09h1cAewzmUGB5lAA==","signatures":[{"sig":"MEQCIA/UMNSEsEeWcnwwKOM2E5gXuXNRm2KFLjAY2pPcQv7rAiBRu8SrGqCywg/FzukDgXtgjI4ebkxQJJ+v1k/Jyr7+ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc8lCRA9TVsSAnZWagAA8EYP+wRyxLDYMNwYLkvF5KBD\n2t5laj5S7ffBIvQuVL4uZ9aGv7KqpGjXg7eOG0fwNnow6t2hV2h7cU5iFvou\ndkAqq0/zcDP94gHvBDbz8b9LFmRBcWWGsZThc3EFz2BQaLFPoANkZ191Ke0P\nQ7iUB+8MiB2XXdBk0qiajXUxctDQnvnU1C0e6tUqcDebZpSKKqxj/m20Gk7H\nNpSbpIynNGERMJbY8vFWaveMixE1Egk9nPz5lkcANNEUhc9eT0YzbkKPqsvE\nfZbn4onVmVZs/vfmavwPanh3j9yzpEl1knxfAuvNKNhxUTGlUtQvoQ+1SqI8\nUOBLSTh+LAzrDjBmD+ye4w0UxiVJZyRC4ldWks1fyYXJqkeiDHa6R5w+/mM1\nTrH3ygg5nfxRZwGeVg+N2LMvihtGUvnVeR9+NH8KF4bln8kapMcEJmjvFCL1\ngeZ53SxChhFIprHxveG0hGG4Om8cGxD0N9YaOojAzbvCZT3aac1Vtu9Xewof\nDPzNkFCTa8KIQPeoC8RK1Ln4pt/zUi76W9sXINcdL+QBGM4jzjKW3Ukiq2pO\nRtf3EZur1sTtt3uKhCthFIAT5D4rpbJ5UUH3Z5B7tC+7H5aGlEqtT54DMuTR\nqZW8sx5bqqU56qSNm5vmYr7UPzdPW0gYf/1KwJljvnOw1Vdn3dANOoVdEcNA\n7tMo\r\n=aG1J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/button":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/typography":"12.0.0-canary.d20dc6dba.0","@material/icon-button":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d20dc6dba.0_1620692773180_0.7313568566653192","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/snackbar","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"461dbb9958f03dd7cec8dd375d8a121e9c6c118b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":40,"integrity":"sha512-y3Txo+YjENDXfzkNtslMyMjBK9WeA9VwXKYBZ0WwRn806UEUATVfri+aq4Cm2i3sNN3M9c1xkPyU/HwHL4DnIw==","signatures":[{"sig":"MEQCIGBmNpZsrHXLFLGlCuf9Fjc2rbSRPyBPJPBCx/Lg6xhdAiBSaETPy7iRQ5p4lPzWyJipeGNE/bljWttoZ5Jhld+cTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdcTCRA9TVsSAnZWagAASJcP/2Pptr8iLyDB7rQ68K7G\nn4+v5YWY8YIAFJrmYneyiP+JhO7Yh2gTvXnPLqnCeSXb1N0rHOPuHxx8Ze4B\nT0djiIHdR1NCVUm985KY8D1SuXTWuEeTvrTsadfH2ythXZzNYEb90rNh24jT\nbtBRCTkaFOwPf0fH9X6U9xxj+Av6VuNj9fmK8Yu+7E7Fmo9OXTAGHkCH9ic8\njLZhlHNUBya5KoECHudPbO8o3awAUXElRday74cAn+Evd5LPpyhQ5mH61dpi\n+kO+qt3Ys6WQP35gEcU9oD402CR2r+uGtAHjCQ4+KWbCeh4u6KGilTS/PNyf\nWKHliio+REVH4+arjc+TYfSV+xLGkUh7a4nHvHXfbJ5lI6/NY8YQ/1M4osy7\ngYtTyAIzAyOVPwZzY6VT8C2DlxUPmwweeWIMCySucO4riWI7YGmBpdp8XSkz\nxIWFYNID8FLv/CfCLnK/7sgG2muKTYUxLrlMnG+RaF42VsrvNvTwxvO0jsvB\nbEfWo05rt8eIqLzi3oW84UxfutT2V5JUrRt/HIDYRrT7dtaUs9YGQzAJijki\nbJ79bv7XHfxkyMbyVaKQ9YvQk9+SbRxp9XjTDQSudfenj3+BSMyaNnKOak2o\n5u3rcnlkQ8HpDsWT7G7QNm5Uq5aUI0RgLz0AiErbrVXEmeKEvUVulklvTdEp\nb5hB\r\n=qDYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/button":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/typography":"12.0.0-canary.0ce2fdb02.0","@material/icon-button":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.0ce2fdb02.0_1620694802787_0.5184466297606982","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/snackbar","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"982868c3519bbe85740804bde8396be269a5eda5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.cb162da37.0.tgz","fileCount":40,"integrity":"sha512-djCEbd5ZA/FZgNr0OqiQmC9HMPayCvpP8Avm9g3tV6/2YCbApY3JQ5fQcKHOv0wbf/Hzsk/uzMvx79zy76I+nQ==","signatures":[{"sig":"MEYCIQC6Ri/eHYk6ncTh+Sdthep40ILjI8VJF92Wb0JqMrjA5wIhAPnkbDfWPkDyitM/QDSvCnvbkj0/sjGNGfAvEI0P4nfH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeUfCRA9TVsSAnZWagAAPOMP/2UI6Gyn/5dd3D9MgZOs\n+Li2ifLPe4/FVnjfwHmrhPR8byqKr4OKz7UklInyOzK66BnlxzxksY2vWDPW\nReCZOqAJxsN1JFpV9vYTy1x92CWy12ycKrZUvxjEIwi7s8rDMb1DTYi9lroF\nhiCi4DaDcmaM2AozNugzbuVG1xUgJKkkpcBndG0l0O63Ju+xNW3cGOZ+C6AM\niuLDhUg2jeIDmvR4mm4gVFSk+12vNDCMwUpCrfiyYiUAF6i0TNLaQo3xydJ+\na1BCnKCI4s/KLzHAy356w7I9VTr+4DMxLRRubaD8TqWFjpIWIM2DT+bvm6QW\neGun9VYSfVKGY50P1a7RsA+upO/7EoRV8cIRPC/QvnPJg1Mhp33IBSEwvesm\nWNLG/BS1Wbrk6B9VlBTuFxjKHoJSONWlyxs4XMXWaNhc+y3vQ5YCoAy/7K22\nS6R9v62WIqDyq/G90nJAY37U8zshYzUObZ94zvNijbsKlGX2BGCmKA8FKRUR\nlUXMRMpMMdnOMcj/lHjTWrwV89kbrF5FKt2TqlSQQWtkM/yLHpyZD9ZTi0C+\nBfoI3/d1F5T3mXbJ46e2OIGscIMpR5Gv/OAxffdz0LOEdijf8E97IF2xdLPd\nOO9UKHQc5JtKF9XuBdHOjTou9rOss0nE4+R20/zujy30BJUmCrGu0zSrKk6t\nkcHN\r\n=EgHB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/button":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/typography":"12.0.0-canary.cb162da37.0","@material/icon-button":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.cb162da37.0_1620698399186_0.6040288949868451","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/snackbar","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7b9748ce8ffd64e82f1a64259afd1f55b63883d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.573dc7ffd.0.tgz","fileCount":40,"integrity":"sha512-H+ESELDNIXlLF2T3bLP5osm300yXveTWx08UrQqeOXjxRgviyNKXDdzhKmsihiiClMpONBz7RwA0agt0AeC9NQ==","signatures":[{"sig":"MEUCIQDpA1Of19oVs5dX+8yYdXuNZ5Uds2EOAJ8nAHsPNPrmaAIgcEulgo5DhdQ0NuExrkbeTuC6MRpcTYr1tapyZIU69Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmemJCRA9TVsSAnZWagAAbqoP/2qZVKPk6ViS4WsvF+UL\nmKS/PG2l52VpSd98oE2jEG1n9HN91nkYkVae5r2pd/c7q87fobUGvsaJ0XAk\nkLxZykZwA0lNhnjBNgaCqediTnoEd059/apSSbzk7LD1uZI/SW7QZhzQR8U7\ng7AOK/X+bZ+UQXp1wVk6TIpVdVyLcQNuf3FA1PRK0pHYvD73nYYVxfTShPE7\nvhQGTS9svGv6Okbepxih7dvrIH3jJI6ecasUuDkJha6/HHD+No9L6LY8BtD7\nPlpLirOt9eGYxQBqwINZd4JD5t91NYNaikPCD6plPVkRV43z/7joeYa2eDRA\nMgM9aSBKE+4zhdeyrE5QjjESOowfeJ2WeoI50kMawoctfvanpYQI8fdLUNwT\nvHTGon56eaQELE1KL3JCp/A4XVK9aYAoLBwUEzMFeSNZyw1snZtdyfC2g8/o\nqu4J2vaAjMV1nOSrYdMCr9vvsv3oM43nGQ1dfbId4Kudr2kKUnzB2nEfvjvg\nmOF846U5SQyNmw8bYqqkSNAAIwlZGg61V6D45y36zAN7Mp8K/ArktWr3Z9MD\nAUYUfw+VIZuipEmLGVZhWlr9QAS5vgZI2GdIV8eXyPzalMfQ8OUHqm3kw3Rm\n1WJCLFBo91wRM0sOje6K0pzYyXCDygPbEOMCmAXWz/arKUqLbid+t2CQ37wN\nFn+y\r\n=vRXi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/button":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/typography":"12.0.0-canary.573dc7ffd.0","@material/icon-button":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.573dc7ffd.0_1620699529271_0.5880393282832237","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/snackbar","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e08173417e125bc5ac2b4f1e54824f58286292e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":40,"integrity":"sha512-lljngCHKSdDmnHhidDh3Al/vQsn5idkBsCW7bU4Hj+EvlILYWpxpESz1PuBLayi+rzxdKShTWoBIGKN6vPi2HQ==","signatures":[{"sig":"MEUCID8X+q3O7HwgmndxxU+YhbnSdIeq5Yu0MxYbixaa0tJJAiEAhQuVfVk56+DkWqjw7fMI+qvo4h0xFHwLOTMECDeFijg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxIICRA9TVsSAnZWagAATusP/AmuH+9m4iN96boR7ggy\npKTfYJVOwIetYmh5xoq+9+efu4CAax7WSbzUR3eiy8gG7olzWOzUo4l8ZF4f\nUIsaqbZWNTPverS7lLYps0wxF/YCa8XGxC0G+fOEGXC+i4l2KFv2YNZyrVJN\nGpD5Dj/XxTQeDXY1wHyslM5QLxupP+s2GHHFK2fCXnmn8R3MNGlLUVPGMwK8\nnBdjxDG81eROaoJ3s3piu6OulFArHwo68ZYa8zYIHUQlSlVs3X+Nsu8scAyM\ngWwl6Wt/ZVUNyXJFZu3NTlIevMcdESsU1E/IeUl+i4gimQ2e9++S2CfZNiPO\nIYSzdlFUAt61D4vJolJhvQ1kbiMAt+93ZXSJEUER9VyIPDVw80UMDfYkjAye\n8+0UBhausIRdsYITVnP95hrixPfv/0oD7E11YVp6HEjnMBOJoya0gC65zF9G\nayn5ZQ/cR5Jl9OHzbX0itk1GcOzJgrYiICAbML7+7BRl+AN40VHOAGpirxpv\nM75yfJ+D6bMevkvuHjAQPVpws7Deb8VFZ8mSWOoKJxz/lywTRFBEXFXNc+jP\ne1mBsbpThlU2QLDCxcABRCpU1uRzzOisdfkxQ88Oh8i6O9kavQJh3ltb9Bi9\nWtNaoSnjDwvWrERMDNok3PouEPIdgqM64YX0gd4BDrBT2kVl+IaeBh6/7QA5\nHuSW\r\n=PlLz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/button":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/typography":"12.0.0-canary.d5f6ad3fe.0","@material/icon-button":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d5f6ad3fe.0_1620775431402_0.6339689639538","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/snackbar","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee354ae3ae98b718fe4ca031445a0d52659ca4be","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.25751d2ed.0.tgz","fileCount":40,"integrity":"sha512-YUwrycxIfjOpC/foapiAujg0MAkGtaIBBI3RhlLXObd37qrqttiqWSUHy408ZqUpj9eBP1Ou3eOQSgzuYjVVeA==","signatures":[{"sig":"MEUCIQCX3egc4bZSnuaq9GW9qRfykqjDKduqex/A1RwcDDtaZAIgBbc/10IM4dHTV2sVjIsyewb8JE5kuZOWsJOcOSVkCYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnACCCRA9TVsSAnZWagAA97IP/2ArYGcpDunIVZhqvNda\nU+aAaLm0hQFetCsQQRtI07yepW5eENly0GHiGUPauknMKhyt3QiHGUq2oB7p\nTo30o1SQ+PGWEGD26Ph8WCOIyV/yElDhPIlU8CW4Oc8+qZkC29FA/mEMZMY+\nStTa35Zg9kcgK9Yso6nneGJZ906HzESXT+ZTH3hlxc1UIYx0SbHDt2NQ/OAe\nLo2F/pLvCKpEIVD0vaqvBUHys7Arar56qPvJdXDoE+stro4VByG3gB/VCf6J\nUFOFS3Lu4gLmn+6B2gAP60MAjQOOIgq2lp6s41sjyd7SzEIEi0OovrRERX59\nd3hE+eiVIOLq4hOh09jZZ8Szq1nxnZv4UTFTDYFDZdkW6L58OPyL+5dcC4zv\nqHQRUqG7NH/ATzdW4X606OgWhpyxHfZUQRdwH324qGrxmHQI06KL7nvMzud0\nKX6lSGKk03FIl/YVNHyN82UsHx9d/VjGSt5eCuWrAqq49r0exh7FPtI+3hqw\n0oukeYg/GP3C7M2vdQx64c7s/eteksvvA8gQARwmNxz/aIK6Ol/HK6tC3345\nSnjN9hI4RNe8/9rY5mCXQdD0CExfLs1I2S5kOJeMG1sggw20N8WZ0nvYDaBg\nh2QDOCNp0YjEKvL29XfBbqSgriXiTSDLKwONydQA2D+MeQlSpYRy+zVIaBKi\nQO5k\r\n=ap8q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/button":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/typography":"12.0.0-canary.25751d2ed.0","@material/icon-button":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.25751d2ed.0_1620836481767_0.8739631117321229","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/snackbar","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5579a94eeaeab747a98a8a797ba4683235272c8e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.a23ecb682.0.tgz","fileCount":40,"integrity":"sha512-Ltm7BSzS1PpM4usFIAX2+lnSH35+WQ1/kDkujkUT+oQN+n9LNPWYG6ACGX2f9/bGiRV/nEOKrqI6JLVblI7fRw==","signatures":[{"sig":"MEQCIAo9YzE0y7ipjeCwkJKRA2KGAmTKq1o55pu5HBCIVEv8AiBu0lit5gQW1qsahHuurGvOmijK4lT/gPnE64NX4fPw8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB1oCRA9TVsSAnZWagAAom0P/R7GD5VTdUIlnuey/4f9\nrWTpUUspZ5q4jTsdp8ARu9jERIJ7t5U2IykmYSDF+1nG8FBa94IvuCqjF4PY\nHRe4ZoXeeIHfGZZddTzaRGh3VacOxTXW3I2v+ryuYHqkliq/Thuul/mT+1Ur\nSM52pDWhIgKHsYyLgL8lZj9KX1hrp6nsPuRA4z1b5XJn+p2vqxf3jsRM/I8/\nqVMnfzAstQDbMiWD7OB0+PrC1tEu5mhZxndH64OwGrI+RarVOqc0wGmqmf9P\n93zEHSnDs8jLWaKGbGhi4Vgv5KaYMzPcAwDJTTLKqJleIumcehkRRpgt6R3s\nok7ALipNc0U+zJKrccZQGaY8hjmWq7IIArh/rbrfMLMg0+pqLxT8EKL9vcdS\nCUm4Wkw00qNtdMxtJxP2fKbMO+kXGBxhGpGY/dofEyYHUMVxPXstIP+1tGh7\nXjtYZXQo9Md2xZHfQFLpWpDRGmR/wCXYlLnruvk4NODEGGDa/3ma+92UJaux\nR6DZ6ipsB9RsvOmAXCWc5h29Lo3gZqQWzidUeH6pQzys75DRqDIq9+9cO1VJ\n9K1APKNeRKboxy+sp+/WQJmoVomrxj306Im6Q9Zbixn98iNs5AOAm+HyPfDy\nY3wECjGzabPCLpxJGwBozsH286oLHruRxXuKznoeQdhSj97zmaTzp1o5HPeS\n2y5R\r\n=fPTq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/button":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/typography":"12.0.0-canary.a23ecb682.0","@material/icon-button":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.a23ecb682.0_1620843880319_0.2556937949024014","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/snackbar","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc35797323450f67e616e2a6adf2af90532f193a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.33a954852.0.tgz","fileCount":40,"integrity":"sha512-a3tlw8HAzBExpoGZsh7UNj5DnxBm7CtHtncJPcPXRRRmDT7J/dcH8hH1cjpUdhfJ+yeOS+lXV54ADHAHfEyyCg==","signatures":[{"sig":"MEUCIFBVwVlOvY9g/RvLTt3qsePR7KBIe2/iAbseWyfY1njCAiEAjAgEmcNhkO34ok3o62AXkjSkmw9yjb2Wyu0qfS6Wwgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUEeCRA9TVsSAnZWagAAD68QAIpHoptY/rtM4fvruXjh\nxMAnpH81NmaD3VgWBPY9j5lvsxDvk8GXuhsfG+vOTE9xzoW9+L6sce0u1oWc\nSmAeIDYSTCM5nbGw7ROTFCMCOuW8CkkAFM5kpZlslozkFM9wZN0ffcR6Qbb+\n1DWr06Jxlmli69TXEA5X/RO55Shx48jMmc4cRspW7ebO/8PMGD1uyQ8efVsQ\n6qWuedCqOy15MUA53sMuzTuXxUt2YmsGAb819StUFUEAt6U1zeAF38UGR+dg\n0rT+wjsQOnPpzcM1TpK/+YxSVvurNkuMfY1FGbQTUNGWCzlv9k9H951sYIzG\nwi+ffC6dAjQMrswDfz8ZErk4kxypOs04XRaoyQzpnrGy46jeWHYX9E74wnCe\nmB+NyXc32r6em7GZZ6hiB0pJfcFbXnJvNAHMz1rlPLrg/d+PZPXIRuns74bZ\n3ou0zQvMUHfMz2Lvn6qe4Kg2C4+1oOEETLXH+0jjLhWFgqUhWEUfRNAFY5iJ\n6Ba+8KmB/vnx47jT+4PWNVEQIxZMIxAauZi/7lnxniqMdHb2vn3dlHZs2M8s\naTcqkat8Xru9YNsEMlNIG66oW/cFw+JMt+KjZ769VKbpKgwMYAWgMXXlbBqC\nH88Fnc8N/F8kazb9C49r4QeR9gGJyTRqlIw7LE/qDTX4715G2NfxfqlgR4RP\nVLdr\r\n=Zeid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/button":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/typography":"12.0.0-canary.33a954852.0","@material/icon-button":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.33a954852.0_1620918558444_0.7251342518058936","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/snackbar","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4382f1f07b7a73f412c9266d7e0122ce35d1b1a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.a4484849b.0.tgz","fileCount":40,"integrity":"sha512-XGRf04ZD863M0cPz0ElOaEmyzo/1xnqPxLjXD2HjZf9BGUAQqyk4Zu9YgSiL+eW4cPh2IpL++lfmOs2C3R28+g==","signatures":[{"sig":"MEUCIBD8ZhISP/Sw6+TnW1znLLJd4L2Tm1Ye8pPIOi4bw0GCAiEA5VhaMn/IXQtf0eKy2uezc3GszTfh1dAGOF+lGiWShqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUaLCRA9TVsSAnZWagAAzXkP/RF9GamCzxdJ/TAikgdK\nIMBbebzYb7Y3VRN5jKniy4ph1Lu0k2CzAm8+Bqk4zute1Cng+nc9SUTREjnG\nYjiccQOC31P0VjelgdT++BpMVO3pRnCwT3Fszy99K1G/i6i7CsdcB4DKMyZ0\nbzfuRk0rFN7pleuWH143FB41i1DFOkJinTGPd1ctCYeAsQkLSqL/ashAxVKC\nIxUkyhfGsBHXQ0VvKxgA6736inCYX7m3tEiAdQBwNt/uAE45PcW/PqeoeiTB\nJPSEt04XHBfB8lTPtPVpK5b3e4IFE5pToXQlH21O2LMjcUuD+zw2O5kf5598\ncG93oIClmFuK1yMRwuBtX/x2jlimQ9pSyOKsS2cjFZVbvMG/dPe4ymgz3HEn\n+bjFCGnvhIhA2n2DFlfjzZvY0dg7sEFa9bLNFoeh20g8HkCvShIlGaK30xzU\nv3yVgSoe0Rn3xWHI+fOXzee92rkP+LXVPiMSz7yLxJo8PLpJVqfXcvcl0EyL\n/rGUzqz0I8EzaSlTmILISOlNlZscjI1Ifq8zRsakWIZrq+kBYu7XmwVSFOIa\nfqJU4jZEh7GJa6I5stCCd/CAf5P8kxMrK/yJNEyv/dciN2ScZ4NDbUgzfX+S\n7wIcAVC3AqBvTgsxKHl/QbgbMajJUfs2LIE5djoE44guwpPdszimvi9xR/gC\nWYE6\r\n=n64y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/button":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/typography":"12.0.0-canary.a4484849b.0","@material/icon-button":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.a4484849b.0_1620919947138_0.8416056982143274","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/snackbar","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a6f5b12588de328541bc32592b621133a53297","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.b4c3f513e.0.tgz","fileCount":40,"integrity":"sha512-m2GKJgg7Yb9ESos1tOmAEbkYjiv9CzwlBKNYKz2wcsW1Gld90xKlEiKFNvEiRzNwAbs9/Vn822aRAd3veJLEug==","signatures":[{"sig":"MEQCIF9FJFlO9a+p/ut4LndCJ2mbgY98YUuK/1P6LCgRdu+1AiBwUCGA/QiRLE8rcSGU7XredtJ8kaqNEoXfvPqN0IL2ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU81CRA9TVsSAnZWagAA5EgP/Ak4CwLcPvaKLEd8C3AQ\n6he6CNv6qLJ33FdZwYj1Vfhu6w5QGsszSwZQOzGjn0auOo54DdlTYGHSlv8O\n3asfw8CiWHWuQkISFGzytdEcWv9kyjP9MrVucfsLBYw7aEIW/p4r4hnVGZ1G\nJYu7X8RyPLN1guDO0UbO/QxxF8kD41ZkFkbzTfXmpDLwNbmV+2ZDUzxTgML3\nrY/BpIat5a9VGEJNBidYS+DeRgbiyqEZ/2MKefjV2vAWpit6vngy/z77tDio\n4ztEsEHVy+/CqzKvg6PSzAxy6NAzMtRAceBAQVTACOWtHAZm4l6bHbHuJ7Aq\nmu0NxGZBtsk5QTpGx9W1YJkfXfuZueRO93+98/v1fJc8trDYG0hreYgJxkQV\nCFBL7VyE+/P2Jfsg/zgN2tmKeE4zqOkH1JLeNTWXSDiVQU/yvdsBJzKl4a55\nLQjJnUCeFJDaAIrTvmRDO6WmORB0eLoax4Q4CzH8MsXUnawp+UnprEydFJ09\nAtrIfEOJ1LwIs1d6X+qhdy2LjN8NKyDh2P2H6GU6hlfDf/raRFkWWjeDnCbc\nUxr9+0w7OazHC1WdwHtwOqcmnaEz8ldXouv8nBtRe4DmSPVo34D9y2+ALWiT\nw/h4QiRY1YHvbYleVNWOf/ChfGBsEBw9FIpZLT9vHH11xMtf7XRY/+zaAR5o\nKOG6\r\n=o2sA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/button":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/typography":"12.0.0-canary.b4c3f513e.0","@material/icon-button":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.b4c3f513e.0_1620922165093_0.4705993382521507","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/snackbar","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c62269a4e2485de8736a36525a0aa7bbf79db4c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.1a8d06483.0.tgz","fileCount":40,"integrity":"sha512-sJNaAsWIXegcydYfjgQjZVi5rHQm9e2eXKE1wfxKoCgJut0Ze4UcRwePjafB2hfrq8q1ZTIs8fMnVv0991L/ig==","signatures":[{"sig":"MEQCIDw7+Rjn7rfqGofUYFO1Oio9eBjF0gGRsGJ/POlcdjD2AiB3xIt+OFQ+OoahYXx0b0Dc6cxVf+Npn4vcW/YZRvyKHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVCLCRA9TVsSAnZWagAALhkP/0WEhtGQiL4oacErcC7a\ny5iRd6+26IfuUJpVyoNojw+chIq0N7OLgVJVEqo4yguk3UOYFOL3oPYcIVY3\nkhmGtr5EXyUF1LJK1Kb6ihLLdGtwl/DwUxBxsxIfXmnkxrzqIcZ7Hy95d+gB\nyPwqrwlX4Ig+YB6K2Q5wW0Dd5SKanyT0heWpoIKv9CwudSGD+s3vjs/V0LYE\nZZwdFC8AnYzrMSm4F9+qRePLjejYOaCckBMGM4uISFL1rh02fsRPuvy+JuBM\nF7EZGsPkYz5M1++K0NXZpXLN0oroCRPDhrV5y2Jnsew6SEV2ey9RX/TJIzAD\n7XRKpwW77t8e5s9SSeeTjqlGbftB3n85nvjktlHcrrnv/ssmUZqkU87L0l5O\n/bncHDy6Ejz2TufSjCC5sEbmq1hgFmzrYBirf2Gabz/MXYbFdsHk1AhxTWJ1\nnGdZb2SdhtiegI4kMXOdqYS1QB7uSACBqQE9K7O/sDTIWvLR0uDe7K6hgcVC\ngEJ4brWoHGBr0OFdiWX0kMRAxmy3AQlpftLqz2MyzRVKLnS824XBSYbjAxUG\n3oJPsU1b/4dO4lVGpmOa6eWhGlcwVFGGMW10LiyhDvTkK6ib06sws8v4qCs0\nBSd/e3u3I3g2BfpgeZ3+2Lyp6nktbWyhSQPGPEkiaxE1rq+xQxRywnSAk4iv\nD/i7\r\n=8NGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/button":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/typography":"12.0.0-canary.1a8d06483.0","@material/icon-button":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.1a8d06483.0_1620922506682_0.5019512923109724","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/snackbar","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db3516c240c722e1702ebfa47bafc1a8f6e3956","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8e6081836.0.tgz","fileCount":40,"integrity":"sha512-iJwTTXdIMjeejQCGpms9P50llBnN5KnG9/LS0GYDUrXcS2xqGaUlPEqWP0EQflcYcwK7Xw7yT6NxL+QlKrGRtQ==","signatures":[{"sig":"MEQCIBeAg23SpBcrGrK1nuhPfsnnSYq3VsGjaMyMNMC01bLPAiA1X8UjWcCX1u1jemBh3m+yK0n0SxiiwLOZNXLlHLhw7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6nCRA9TVsSAnZWagAAgOAP/j/8nOZdmLtOqH51EtPH\n2trLEDTk0LA5oBjGnDX022Nfc8CaNsBtq6keVhvK00Zxi3rp7VfIJ6VNtZul\nxstyhEfm2Gp96EGM1/EqGUUg+4T6tO1ZJkaMF6Rejr8seUPNT7gd0xCvTxwz\nrogSWkCGZpX39odcPi87yRCdjHDncJzlMLnoOyBfOw/Rxzm6gPg7giMlcPaS\ncThD/yk6Ej1OyU20IlLCdW7/5BYY6l84THCzH0NqKxbfJQ382lMxB5fq719O\n+0Mrhu7dZEm8jTdO7yleY7dedfwTAF/I1zwO49yJ77YyjyRhrajidlbGlSa8\nkfqs+voOU/quGvG/kx+OKkJ2z9dorR6L6Ak8juHlmRQPmdrGJ1ddTBZ7O7bO\niBgYu3FnzTD9sH26NYYmp51ffRCnj2JcrlsY3m8rgrJ383VLe3lmXU3CxMj4\nD6bMed9hnsieD4cjQ6ZNLaZbWtOWQGHCmdiB2gzW4vUs7kFg/pmj9waVJm5h\nFGHHsxOry48ItgV5ADzMvbCzhoDeLzcCIy2Zq5KcNfuOpqbdS9iW6MO6hZGq\n2/9KAGSxAhAEfCxWcHzKl/S96mMqi3NrHLYw3Jv16OVw1ODn6gjPuDrlrvjQ\nJZg1rYxuaf2aOFtCbPVVrM5Zm1KEY/8fUGgP1mlZa/+7DTXQwJ9Pa7ZRCdDl\nKtPM\r\n=iadL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/button":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/typography":"12.0.0-canary.8e6081836.0","@material/icon-button":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8e6081836.0_1621028518866_0.5299779010136709","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/snackbar","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1171a9089cd2002193a81477a6c7917b5bf31a15","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":40,"integrity":"sha512-qo16HSzGWNxuUwLjmgxvdRtgoO0sk21quTWCn9/WRI2S2zazcYmZM7kDjaa6kaG8Z/G8vqXrM9xGldyM1ErHyw==","signatures":[{"sig":"MEYCIQCAALbsYLx5BUDDLsEBQt18472XSXrOQlGuNdn+QKV3CAIhAKWM5S4PPJEY26g1tyByRhqS0//wfLWgZNOZwaEhN9oc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvHBCRA9TVsSAnZWagAAKMYQAJu/ONAN4KXDkgNumzc2\n/vO63XD3KwIRqvX/uYFEr9X9dntMJUoLLneS4ef7nLaKgYg994STA/NWoxh7\n6aX1nraZS+4+pg4YuwiNjxWHS2SIJvDp5pNPVABitbhnGm4rlGAnPMFJBjFw\nWcmu82/kqq1iKUxNmbantCaMeVAf3otygpcHoSP31jd4mPm3QFPgTa0aoNZD\nIhUZ9eD5/DAY3b/XEd9piGfpzNblAHWrDISspE8mzsqOMhg5CbowZdPKG4A7\nrHtotMr0uWLN5yeBMHmIzAhXd1FLw4Y0/VVaOgUamc1etAbh9C0+KA2vxlUL\nmO1ZidAsIvsTDC1IlOmE/4g+V4V3wAMIaJsZSTUcaMuKfbqoyF5fmRTRvOFL\nRuBjFFIueRclmZo6QU87a6ynQ4YyNBeR0vRIhkzIHS9JSivv1xrJlobSv/E+\nr8gnbvayNG0Zjud3XvV83uQ5s6bpQ5XaetOJe6vq31+qyuR9ARixF8EyWvwo\n7zKMaDnRaTt2djfvUxd7IV9SZ9N51i+YXL+lfIDTa/3FXawI3jcgmHG7TZK6\n/vfzX8iw/BRLeAiHhEf9ME4NFj5ayZ2Y6bEf2RN/0WR8BS1EQUmYnA/204Nd\n2eNuNOUftuUV6bLoNIuTQNyegq2RVKjhnfTcVQfWVeL/GD5d7eRhrjWyCWvN\nTGvo\r\n=OMXJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/button":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/typography":"12.0.0-canary.a2b0f4cee.0","@material/icon-button":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.a2b0f4cee.0_1621029313377_0.0738548004500712","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/snackbar","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b001a27055fa1c011801f63030f4770e4bdf4f3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.e8e39ad19.0.tgz","fileCount":40,"integrity":"sha512-LTDzWpc6BfIgJielXpCy8eb3VN7ZmOJAhZHHSVcazsRdzpI1RgRKH69bQMhxny+oguACWFKAml8TPO3gkwTdFA==","signatures":[{"sig":"MEYCIQCZu3gIsIPTP0E/u/BkUjqBNTXbGsHtIs/qsrUwx5lCYwIhAMXXkLJ3VehrtYkdOOU+5IHXPy4mIKwxD7JXZ7ZmU/Sd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAmCRA9TVsSAnZWagAAWmwP/R46fM5zUxKAQ3zGLoL0\nVsIQCHwoeEOROKzCD9o0WKoIhezcylc6YwdGb04SYBpzTpqbS11ZCrCCXWrP\nwYeHZCTwaX0N4uMtZHzjXx9atHIvYGNz8HWc2fyIpzhV24C+DymkH3HIPmWI\nqIROzC3uZtzUl4gOXYeHIcogsiyNQKESUX1I1/+D3pAG0WRwWqDU2+qZJibw\nN4SXq3Kvxlf0u/TCyy3L2xa1Ru/1RYEpfmErArAUXVVug7LjzEF9xqUSvfqK\nut4Yz/6tNrqxWS3ZWsHC73A7DUXjslLkXjPNDQ6hvd3HxhEfr6tubCTwmTGP\nWW/rUJKGkmp+7rTQ5xbn1j7QkoV8s06DIIT5C8qcAAxYaLrPojEF1C5j3+/u\nQZ55ODm86cZb5ndUPSTLoeSbT8pjdMMrBUImdgX2oFLd3M/+Qfk9EGq2eVLJ\n+lf53j3FvyUYZswcmL0mDKN+YSHsZFMxI0lEg9rLasP3E3HEM0mb0Xj98yd0\nMm2xl+zY4AwJ9BUbXw0X+foog2EYSFKZIFp0HNKw5knRx8QloLyv7JkJuzKm\nWp83oBpsdiCQaxCfCK7oAdPUn4o+ROOK5Y7WfKt5zsFVJra0g65oNc6SfJma\nfWqk/ag6vq1bhpb16JfZDBsfTyQy0kbrRVUEo0f/qVFsr3Cdf5E02Y8vEaJg\noqeO\r\n=jTTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/button":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/typography":"12.0.0-canary.e8e39ad19.0","@material/icon-button":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.e8e39ad19.0_1621368869624_0.3670080017777688","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/snackbar","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afb4fb001a9ab2ddde593c2c77fe39c8939adabc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":40,"integrity":"sha512-fkq0YVi9sHgljnNrQJDUuBxcL/jup1KodJG9X0WZCnbqcSvsWWse+McoLZG38Xxush8DuXQlAh9Ba/WMFczBGQ==","signatures":[{"sig":"MEUCIDVkptuVtfXmj3HmvFaK4jhD1Ap7z0ym9l8sQbLrx9fYAiEAvzWsxKxUPBICKIZ2XZaZZisFNwUibBEzH07/fx4YM9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7nCRA9TVsSAnZWagAAs7oP/13oLckCCxBqkyF1K/Lp\nxXBrp1NCL1KRkqJvxXbLfnBmXp5ym+CQCmB+7usVZ84iZ3dNHcdXyjUzQmkb\nMflwSN2WTqnsU31/jbm4J/qfxD35wsMtG7eruvBvn+Ih7HIkT3xkEVxM21hn\nkFZa6mgTuV6pQYBHwvobhpDIM4aFwnW5SkSNHnsg/af/9PstSCIn0u5is80C\nAcY0Qk+Yvma+nNhJjpFXEUnE7/2CF3MyY/Loz2niy6i5+tkkZuT5ZS384Izf\nnw1T63NiNHFSnQGjqPp2o6eOLRaNo3nCVJRZiQuFDzXhkASm6g/VE8hrBsYS\niZQMUzMXY75uIOZO+snraQvmbVpoR9BGRSFp//BZFIuR/fhz5LB4XCyj/Nx3\nl58FMMAIBpiIxiiDxqa36lT4qYmugJaimBTWNrmSV9V2+HcODpBJnIr9rFNb\nIYP6hgqzZhyuxJLA/SfwXAVmzvvHzWt6BFfGpgZ7hmXlaPdymEzPf2nBDX+W\nt2HaSQU+6bRWL9du/+GAot2QHwdagP6DL+NJSnZfoN1/o1hbOXiGmABbazu1\nbOa6b+zoMRfkxSKQIOdbAw31YewUtPkAaaVTsg6j10XK93vztmwFYY8dN4yt\n0jb5LZl6lGM8RY0rvc+00kGlbuKrZHSx1M/o/9DwyGvvWwHacc6IFyucm+4D\nyi4g\r\n=7JyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/button":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/typography":"12.0.0-canary.4bb5eea2b.0","@material/icon-button":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.4bb5eea2b.0_1621438182621_0.45133696853696237","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/snackbar","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c6646e754f29e3aeaf5e888dbf6d1babda99e0e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ccce99cd6.0.tgz","fileCount":40,"integrity":"sha512-ccv/bBaqBbdikfJg5Q1dm43YihUlwy0BcfJgysjy6itc2XRk5WB+R7Slq2udqY1OXBtCInFlBbOfybXg/pLvtg==","signatures":[{"sig":"MEYCIQCUWao4EjqLbXcCE7GUdz5Kop7odLHnHo+xHP0SokeiPQIhAM9CNpeQymlOcs7cLvIIwjUdOC6c6opr2hc6RASLVCUh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQhCRA9TVsSAnZWagAAfVsQAJFQIdSNol8F/nNnWJS4\nGLuYwV1b/yTaXHC3+040/nBfDNkDI8iIa374LOHZpwmjCEsbXmSQG9RAqJUi\nOWvBrAVFDGodABOOd0ou4O6ZD32yNVhRY8RQgECSGurhyC22OxNEfXA8kx1q\nbWDLh1WsvzQN05Ji+SWf5X7NP5cxF4PCuB5vBhmmYSxtCViLwZG1UvktqUp7\njlljd2yP16FxGskQROubTdE3+2aZ2V6NSrQPlDm+fQ8mbU2aPKh+LEj5ndF+\nuv1hGcCeuq1q9bt038rWWDc7bvPMNfe2Wq1fU3y/ifG/O6pK+B7v5rjxw8M0\nx1DSAKAxV1IwegVBl9xkGSFzwuBJrY4xzV+Y2UaNd0GdWewryiJPBhFgRpfp\n0TPivtx+1TQgQUeTWGIPgqOXgyOidb3FPAoeWQEySp6u86Ban7zInpYdAYuF\n8NWRFs5AhSvUoHRMVw3R7JDJ1w1oJKz95X1o9Y4KTmkJf/YbIesWAY+nCRkz\n7hQnh1TjtOb6lK1L3NvNo4F0ZDx7pmoprYGfCJ1j1txjM/SYEq3XArH9adHm\ns4nZx0hQir9zH5OtsGhZ1SGHIAdXMJV0kpQ5pnlHBxTGxl4BfgBlk7iTRg/+\nYV702Bp9jskdH074ORpljpb/yHGaVXGQ7FM4ybjR5fV9Jtlm27VW9IeiNboz\nTZfg\r\n=b+dv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/button":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/typography":"12.0.0-canary.ccce99cd6.0","@material/icon-button":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ccce99cd6.0_1621472288548_0.5809931395756951","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/snackbar","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cada8554c13962022a0e66a71048837009592dda","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.14767a8db.0.tgz","fileCount":40,"integrity":"sha512-C4hPZaud4cKFMs1wdOVcdkSFitvgfo+ut3nfEnjZmKbVcV/UCfejlfcwf4ksu5r2N1hZhmBcRknAJEsPiuuNkQ==","signatures":[{"sig":"MEQCIFQVqRodnjCjcjrmvsUPNvKHGY4jGImTMncuFHqdzSKzAiBTWdGO/FhfUJz4ratZm20YJoyg1kS8ohefhQj5pZV3Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpswMCRA9TVsSAnZWagAA+8AP/09zG4Pc4B0gHdkmyAMN\niHU8eTiH+nEt25VOHh60B4bAQSVt4tOlwUCz0szyJkpp4NYqlaKQRC8wkrDZ\nrJLbd/h69CYWX3ng3fmP6yDQBa2ymxAn1csJCegY+u9sqIwuHr8bnlpmGHyS\nst8n8Z94r1PklR138nZj84fZNCVl7Q4XuiZ5v79evUfP+hH3vgIDISSwSpyT\nj8wHyNXK9bjScJSke+gDe7l89BlSisvQlOxOiI2pk52cw2TEjI5Qyl+7Jf4h\nGhQDe/6G7oE2MREJ/rqh+qzYXCH6eUyeWlK8fz4AdYPnyTZgOrq0MikC7okF\nFdz2a72EZ+MpZqp37XKQqzq7arwKvURMWtVIRs3+ggtp7+wlYJXjjS9un8i6\nQOKnZcfkicDCa+empv7rluUlHxt0b+PS1J3gjOK2Hvv3osyyCH+TG6aR0oUK\nV2aKzarTjhB1FfkpCB2FbPq27QrtrFpWET3uKc14GGAHIq2MIsmqgiTWM1k9\nLekqbDmkhAJzqhsHRdZWa53yEN3gpMtgVzAXoUSfqtpyc0KBRr0Rooz54ZF7\n8cwVsGDFNlPDqt5gqsfKg9EIPZnl0umUFUaDBqL42o7JOMbqcFVEWKaAq6NL\nwKubqY1zHFfipIzTZFl1Mc+46cPusVSWlAZMh2WRg1RfiTdufORH9CJ7zNqK\n24tR\r\n=zoKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/button":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/typography":"12.0.0-canary.14767a8db.0","@material/icon-button":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.14767a8db.0_1621543948047_0.11762537208931323","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/snackbar","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"327afacbdb3e0cb6b515daa70ae9acfea931a456","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.22c6dcff9.0.tgz","fileCount":40,"integrity":"sha512-T82tscaTlMah3ihFW4diYd4ElmpQYd2eHADwrEv1xlSFhu/ZzxRXvSYF4wgRV+9JY/E18fHFQ7InbR83gcU3Kg==","signatures":[{"sig":"MEQCIFWKvv6rR2VE4tbF4QYO9b89QVaSCWhGiV/s4/kd/J9rAiBHPfu4b/1ZOrRzvmnUtirlv8bQOuBI2r5ZuqHqRiO3aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8QjCRA9TVsSAnZWagAAnW0P/21HnJvo4biVE6iXQ/Gp\nG794Mq0JLArAsjly/WsGarkApP3TmFrIWjsA4iQokhTI3UY2BTV9wllTfQ8v\ntG63uiImpmW7cZym0PU8lZCrJgOnZMCtX3SJHbaBnfXQ9sm9DiaguTr0WvUf\naz2GiUTG0BG12v4sxOIonDY/yvEKKkW3vMnqlgf8Q841RcxUm7XiQGlqJC+z\n6y4a8XqhM5Ya/pHgFi2qETfPBAWcDDDUGVpUfVEL4FjuNpBpXPMyOX/58vty\nlnhu0kT3MGyPPT7qywJrMhi/3hWzup7Ol5L9UOFWoJZOB3KliH4vKrGHIm5v\nC/c/KYRJFZctAgOPsFTegDSx4fCGJByuzylVwUTIiVMCcXo/yPJPVpcQbal7\n5RPea0E8xrFfszdWkV5aZGmYWyat48akCM06GM7gpJU3UV0MeIZp5poXnS/x\nSr4gbO3IFxB6nSjb7fcgk5aJN6c6weQwAqswhfVy5fLd1npGi2DIV++ugu8y\nTFKUgyvl4D+wIMWumTSQGMzW+qNa2L2Cv3S7gtMOkVAEQtcWRbBPGRwu8GYo\nLD61M6HSH4al280BTy/M9OvJIqpt/R6qj+ODiHQO9nE4uw0dRPMsT1p+k+s+\n54leNX/JlSQefaH34KzbhdNvJJ79MTMQOfF/nZ6TFaaPvX9M0EHS8438Z3ro\ntxme\r\n=O/mm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/button":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/typography":"12.0.0-canary.22c6dcff9.0","@material/icon-button":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.22c6dcff9.0_1621869602185_0.11883617889623621","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/snackbar","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82fc3d8c3ebe1e7ecfd99592c8d94d9fceff05cd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.fadab3372.0.tgz","fileCount":40,"integrity":"sha512-3dcosMUVnKXm/nmSyo7nTTtqhJXkJOm3+9ao76yjqs9gmpsYTNrAV1e7wh0tGD+FxW+5FFCPuxYlugDXvgN6Aw==","signatures":[{"sig":"MEUCICUyjGS6RjQUsmk+DJ6doF594UJh4LlOODbLdC+V2TtNAiEA1ugIYAbNcoz4gSJ5WxrQjvd9WyXj1XnLC7BunhR5Emo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88xCRA9TVsSAnZWagAA74MP/RU8J3r1fcPyLhajC+yE\nxNsC17fm9okWhM+F4LPvw9W5KnJPClkxmGf2bJhuK0BSsAYy6lpbBNoVucmn\nUCJ6nG0yRf5wVENp65nQ9GKKEvNOFsesqLvzLvLy1tnzzgP5i9SgPpXaeFis\nBku+qPDrP7qX3E064Fy8NqU9yHEVT/HmFu6RJsATKRDi7HUZH3g2At1cXTut\n31OV5yzI/1VyIE8lga05mmLgRvP5HrpMuGHQwej0bU3SlH4lV9YjQxUU6VeM\nVEWM0AGEfvJFELrgDJdsxx2rReLOXtuxmF4zzfuUffoqwR3bvaWBTGSMEKKE\nUgjhRwFSTgkuJqjWgO78EGwdKC5rymfKq9N8nXYIDSDM7Kf3ztQxBd+ZcGeA\nZw3G2s5++YBNc9LTBQ6fiOKufYFhxVrc9JqniiaxxRKQ38rEfFbs6qUCeOMq\ni1FY8zGgEvlMhrlyS5APD7XoE/vklTGSrjNnIHsqR5bZTDWlW3rXvoU9M5Bf\njzQZ0xxgGSirVRWwExbWo/36pY2ywrpiB1vAAC0NynhGv4HBoWlIpXz369Im\nik3bVlqiUUdtMPbjITnR1tnmnKX/tWjSQb9tFlJsS0lWpFhqjhHhWKuFRqmd\n3W+ONLfA9XSqbBUoJIZTTARx1jmrFJ0viT/GmwDAW2PGi5p0evqp4amKrCw9\nK36d\r\n=4PqJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/button":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/typography":"12.0.0-canary.fadab3372.0","@material/icon-button":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.fadab3372.0_1621872432868_0.3561536305649158","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/snackbar","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac03da72db3bb43581582affce2df98fe936958","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.caa73aeee.0.tgz","fileCount":40,"integrity":"sha512-lG4L4jIshtUluRMfmg5t6v0wI8drm9ZDX10moS72fbVtKbXSXCZU5JLiXLDkGGrAF/Invrg6Mog6JZGcJIknsw==","signatures":[{"sig":"MEYCIQCZSprfw42Dr88h0kMWVOhNd4J36G2xz87DKwkOuo2hiwIhALz2Vwts3dA75kPNwzKQ+amul/mSE+g8yRqHv0fiypnq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQaSCRA9TVsSAnZWagAAh7EP/R+bDgfQZsQ++3Co+hak\nCk4GLEAAIohnDXnVnVWYuewhK+OQIPi0uLMW/yKVRg0Jtej+aDsI/P/NxJKf\nTOqiVf9AMrYw6i2/WvLr/8f1hRJTMM0Ror+cIoy7ez2fiPqN5E0L/O9zvOsh\niG2LtnN5rqKjJPfWj3pZlwt+W64bIfI2C35gawYhyoG6fikxFskDb1n6YfIk\nJbXKnhWSTAT8ben2GLta24tzd9ySyoqtUlMEZ7mXk5hKqEKDc0dO8l9CtCoE\nuE1COEtwf/7m+rLBBCxnBRNJwle/uYOjsYY7VyFJoM829wk5Lwe768Z852nr\ni97eCnhImz/uq7Dtq7XI5dcYbqnMVbO+Ahf/gOEyMPMdoGbLYR54pDclkYiV\nkADFCXF57aoQ3F9091BVp6qsbDxd/XxrP3rTy1WXpRU4pwLg2F+JttgSgg/Z\nKt5rA/xQmA/6IIn1mhHcDvyB/xgxH1KkikNfbrgMv6yn0A8DdEbF+a3Rakoh\nsKgRoEIyI9Cr6MHe8dYL4PHCHetNcIto3tAmvq9r8VKZBWc2JUUTboK7lvo8\n0OI2ScNPQSGHNiQ+rg7zNFnmryZAuuGSonypr5lk2rtVszIi4DWLyYMASU16\n9bFj36HxzKLyPY/N3HD47/GZ5fcYisPsFFvv+AxG3NP+z4mzz+ZdCNFVkuM8\nEnLw\r\n=E2Qr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/button":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/typography":"12.0.0-canary.caa73aeee.0","@material/icon-button":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.caa73aeee.0_1621952146529_0.7970109268802605","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/snackbar","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be643c0c1a5efa36ca1369b03e6476254378d548","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":40,"integrity":"sha512-o7QsTN4wg2hCp4jMKujIS3WGA8QzOO7+EAm44PUWvjVkJd7EIAcz8e48D19Hbvf3T1MD8mpVVdlpfC8L9+tEHQ==","signatures":[{"sig":"MEUCIQD8mipzeOzGX97tRsSFbihcR892Q/b73EzP8gBZ9urZhgIgGEfAgrq4K2B1TDfljRm4Ke0mjkbVKjRuO7Ym/MMuDNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":435231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/hCRA9TVsSAnZWagAA4dMP/11JDB+KADdEA+M0DFpC\n0aBRcywRaKl6dghQcApy6ekjm+tCwSTSwxgvykdf2bWjFreUjHnZFxC1mlhK\nDJheLCX9o6fF9d+uc/sfdPdWbDmA3fE51jOYyiXctA07CGV/zcIWxTefwgDi\nNXYTqe3RxXf4VR+YeR3ik71T4lEeD9pAjVwXnlPaB6d03LGfBWf8oc6gNuwa\n9pp2dUjtxcBcvwzbL6WBd3qAJ/GcCFNafttD9w7yl/AvBx7AIqL1DSsp+5Ty\n/VDmLaGj2FsgYv6s12ygMoelZORwbC5ManC8qGjIs7K+2+3hy4u5mS/DXK/D\nfcGVlxCteALYjCi+nNIZ72AT27dI1Md/xAOhTpIavXVfH0+jF6QvNseMieWr\nsr2QlYelg97YmOTQy3zQoZWtSVOyreRqQLiDXB1P/Yu+4UUPXl573xa56biH\n0rE0gbRxKS4BHMZc+/GMgQyg+NmEKrJ9dO0ckApaepCBENz1Bvs/CRKec1Lo\nLJWOBDj25E2zIvAJbqm6ORSgR0m7Ah+Hdu0UkyEbhEHNbwplHUOjnXyfz09A\nKmZmXeOcH5N5FQp1ihor+gzxGsOQqZ00LcF1NEbgYtaVG83kldY0mz4j/VAh\noROzcLHJ/6eyMRKmTowjeYH4ej/kCMsoCdDXfDROs/QXs6khmRtMa7Wr49qt\nUts4\r\n=+lK9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/button":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/typography":"12.0.0-canary.ec31ae1ed.0","@material/icon-button":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ec31ae1ed.0_1621975009343_0.4194432208753016","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/snackbar","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"457779e380c040adf05ab5369d679af37500a7dd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8530d3514.0.tgz","fileCount":40,"integrity":"sha512-GOUs3FLM0L8RU7Phy+zfH9oRph9oqyBImq6swB6mnFj8LBuDm9J+WLmTCJSr0tyfnkYgDPJiiSWYjtLZeHNICQ==","signatures":[{"sig":"MEQCIHzbqIdoR2ydVX03se+75SMT+zYzUNBe9Hf1UaIVgECPAiBpQq9ZrfmzqUeL3t5do4oSgU/94dNwRFwJ9p5RWPNj7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8N2CRA9TVsSAnZWagAABuQP/2DdPSotjHRhB+lT/1wB\n633rrlP44jqGcL/wMZ3ULkmPmEzdAX4HQIIrqOwlgpBuT7r/7gNin6E3kS2f\n4tjPtm3AXumAQIHO6o9rLj+AfNtJiQ2K8e6Hvx+RuMst63jr1/O6kbRSuLVF\nkaIbjtFZeQbZlxDbaWd9wDoaOhEIl7dOnvr81NdjYV4i5W9GCp6dTjO6F8/9\nJIA3mtvOThioCzud1qj1J2ESO5Tqb6jM9asLpOM1iZte0bNArT7xk90Y9jzi\nk/bu1gHRNHFl9M1lcYtSK55kcUgD1cBeDbYuZmHzpxrl8SsNDhs7gDKevpJG\nNu3u3r08/ODCqF2pnmdf9VCzaux7rEYna2tQIiYaa3biWzi3BPCKjhH4C465\ni5+WIWOX8l1qfxUgBK9glfkf6uDzmrD5BV7ANPucCJDtdLBWRsiaZZJsQKTJ\nh32aLz4BbPO7WrApd0rVYqoyejqyErvQb4nge0tlqG8iiodgVXgbnwjTlzW1\nXL21jSotQnOqR5rorRxle1ysgPrdV1GGIW2Hpsn6J+RyAKaHzXNV0+e/P0/8\n3m2TgoQ/exnz4SypEFF70qzmTkdX4iQdxlItuE+ds52X3nZ+LaCz5yviEEOy\nf1R//iaT+ye332kAdMCsF7vhi95FxIOjQK3ACLVcqFKeer93Zki4L8xUX9s6\nYLkP\r\n=IQtg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/button":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/typography":"12.0.0-canary.8530d3514.0","@material/icon-button":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8530d3514.0_1622131573675_0.05786789737687026","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/snackbar","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cecbf9527243f7ea48cb3db2786d1e1b78f7129","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.00b5899dc.0.tgz","fileCount":40,"integrity":"sha512-Kpx5Oluq1uWc6IaHlEP4hU91WctLN5uakUyXZACoXOyX1pN7jQlZJG1V7T3O3DlmpczgDCC2AOiSjHYdZwkG+w==","signatures":[{"sig":"MEQCIGyzat1XU4AcHLKpcv3/3P+5LiXNG3GHUoYQ48PHcwt6AiA5GywRXyKRmcYj0QwGzKRcS0JJeCQLzxIYa6/4HI411A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjhCRA9TVsSAnZWagAAujgQAJ41zfBbHAM7FqeA7C5f\nWNNkMbm+jqZWQNBI71Ftp6QkOsTWpciya1c123VnaJpr19SwQGr1+pLzkjf/\nQZhe7O8cC8/gnFDRRA9+o4Mi6Z4bObHRgWjRlM/W2Rf1l/2z2BcC8DL9C6Lt\n9YZr5K0n3yvancxBokEdromtsBePKPVLEgYyZ5x1CfCbpxE+7+PKRFy5Cll+\ntMJwCjTZZhxRFaE9XEeuqtEUZjsR+fG/lrOI1WMhkxj+59JfJP/sU6/DwSQw\nX8mO0hWgvUb3NhtBrebiiZqPsW6d/A9qir7YmPMd4Q7eXfrlpCw/F/POFFc3\nERNeqLG8FZcNI6zvjwdpCkv1RJAysPcoLOYWwxqr5gLSt1IDijfIBHI4yr+s\n0ZNY/kVOwOpuu0biPFGzllnviGSiG9F5+D6/C61Vxl5ozltM/GWiPgikjdGq\nDTQKbguUv6h8hIT3Zt2xh4OacoKPmJ3O7QtW4RpgtFji5fFbqzBe7SeZBgn9\nBDe9El/eC8uMI1sVx7MQF9iKSX82DAE+QpTQHsuE3IbHxsCVTr/N8/ONCKcN\nTUlLpao7ILjZgANWTCesaxttE1crzQFXnRVhapGRf4lPKN5Dnq1wsXwTP2wK\n5cMp+KLtHuKnnsiPzNbZDukVVYGZ3puF7C/BgXmTBlzx0vqn/AMlZoaryqLo\nWl/D\r\n=Y7vM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/button":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/typography":"12.0.0-canary.00b5899dc.0","@material/icon-button":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.00b5899dc.0_1622587616803_0.19499078381665247","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/snackbar","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7f6704ddc44dae427a7a6be43c9ba1dbb294a47","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.f1525ea3e.0.tgz","fileCount":40,"integrity":"sha512-f4UKX6s3IxvxCnVmVbybz9G/prEv8KdVoOxsjjS2Rplhc6G496FJvY3jASMNBbPUvnAUuB4J0VHcsJxy4izTsA==","signatures":[{"sig":"MEUCIQD68jeK0rUsALgyusQH8y+LmvtEamFJ1bizeOZWknZzGgIgb2G4d0Uoxb/p0vIYOWgMkevog51e39/Iru/PXRVukuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9jCRA9TVsSAnZWagAAQY8P/1AlJ0fDIdCYGMGbUWeW\nJ/gGIA4rAQsW/ZZrFFF8X0e2StqlfDf1k8WzHt/wpFq7/XOeELx41WOr4Wqn\np9nHktLGK8sMoUbOILAdw805+h+zVQTY57tGazOYjtaM87ZWFqDQEuv03hpm\nRdMMIjEdDQ+j9YTAQ/0nI7eUo1CnhJUAYVzq4sT2MeLaNbsHbGwSKXHRFsCq\n4K1nw3BG5zDnZVYs8kmSbNY9ABU8qUGKmIG2kxf0xUo09Ra9d88jMmC2Y8s7\nzTWfYP+q9Q1Z9m84zpyFkO3iRVOx9WDkuGmWds0vs4wNb5slRv6djKnSZ5Mp\nusZyO2dKyNkQJp0DvkT59k6aSuD9Ky3Oocf2JsDRLO5khhocgwTphdYZ03C1\npyrQayDvni+XdpZLkYci9EX/CpBIfcUCC/9F49GguVw8gZySeu44jDltRqlv\n0WAsegebyf7Dpu35j1+nDWt5uoKB25vsxApEiM9kciLa5q4R+rT7J/hUla+b\n4U76F2LhvckjbvzMpp6+cL6HOqxH9QszJwkODsoUvEHk6ONUeApl/mepEiND\nyG5GZswEzxRIW5QOvHXXYn6gYHf9re0K+xxa/5TVD66XtU5SIPybCdkGp9/u\nXT7jPuYZJ6DJZ4CWcVlkk+VKDr11oKTZdH0aFObml32A2U9UXHypM+YuV/HB\nkhRI\r\n=W5N/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/button":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/typography":"12.0.0-canary.f1525ea3e.0","@material/icon-button":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.f1525ea3e.0_1622728547243_0.3299612343740126","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/snackbar","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8be9424857e42c5f046b3286a3dd0dd7320c04b4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.464a00286.0.tgz","fileCount":40,"integrity":"sha512-uSRcfib18Ik8B80FCHx+vrXbL4zn7ocxhxNLO69u2QJqnUKbs940POhdMjZy1yezmRE3AYwozfYGk/JzcU5wVg==","signatures":[{"sig":"MEQCIGBT5+Mf88Ycg5lmITrymTjmEACERsCI5XP72xrAkADwAiB/hKxtgBangRjYXphRXHdHeZoRO42VKQ4ikANCyNbBuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOuKCRA9TVsSAnZWagAAZuMP/30pa2/OO18D2F9GdZls\ncWY8xHqvnPTNFpnf61uzQBPb4RsIcUkQJqLqil8Ho3pR8wiJNbgNurW4pKCD\n0fntpqzZPhrK135LBihi2i156o6UfksmThXglGbjZdmCQNqw59HmEISZwHmV\ncy/7ho/Ixh13AylmpCnRfxLPRBSjuq3Z7jPg6f6U8ORD7IlceLZ2VB+pwo8w\nOj/YzKM9VNZniGuKmDLJ4eFb9lYlLeIm/26grmgRcX3oShkQlR1cB7W40xBG\nzZ7VHlzFVuCa5EOaPmoG+S4exr7FdECFAwPt9efoel+74wftGZ88F8Mx7Dyq\nrCwPiZMi9MYCSMF++WxTsh8ZIAZls1hUKVz6KZ7H/WuHufHN0AyBfydL9B45\nsa7Bv8YiE5Bz30pnJN3BPEaDfBbPPnTey8GkFrqMRZwArex52QKOGrp7pnTv\nSGl4HZiqfGP1u+hJJ9r7rthVRr5ieaW7FowrhA57BWIbhEr5wTxEAKZyZS3R\nF0jzaniqzfsLGFAxS1NkjhCHd76F3jfnrZw2OCw+xULeWBqiq2CXC/v1IPgp\nPCDeSLULUZYi7M1116rVfO0wAgGRO26xA7bu2/aOSh04jSvzcOZhIdtOOgIX\nL9aBRNA3nTXiUWpsfSoEF7T9EBzfiUBoHPWQwGyWOAEf4pR89Vri0VUEu13z\nMqNv\r\n=I3QW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/button":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/typography":"12.0.0-canary.464a00286.0","@material/icon-button":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.464a00286.0_1622731658325_0.9865766385460468","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/snackbar","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05c08126d7a28fa42451709cbe07d6c951b2a49","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.474de7878.0.tgz","fileCount":40,"integrity":"sha512-fSjM2qMb8iSXHoN+NlQkeHwHXbXKLAQBVTtsWApCS06z25FleLd4Qz1iddblDectm6uhAVkB1okLzQBBPViu0g==","signatures":[{"sig":"MEYCIQD55geTe8vglZQbzXDMEHn5MpMh/kKub36Rt8WURLxiXwIhAODmP6Dcjom7NGIBwUWqmfAX7oJrkEM2iOwzV1t1a6iM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPIWCRA9TVsSAnZWagAA16gP/09+1Wwo6OH9NhJ/szrT\ni1KQOgiiLlTtEhSIS6DTkN97gbPcCpvXu4J/v2nTGrgDFHmwnPYTi2kdU8T5\nW8gpNGZu1AKv6sp4K9ElE6M4GrRE6Ib5OrfdewuyNc0VXjqHrZaAPrfrFHWZ\nXqE3HA+8Q6/Rsm3VCpiYhNqX+Ffr0uAdS+VPSK2+YGP5SB1fTcYC6LLHBeo2\ns/ZnUhcRw5Xsp+vl13SAnHmqQXrr7/0G6IaBlTrJKwpJ8YOGjSi8whzcdRkC\nDgnWxzyeM1nJewadj/Lzp1kKfoVSVwfPf0D58v84oiGLVmJM5PIXrRYaVYLG\niph65gePRr/8qC+6se1FuDgLeN9wLcfTh/zWGNvRshecZab4QAy0XnS0iWLJ\nPl2YlzCf/MmsDSFEkEM1NeNByP0IOqJAM12PVABpGWMnal7GanJ9qHiuXVJo\nJBVHLHq86aeJ64wFDJyIfhGeT69Bgzy6ZSKakT5dm0AC3ISIHVD34hOtU1Wh\nrIts2j0QN3XchtiFaTAZqdU4jcP2UdfWss7Vn3PFTsawBBG4gLsdSmWKaoI5\nMhK6d8dFVqbhGnHFvy0yQbM1hgnuOlZEX0I7Wqte6hswHRPGSAz93vvZqN07\nbrqJN2f2TGVHeChm2XcxrVMaqmcZQVAObbpRjP3WJN0B0NxpM4WgDyRyVXkC\njj1o\r\n=ze3T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/button":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/typography":"12.0.0-canary.474de7878.0","@material/icon-button":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.474de7878.0_1622733334450_0.965701645121875","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/snackbar","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d655f6523e45fb2590f8febc29de05ccd811e37","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.b87ebf74d.0.tgz","fileCount":40,"integrity":"sha512-D79bsUpFSL022sI15FjlRRqsxYOagm45q/xC11FoHKHRSVQbqbYLJmOJfe/Kq0+cycbzh/jhbeQeA3zgt28gGw==","signatures":[{"sig":"MEQCIH06vJtx3JxCaKZKIFNXNQlIw0d1aMm2VzBCfoJuVOBoAiBFAK9LfI9O/0666LAgsIWsgJTJrJeMhH34Tgo4WRLyOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRW5CRA9TVsSAnZWagAA8bUP/1JXo9fnxps+1kiKlH6m\npeyJD+G3bpchWL350nG2E+tgSBQr0JA8zUbYiAGnT+gSMLE/MAiq59W/JTsQ\nnMEhu4kZYtKfD8OQHdIwzqd07RYKus2ab3rEB0MLP4sB5kryPXE28tgCjPe4\nbbvLZ09tnfc61xvb7ckDpMoffkk+2/QnZAzGZfyWzVE8g2xL6QWLZzaayO6O\nVIAqxNoUlDeLUSjb+Dw3cTjXys6RND+b4ZYL3JptB7sWCVIcuwYJ+k7C6dHJ\nwj7ZzdgIp/x3NioYC2OHvPdySTpHVW+EdykPiRs1mj0ZdBJ4q/WWN0kOA1Tr\nR4JWOU7/zB0KbKRaNJizrlEcFLQdazBXcE/UYcOd4WGM0Bg9UWJI8QIn3NMi\ndolKnAglMrdcA9oHgurkTC+UTicWtYB13abgktREWRPgL5iSe93BR8hfhaqC\nq1CbEVESK9OHTQXK69RGsZwVpr+23lJZWlF5z+87M8yQr9uUsJ8UMcbdvIfP\no3ah3qLMVy6duKa/ZBtQe562dPvDZEm3joGPXmg8G0GoKi7SCdV5bR/IJt8W\nV+mjxwnt+W9whScXdzic51yfdxvkHCnhwZvEh4SEQZBw39zXH8BS4HzSiXxI\nBU9YRdD3aq4s2APxKfjj58HtFqRSMMhDEDcjLQY7+gxAIIqb+C4rKdBIw8NC\nvt1V\r\n=IWNK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/button":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/typography":"12.0.0-canary.b87ebf74d.0","@material/icon-button":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.b87ebf74d.0_1622742457344_0.48875489843571684","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/snackbar","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8624eee81c71052cc98781c87e01035435ce8237","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.2daa49b35.0.tgz","fileCount":40,"integrity":"sha512-hnQCPARxEBy1TouTBvzDOLO5yL7yQC+jCF4OdPpXZUSXAPFHpszue4LoPSarP/fqgEthbLIcWoVu8AJldox6KA==","signatures":[{"sig":"MEUCIAQ9u3NxdD7rhysrK/YV8eGzFyjQBzlCz2a/ja66YdBjAiEA1PwYunW7KtXIVcVgrDfQJSxhOzLVXOBxXOP2GNMUjp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGiCRA9TVsSAnZWagAACO4P/R/SM1jluJtB4Ffi1MUV\nlgVwPXrkLaC8bUwdfCX/VJTewMDfhWjIJtf0NmBNTgXJu6Wwe1PhXdPJlQyQ\nsZQYUvF0C5ogOc91ybeGepA8LA7XpRDgEz+3Ne3ZIOBxXUXQA3L2Ffl9U7Tn\nr4nA6YdcYHup2SWacTI52vqkBCxc8icscpDMo1uc47aCbRFOlwCBYpKbDmIc\n+JNQatfcwZUirLEd6EDsVhn2ah0Srx7X4E0Ya16BnRQD0OvflYukN0m4orU7\nuxyahriaVp05dEDM3YeOfrhGMgemWSeo50/HZCg+uqqsYZlvfbRLlxps0p5u\nxzU1EuvQbDs0l8mQSVvcUpnf8DBg0SnSRWCZxTawN5KXWCN0r9YRYKMJNMFs\nXBxAuuOhY3Ddz23WrKZrN+cOSJkVOumUbFmNiu95Pje3bfq7r/lxr74AIT6u\nzF4bhANflz/iVOi/h+UHcGHwXs8/AKxtiRMPwVyBkwiaYPs4ymTdyHas7GEV\ndzf0tBJhjYC0raQ9Xg3ES+/KjMciMpa89T7qAx0wqd01tHauudO6gTw4e9MT\nTtYOnNwRM3peH1hyY7wkCjQGcGKJFLoKAM1nRVP6BOzH0uXdsC99dpSGRJWM\nYa3aeWHpCJ2CmOZU1uGlukmX7bdubTsf/klzjtsbi9sBQF5jQY7u6jZfXeb4\n1jM8\r\n=ThdV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/button":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/typography":"12.0.0-canary.2daa49b35.0","@material/icon-button":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.2daa49b35.0_1622823330630_0.22487568279104386","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/snackbar","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18433d45bb6f946dfdb8b33706258ea08b693db9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.08db3d737.0.tgz","fileCount":40,"integrity":"sha512-5MebomokQFRjgvBZ+DjFFDqPjvaPPo+P3PUuU3Z25oqgXyOcuBggIJWpHz9dGags8QIiTh5sEtBSIb7cp/3jXg==","signatures":[{"sig":"MEUCIQCtcCT3lOOlOouJ/HldHNU1/+B7EPgBlkACKuX+9cYFRQIgdZjhPta7OMqub7CrhCa+6XvJh8ZiWF1GQFJtkrqgiM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoJDCRA9TVsSAnZWagAAy0UP/1reoXbJWk1sV0OTWGvu\nI5ME3gxpJZalzC6lwdJSP42EIUsP/vZZde1zRmKo4TAkpceb2txXjP+OU8BT\nRjFRqnQOlzXyS1LbZKYC2KT+8W6o/SP4S50njze/xvQ6574GNFCtpLtv+Cgx\nEWUhT1gAJ7fREugC45k4xb5gOKSLeFnDduVEukYZFSOrjyu2AEvzF11eOozs\ne7i7r01NAvHbsPpG/3veEKr1nQRPkzqyrRX4HJLoQ+HnlcZltrqc0g3SwZPF\njlVQZFzn3hEufDnve39Dc7rlbLopJGhL3b8CuKD/mt6O4NvuVnqdkLN1kDHR\ncKDeFLCMQsrFrGXEtgv2UpOzH5Y5j2o7ALWYAhvLZyXRc9rIHlITFD2sGgIa\nygMDo65EG4BF0mUD5oEnfTk4EmbdNY6roZyQmASV3duXX5wKqqxFy44Q9vkJ\nfK6TPp2h83Iq0+ZJprcsOCBYtJs8UkdqfOhaH/WtyR9ZQyD0gR6YVCA6ZBnO\n0hIRRCiaKWXB96rP5dukilWVs6ec8iYyuMo3Kz3zUH8SgPfR5IjtllpAjQTn\nLTmpY+UP2MkpAC+OiNUUG6t5BOgPvkNeQ5dvYlOoxD+ln34XBfz4iXHCfioJ\n/Q82004qikaJoZn2tNxWk3tmQYt2poDw9woK9lP1MUtFV4oZBQNykpVTddu+\n8ZmG\r\n=2dOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/button":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/typography":"12.0.0-canary.08db3d737.0","@material/icon-button":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.08db3d737.0_1622835779671_0.3008436050535368","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/snackbar","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b6d8e8ca7a3546585ae34d3fd1ecc713a44594e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.5823407a7.0.tgz","fileCount":40,"integrity":"sha512-EftFkx5HNWkBtE9gapmC9iI+zomCZKPy8AVwevFIRTYPPyN1KbRwd/CwxgkqJ76y53OcpoL7J818QYg8LDqaKA==","signatures":[{"sig":"MEQCIGD/2VPkYWgnAramS9kEBENLgl46pCVKO5mF7S7cYHzMAiBt/5JoVpFSVwcDi14YuDcAe2p3VQOiwpXDiuqdhlv+CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr6rCRA9TVsSAnZWagAAGoAP/2YzGzsLpc8oxPy+qyqY\nUnlstfFxTOSy4NcLrsl/bcOQM1w0Pbh+QMOCuzwjPT4dixAaHG+efyURnF+Q\nKr0sLle9GPf629nfzhoJpRs55uk2QamtWsPLer8/Tzpm0TVegQNSjXRkfKf5\nIiRZchDDOhHtmajX1GmFOD/5abPNAZ+XWFLssa6Ozxpki4KOlKoB6eJHmXFx\nXw/dHCy/vJ34ROPyK0mikAfyLsQ216YGNks0mx5hTo3ZSukwbkQS6MnsPZlJ\n/jfRJFlPQwXUrouoHUYYkoU40Nr+1cMnT8hrsRFqfnydOB8xeIgFyB6FYgQV\nm1xEnELddTkCOCVGm4gYZuWFD3wnES6WDdrnnUQuo8EnOkk2+przrCnz2kBf\nlwPSgacJJ/GHVjlgVPWA8r6t/DR7tt9zKola6KON96WFsrG7qjmzVl3c6TTL\nD5GSy8nW0oNimEV+hqHFfcEv0nhm3n0lGISpyxOHSoAxaQVAs+dA2QJPlY39\nhzErPIFKUd6+mEUnmn71zJNiCxFiUZ+F0lC7l0BAzZtR9hlrthmc3cMUYN0G\n8yZ8uY6Ye+pT+oiuEeZ3gnYTZxXBG0rd84Yxveyj5Ohw+lCA3KClsqn1aNzy\ndGjTkwpbjRMkWVuGRqeFGY7MaLmvS3peFw+nrVurvdJmzx0I29qYi1wJzn/8\nU+EK\r\n=QX6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/button":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/typography":"12.0.0-canary.5823407a7.0","@material/icon-button":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.5823407a7.0_1623113386869_0.5622865742584808","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/snackbar","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f724f5ff952aa0567392554fea721a9447ea2531","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.23b0c5e22.0.tgz","fileCount":40,"integrity":"sha512-xtEh02jTQl6boP5eQXdOGnTpwwEzXfN8ht1H1Hfr7sTEaP9z9ecNntxceGZQaWiUaD2kxRQO/valRbPzMi3pPg==","signatures":[{"sig":"MEQCIBWg0N1V2OuxRx39KK9MPaVuv4r2H2L4a/vb88G9BTucAiBXvfWMbXLeyCXp/3RMgfsLuXDdBQjIxvmmXHobE4JxUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5mHCRA9TVsSAnZWagAAnAkP/RLAvlspRnAgiITNPrOK\nNsQxGjzOxucEQyWMWPf0pVmz8P1FNBVBSxWVb92TA2vFpjEOFFyRHUPl4GGq\nhmNT5w/QeFN//ZOqcv/MrWtSe8UX/91/jTSZZ0w4WJYHxaqARvTSsKQa7Jeb\njgcJmAmrWTKvNJLoczTBW7nPrNnhNUTTLT2vKUm8DTcbFs1sQZdEqSnXqPNU\n0r18vbk4gM8CzSHzamxdUhKcleLZ04u4J+VZdIzj5TuYFIwd0E33OTloNu++\nn1JuwCSCJoZcwN9dQpMDQQXX8eXjFlqRIYnwEc9ECqKv/aF1NTuqp12dCTtt\nvkcB9GBirJ+uparH758Wb0nTwKeLKaFwbuZo+QZyAYMV6EKhNcfAeJhFX+nB\n6ShnbZ/VW3vVcPMTpCygIS7BUxKHyQj27czLLcC8q53W8W4H4FZJy0a2qn3x\nm4DS3RhE/8BwXX8BcqTuozig0QDjgMif1b+uTbJ/mtX1ypqaK2MDFRwok8SA\neM5oNPYfjVUhv4xQSNsJugDO2iL94SCA3bkxAF+ciQPsaDj82m4bSvcSSXaw\nWU9t1CznEW02ZRBI1TWkysVR0xCijeuiK5EZlywiRV34pZOApXq+WPulHxZw\n9Ibee9Wjie3Aeu/seWM6yO3LgzOWijZvwuZure2QPfYinvEvgxzP8oC2C57a\nsesi\r\n=t6rP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/button":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/typography":"12.0.0-canary.23b0c5e22.0","@material/icon-button":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.23b0c5e22.0_1623169415283_0.24437070473679623","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/snackbar","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"173ac396f57d563f620cd2299bd8b1fa76ae8d77","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.2952c6a76.0.tgz","fileCount":40,"integrity":"sha512-Bc8igt8ebf0iEraFGMxlXDi2vvmEUVgEMe3dFfF5vxBgAU2VN1MZxQL1FimZNZA628dqGituIBsTlUkDBccgXA==","signatures":[{"sig":"MEQCIAy7yFtXKjfmlvdDyLENB8Wjm1l7WvO6ni8htXXZsPpcAiA64o4r1yI439n0tuoJAMX4dqq4fzNfT4vqd/f5MZaHaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vyCRA9TVsSAnZWagAA+5EP/3vSIeToENMb8LsemnHQ\nW2f/edYW/X+55jUx4JqaaEiBoHj0yjs4c2M9LhQ1wnT8fhfNTyl7aB8j36V2\nAJrE/WoBWOX3GYGik8fNnL/WsGgCgaS7+4GZGfxtdqrZ4d9/A7SHlXfz8gVv\n8OZgufVX4e429JfPLr4Mfx0pNJSwyt6HefzIYBIbMuWCJghVwrfEvQCtVLC8\nBJzvzRxrpAG6H5SlmTOhyw+l5J6oEKRG4TOHqr5+GZUSpuLmoxuES5imyqSB\nUa4fZXpbqPavLkg0OgVWaRGZVd1aCDuaqMJMmyXlef5psTymH4ybH4uRiP3U\nZLNkFWXyR9rrJhcE3hTWZt1P6bBSqT0lAkYNMMLtdYmki+CHHsuEjpwQBCkR\nH7FJPFbJk+b4IDo761uE7+fx3GQF7KZSLAsey67O1y7mUHi79oeChFWqq9C2\nLaFfK5jhAG4BEK+Y6phcswsgdyESXCExTBkdSLCcnHVTyZdVFbcfcwDY6lqQ\nslcVx4q0BpnLuzxeqKh62pZfFz+hd5TbByKIA3AxoSjPgcICi+fTmOkk6ad8\njePcdHk2e0qaCfPPMw598h3juMCP/S/7V6H09naNgGQrBVtEg0WVCfuu7B1T\noq7mw6kIjd/rNjZv/cFOZpGHOUrSU/eAAuKOEEtKqFPTw+jIyL8pAhuuN9uU\nG4Zr\r\n=Od4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/button":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/typography":"12.0.0-canary.2952c6a76.0","@material/icon-button":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.2952c6a76.0_1623174130117_0.5558054587064205","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/snackbar","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff19ab3ecd59b47b4fbefa439712e9ce1d97f4f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.f12425f88.0.tgz","fileCount":40,"integrity":"sha512-MCj/I63/KlCyOupVOo7Cwt47uvJaGdSc4o9M0qwxGKpf0xgdzi/DGks3T8KjglseNSlumOReA69+boSHDZM26A==","signatures":[{"sig":"MEUCIFw2hAqChCogyT0Ey9nXavYAn+goViolLTrPboeE9FC9AiEAm7QG9oXizAkJHVxmnntLaIrTxw/V9JckAQualigTlJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXlCRA9TVsSAnZWagAA6HkP/2JELH0W7ohJSSo4nn6N\nvjxdxEDvIE+eHLRr7Bxba49EGU5LCyikifk/yqECZsagqPxOJicAexrlQmcG\nPHhCQmiQI+kUmVn8z7NvXqCZx3ywsRd4h6bweuDbSuClIMTOEgdHjboWT1ZM\nTFgrK9xzRG7banpbCU+V8A+Ys0w5ysumWBhm5KSFnTyOYctf1GJ4fgnU7bJd\nRtMmRB4G8ZNc2idRx/+oiCNjLJ4xY48kYdeE4AoeF1psBPkUMZPVXt/gOi+7\nmKYUvCm0PdnxNHnvxzcZV9lUiNacjLWHbGwr//a+EEH56+ef8LL2iIzXfs57\nbf0VI/q8DyNPfZd5LZ7bqCJFtvqEox54147uqh2FdAWvmDOz09KL4OU0uNeu\nm4ednNbS35wAFn/n1Elo+RWW/JEo1VZFMMPdHMR2ASKckCxfV4z1R14RpwoF\nSwW2erAOTmk0+GGuJfcKgp0BT4DGdJvFkFBL1/2vUhzNpW/lmabcPBbu3rLZ\npYhy4ZBnNz+DSJ6FvbYVZ6pKeAFWBSD8nYuTtYLV6N4+XdSFUl0uBljRzWc/\nYuc7uUU94ohnK2CoLS0m2fedXv6CDXAF0st3v+/A5XenTPBBR4vEBx1QXDuD\ncK1HX+laTvaVtBLHLRFWTn17AWk5rXYQLjZMomMTFslpJGCSe08dZKnl0QrJ\nJwKb\r\n=RGY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/button":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/typography":"12.0.0-canary.f12425f88.0","@material/icon-button":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.f12425f88.0_1623287269234_0.8274730609546022","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/snackbar","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a627b2013f084c6565b1ca913b3a2e26649523e5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.e543628c3.0.tgz","fileCount":40,"integrity":"sha512-b2FjmiaEZM8wCvIPF/JOJ836HRenaLaCcojDjBO++yihqHfvtcUuiKfxUnXNAmU4wJYTBSEd0RfjsgmWrkemrA==","signatures":[{"sig":"MEQCIDpIgGFx5nr+un0KOhQVpS98A/52VO0W9hXEAx4+WTTbAiBats2Ck/hBz+WZPpljfYg8m/LypaiskrDPwHyHL/nICg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYcCRA9TVsSAnZWagAAKfYQAIAb4dl+9ekY44UxOSoQ\nhxV0oIgfe5uA7ilcT2z6mDNzvTCnxK8jPC/wRr+f/I0HO4ZVsY5NqFyQNxL6\nZzeMxg0HO6JfQkXpEI9x7yTiaMgoHncyMjpqRhog9so+Lv5bkkQuKT/Uld3k\nwrVr7bYvThvuyn00UYtWI29aYIU2lDtAlWljIlIqkqasEPHIuOF0gsj8QKq/\nQ3IrFeWETJrlf71SLHC4nPmBuJCT1lteIxgX+ZGwT1kDd4HRScvtzr5nIWmI\ncyR+EOYhOyihnc+Jsq+pGCWy4s4h87pVysLqo7yF37ze7iQo4zxwm0acITPZ\nf3/qWBy16YAS5iXqYXu40OhEfCpDJSyIxOBhejnl0nYfILMG1Wh/edn1+aYP\nybtk7CSCKTopPY7QFEtFpJZ11CPvV9VHomu4W508uaxdWEw5dZGuHoJASltL\n/M6iO51rAud9SPadGvp4YxJc9ILEKUDgIHq9YCEk76TXdxxEmbEjZidiRB6m\nO8Ym2SOYN3dSm94pNywNg1IeQZruxjARcDT1RHWO1S4PogTiePTjmRa5OHVk\nijdFMMY3wOPL8C0Y8lfnyfrGe49JzBQrlhYK1iq9A6b95tRJOgkZ/6SgQMe6\n/OegcpPrrBg5q3gjORxEm1MDr1rQl3zM2OijAUjXbGBclGo3wSbxdLr54ooj\nR54f\r\n=5Kog\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/button":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/typography":"12.0.0-canary.e543628c3.0","@material/icon-button":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.e543628c3.0_1623287324762_0.7583285380935063","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/snackbar","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21d23e008e7758daecc21c56314e924241e68064","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.e0c346286.0.tgz","fileCount":40,"integrity":"sha512-DIJ/QQvodHr27SVJrNDUWzZE3qvXnmrYUjeOAVHG8Gc85AXFghaJdDEmnMK3Vm5MxWOA4Y0/Fr/LF1jKvCGGBA==","signatures":[{"sig":"MEUCIDNgJLgpuRLKNAgNihS3jzZXxepf6zRR7xIOyxBLUMwWAiEAivCsdhN2x9BlY73YYdLuRDUIs5Z5zg425XZt4x5cKNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+3CRA9TVsSAnZWagAArscP/2A0T9yLIqD+3zmdGJ7a\nosQD343kb4KKCLzqcxBTvi8CqNBLM8S3DLDI6qQVu52Aqqz3AS7Du/ReU7fz\n03cE0f7YrPzGbP0xWFjVgX1hDWw4u2EqlNg3t30YpqMUyk+QPUVK4Zrk0U+X\nYAZcdOydNCD+f1pC8GoS/CECP2/xdbutj67hM0RxevyM4bL9OQgIPgyUQ4m+\nJCsI4uOnhocYZWPh8hHP4uKcDvcW794aXBnCLSzu6p+C4xuQ+gWo86c1VMke\nJLFWYM4Q+E8l5tTNGlR3W8hKr1K7aAfWZ+ID2ZNU79K6QYYEQ88quM7tirUS\n90FMByU3oUl5XcvltulM7FHB9VLSQEHmMz5GUsJqhPs7uWsCQPE/dZyCNYrH\nZOIBNnUF6wi0relvgSJ6UNdGuIZJxc3wKNLJPzl6xsANrOOjlJJTMlkeQHm7\nw4ZOJ1GxDeHTC9xWuaQUmpQw7aFOlkQpFQ6QYRRZC4OX5VYRFmIxWxkEhQdq\n9bbghf4l3y5fdiYfNmsKkYfIp2Ti9gv3jDyMUDEmxrGn1aIpSwkZJClKpffe\nf8NVf0Iz8cuLFuIdd+aKvmcj/skZw3Hk60K2HiH0FMXP9GB6xMJsLUqdHQKr\nqItcL6Sf3K5x7Gn7k/6BAw5XYtuE4ifddjs+Gm8RB+Ac/hzvsAZ1Bz5fQ65a\nSDkT\r\n=GeKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/button":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/typography":"12.0.0-canary.e0c346286.0","@material/icon-button":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.e0c346286.0_1623343031117_0.10001008989844151","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/snackbar","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8e8ab3e60cd59114f936265ce38a17df5baecdb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.f43af5633.0.tgz","fileCount":40,"integrity":"sha512-sai3gmxbLc4hebhRRv1GUwHc3ONmkCDJXrN5NwbmA7pCK1XGRGZjd9m7m9eLCSLyQMD89WY34g0dGktNnLsPpw==","signatures":[{"sig":"MEUCIQDAD4amV9CKTQjf5LDtn+8MdWNUZ9g754oEI97E4xyGBAIgc+EanhJMA23rBhO6nzZpCMBt696Uf2UfQeZMqHKrZWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":449650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfvCRA9TVsSAnZWagAAyMsQAI12icGnwtOYQWesdpfu\ncuJQvBL7+mHiwo6q591U9IwEFB5b6X0gKf6Y8SCYMGeNwmHz/gazfiu8kDVJ\nwMfpmJumIP/r2eMC6MnQ5UjOKwqbNwPvDr8DUd3MuP99Lj3FaJHTbXO1Icyg\nGPZC9hT6i6hH/gYJPHLxoLY7vXFDvOtptdRehvAmt/sXyXhsv8NB5UPzRUh0\nLp0SHFjjMA/nn9nRZ2ZmApk2fjiM1WjTNpNLHYkF6s2ADkwWHyDhO4ZhfDKh\nJAbCE/sjz5+6ScA+pT9lcXYSYJTY3RtwOUoEgsmAhlZ+peRKUjJESO5q2HUD\nM9YzQabqbHosAS66OZDqhYgVR11CqbOw38PZ22xjrler1hA27z02wtnswvpN\n1fPtzsxwNkzxagoy6wW9mV/q+y7yTz76yIDeGdwAoPA6F9BixtvdqNMfth42\nScEcjDlIwH8dwc+sUcduDjeC94IZmlQCO7HclUIfG4SkE5SyGznEaQ46GlEw\n+3PlbTrK0c4JaxrL8mecRIjy5rVfJCaJp72lp4c4mCcMqRiuVBTBh1tMSCbG\ngTd4hXpE2PAgd/YFEIxQYX+x9c2MDNZygTEWgdmzKiGdAonUKYzoEvMHR3iN\n8HC6ZtwDZbQjBuXj9/Fv7X6A+B7/Oy9cIureWlSMT5I6fsMbyKHHq85Q07Yl\nYA2j\r\n=QZVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/button":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/typography":"12.0.0-canary.f43af5633.0","@material/icon-button":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.f43af5633.0_1623357423228_0.9295734927515549","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/snackbar","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2780eb2a97ff04ee9fe0596c3a26065252cd91b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8415ae585.0.tgz","fileCount":40,"integrity":"sha512-SOeqi42Yegg/zyXlD0vWhBUiXnihsSkq5hTTIVzwR1jBZ48mnt6dxVahTyyjBNHT75iKtJ1Nxx62L+8FqvRyVQ==","signatures":[{"sig":"MEUCIQCsGOs+SstJceGgsQqn4MiLln+mV/YsEJ6Mdl1TeTVluwIgWqn9oWj1ld2qwWvbBuUeijpYrdSFKMxRFpAEC58IOKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":449650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4otCRA9TVsSAnZWagAAdpUP/1K+L6KDuEsDmY5PCM/l\nvgToorTghrVv4z2Zyv2NxDCx5/h3uhU+MaNv1k3CwTGgkzjy6+GeiTacmO5u\nyMpbFY2GFZRZKB9m6e3dUs79lJmpQzIoUfEdc8gD/2IIDxE7vyGDJx6Tqd4n\nDxACxkD8YOWL6i+SWzVBlA62YZhQqqa0Sc3L43IGqHVabOnqf9IF95++rRgL\nN4pV+LMJ24s0+0jZu6P14GqEI268byKAK14ctPYDamSOo7LF98v1hUjlEDsZ\nqdSJxvV/D7V2dLWbVdKOEVYsvNQzTrG7Mzj+x/MX2mgvc9t4BMjb8nkYpUIS\nKwbH21N/7p22+q6FW3G9EBMh0IdwYoaXvWfzuNyipTCk52tbDPkWJdQffO5H\nVM3GdB3Ldh5T6/TaXZtwedI+sfTy4fCB4+T0AGOWW8Z6wA8m0EfV2jIOb06z\nb1erAdBlzlKE9LEf5ZJsPBy5FglNNS48G3fP8T7zFxcacVCP+av1vx7BtTWq\nfVYQWS8P/YuqMFf7VYsX+yGeNFcYER2MN/wivG/eQl/QdDgOTR5kMKwJf2D7\ny6gZqZ7gvEb7V+Cb7PSkHlv7IR/xXeD7eVU2PJidRJOijp05zPCIHt5gNfb8\ndRTVjIKZ+v17dQGggg2NfPgHKb8MQiIUu50PAw9dR1us6v9AFLXjauHKq3SF\nAWZT\r\n=3FWi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/button":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/typography":"12.0.0-canary.8415ae585.0","@material/icon-button":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8415ae585.0_1623427629294_0.1549258112768348","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/snackbar","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f692f98d60f16dfb359de6a6964ae793cd2f8e9d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.598fcccc8.0.tgz","fileCount":40,"integrity":"sha512-Gg9VpM8ykZkD2MXa3jBDDMsQTjLVEIQTkOVN5svaysBlW4Z6SWcbrR/ghSAeHJOsqJvrgAmuCOomHoAfmqNqcg==","signatures":[{"sig":"MEUCIQDfvOwfgYLMuKheJ3JsmxBz8r4tmVnJYymZRnjcRwPWswIgJvOkaf3kxl7QbA0KbfCrkTDGp7D4juBtfM8BunWd3Eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":449650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9n8CRA9TVsSAnZWagAAQFkP/2llq7sHCj1ezumV7e+M\n77QhzxLnJgMWMsDC/uHakT8HUsEUaqVK0ix53xtAWHF6z4hoKvxGRab7iVqO\nAN+UG2mXXOWIhTcetBj8yn+Yai7/h7kD/1/xaD3JCxZV08aHwZ9A70/g+doe\n2bZUyv9/h9llNAWAzgIgocuXAPnnV5pzDbIg4kxudeYPr+an6IXcl9XQ8buH\nSQm7w8x18gQYR4KUfaj0OB0ExbXEQkQ4+/VHpcSRDEa9f185s9yR0CJyq5Yz\nI91vleDJ5eyouTLtDyZDMXSO3bNnizWqZW6pZD26LEXGuVvZjWRfP4Uy4e+W\nl2Gd/PglWD6aTsSqQCJSnS4DRcjU/EaC6uKjwLqw0PFrGBg/1Dx6UnxCkerN\n4N739lNyaZz8Mjap4d2RN5hR/Ray9VHouEW32ZUmXaS7t3e69qP75IgDWmk7\nj2Jti8smWRuQxp/c22RDS1lzXnstm+YyqFK/xFfieGsidvRjb67h+icyRive\n6SoFzRnslxkjDcBwvwIRyhFFUKGmwYIFJTCJ2cXoij7Bmtg1SliUgFFjzfQq\nJDR08e6CJJjxCOuCCjiTJ+3Awxq5EcNajAKJTEuZ06HTC0VTLlpIu9cYsx8t\nEkJGn7/0P2VSK4G7XK0R4ug5Jo+4pDn+fsjHm6dmzCP4r5LGVvCny2bKxEwl\nd/BZ\r\n=JR/B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/button":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/typography":"12.0.0-canary.598fcccc8.0","@material/icon-button":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.598fcccc8.0_1623448060225_0.3232264266340692","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/snackbar","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"566b2c736e1f928c384efad576f599c3683848dd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.5d0605188.0.tgz","fileCount":40,"integrity":"sha512-4vumkaXL47+YbyLVckaDN5qqCDXLx/6B9iuWG5eVlRogDQfOud7Vk7SfjlUXuf5ibJSPEl+XjtSk+q9o44yLsw==","signatures":[{"sig":"MEYCIQDev0aHvzr0gKoY5eh1WGc3TJIcXCcDsnHoWA/8vPnNJgIhALQZKXUwkYh86VrSaXQslezia7kKwYmOPeDMULZ+UaCn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":449650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5SYCRA9TVsSAnZWagAA1pUQAIUoyBW5pbrLwWP27Zg2\nXegPbPFllqmFS7Dp+bkxMfScUCEN2TCV2Q0mQqDb+z9o2H8ktj5pvva9vkhY\nvyWHghCGyCYyIxgfhjt2pbamUwWEhNqqwlXK0IC5vBYtrHggcsoo0/gI9NR5\n3IMOlLm9LHEDTYp7XarHvvUZdNnoRrIbFLozzluOiHmNISDF7XI7QiDfXQ6m\n5QkptCOIhJCSBzrB/CxvrEqSMnGhZ2+0mCw+KfmuOwhCknVb+nZKPEyIQNHw\nH4yA7pk0NaX1KOg2jaw7UmZ2SAZbNE14Q6dkk7zPSm7zmrYUYzBKpRRf0Vvv\n9FPsjTea0gVAL95oijUMDw/TShBxITM18SwplfrlPw9ufLBiJEk4RF5489iM\noEoTNhZ9wuVGzgfsDTVBBfZXXZrxXeNJ2VZU4fBrRH+kIM4CT/NPKuuFqsqw\nYIML245XBl620SnzYjfH3XEFkahwAEad+Q5mWzHs5IaaBVc6tiS5AtUwaA1p\ngqRh3CC9XIyytgyDhYrtnJgaM2AY5va843ykH2Aq83fja3IiuRSiL2/9+ZRm\nN8RV5CuSJNgf+GBiR6gpX++Yn41dqiuHa5hChoL0f9d4fKyeRAYRosq7fDFL\nsQm51bKBnrqHfcPugb33F8usNbwCiMqtVRvfLjaK5T1+jUwKUcZYWmC80HUL\nYThW\r\n=+rO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/button":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/typography":"12.0.0-canary.5d0605188.0","@material/icon-button":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.5d0605188.0_1623692440819_0.17008186648011003","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/snackbar","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d100cd321ae232eaa03afd96df71f8834ddb8eb3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.f147a2271.0.tgz","fileCount":40,"integrity":"sha512-FWDwOCsi/i6SVdW0cipM186vgKtotvgOl+S0xCOBAC0q0vXnGxtfaG2JO4srmJi0GY+10ghhjbgrLX8NuN8jlQ==","signatures":[{"sig":"MEUCIFKfwNomemRl8tSTj6aEDzHkQES6LoOEO6uY2ydF/ieRAiEA9pP8TI/MhEW1D0sqa8MmxlBdKc0Q4vQMfvTTwfUgRQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6u/CRA9TVsSAnZWagAASccP/j7mTeFDJzru5JYtckqu\ny8nJYZYTpxOK9x7ixIUay5aLnZSRHokhJYmqWwZReJ1a/MPsPMa4zi/CVoMt\nRuLFlTZYt6Xr+ofMPWzzpvTjD/qDf056J17/x+eJVyT257ASkpe0zhJLqZ0C\nY+KeYnoKW2eLxUJA2d6agOLZrYEQ6ThJ9YyeX2y4F4W6jqPrTD+1Htq1YRZd\nkBXKcoLXr63VWyzb/o5r8U3rkNwgLweOMN6zHirkGM0D8iTpUIjx1uXxN6sA\n4lh4hEgqDbQKmruOkLzesV0pm9M/75Rb1BUaT6LdCU02EXFBbGfFcBmIk6Qi\nmW+xj3OakDMTa3AIFDhTVMDBjqsAgLEsPWNwNUKSX5CfyX2MQgwAG7QwLNaC\njqr7+LESu/83v8x7miFm505TkVq+mCsovsCDfmOqjSBYpTecmnsI7v5EV9Mj\nThrEkzfQCscJbJ6Jm+YSZyhQPn7OOpZio6tmRvu39Usc6i3FAsle5OYy546K\n9rI94mnRfqw2fwqiwBcHzBrSUq2gdOUsmHMKdX+L0Y28fvDslyXTJN6WaFFF\nclFjk93glHNHJo9t1sw3mGDJG4Jaof2WFmYhk3Un5F8Ozl8pZ6EPn3JZvsft\nDvnlTuioh3ueHZ37ZKCdqhnUrFnG5lXz1TmEq4BkCtH3GXhMY6oaT+f3yZkj\nOUix\r\n=OS2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/button":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/typography":"12.0.0-canary.f147a2271.0","@material/icon-button":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.f147a2271.0_1623698367651_0.028054899133860722","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/snackbar","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b51ce17dc6ec0b4c2dec562110ea47872c68a103","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.33579e00b.0.tgz","fileCount":40,"integrity":"sha512-jL6nvs1OwQnzwzy10YOEZBNWzhBtBJgsEnEi37rvZ6q0uLoD5v9wpo2BBTqDOXRCmF+wKZ9dP89OikxSTJwz2g==","signatures":[{"sig":"MEQCIEcFnsz1EKZuWO7sxEVLOGWSsaIq7S1dXKA0UDEK0WU9AiBfTipPd7+koBTsgXWQEgHhc3oc6Ja3dKH3bYMl1c+5lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/L6CRA9TVsSAnZWagAAThcP+wai7Su4xkrLoO/V/9Bq\nRIh72I5yeb0LgV9oK/hmWP/fq0e2z0j46sG32h3RCWvWqgSNe63r3tzkFY28\nqgVb4J7xAzh5XY7qdcCOMbYOWufqWZw1C5r1sgFBZHi5iyXRDWY47LBwNEmu\nT5bPSBz5pXGX8rfx8HdxWIDO/GPjzjbmyvnpVwD2L7+fctcAQXCsZ8u8lPgT\n2MuHt2QKVK0BSUIVXmFud4/6CNl9Ia/Szn14YUAqw2rgIzBVqZRU7rG+lqVI\nVDiSGjhmIrHzbYGqS1CAljfoCW6HsxDqPEhsIP+dk+bR10cCAwWdb0XfzcUR\nnh2KzuEXMnxqyydkALTnfGvGsMowbMv2ymkrgqZTSiOoDWquv+A5LiFUeYDm\nTdot8vVIPlq++d1wUfO34ytEQn6h//61pRQ8/Ne5TXMb4PWjcAtJ9Tjvw8VB\nN2+EWlGCniPDc6NI/iZTQ3KsUjXooB5AWkUc9NJ9IW6+AhbkhPHxq6qOZ34U\nSDyubxiZ7rTYi8DLU/cqDyjGRPi6lsqS2apYS7R2725+VmVsjZdj/OxIYZKR\n/d1whXAD0CC9jIMugBW8UjOfAZFKxiQQ1WO38eqaVFyz8TYf1abbsrVo/0cY\n3seKb0sAgcMitNKsdPOWPKuuHt05Jm21Ek2dND/CwoUROXVOy1rG0NZ3QgRA\nNOoF\r\n=Bllp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/button":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/typography":"12.0.0-canary.33579e00b.0","@material/icon-button":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.33579e00b.0_1623716602094_0.2792944480813049","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/snackbar","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e8b33d81d7f416cb0742460f9323570b8ad550c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.a6909c0e6.0.tgz","fileCount":40,"integrity":"sha512-WbXYFNLP6R6bNm+njhewvvoAMugUqSMO5ctctPpCCg5dtugXjnCKmMBl6K8SEbEWbxhH9idgi5Wt1iD4KRd8NQ==","signatures":[{"sig":"MEYCIQDfNmNN43V8diOVsbzHbs3K0cGDaYIgNdm1FU2tt19PZgIhAIwTrAH/cGZK3Nk02AC+YzhbULSOWIyCV5NKw4X8puAU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPIDCRA9TVsSAnZWagAAw58QAIncFyNDUHzmh0eiWhma\nQLEyavnckkj4p+ZPvvtM8oQghXoXfSDRSqvXReYPJ+yhn3V+DLQWLr2642Ez\nzQjcXd16NHZEFltBfFTsu1HGClXyK5NcvG0nl1YJPJc0nvntyRgnCkTFF9Q6\nzgVSU6YLp28Lk2zDWLjkTGhPnmoXsL7SjYPad0o7Q//J06u/s/7DTzgf7IaH\nv2Xe5R9zgHYA1TsWkgeGEI7WBLDCViq8yto9alUVAn6PFxM1rxdJHfWRzW6r\nML0ElcskDDHfGwmZ9rIW7+nXIGtrOOMPIdT6PL4dhFLQ/aSY1Aa5bvZ9fsKw\n6k/u2t5V6bo3GbkGYXvrwZZlW9A3jU0PTbKGUcWElMrvUDXUVbfoLRjwbC5S\nA9Q8US/4WKiTSrMBI2593v9z9hba96d+iFoOww7lZjPbGQZbeEQF8ItplpUo\nqnJyFMVYoqIWt8XicrjdR/0dmvyCZfamo7jozmtnviz8uI9izORMv9/i4thW\nUNheXP4cfdZdGI9PQku8Umh8eyOMQZpbr4GnaQWhn8YLHZvcuk5YGr27/xO4\nBw53HCEiarWDAG4UjygT/9rkPuE+gf+bimwL0sSQEdxKojIbjn4a+pHE27qp\n1OA4KLr+qEiF019y7q6908ZA65R7BFgV0ro1l1MfMQ2jvNn0qXrQa78C6U2B\nWGTW\r\n=cnpG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/button":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/typography":"12.0.0-canary.a6909c0e6.0","@material/icon-button":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.a6909c0e6.0_1623781891199_0.7703137757792244","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/snackbar","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f951b983847f3b3646ba303a4ede2d262ec38ab","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.c18b5925b.0.tgz","fileCount":40,"integrity":"sha512-pxTTLjW2OddBihDVt24UxBz3ciVPZ5oRsI8J5oVoBFPXXZsFOzruZUpoS/bZnaRCM5Cw8DJsdivacwbe7XjgvQ==","signatures":[{"sig":"MEQCIBQNRXP1/x9yinsSiEQ2+dGl5j7I2SsByn6gpsSQOcTHAiB9mSlkNf9NUlPjGOaivRIWe8tmAK8Yo7DsUonjRJIuEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRX4CRA9TVsSAnZWagAAir4P/jvxQMNLEcpXCwNc0PR6\nwswSo3q7rIJnzGTIHRV0pqxYyeJ79Y/fKWMxMkkL6UnWKBurhTvtDeha+jCK\naGwucBgH6n9kShfFX9ocUxmj9Kq2hKKDSxRtITQX+7qeJpFjLNsDuyonZR4j\n67MWwhEHvzCkQhL2LjsJ9Zbd6I2Y9VehS5jNPa1sqnvTWuI80ypliTru74Wy\nsI1rJS3J6z9o1KFwJlpGTY7y/ohe7J1I0rMZlc7Nm62v3me/NIrnhCvBvq9c\nRD0Ojr8xZ9iDisgIrUqguEGpZx83grQSShYDgupzy41PqiZt3gYC3ssvgGri\n3Yn7kyT6c16gj4+xmefHppW48a2olyo4pP98+0CQI/OoehDivHbp+BPstwuT\nx6hUZPfd15BXrt7NE4t/5IcSwE2/1/ooow5a5ST8ZJ0pHT/T7iIDaPoA6W/+\n2xN8YR2b6KaC8D48Oi+LYfZkLZ/xcQQ7/LgrBlbYxp8VnX5Oz3AdCxuPXPXK\nkjlEetsASvZ/YQUqtmzeYnYUDrhASCdfH1/GJJXWHndRI4y5smMeS3ScjALE\npDVHpC2GKrB5vuKBYK48VM4polml6QvEkWQxxagW6IzaWsYq9T8Q/mQnqJnR\nwckdyZ0ElCSJJQLmWUk0UBzA+mZuapgrd63fPlUbZjT94bUkMpnACelBtTLC\nB4+v\r\n=9RVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/button":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/typography":"12.0.0-canary.c18b5925b.0","@material/icon-button":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.c18b5925b.0_1623791095948_0.1681892686822717","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/snackbar","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37d0a24902ecf6058c64d20ed002ed71c6ac7c2e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.271fff902.0.tgz","fileCount":40,"integrity":"sha512-pPFAB/6TY/qrFJQ98tZG2EgDN8WHTrs8GVUNSZE1FtJboWru6QheFX83ntd6Wako9kiwGQ/Lpud3hEO15RI6UQ==","signatures":[{"sig":"MEUCIQCtjklAwX/gisxQ9Kn9Qc9HVk32Lc3PbYnuIHFghv0ajAIgJAg1AaYdkQC9QPZ9/PpJX4Eu7pc3Ojde7fpMrRZR+bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8oCRA9TVsSAnZWagAA0coP/A/fbEb9JvdYsKI/B/W1\nzKBw5M076WdoSwrw/nm3+SAF9TVxNU7yHkH50r8pH3/uEi1cGLK/dLEEduGN\neiv76ANmuQT7OWiWjE/jgqHETHs6duMAN5y44zElZV6ZU1NJ1bYQ3ZWO6pJC\nzbLjrOl+dRvCRtjukPvr/x/IxYiurAFJewnv0JHtNKCC4BeO9hz4wRsiwsUN\nTN4STyv8Qi+uvW/0cMvhrQI8/8CjkvmkTihyO6Q7+KYz511J1WBqu+ql+ksP\n5tpSouOUb8PHTJBwAh9oR1weqFjBkAzFogs+v3F6i7080O5EmoS2+G8ot7l2\nYQpSu3zn0YiuvEXIhjIZeSo2WSnXm8PPv/X3GO6I52051wugArPaEDFneAG6\nic+9VpCQfUnd98VXykBHof6BHsgXZGIOBe9Z2VU7dic21iJb19HuGgVO4Dy4\nx4/gumWF0Fc1FgKcoOfrVA+dTshIUcrIQHEgq1JxeDKjhgvilVxf9Ez5KZX2\nzecvdIOeKmMmIZXUuzv8ZyUzovzzW3DIpCTn9rBEM/tJA1G8l4NJQ58H8tGZ\n/4PO6loBc26URHM1sSoWkbfiY/NjRaBDwIv8hxoVUTEonfKdgnNwRwcRy3gr\npsXWzHT8aM6BjHamDiqBkZYNC+nN7RACeLbfUoV1wQirNB2QxY8iFRy5xL8u\nk50+\r\n=Rp+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/button":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/typography":"12.0.0-canary.271fff902.0","@material/icon-button":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.271fff902.0_1623797544154_0.728842454631744","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/snackbar","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd73acc3729da2b32545c171020db066becf161b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.7ea2e830d.0.tgz","fileCount":40,"integrity":"sha512-C4o6AxBlqyjru+gxKiglq9YfRTuBqw5kLagss9GB8D1zzvbh1ay/l8lsyOh4HNTvLP+A0Sm3am9SiWmDSOxWRg==","signatures":[{"sig":"MEUCIQD6DqpUWyio1tU3XuFnW3OgB93NLeG4t9rIbA150z0X2QIgP+R5ZpI98zdWtqTanSwSCqIY+pxBT8XuVdt321rjxS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS9eCRA9TVsSAnZWagAAtFMP+QH+3lVENuzFFjaT+8tz\nQspW1RLAIH7EcGwGoTXMpTm8cONytXBU7bZ1YxrTzrUNFwQx/rqnQ7D19/ZP\nKtQKr2orX5bBlGa+3nP9oIn3mAxUBp1/WLwcbkX9PmP7dZOrkh9ZP4eji9Zx\n0HfFh1duxbhbFmOSvQD+shL5771RNMDXFtYi9Ce3lzd+tdmRLnBEK2WMIfVg\n5B8h5hEJZ11tajoMKsBxw6F5WK2QAHWFWf0phatI9GqqzzRCC2ATgKYgUTOs\nrQTnP6ZRXp+x+w6pIvn+eEYpXykY4jt1YJ8wf2ZnZVzZwvRplTKwALtqJHpv\nmZP/BCWofKmrazlO/8SwzC+zgDnBD2PSqIz6vOXNhEqqTFMA1Ujs1udFBvR5\nt+R0TWyF7TbCvAu05OemtYR7eZlKjSAKV4NIl3TyrPhQvbhYanWKSUVXtwtq\nJi+EmsPfMUtnU6xNQKLUuX+AxdZMOw4+MFr2snppZcTxgHKYyePYKm/20YwM\nOMUjfo8lWIy/Gbcvsr2gRe/DRN5mGMOoKeJcNoyDAIFyCK1TqIEYkSj2NNvi\nKCTGFGpPgX0vLwQ5ioBU4HcRuRan2xf3WGvTj/IX8Nd58uLGGUuZsuX3GR81\nx0QcTEXn22aVIMVG0EFtmTs/5kFEVp0QzeSmAjWa9Cm++V1vuKOWZXjRk3hm\nJyK4\r\n=MowE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/button":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/typography":"12.0.0-canary.7ea2e830d.0","@material/icon-button":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.7ea2e830d.0_1623797598363_0.8741413286373119","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/snackbar","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a694f6f8a18fd6d6561ec669e91e4d40e157653","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":40,"integrity":"sha512-G9WKti52gtmmO1uEdMMeH+Iulr31O1HrDuSfChQCXiBx6a8uAL1IDzq+9iSb4eXomsw+6+vTtvJWscZ3ZztHnA==","signatures":[{"sig":"MEYCIQCvWh8fgEVeOTilA6MlD9bkzHLxyy/8ui34/cW5b9WOhQIhAICMgCPP1/Con7IT8UeapeImYUNOvsx3kWn8vrGjU783","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymghCRA9TVsSAnZWagAAtEAP/i7A8QxXAucWQ1wfsV3T\nLARk1JiXlQnyzH34TfI14t4zrGc3i5KyaQaMUxEuv62M1M3+mX+nK1OBFFG7\npudeWUu8YqLReGuQL8/7iKxbnzM+5kPaGgNyPCBZapXDm6z/ZjlwtQXnPgF2\nh5z/aBTO9MSg+FwwNnU7I2kS7iau7CCnOtD4+lvXg+48Sr6/mRQXeU56I/+w\n6wwc2CZ6JTlUXCX2zI69Q9SdSmnXzHTDAaCLvZ4KRLeemVkiHLF4Zo9wQN7I\nqcd1RPZNhwvLkemYVcxaZIJdpPtkt+TJYWDmQ3Ych3jOafXKFvdakx1scuay\nNzQ/unqqOp9TO9ENE2kl8iYJLr/ykA6p+XxbTbQU0kF7gfJOL6mq6StWu47N\nE6+QVA5yC3GLj9rQS8Dj8Z35dZbXFCDBhHHEWpYS1ZA2gylOxaFuVU7/K06I\nMBV0FiigqryBz+VM1gGsOfiHtz2SM6xnBp6wYZ5A3OIYj+6kl+RAHIt+SnD5\npmu3veig4Qu6hBZI+yVW9jD4v07FGS25tsytwMG1IoXY7wn4eokfgXVUvYaE\n9U7600Vt8iEEobDJHHTNCtZV7CCIJ7KF02/cW18hR72MlzlgkWmHfxyaLFHA\nD9n4EZwJNkmLiW71vRy5x4QrOzaOvhV5TJC/ELLfEaMtO3d31IGfaWYRS9bO\nKYHv\r\n=aF4O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/button":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/typography":"12.0.0-canary.d96f0a1e0.0","@material/icon-button":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d96f0a1e0.0_1623877665275_0.746069042693049","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/snackbar","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"578e62d5392bdf1314fb2cc7f6850851d977152f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.a6183801a.0.tgz","fileCount":40,"integrity":"sha512-2GnM5OP6Idx5W/RP/uvdVaO54kmMLXLM7wwIrWVuiKTmncAQZQu2mrTC8loPWbHJV8kNNVnThKIWBKqyyQdaEQ==","signatures":[{"sig":"MEUCIQCp+fwEFO49oj0nh2OVxBsuSD/b2VlbeoxB0fUrVjZLAAIgJjNyIcfYkz5BZFajjiOG+Vw/6MM9c/m0+GjRYRPUqX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynX3CRA9TVsSAnZWagAALwYP/iqff0BezARlph+4h96V\n/qnm4x0vG10NoKwdcQsbV+B+R46jbv1U2rHU5u2i3c4IYiWPCFgbpCm+ldUf\nbok3shV3RhVrKVVYvBvwv0cgFgaMbqeDHE2VUmgpQnsEw5w2daXwDD+WdVqV\nnIf5t5Aov2C20icUUn+rzg3wUORMRQFd9oCQbyHF/fEA1DLKjACEuHyYLROq\nRmDbJCly6tGspUwbx73E1zgGqd8zmLlTa+OC4gKyE9PDGLZJ5bvQW3ANqgOe\nZpqVTSpm8DmjvsjjXABrL6kOt9UdLKh0SAzDfqPWwLCOSmEZbcyQ4iysXLra\nLXnYLLuAJADDYzpNfDzVombKcMxdyHm8KfSMk12R03mjEZd908Y4BqnZ52T2\n+n9Ft9Suvmdup/5ClsuVJJNXkcexmGum7hi0fqDucE+o2/mDk8xQGAaYmqEd\nca2I5mBe2wwmTrF6LKQZD3/OSIV+VlztQeWcjKsdqi5yLhRjzVxLNnGjeUvn\n5S6qKx+tV5QLQJlQSBaqXepWq0FYsUczfENlLYGEt3sQ67WNzfwOqR6kXm5S\neDicxSgqSuhV77MnvJVigp+dbRy9KSW96Dj1rp49gv9zF1i0f3JziPrTF8ja\nMGBauDuag+iENvO1Bb2SGcyI6v1bN7iaNSjoPW7WJd/AnmVwyoEqPAqsOGy9\nX9zc\r\n=VQvL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/button":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/typography":"12.0.0-canary.a6183801a.0","@material/icon-button":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.a6183801a.0_1623881207066_0.7012488212564572","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/snackbar","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df8cbc0f5dfd9dc7be9eb6bc949f33b19510d68e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.940550232.0.tgz","fileCount":40,"integrity":"sha512-M7RsPPU7X+2Oi7/+k/R0H0AjSGm+RQhv9H8T3IIMJKFM780dnuuHdZG8TOxH9UOMl+4uvYo2m8de77cP00vYxQ==","signatures":[{"sig":"MEQCIAmnhFRlpcm28ugyNMldAWmvjdy0djGuAegWoyLHbqO7AiAOdRFoF95EOKiLVgQDOnjTPPLftGDOTqHm6nnYqkhr5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VvCRA9TVsSAnZWagAAPUAP/02epzohgKcVLYyonm7j\nTeLcQmq/JJC/+vM7yRQB9mkUE2UdH0ZwX1MqxDMcEstPnGsBel1RDAq518Hi\nEpL9wVc1ooC/l/B8THQAmsto72CoUgAYZibTOH3E6Eo7ZWcyFFkB/DcNeG10\n+Pnxlh4jExCq6Wq7MmAUc+T+TLGOA9RV3x7HDr69rCLR/0xPBca5rfqD7JHA\ni9V6IdBA9DuR3QQ6zZrJelT/h5BbPylkpmvegeX94irpm/lhkHTyi/FG1fGY\nTGIBBB4LyxPV3BvjD/Bamx32nLSzURBSJEuLJDP+hdrT6lE0EnOcmnMtVGxn\nKKDY/r0Mx9n5RDipsgH4MY3YxCaet0thDvFemtE7fyhwjCinJK8dWNpQEZN9\nPEfycrrpSKQ3T7z4q/sbbC0FPH6gvZQZAw5jPDfXWlW6pZcuISqoEs6BQUYF\niqcT5JRINLsXbWjlhqd9s7bvSzw5R+W6gQQWqH0379c9yCnGndr1nFqMczWo\nQoCpJRwI0xd1/EKQ+KNkVx3AbCdFO00Mej7u49ZtdzD0qCjsnJWGJ/owtP3l\nzXkkUly1ecmYSl1dY4Gw32sY7ZZqkjtKp5yFc8VS7KCBS+xJqL6UOH5C+jHN\n+XXBfG2bctJjOBlnhcUb8vwAztG9rswIbKlk6ZzsqFAViEfBh5ve7D3mSSvA\n5gZw\r\n=JCl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/button":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/typography":"12.0.0-canary.940550232.0","@material/icon-button":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.940550232.0_1623958895084_0.5482187473499336","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/snackbar","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b27e129e2e41d6009aeaa53c2abb5d0ddd4b7378","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.f705e8048.0.tgz","fileCount":40,"integrity":"sha512-PDSzf9ztcxZq7pn4Rsw5HJ2awAeO69MOn+/a6U1fgx0uiE7kBr0jzh2akgv8YO1FdnYjhjDpIwjfek0XkZ9yIg==","signatures":[{"sig":"MEUCIQCXGr5vUAzzBNGkMRYU+iXtFxKZvcvfYxx1SItr2T+RCgIgNT//h2GEPYyH3oCBIYkwuBq0VrEckaNKZ4RN0jH2WPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLsBCRA9TVsSAnZWagAAJwgQAJaem0PuTxacH/cHFHH2\n6Z3yBfcygsAb+482wzJpWizYuxBMOYCQelmuO1JJeMoEc+D+jJHl0FjJiFvg\nvpnRrMLxoZvjTF9VcU4R0UQOAktxsGET48V5t8aSI3Hnq13wqXnp3GwJ8/66\n9+s+QMPHxTnb/UbofaHZenzwZ2smpLUqlEqCVcgtc+XBqcRdMuAHm0RRveKk\nKV3mhiH/G6av3rivLBNGeRybL43dD0FQTvhSGc4FoG3DSTFKMADbgB1wFl6y\nCvWzHd6yNRppANMuE6avKKe5UKsn3MwtQ4KawHECOGQj+lHN/4kFlgVdYpN3\npSDg104hm4EI9ewovsxmdTdCJdJaEZUmfYIlXjZjarZec4VuZQ0m5F0ZAAh6\n54VtVI6uHD0sp8iwXhgauTeBdPpqe590+1XqA88SJoWPVXf/qnSXrqpDS/kU\nrzNYPzw/a86mEeMwM4f2Fdo5H71AtWWw4vv/NM3LaEZnAsfuAjNX3xW2Dp3X\nsXn0emS4hdtbp0nVUyCg62DR4RSEr7g3N7iMB+PhOVcZICaD3aeYqvOcLlr9\nVvZVKOO2RbMibd8eNhmBEkkRZ5oFck57PRx8eZG1VTe0Owe46Dlc3uVlqSJC\nHaVYJGoerLG4k92bN55i/1mfXB4Zh1Gq8t7XT1sDeuNqH+hHriXp1cyqWFLq\niC7h\r\n=I5Dk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/button":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/typography":"12.0.0-canary.f705e8048.0","@material/icon-button":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.f705e8048.0_1624029952584_0.9964531172760085","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/snackbar","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e19d7a99b3005ebb0be6d022eaa4dfdcde0a2336","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.08d791f37.0.tgz","fileCount":40,"integrity":"sha512-+YsEbHrGbjvrBjL09nEkjijQ8YZd5QzW6hLqo7XpyVfw7+hQdwIZ2zy/1i55DCkWCOyukLn4LGJEb5qMzAkI3g==","signatures":[{"sig":"MEYCIQCvzAawwoceyFcFSMneakba0L2MsAzEWQaejXDcd6fumQIhAIPmSWBJZV5nSxLU60LLtD/4tuWukxT1nWxULBKo/RWP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxeCRA9TVsSAnZWagAACFIP/j9GJ+4+fc9vkHqHqhwn\n0RaDMY8/bXhh7MYLFASklSmH2OSBqst2DwP1FMSAIuUryPTt5mBV+pmhE3qD\nb1maU5kkCrwRD5Wbn6UhqL9joST1arNWrecLkz7VayRBWugxjGN2+/WTu8RC\nk8KzQ1dSmHhmHcscU4681sFpA8z4/FJA2V0uonxRhxTFhuEYDqDRkdcW3ZyJ\nSnN9TnZSM2uFTatcTZbyiWlVD7tBwhc/oUw4pOkhiWVBmLNd2Ie5hpg5n2R3\nM6UaSnkomujb7byQA2Dq3gM7rBpwhtGu5e/pS0fvIbTJmOpY6wlq/hLoVJFV\n+VUnubOk5CMyXiwm2L4hdviyw/OEGt42luUvRY9wWry7OIOEUMwnjJwC78mT\nz1XtuX9NXU9AIdBWqGNQNWK3MiuSExtzQ8muKxmSbe3uY6GNva9l8Xq6knoK\nD2eDgxOHrbIGCFJa6tP8g2geoeZaHDXxXRo5d4CuQ4qLy9j8VkDkD4hyn/WF\ntR6e5bKmsJKdSAq/48DAo10g6a73h53LMR8pp/LhLRs56MMSB95sArzW74Kw\n84m2Dsv4/e7QYs9VmApg7cPtq+MHGky2GAHuQF5mevrrinfdx8lcqbLWu7AG\nJY4rA8anyT1IluuFWwO7B6ZDsyCiLDRkvupzSPBQ6mZWM0xhzUWj+RBZ1lOJ\nuSb0\r\n=vFJm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/button":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/typography":"12.0.0-canary.08d791f37.0","@material/icon-button":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.08d791f37.0_1624050782519_0.4251703736521635","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/snackbar","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c307bf8e6c6303a07b04bfb4b0648787486c770c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.e38d7440f.0.tgz","fileCount":40,"integrity":"sha512-YWSMu8BsuMuwS6QAM+jtzirxji7MUFB4CCd2s+5YV9frzqMav+r8xmnVP47QrvXI4+TwjlNQGXUoulwHmVCOhA==","signatures":[{"sig":"MEUCIAb9620I2vq18WxaKE2Mh56hlIChjAIoqSFAnp3LKHPwAiEAj5tzxsO/gR0JqF+sqrLrrBC0RikeGI/5YMYk6odWp5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9iCRA9TVsSAnZWagAAW2UP/1G3gfrrhwsDUjJTrt8X\n6LcchOHoK/qUEI+1DEh8FhkI96sOcq7f5/3/00tyz5Z5JRzm4U0a4ZuJ/OzD\n8V3Iiu3MX4rEMSLZZ5Guyg2rZ2lEIZNbz2GuedHx5mcp8c2L/wAaUma3VPGp\n/wH7T4dMtsYmtiQ9mhN2fe0QwqCCLBs0RdgTNCGXlF1bs4VNjsW8ai4ut4ap\n36cKjHC3o/B/2mcvvv5BiGL9Vu3J8svhV8LVKxT41fTWlyVtjhb8fn2hjw3s\n8H+BxiH6YVZbH94Xg5lAlShrVylLe/F1jYLJMMWZwwOk458X0T749oUGKjR6\nT0mR08Uu01umPz81hOETQd/jy5Pye3sirayZvSBd3ST/kNODW5aXPrr09PA/\njSB6U5Nqgdj+z1K63ZB0wgzToAkv2mF39ylaajMMInqJKjukS2cjqSirFdie\ni4d61ev/xi4O7Zd1mvufxxE9UGeTfbaB6o9+HHGiv79YZPj2a2XkC6zUlyed\nSm5OuDFIiSR18w0C9aOb8LSV8BK97FzHzobCJQOu/Atpb/lGU2YctdC+AZVK\n8G6dcJjzoEHlPA8QYwkZ8Xpuzo9jWFORJOf5zFGiuhcqbZQa9q7MuhpeqNQd\nRFI2K7SfPaT8T3Af8x+/VnZPWH4/i4DZjPWD7Li8v+x2M+x+aNaWNEiAvjUT\nTlcl\r\n=YPDW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/button":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/icon-button":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.e38d7440f.0_1624297313972_0.7277600375685103","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/snackbar","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f50e48441aab28a9d10ac00658e1aa6f2cdaa4db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.75900a5a9.0.tgz","fileCount":40,"integrity":"sha512-TL1E8JIcNut1v+ikAgUMYxRbMf1w2v2ymrWp+96zx9P30fMyC0g1638obJfSf8gWWMEe20vLZXItgA01eGK3Vg==","signatures":[{"sig":"MEYCIQCuWy5xGVKK2+nx4DRuOTZW7BfoBHEUUaY3j+KJB0Vk7QIhALwiXlJZgRijlkEOgzIWVsxkkUt7gocshO9jcJS4gl2y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NyjCRA9TVsSAnZWagAAhZkP/Rsnau4axtSq+W1kzU4P\nhJr6GjmwPSHyvBODnv7+gk8ZRqFGxAw5I08Zw1uo7ekLdaU971dvn+JLzayT\n3KJt7D60xXCHY2/N7+RhVa5fH7t0ZSLeTz6hhWa8ufvko0wL0I0vddVvIb25\neU5fbwRB6vV0+x04OrmoEtWP2W0g2J35FBrYKa/U8NxXLKifZoxbjcDJRoyY\n+/7UnODyhc5+0O5nThbup/yb/nCDrTfraWzIaVNOJATwXI119MDFc1Gd0nca\nrfNh0EGF/E9wV76DsUh2lFwGfldI+2cbjPtqEd5bjKmgbLOHC58vY6PC8l4C\nyrFXThJwai0I0505PkUWq1Y6DUogvsxTVydYZIaT0yHeA2upFc1Y032Hkjef\nFxHbz9FWANoDycNvw9FmjTy0VfVJ4Lki6h+EC30g8+ITc7iAJlAHKHaoTWUN\nQCY/OzeJrI6QdCtrZdluZ09wSTk+jsDJPwzDGbvWETqFY2lvOSamYC8/FZea\n+joXWGnMrVTGETWDdDZh9+U6i7ua5vk/sQBzjEs0/5Vx5xDlQ/IjXyalVjZZ\nRJF1zIKq/yEv58wbjOYmKO0PZ3rYDdXY8N37mpMEhflwPvhFbXKO0VASgODA\n1RQ+gw6db8/Io0kExD2Drql6R8eIVyYxZlRk+zS6ISt1AKHU0jYAxl9zYKem\nRkAz\r\n=t7hM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/button":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/icon-button":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.75900a5a9.0_1624300706480_0.9210602423318097","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/snackbar","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d23166f653673817e560c6ead464c9a618b0fcd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.33e6f50e9.0.tgz","fileCount":40,"integrity":"sha512-E2ICErwx25f1q+9cjN/2qkkHaEAQU6KQ8PD4DU6Yy+PNz0TSQm7yEFNurev2EvKbyvl+kQnIiuzgE18Lh7X6tQ==","signatures":[{"sig":"MEYCIQCtpaGXDmbtoqWSrk9uv+Mn+xm2jdd0PuwGX4JGqxPlKgIhAJEXg41vkIwRSV5omJIzXMcFnC+WJTVAIJWMimUjY17g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nyiCRA9TVsSAnZWagAAcvgP/RBmkgEMCJvrzll2RSRo\nlhsvKvxkAEUIAQ2YG3m7KuFsq5uotsfP59kVhU3M2dLf3CiJL1VZ61tnYP1e\nyKynHdEeinjEah1R3RT46qDFEyADA9fvp+lKb3eHZp/ok5yyXbqqEb+fp6J3\nd7jFwbmYoN84ntzegE/xM7CWv4ryp5peiBTs+UsC1S2z+PeMbJdiYHvwZJI7\n3L+C3lvGxMGP2Pt0ADLX2eNHKixwKmv9bn84ixK+9dXev+yOSxJURjk8vjaK\nPo4RgjYQd6hDkpwJUQwm3qJYh/asXrN+i4orYCZAd4FW2MqB3X5t1etIKiW6\n1Mu6FO95ayyFzIj8ZUYUgJiHDzcmVZIfPjX/yvAHkXaG5f+uWMg94DsJdhXe\ncMqCWIQ+Cxt+M4t1o6u2B2t9mfkeIJVzPO+IVDB+Hv+Vtb2rWLFZBE1WSRv/\nsF4wRi7x0ugbHViF8oWbZAIYSIlx7+BBZlKvP9GGJ0wzexB05wVbhOAf35/w\ntOukDiPvA4U3BFE2CjHsTNw2mzstQaAbOIm7OkhdWzySVQHhoL94OR9OQH5a\n6sclQq/7ZgKWFT2jU1A7h5XTCCJlY7mrlHkR+UPn04UgDIuvY5Wz+eaybPpB\nIBcg4vdwqG1uwrwhwfEOAT/xE+oDv6iFc4fvIbhXhSqS7IABQuOCRw61XMLs\n4ayQ\r\n=eaxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/button":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/icon-button":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.33e6f50e9.0_1624407202420_0.6426312487300043","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/snackbar","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a88da3a9415d99cdfd60141bb2542eeb8c91af3c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8c685301d.0.tgz","fileCount":40,"integrity":"sha512-pO6uEVPc6M9NO5WQ2p4rRxugfdcHSjMImnQSVNL+5BLhoZdi0D3zTVdD/L/FUPt0HsRfg6lBKxJ7/RKrZWoHJg==","signatures":[{"sig":"MEYCIQCm0yjr+MTA3lwy2lHo03i/iY5AwAoWyrvCrTkTjd0hXAIhAIarpImvMj0VqmdgU2b44N6IuG/wb1fDPoW0DpRi72Sb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03y0CRA9TVsSAnZWagAAQjcP/R4wsf1HzCaANbGn1+l/\n+S0Q2srfR6qpwjjT8cGhY+RJv0gpqjJFhk8Yt1Ky4ZSeRY/APwxADW25nCMG\n7QvT0DsPMeOnGH2g7SSVS004FIcEV6IQJMbZR7pqbaLiZAeODPVTfgr6lbp4\nIWaEX5KuMfAWs/HttgqRuZGclTrygs4h5LzhNDcrUAUNdfkRiMxipYZal/xF\n6CrHnuZz9GRog+/xhovP2kXu5gDYxkYOHkzD7l66831CC8QGQ/PoLJd/Rz+F\nIN/wlNkLfeTYdQVbd236cnNA7RoWK3+jvCcCZI3SGGwKtcFJ1O13lx/rYPAN\n/at4uS/Yqd1j9+QuGqzR4vGWgcIwdeivgv6qlU5I7XRwyF1KrINcXAc+eZw2\n3Q55J2GJPAdu1rWHc8iUxE9/4eIa7tHFFWwm3pbYQ0hI/tU9edKuBNOqnuas\nLRFa1O2tehyjzV5Pbw1gHEN8pxeJpCr3bE9/xqb7n72yKHr5I0U+ZEQBdUpt\ne2q03qI6e3qZAALIMjnvBaQL8lHlGq4lIku2nl1wd1d5hVJGrW0NDylBqGZ0\nxgeu4ZddeNh4+eSAWzk+7zd2BZjRr2691pOYIbVPZSO4PvJpv9KuEIsFJeSk\nX56t9qi4VW3nA1jX/wdqJoq5EOHXT0IErZgalIqndwwgLa1WSziO6ZZMGnRW\neU3i\r\n=eLtD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/button":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/icon-button":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8c685301d.0_1624472756218_0.40125937063458905","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/snackbar","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc5b72168e5e25fb7abb466982fc940e9f3e981d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.8c7d994ae.0.tgz","fileCount":40,"integrity":"sha512-ntMxjIvzlwfxpZHIxnNy8vSP0Hh9U4s/Ri9MuO3YEmywsTn8eZZehkwejRRIINlbysf/LumHwq47RlBEgVmnAg==","signatures":[{"sig":"MEYCIQDMYz3JOtCYXhQUCRGcftp4AARk3tIlscSkQg6h9xjPzgIhALD+ZJ/5tVStvxkkkrhICmk0k39nP4Uj30CsUjUXD4Oi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04txCRA9TVsSAnZWagAAouMP/1QqhqWrtMCqCn6FEql9\nIjxtboirgWcE8eF59FOxnns3RJ624WOZ8zqbHGn3xYHJibGTl+YrvHURDaMr\npdCDC7R2rogNO0oLfaYzG/zM6wojUahnyOW9zXVIDalMXubEE5HClsLS7KEV\ngjrC5N4mJabh0DRTN8GRNBgMhF2dYUDXQJeu7drFwRFvmyHk8Rjke6SqGP1N\nqnGg7IJykSVjksGvG7byX4rYYap0Ir/9ZzxkNe3KqKgTxQs6jACbwKq5K/DY\nZonLloURC6/c82Wq9mfQFMOF+B4VIA6bVQLrdpnbatPFqOu0M3/WS2gJpQ+U\nfAsUDjsTPLBetuCtaK0Gf1ggvqELKl+xgGtzAeeYmVtlJTrLrHaGnvwsoOAX\n1eaIcvZxQw92Q+Tiz5Ysk+oA79Rov5CReUszr6Nw75QaZUahj3WYOvGW6RKK\nPlPk/xgRwGAjqXnT37pUpybaIDsFqVlKv5sREpMj5AmTvnXSxM/tPTyJ6rrA\npzg4GaD2gEEdFUjfNR7BCjfz9EDJOMzCHWtCfJNoulSW5Gg0gok4x2Q4/vdA\nHlzormu5DXpgUF5fe8N7nU3tKMldqrtXpcnJR+IdymQzLs2i3piJPHxk+v61\nhFJXCaZsl5e8H/lKFPKmPKITWIRGMoWhnuzQWdsY940zXQnQZN1ktBCmuQV4\nQbfg\r\n=qidw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/button":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/icon-button":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.8c7d994ae.0_1624476528738_0.9967437875006795","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/snackbar","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e6dfde8d23739e3b45a1f6a229e26795c3e97d8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":40,"integrity":"sha512-8qjG6PJXHKKNNGMvXWQs2VVQ/QmKCtd2ezMhxbGfzDAVp6HBG4uxIWLW8J97QS9yWzSKZDm4T7veYI9yBNP3tQ==","signatures":[{"sig":"MEYCIQC2qSlOBvK0LCO3LgNgoN6CgLOhJnioqN1MHSi7M5xBegIhAMY+bWfkxoLkqX/TrSMoIygD0CFlQ4dvNzX3eQwKtMyq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K/QCRA9TVsSAnZWagAAsWIP/jjy3gKXzgvrI6v6xVhb\nCkTEz3IKgZkTEyVehwYDtbfIMK0NIh9GLVJBeV/RJCcnAe3HjAhHnROA+XiF\n+hmXdJfINyPfOeg2STaKmvJzY4nMEB07oHzRgkYP7yfKbrQ1Y8NVuqwU+Ybk\nq1mOAwA69ieTzqU4sf4yeh1ugdyCSnFr8mm7kK36TsWciU9dDjorLHhQdIOP\nshLs9cCZ+ttZGQdza9pyXx/Hpz0UDb24CqOCraO5BNN4MVqgcRth9LL7oVdz\npE6i1Y30IjvOSLOQgrSUDDrQMSFPan/Qat4K+AbB0jIRKNZSYCuWbbEjo2ab\nj0lCdZTffNKjMQu3Gl2xeiybDM7VEKKVFtuRldvuxPurRpYh0red7CcFDWXf\ntsisLblrin8WlwN3K27b+lwTZvL4EKbijUVs9IAaYAvYhjjiesybs/zKqA52\n7kZGPC058AE5HsXKgZmTiUAy5mEjA5MHiaRfmyTkf0AiYuYkY/jajFaJJ+Gn\n8fx1KOIsp+rpeCUky62Xn7vtZAGiW1+vYWpwbCq1mUwPeAFZXDDGuPNNza1O\nHThWL98Xi6w7pONb/9rmqqtomd6xhS3Q1pUecxufkkTlXpTLJG3bQQOXmrNB\nUPZfCq+PW2qjbUX8vLTd5XfSodj6u8jTlyIA90ijI60Q8hIDE0b1+QnjW5k6\nPrjo\r\n=sGn1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/button":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/icon-button":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.4ccd39bdd.0_1624551376253_0.9421232409886204","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/snackbar","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cadeaa6425eba063ac19e1b9ffda364628276e3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.17553e9f8.0.tgz","fileCount":40,"integrity":"sha512-ebqIrw0ZS10aNQO12eyAYnm/3cFSbg1hSURX9O/HgrwT5v1lyTRq1cPyN0H2+qNyepxHZo46ymPVKfB6NKbrpg==","signatures":[{"sig":"MEQCIHb5D0ksTXZnTRF9m/PTUOI02u6hlvrNmdCO5i8AklvqAiAn9hF5ZoeoOmLgp6XEwBBOzk7XFzTDli9AbsSAWFs30w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":463054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lMCCRA9TVsSAnZWagAAp6gP/07gqQsmF1lwzRJK/QX8\nhq5myX6nGcpQklmUivgdzrZ5zRpPxp+fjdor6qSoMNhM20xFMGTWVSRbqfx6\nBDLVX8sGY0HIaFgQHzosK4M/qwYV2knckm11weLHEk0OsDDA4zJVKOa1L/49\n+gBMasHJGi975LeivkSXroCZzbcMP1ZYSzNz+QcPTZc1agANPg3GMGUFxqPa\nSrJRxJE4TfZI66ofHwFrUQIp83OSyjNOKN93GdhJgoKEKkqlLGAt5Yf0eqyK\nZIHckbckZuGp82VgdpZo6QL9daWRYZstl83hUf3BmCpQ5grhkZ7o62ajxTXa\n8NVSSiBQ35fa/Fk+728qSaQKdCNH50JbBWwRuVZqjytl+iJ8MQ2ZbOReeD6I\nH06Xp5eDUdHphC2G6vGvHHh2fUDJSDTdYyZ35PYd1OZ/TpqJgsQ0HUNtplws\nPjfaQKNNr9x0+WppiB7UBsvr3sGAICWg/ULMyW6x8GonfG89f0DNlJj7ltro\nhoslJPAytMIfSXmmVMz/b4rBTDPvo4H+2oWBS3oqzxzyxibkkYhN/VdF2eT8\n107c2xyUV0GacPRRE9emC3asgKsB6V5++Dv94yPk/pa+G4MftTZyNCNqG+Ib\nD0gCkmNXT0GXNJ1YK0C1s8AQmwgP7esjz5mS6o76TlH5XP82v0flMNAWcwg5\n/Isf\r\n=n+DI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/button":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/icon-button":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.17553e9f8.0_1624920833533_0.8198547937011591","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/snackbar","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7f6d3bcd50aedd60d43bf6a77317943abf5c9ad","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.4c80072fd.0.tgz","fileCount":40,"integrity":"sha512-rSCI3McUjF3C3OYAZSZqqPiBcGElM/6cGVmMXXJdEPOl9Dnuu/p0NrLpY7HGTWorJ+TS5ohZ2k6ITytqf94ThQ==","signatures":[{"sig":"MEQCIGMo31z/jzmb5i/02mSKV1psOfyCF+8xGHzbGGk2gPyBAiBXHBASuPDPognpD1Taz9U5hd0mfObK1fsSp/fl+3xCJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":463054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22mGCRA9TVsSAnZWagAAjqUP/AknICUwA/uadzEPYGZS\nWWBVg/m5voPXqgTw7vz+G+vR0UKlRrN8bfIui0wyRQzlk4b4cvqNTuZ65os/\nGNz+xo2FGwVy1M1oL5ckSdi9stc8/DY6w26FFmVVfJDvhgT3fQxKFIb3+AZF\nDR/thLbHhPazhHahNCoP67Aj7AH8+3vDuHojjWZ/RG0otj6aXN88S9NggLSE\nHHhSEXFzx+KeiAPaCOHNdXCzZbY/75bYVurfGHOLUf4wN0g0NKkrQSNmVvl8\nq1Uva//zWErAv9B9XOfSaw9BmVnqTsmNc23RtkXwXOzY02H6dOJlUadZhefg\nJXZ0sBo9+/QZB1WCyJRHlJ+8QEeeIgU12SgeNn7eJFAMe4f9FDlR3cNXdq97\ndJK8IdLfnYMX/4BITVEaK1RtpFZcD0r+GU6FmL7BGNIMRiDPSnFJySHguJwW\nGU92REkGARIjcDXrN0swFRD/UrH+aOqZFnptFPBYdorBOwO5s4C6i9IncyRb\njgl7g0oEMY4ZmJliAvNsq+dtlx9HoXoM1wL/bQihSDWsXaCA+ojEPguo44e3\nUOCqElXVkfsBix06pdZYG/ymxv3Ujbd6t3xE1XKOonFQi23YxUTkrlqGxQrc\nvYg3/y48PWhgDi0NnTbo1k4CrvcAF2O+csVwnt9cGlt7wlY/+5eMsIlx8YTt\nPS8i\r\n=f+EY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/button":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/icon-button":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.4c80072fd.0_1624992134282_0.1717233381769907","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/snackbar","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f168d018f52f7d9c22b7ec21c3d0d3654b9212b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.796811db7.0.tgz","fileCount":40,"integrity":"sha512-ltbIAT49Otre5fpAlF3QpzEyBDWo3vgrQsyPI21hyagdJBONYpzxZuGXzH1Jz+fHGlibX37iWZY8prXhvoaH4A==","signatures":[{"sig":"MEYCIQC3B96m8YFu9b9UqtAlfv0famENxVy6I7aUAJA+HiMNiQIhAMTYt4MzoO4VYqD5pXx5XDVdBnJwXoVrmPcg7bUug0lV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QaeCRA9TVsSAnZWagAAImUQAJVtiqURWd7O2w+F4yDd\nr/1o/5JV8ZI73TLpaw0+P2A1f2iMu1K3iO4RQm7lxvFWUNVHh1YLgES4U6nP\n/301P0+Lvw/nt/NFCu5uIQGhASs4dsK82BlNZWdUhuFg8lluIvYOMAUriOTp\nz9yNK4wq4u8BK9OGg1r52q8Bq7eaeVwEXCXJE3ebP86G/hVG7GpMFfK4rC8F\nfVraKb20ecx377UhusgQlTC/P6MwqMtLaibvKNLzPzC/PIeM9sA8s0oPnTBs\nt4dm1XiuRuO8pu2WzbV+6TEn8umSOqu255qtw7F17j2moThA+MdcgQg8msyC\nkBaEWXJnmgmvHhPxDVwvFnVQ61R3OpGMGko5l3ExgCJZagR2/BwHMm7Atamh\n5/RxpoVzxUIJ2wWYzRdyF8tBN5NDYa0u8zfJLM9wHXMEQtOW3oX+dqCStUlK\nY6tFqylA4W5raQXPTJrzBS2cRjhU5n/Z6+5eapxImFZQ+dRjDqlWnciuxSav\nOhwPyH1wGpN9wWNCBUC9Vuhxk1tD9crQaAJ/xhJQA0lNzMWRmy256s/+v1da\n59qBqyFxxK7qTYY+bEfHvbS2PXpOuz6Dh1tu0VrPCW4d0+QgP4Uv4lVQ5j5q\nkR8BeFaM9HeEobTt84NGEsK2/VXYl42DxidKQzoTDvmQvT+zyDdkMC70rCSX\num17\r\n=p7Bn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/button":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/icon-button":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.796811db7.0_1625097886529_0.794594284834969","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/snackbar","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c998e817a13c1899794e4486f1a307273a2db901","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.70e1efdca.0.tgz","fileCount":40,"integrity":"sha512-LSCj/5tlcQGLqC3LRdpoJ3QXd8Bv7P4sxdpH30WockrLqBQbJLnGoPhEjmdCvY0Svu2lsFhBvuc4KA4HHcPw2A==","signatures":[{"sig":"MEUCIQCmk4WcYSbU6P+ca4B3Y1KDzTZVo9iyghC3cYN/eSTC3AIgPcLZkwW3az3SJvi0JNCYXr8sx/7gEeQ5NgWqJ1DstxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZuCRA9TVsSAnZWagAAsCEP/jz2ZOXjqOSlQgOebSun\noRck+jiBlLthSZc4dNhEpXvjnv5lfHRtgn0v+OCUJGxc3GU44lnsrkw4f4xk\nymeIQZaR1vzde+E43mh17jrwKN1In0wj7Ny1Yck9RvSwIQo/BcKpXSTYwu29\nJXCq1GSEtG+9pfLRKTIKrmoIyy678PxZ0p9RLvbL/Af63MKSIkHMC2pGwU1K\nYloFYHsUiBayGC++qC90vv3K/FJZbEFSOH1eymFw8EoSdZpg0vK6qgJa5BuH\ngConorr9Dsbr+VLDpk41/ycDU3Wms6+9lMCMIw8nG1n69jYgtzL9Ihi4rMEQ\nTY0sHhkhi7dFXQjeUro97ArB+2n/DS4YCQ8xIDFYZsFSpEGGbcmZzSvATtQx\nT6msTS4CBXCFVlAYDFxBv0mpNuCmPh0jdKdxt4fK+YJhKxupI+6iYlyOuuRZ\nrdz2ecAs7U2f56cdmWOs0i6qD8lGF2ExaGN9o+kLkXkhO3o6ACSdiyNOJ7tq\nDbROYau48mXqkjVN41OX7l8HxuuUBNoA2AB+1SkoyTYqCxA5q7189PosFVD/\nLgEkUh7j+MLClzCtt9svNdQJxExTWxxYV62N4jdCs59NViZ6tVVHigoEC6Pu\noH5JDCyGxFDbc7S6PnAROwAiqEJbtf0i6sTcC2KSDlVoI7GwA5vrw0V/iqep\nIaUP\r\n=tgjc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/button":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/icon-button":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.70e1efdca.0_1625159278436_0.951354161938774","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/snackbar","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"901a91d21b79e3a9740c5205e6d769f948691fd9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.435866d32.0.tgz","fileCount":40,"integrity":"sha512-noAm37RUAsqcRB9iSh22uc3PS22S2GrwabRF7Om0aSZf6Rnpoa9jx69W9bvRIzsTF6993i94hi42uNZMw6a45Q==","signatures":[{"sig":"MEUCICBjC2mqz3H5J/Y8Bjs0Jw0WMzyh1EHNVDJpWZ2gsUmZAiEA5BYTD2B8kCVr2gGJV0Oy2EyM/uaIz3J3P2wvTuDdTaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31lpCRA9TVsSAnZWagAA+N0QAIB+QTuCh+tDkoFwxZ+t\nvCQ5mqzfNgdLtKEU0+CO6axaX6gP8ucFJ+K4M0ziYXBIL85xkhIuKJbI7Zj8\n9Oxa1YR1EPzSpGB48FZmwaLapgYk8mY/z4pd5e4NIzfw31Augek504h++Jjs\n6dAycOpq8dieJzdeIAMthOaYTRLgH1Awm55BOGHJJ2srLo7pm5oUoG+YXFYW\nAANcvzD8Y/e3mceLKRbOrR+Fw0YrEicQVEnsanuQoRSF6TTviVqlpHMg2Sc7\n4tSDSJGL264A0kPD/clzERZwf1ozZMmvNAnhbxkG1+GskqJWZvacS/e49fLC\nJmZ0B+pWzZJYnFIo5/ntl0t/+2RjmMxlUKMF+3AAEl4NcsTSXMipyQLnMIxv\niOKaUiPyhAD/h3Cmf8280rMgDXJv3/+gem/cM4kTH6N5Wl4mBy+cZYoJ+5ms\nZP+0bRiWuv/mGkt09QJcZl+GWUfge4fCzHPTm8WFV/Z7N4SN2jK1VwzLzQ6u\n2WvHdcQ8EDj/5B8EHJRm9DHrS5pc9M4NsQCIuBJhYrj9J4kW5V5eY6EMe+4r\nA1OB26+6dkj0dBYC6t//qmsmnNh77yk+BRBehPuVtWvyJuLOnLS2dXXOYAa0\n6NGtW/Uvaise0qWKNOVQ1IJ7MWKECDVF3koeRweeqOMdZI5MTqoCiLYxe4x1\n98KI\r\n=TAue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/button":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/icon-button":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.435866d32.0_1625250152695_0.2537419763251283","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/snackbar","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa6f242ab7f156c0fd6caf8de0d7cad9434b48a5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":40,"integrity":"sha512-0FNEiunvXZq3ACjhvpAZTJuzWome9nFZRKwzA4Z0d7u+k6pLZeipyKGiCTng0kaGhmKk2yUR79G66fAVap1APw==","signatures":[{"sig":"MEUCIQDsyphdogCvaK7aAtIA5MvoulW6OjJACn1iV4S/iIzU5AIgQt+fZhP1aC2GfBUUdZEjOKylXt9+acG4caMda4eE0qA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36jVCRA9TVsSAnZWagAAnAgP/00v5o+MWzWEsOB+EmSj\nbCD1f0YJVOhy+Be4ID6PXAgBeblHwkr3RMFlB8eSEBfFUA5id8nzRlDSHHFa\nB3mGYqJq5k+acIWxORhwbbj+PccuJbm3SJTif/eiWW0rmvR8Vb/xAj8dM0t2\n5t6edjOYlwkDYc2yTPsNHASDAP09ut1/jFpGiHR4WVn9ixwxQ8uQC7Pr0sus\nis3lejjf03b4cA5jjaEwcKtvtqBgH7I71f2pnMKPJkbE7mjup4+c/3a2m8H4\nFVpO4E6fp0vNKraQaTx73+vhyYHlNIySgKMH4bv25e6+dIsbso6zq6qDFzjA\n5oXi1b9tQdklDIStXp2maNEMc13mlyxvErKNYrUqSngjICAkbqqCaoc6d6qT\nghZNTiyRNHrj6vYGXBKX+HAQdkR9j3LiKOkRY5iXqpTpE+pQkxzZVQfAue46\nCGvbO7f8Un9EloViliVxgjmmwfUUrr3yCPkitMOgGY66/YmMDSLgb63lDut4\nOe6ED8R2HzcZ3ofQEjXnzy4MGGE+A/CAJjwqVOvcWX4eCftbOHM0Ywp8qYB9\n6u4M9JsjxLG4yXwyU9I0w3Q+QMCm8/9C2RbEEi8umLc5BcnN12A5cFZ9ZBXs\nhRlR5aTRZZ4PitejAWPDbuib1RGXJjm4yDi8eVOaf9oHD+Sqe0g1r8MA2ESd\nXJM9\r\n=jASt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/button":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/icon-button":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d0f9f3f2e.0_1625270484589_0.3297698650205987","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/snackbar","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0efd370aa22a71d2a138448d5bca6c4e52f3582f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.adeac0549.0.tgz","fileCount":40,"integrity":"sha512-vfuIw1hcKzl3GZ4jpl3K4E0AlujbeM4bANQ1FKi6Ae9TUcAEcDxwoNXSjys9v+/29OtgmYMMGe7ttpWAT9alBQ==","signatures":[{"sig":"MEQCID+E8vcIO2csbdWuhS8FJP7CJaLnHofxVplgQ6phHEXIAiAaF7sqhxrZyYbBZzE1X9kIBH8Vxax3gNR2k0ifoYOMag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xWUCRA9TVsSAnZWagAATecP/1g6XfEr7lLvnCXysSXF\na3H/2oPq71Zas7nJ1YvopSDefySX9WQadbXLBLwzhU3QTlkTsyxhWRaBHns3\n2XyfrbKfT+FbcOFwp+W63daXYbZuzr5rJ+pjfDcsRm79lCu2yLdcGBZJPsED\nnTBbF71lWBmJ1Xi/wO0moPDfQt3pONN7oxYkRt9Z9aVC4QlLGFbfZGkprZ1b\njpEbtir5WhkXmbGxses7bUVKbsvwa9LUZhoot8yYRi57ICJaK+8UQ2W2dy74\n/zp3Y0Yvdku8Tu4y3zkWjiykTwHvS/NXbJJRJZw+ZORovhK2IK+UX/eSsgap\nZcEQx73wsuBz2UOc3NRl49kUjbPoNYKALQLAGMSveX+PnX0zOjGdp9OyGGyi\nzIZUmSPWBDrsS2Rr3LaN2PZmbUe2PsAHmQ0qoP/BH5KePc7avWWJswa2knit\nlcEpYKGEBcKIPZItasM5zO4Pxt+YRBi+UoPKvaYmPUuEWiPlMhXLpHzYwt9s\ne70oQAUzeT3lcDLnVowtSVMT1Ko4i+iNvV5KoHTX0cNLhsTtcjrHvrI4qnng\nq7T2XyJAhQIzy8FD2h+UUCqMd18elNGEWlPdJ4iZTZpiDghCVl954lxJWcPW\nRBPVxpApSJQg/ex6wYc6ypqogxAM+n8X6FX8eQ71tmT7xFSk+BfAhcplmvrP\n1E3q\r\n=Nl+d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/button":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/icon-button":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.adeac0549.0_1625757076161_0.3324573236971431","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/snackbar","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f7486fcc2937d5895c84e001d0a5a13ce7bd88f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.068fd5028.0.tgz","fileCount":40,"integrity":"sha512-9C+GbqrNMSKCISoELvsa/TziHxIFTYR2Et8+vmEgjlhjscTXAjfslEc661u1X4sZH45qaGcc/fNlbRoK14O1UA==","signatures":[{"sig":"MEQCIFFUw7W7yrr6gwFRBZ4btnHeIXnBfcqZAyVbItXQzAaQAiAS6V0nlAyedJ3pxm8SbzU3uAhQkr2oo7mh7e8xeU8HJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":468036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xmCRA9TVsSAnZWagAAfl8P/jxXtFiMtTSRl2oU4jwu\nshRmrY/fXbGm7oh7b9tdql7t2LBvn5c1NNpMAMuFTZDu7Ney3phTEGzRz6S2\n+raiB8NRnvCGrpIjWKKS1hU58pqaDuILdOgkLKPH4FiIuo1hHi0EPeZHgib8\n7koJSlsmJF6zanFpVqgcJKyH6pZ+VCpvX1K0+F3EyY/O34I8D9xBysfi0Wil\nPlcxi13JGQGZBwRMBxeCsRYv0GVFI1SfGwnvYfzdyshYhvIiufEj+eLEZ+0N\nmooXPw+bF9Ek7ZgXfxMm3MC6dGjBXcd3y8IsCOQYLg1qqNYQSHiPXxXKpxCx\nj2iE3aNXGxTqTIjS8dvgBfLXdgw2lnen0O2qVS/ZhDRvEAdrN6K45WeqUzRB\npeTt/PQE5V2nv11vWVx2sPDGudbvpxh+28ROEf/WwMr6/anR26V9z8uMmQLj\npZPnSJ6z/NYcpk2xDr0aE77JCMbWMlVhIrmbclA+8RyqEG+4FJ8oLh+lAZBG\n5ZGVYQOS/plNJYof/tPabym0y11/7AdjyZD0E9FVXJFUTdMjztBcn5BnW+X2\nWmLFIxRcR+9uMlmq/W/ADL9PmRE25SObYkZNc7R7vtMHUh1n8pbFSODq3FvJ\n72fUKC872cfGHq4aeWtn0KZNFGrEphzySNB4vMTVC5W2PoowRumKoxk8uDk9\nc3c1\r\n=OEwG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/button":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/icon-button":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.068fd5028.0_1625771109659_0.9328760351849417","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/snackbar","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a9518c30936cd9b3a6ac6ff2bb374cd485dfbc2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.5dfec7a14.0.tgz","fileCount":40,"integrity":"sha512-bi0MrYpNSYN/1Qbf7av7BItUgxcr0viHAI812+F4LXHsGfnHN0TkUWqmPyCfzdrK8bqaGsDIZJp1YME9tRzdYw==","signatures":[{"sig":"MEUCIQCjTYgNcP2TITbbzcI7rZAuLmmiOcAW8eV1q+IPpq+QnwIgHCXMtO3TD53AX/ooRr58GEQmz17RsP6c2pbTO1j1JWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KCMCRA9TVsSAnZWagAAMBcP/2Ptg+N64PfFcaLGSEN0\neCaeZMU9mk8fX+NsB7xLDA6LJdyULHe3nrtYhn+v9iyZG+I0EtRx5tneYptM\ntlcHbj+T9TR5ZiGCQr/QqPFomVRaeB4QBzzzzYd6UNnBHis3XyMJmYacyaUB\nTdrweY21DcmwjafnpMW+fxXHlF1lPBreWMfSzKq14tdHwFqX4pmmzIQO6nRJ\n7S1lW4bodBEeS6hNbs+CE4gPgcCoibcsxdyOXf0XcA3svF6Q+eF0oKeziMP8\nX9ENwZ9w176yziBYW4tkAomR8cYPDQqMeRZiEXtmAtkezTPthohFGauIemCW\nOlP3a+W5UO4x218Pux/jK7Q9DwhQDhFS7AAAbHPoaTsG6wvRxTJukmeKBGb8\nwtZhQF06iM0iNCW0XjrPg1rw9eLOoNycehJKzdSViHeN1Syutb6FmMsjT1UK\nFe69sRxQmYeI7WuJykGm+Rs+15QtWsfQIIeLxZd7MH7oaf7hik/iyOEp4lHd\nL3QOtSrfaMmu6me+dwxWlAaaAkf+6UtqsKPQA+k7msv1eQl7ZFBfrGXo47lX\nWaW/mPe3P3feZLeFSMZiGJaW3g2n0NmAGCCLzz22UUvutmiG01caLksKb1SS\nEXbrqpWxO8LARca+gVt3KW2vekFEL92T4WwcnrZHtoUZf84ggOAp8sObQSqn\nbOLo\r\n=9pbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/button":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/icon-button":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.5dfec7a14.0_1626120331594_0.9762452012559055","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/snackbar","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66dded55aabc489d3d363e3b189c455c5bc82b17","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.07a73750c.0.tgz","fileCount":40,"integrity":"sha512-uvk0YUlwzuwuqknq5NX1Y/3m74t3xT1J5E6/4Ja4cyjjbJr0q0FmU9z1u/BvudqupzJ3PJZbKlS1OGHCCh993A==","signatures":[{"sig":"MEQCIDEmpxqbSOwAA0sSmpDoYYc/8xZLe1rPHwWQo+dulgB5AiAQixBiP5gQZKcNu3FK/DKWK4x68qbyR+iCjvC6e1ERqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KWJCRA9TVsSAnZWagAABMgQAIMYBlKP7j8fY84i5cxZ\nupcjukAo6aLrMNsTOXoskARiB1EP193FM8B0xB+Kl0fshMJT9NQoYNRWc5D7\nU9s4wfSbw6BTMSHl/7Cdb/n6SNNBlO2tIJMRDZPRAoIoMhiC64vAzIvsI4Jh\nNW66vXVxmadb8mJTw9w7oyyKQeV3ubK4rMirGp107AN/JR6C4WDjPWLKav+C\nL/fp3HmiHltSADV5AQoG+2hDMOsYHdkmsHWDDa9CY93aL2M8mHeHtggQp293\nme02/dYuNm9RP2VzXMQQKbSyWyfVI2okxUhFFlV0Mo2Xp22aUCjScmmgMUyC\nIbJp9fYe3AbsgCppszQ8DfBm2ipLNJ0TW3Ur/aRVObU49588i8dsVPFLs4bS\nryMjs9GMnuYQMmoRoDUxE/mguvpEpS2NbQNH7j32aUuwNaMgVSsAzVx/yAa+\nCzxIFL3HSkM9m9192wuDgcV17ZKJuCru8ZPLxY9/Zq3uB/GtD1uO3oUIxO/+\noNEDhu28IAIMQj9lWRFq4cQ44gTR0DTcBSxGAS1ij4HoAyHjag+E+pIhUVW/\ns9R6cOXPV8/vhxTcN00O3n66B2y/YT8RuKHEkFj419JVVMZwxnORp+mU7Eff\nuwb7WIKGTCIr7NvaY0OQOkRWjumPTXHYSX+2hfVDNeb462IzQ13B9/RNSCwd\n2oog\r\n=vBbl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/button":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/icon-button":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.07a73750c.0_1626121609293_0.725106736769328","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/snackbar","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eceb5e36aad1bc878a1f2a3209d155e7a8192d81","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":40,"integrity":"sha512-YEdLx5OcNWkOaEafinz3c7dvmhO02RH02r1fHVyYH+wln/v5D/AwuilL+jd/2fDGkrm9jd8sqKDclf6mU/GGcw==","signatures":[{"sig":"MEUCIG24hvauaBF79piit180YNsYtBTKDrRxvO3vm5Ky1bxlAiEA+6nbxwJkmDByA+i223JNWh0uQk9uwQdwuvjZLYsztSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PHvCRA9TVsSAnZWagAA/DIP/1PtfKsKrMugVZ52s4H6\n4T3Crl1e4o4roBA1lSpoNgic5enJ/abMnghWAttqX0rSowmBVV53P7nMTRB7\nFL4054bWidwg2+Vz+awFZ60GwsBUEX0LlLAgOsb3MJiPNV/m4veN6pxdRkeM\nYlgTydO6xspT7nxZsjCKgACfcpMlGyKooXKv7mJwu2Q6LLj0bxgnnYZjzDL2\ncVVZpZVT7g6ZOC++MRe92lK0XCaEdzY93ToK2xnsszVRSxTUI3/AFsbOtHsf\n7zbWgqqURxGh14Oc0UGzFMFHxpp4btceH7UddK2NDVbZV4BVC5D0vaponHTF\nThbtbGaH444jDg/5HZPtwzLDsgv9VGHuQSi6TR2qn5DtmzSbwYxB66Kcf82s\nJdSWchTofYDOK5BpCBO/+P3/l792vxDeiXQclqcoyWxlXkOW4qT7ibO9CL7H\n038sGuaN3jEMit5LAb6aklDN0YC/9dYpnm4YP8ff1vaQWhOuxfDLgwlx9F7a\nmm1luBwtOXHqYO2ncPAKwH/ut2Yll1lsO5b3CQPOtvjnxjxiu1I8YDLKU281\ndig3JFh8K15Xmyd1Z8mBW+vwNPkl2yie5CrvGfBIdYoK/Q3fuasyAj3kFX1O\n9mDA6PiRjOR1lCF0/TwdGVDI+jICggHCmajb4ll8fZJpGQdgwQOEAhVT+1so\npzBO\r\n=y9z+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/button":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/icon-button":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.3e4c6dca1.0_1626141167282_0.44561699260278753","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/snackbar","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4da6c42a3be26505c72858d3953d45530f9041ae","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ea77795b1.0.tgz","fileCount":40,"integrity":"sha512-HHNzrj5FfYn2Rt5qgrG+ANqmHJEevDqdJtYGYgAbEm6cFjR3SJqEpp13P4hhUrBkFSZp2VQBvK7aiHGb9DsL8A==","signatures":[{"sig":"MEYCIQDeWo44MmQ2IinqCIXcybPPNMgM/EWXIQ8RV4ndn6/hgAIhAN6Vea22jpfZSeKIrQJClUwPkYZz28SQns3GFWfJbdBD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bZWCRA9TVsSAnZWagAAXwUP/jbRKiROa2dO9NIVUoKv\nk+41C63OKM94bZZzhvUciFfCGqS8qNjlRJTA0NWgL/iEJxY9SzT3bczJ2XXk\nUfDd39W5NwGpzybf/Az/qqx4kEjsShPn0/prUkg03fXj7MgnI1T/GWyeDK+J\nJ91jt4jYtl43qY+zqqTjOisRNVIGbq6eK8PnSXR/8jfAiZn3TnGfAI3NrlTI\ngbx8qmu3yQJ7B6v1R3OGUey1OlUC8Js7/+tgZwvslmQRlgPV2QLlcHItLxBf\ne8QMmpOya2PpieCJEMLbRQX08n9GcgZupQNo7qbYdspz6E1LvrpoDd3VUvIG\nA2MSMXwr1zU3vaCWV75wnP75VXqSwDJQ5DMGomCEWmb2h89VDsi7/F3d6Vpw\nK9nSs7DxNcnXKQ8pWR/gBRtJPOBVBRp9HbEqHLBEaKDUN20E5f4YS+hAxLcP\nGFtlAiRIf5zzLlgDV0rCnwKv1wOd3WMkxeOKwoSzFM1WNCmmG0Tl1N5OHWBN\nmTq1YJnjd+6rSr3F9Rf3xKvQ0GQYiCR4g5+huiXvoaDzBPYQEQOI5Kzra8FP\nUuh3vNrJBN4m5X1TPWUwCm5V4zyubjYMlGslSqc1OqOxiv7hDNvbvG3E59Yk\nA9LTMNbgjQ4auDun1e9MCapvNMfQdnOI0IGpAl3T57Vvnjfs/t13XYp3+8JU\nu73P\r\n=Q2oJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/button":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/icon-button":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ea77795b1.0_1626191445686_0.3194823172886767","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/snackbar","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82a113fbdd6c0c6ec88a5a461b40be8742d161f9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.15a179fad.0.tgz","fileCount":40,"integrity":"sha512-9Q3Gu/xt2DVGmGVESOKjPyw+oiqeFlmUE999yVHfcMHGIESV8qWFTcvQnbZEs8zmpWUMoIZWxNNOxqbNEsajdQ==","signatures":[{"sig":"MEQCIDrDQqnX4ThTVZC6BSoMeUiEGleNAEvTzaxTywlSq4ZlAiANqU2TfXyjOKOKz+SMDHWhnAxVXagmr8KHivU9aLOSwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dcuCRA9TVsSAnZWagAAi20QAI4/hWWxCOcr/M5xOBs1\nYtnLoyhmcy9F1KfSn+QR3FSAyatNpfH1QS3FZuhqzJaR8wseo1lvK21GDmPm\nyk/k8vUUpwMuSNWlgG+P2kGOMLe623kqG1z/HUJ2tO5N2Fhmq+riZgy5vJEq\n07vKYoFevdDbfcMS4Hh/Bn/ST3p/gta6bkPfzJ2c+19FsTzizDE0SyflajyL\nuuIgAcMBz2qOa/FLlc8AsycjMWD9f7/OfkYqoFTig88+i04e6S8abFS53e+1\njH3quzKv5pC3T4DKrjeDBd+HfC9XtkEkJmGbjjdEbNNuXV/9qOZD0uBMyHg/\nqFcq8QkGfKK75txr1qJMJD5AA5C5ZRY6tqhIFx72KtsWEvtdsgnontVfe5Pu\nBk1vc38gjehbNO60a5wIdHenIK3zApuAajIFfx8NX5JESzKjyPcOtsPFrsAs\n+xn35ffHUO13pAcOc6xvfblGukfSCJkXIg88vws5o4mgmJ/huIEmf4bot9mY\n3vwMVIw6kPc4qqhfpBzcPAJfAqnQAW8s6zLFEABCfdSX2lmtZX8uOyvW8eCA\nunSVfHtSbVHqEf8dZk7ApmbkDHTlXGeDhvP0LdhG/JB//og0aqkkrScY7s25\nY8EqHGxLqnP4M/+GrsRLhvT9xP3+OHFvJBM1iewsX3xGx2dj5jprn+lmI4Cj\n/F+q\r\n=DkNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/button":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/icon-button":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.15a179fad.0_1626199853966_0.1335992106044286","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/snackbar","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aed3f959c1d320b3a789d78d61dce041a634fe61","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.c73142a1b.0.tgz","fileCount":40,"integrity":"sha512-0pUz4cd1LzMmiB1FC5nJvV1qUAuUCupbj7fjfMgM4i3P7pe3y+9Cm4XB6E2Qahstk8gJ2cHxKMgbcQmceGT45Q==","signatures":[{"sig":"MEUCIQDoaAo4LD59R4JJr0DecX8S9KtUgpyGvWsicH5StdG/owIgSSN1/P/viOG0ie6FlmXPcI3ElgtSNpdJRwK+bqI4z84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d9XCRA9TVsSAnZWagAAeQsQAInJKteKaGs1GahZFzIk\nPqLqlRTpmBtWYwLLIXVEWO8QtsvZ/vvMe2RTYRzI5w5OIa6Q6EUn1njMFulH\n278oDcDjaovr3vY3aI38VTwomBv49tpJAVbCasG3KCaAV45B12hCbUjmE9rp\nUK5Mwkj+haun6YMA6USqRlQqNa0KySS7aVHB1bMDcBMWpCamHJVp3ktUggz9\nUvVttfgF+0KEbbUEmYnwWEfYsuo3stznJlVRyLKW/61ptPZasQq4QNqABRip\ninYIS2L4Ygc4erqRhRD3r/p0HmVCltvsHikByjMl/yfu9KLJpETU2X1Ewoch\nf78XfBdxf0QMe/CsxPd5ifh/b4qczgghCdfehvKEzgeU/u2ahWDN9GTzyDN3\n9ZZRikFm+a+Lntl+gJN5jCKpHZOuxUYK5XHi55/vMFwMj8UEiKlwEcgmYuaT\nE9AYguj3iDZpf2EhmyFQJA2ceQfpDcsxKTWoDJQ2mV8uh2sQxzz0oWvsTSIb\nf7PTXDU42DYwZVm2fw72X70z9ve5rJkZj/7UxFVJqJwF2BfU16jX5yY9aDMe\nOQI8LJCAFWsJxbkHzjXb1yN8fZ36nWQScD7Qp4mUoJ652sY0lPDtsjGqn+pM\nvgPj+qYDm6489qrenFtTDcSGOh7jc/FkfEahfCEGLA7ZG1OjyiMBSTvVxI09\nOq9W\r\n=DQFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/button":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/icon-button":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.c73142a1b.0_1626201943540_0.10148499035983716","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/snackbar","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69f1842abcea848dbefb05cbc35c903614139404","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d923db73a.0.tgz","fileCount":40,"integrity":"sha512-Kk8F+oGoN1J1O+C7T3Lq/+PNgR+ftZIn8teDViORShcOQ2a0qtxfHoabV9T8O4mXy35yYERe1JNXlhqA6JeuCA==","signatures":[{"sig":"MEUCIQDqcgj9mUHXPDsgh+8wRNnhuoNkMjSV+r4nfLzkk1rE9QIgBAzlZVidAhmZyi29btFES+X2MDabI9xg4mgDGKYn2CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f21CRA9TVsSAnZWagAA7t0P+wZ7N0rcvy2o8a47L9C9\n2gynCVIZJOiQ+acfD6Ix3FWSaWMmWmOB1YYgfnb8rzdQGbKTyyJevXLhsuj7\nFea7c7757tTNXDveXlNkLAAWHKYHe9TbEYij9WZEf3YYH2pb8vMj+nZUtdSh\ntDwhG3JUbQKO64Bfmq/iryvpiFv86KgAx8LREHpcQi+gISq0x5WQZmnX9r6P\n1vTNk/lXkpR2XBVAKUl68Be8FAxhTIOiicP/mHuam4YeOzeAOvU9c7klR8uP\n2XQwAkh3BthIUb7+RrJB34YVF/IS/YPjzAuae6+1qF4HalPxWn/3YF4nx7WB\nvP/NkMtXC2OwzP4bYijTuNaeTzsoMY0mIKIoL6MGPPSewSk/B5dGItfFA0ye\nxPi0g1bRm70jqAKuB+ZNP0L3wdEWnH8prS8NlJj6bAK+/e61HKyTDEBWRIQf\nvJB6yOD35rSgpX0dLOwE13SOEbATk1FPLkOUoXaOSrSDiEwl7AxS1atUAoGS\ndW0fe0Y8oJdms5vxGZG8e3GwATf0+c514YrGWsoXBX+FqbjighWw/7jsX02g\npHMPumNbw05rSpkAtZKdrBuzg0j+/4FONv8zM+cMYG0VjHoGEKUOHf7gncuW\nUMVqywicQAP8YirNHZJIGGBYSYaNTG/6hFsRtpDUcZSyM4XUblvTUwb2WWsi\ncQYm\r\n=iEoM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/button":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/icon-button":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d923db73a.0_1626209717521_0.012860006684499048","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/snackbar","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"def6cf22a8fb55132ee8940f702404046b7c13a7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.22d29cbb4.0.tgz","fileCount":40,"integrity":"sha512-NDYR2rYyF2kbQYCec/I0NmAPtnXMBpGYEQ4/m10rAzTP2hsyySZs0cKk54/V3czT+gFz9C9W3zCm1CwgJwL5fA==","signatures":[{"sig":"MEQCIAnQwZCVem1OS3kAZK9wJkeP+nDM0mhXXhnZR797R5AuAiAxPM100GX0GQjRrqJzPH0B5Ohryeajt34v4paDDAIfZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hkYCRA9TVsSAnZWagAA1msP/j5kUByrnEsH4ZTuGS6B\n8j9zEqE10eh0e1jcJAjn20Thlv4Uwqs+C83q2M3Uw3woNZTsz617WsYf8AvE\nDIKPWbp4StiaFOhP/sqPpe6hyKdYsoUeOMk7GIReUwrLe9jXYVuGCiaHcamy\nG35QGYV39drr836exZT54Y2WY959vcnGhpfdtH3tkdnHvHXTU/6g2+GgmkKD\nXbQXmdX6tREBVhEr5r4/QXuhBCIVXdnv2lny3RU41qco7rAmaWepw7yPMOtJ\nzlbdXc7/cm4JDqkMlsiqSf8NQ75/Le0pLrQqdyPfSB+LvCX+5+rTxFNqeZts\nQlvysgMW+thw2J4Cvc/w7jMXinMvkGqdLo1pZAqdEAMtPgPS4Mo9cVwlR3Iy\n5hXtiD7lys9OuSR4ZRTA4av6ijKD9L+5CEIp40IWGqtAZLSKf5HuyaeZd18E\nt1LzdVCDcFQTCc/OOWVsUgsxj/t5CuM/g7wJ/LN9FaVRRKIM8Qila9af5Cq0\n8N836xLrpG0IRcNSr1dkZdisE90RSypo2r1EtDO4IQ1idM/EiAYSOh0R4HZn\nisqhJ4HYL3pvpz54oa8pMXIL+YeORfxLNlRNjcQOaxdKE01gDovl3Ye0PhUi\nZ2sViu4m0ihuhz2TVMAv1r99L6tKdcfy6QRxRmIuOD7cGgg7Z3pKzBaHjXVm\nr4N1\r\n=8V58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/button":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/icon-button":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.22d29cbb4.0_1626216728374_0.25328874023900316","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/snackbar","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8062007ebe339bcadba3cbf68117054ecd7e815","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.2749604bc.0.tgz","fileCount":40,"integrity":"sha512-MfAp9rDejiubM/oQCS5cwrmrR+KNw36qEPSHgZ6c2R24bSe3W8FBlalc9w7UyurMDHWsTL8Fafy9MbyY/Kkx5A==","signatures":[{"sig":"MEQCIH665jgKfC6jL2ng/k25++1QPslFoZklAVjRZMz9SNGFAiAeGlOI2XhWfp/TD/6KRIO8U2ZiK3wJ2Vtkyc1QlTM9NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+ZCRA9TVsSAnZWagAAD3AP/Rb5KZxv2/Sq8J/GNDVc\nXFV05wA7EvYnbpUPj52bV/b0rUlSQJ6Z6jgerDQFnxkS1MSNqYxksH2dBdKX\nSSWTpaWGnFCtXEWGiqFN0XchsNmbux7UZg+bKK/Nxw+Xe7gAsu7asuL/8r3A\ni43OMIV6jKroOQMyWt6LCp0ZZp5rMPllUIE0EhsEgocizyJZRoZA6/Dq84ff\nvWG7ETZdjkusEjmCnlh/stC8PRDXVRvCuU5puQJX9drinMumGbqxDim+XpVH\nBpxl8Z6TZMp49qVY9z2qEHhH7CaKhbvs3N401bCMNEZQ0NbdM2z21E9cv/v/\n//J7YPRhbsPrqVOBujS8Febzp7p4e5rclHPqUrlqLSrbQYZb3MWa8ePEYCsc\nRaqM5meke4RUCpgNKXCt9Brrn9tBKCDhGGuuS3JlgVjSiSEmskt/TREkUj8F\nTWzCf16tKsMLyA9n26v+HOVi4/D8MWCFQI14wcEvGy/yvj1i4aG8ZqI3HsH/\npFyND4+gOZEPGn6jCVu8rrtB1DFUAmJRTs+gIJ/6uY5VFPWTnT3cHnMlGwKk\nAuL0p8DAp45ppRwUYgivR2fp1glt+9UBFD4RVKwX8p61oPOd8rOFt8zQjkH5\nyScqmNXTkVJFoPIT9vBHG7OLJDEc0QigaX0qws6j8dMrEgoHOdNHpzM6/Rut\n2YyW\r\n=KHNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/button":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/icon-button":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.2749604bc.0_1626279833250_0.7713281001221459","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/snackbar","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a670a29c8ede263b0a966fc3431b0ee8530b35b9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.e1703bed9.0.tgz","fileCount":40,"integrity":"sha512-pGtgSJ36jvG6FkZRjrGxVypU63nx9IdWlV5OlrDgec4dSfQOL+aph6CAOGRtuW3bUpHCMApAly3r/RbntQOEEQ==","signatures":[{"sig":"MEYCIQDBPMd17s723dbZtLhe9kTzRIceZr4zgbe3oA2uWhAkZgIhAMDfU1b495voyw48DQ4qDr8aYLOMCIx6upvtHLPHLXzs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71v3CRA9TVsSAnZWagAA7HoP/j8me4pqqtQQJ0A7COCq\n41QKZLUaJhG54j1y43S+D8V86Qun0pcDTPjeT4RgYVlGrdNnvAgMFWMPbeBk\nF8lIUN/FZNEvdna0jY98STujYdMtpTrVxBrCgKHlzd4ZLpn5ZKRmHy+T0nRP\nVan+5d2ijvgVxHZPBmiUTqYV2p8emt4p0ZiB0JTUbWv5xo42QIgfvi/0Z2ek\n5nyjmf5bw/tKWuBaj9uroE+RZf9VZXDfuSqjPwNEZnDEWkSw8LHSjc7DwPb8\nnAIYUHwBtMsRIZzMHvYDSxVKyR3zcHSXMnsi5Rf/TpE03G8z7vcfHFdDgZue\nBrGl6CNcwpuLuR+RC1o/b+cefyW2e9sXYcqKJabiql+NTZ9sJXNOLRyXPmtv\n02eiaPTH+eEBrQr9fl6/EkyGVI2/hM3IjA54vSu9kZF8lQJQnfuaqzDq34Q5\nEh+2KMJtiElBbCL0bkmXjGAGTXtuBIiMc24e7YeWvmkyNoH6h9cZiRCbSW43\n6h13fVM832SDH1Gp6mMWWoPTXgGPBMvYXpUux70IIeO+RqyHTSI8pwJrDT9k\nawf0vQc9a2z0hliPdobgy1+oLYWAkJ35Vj+z8HWTyMF7sVc32QJs9S+igjUE\n9SOBca//9Byed76A2rKaRjKUmo6moBMYngrtSOBQ0pyucP20xATImjk4Z8Zd\nmJDq\r\n=b5Cl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/button":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/icon-button":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.e1703bed9.0_1626299383158_0.8095310340971502","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/snackbar","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f931cf91de59aa5fb0c0122dd72321fc458358","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.de48eff0d.0.tgz","fileCount":40,"integrity":"sha512-yz7VXgJbWt82sYILruCyG4Q6t2Yc7t13fCNL+yTHBsFNZJlYDueCYShhtD7ldpze+XLmEE6IUO+0YrVpEOW3wQ==","signatures":[{"sig":"MEUCIDXOeIaa3+oK/h1wwstvrDtqykoF1Xs8ffLLmq1SN4fTAiEAz9kkSyCpkLdo8i7I6ml4TPsb3KZ5yyRoMlEMFpXQr1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GvOCRA9TVsSAnZWagAAVIgQAJpL4ECgmZ2guFpoZ18O\nYqMXsfs/bNbS/2+kiYjCDJG0JgBg/SKBVuS783YGfWI0b0M6mHb+uyFWfLXa\nwLXZxw+d3kTLF8LtHxHJszf8jkGEQK5/hF1a4PJs1ypQeRyQnQCAOnT96ZPC\npgDGMkADvKz2gFYaSWPMcvMnJaxJMXDS/Kpb4+I03obBUpD4/Q4hcPbBinM9\n5OlRlTW0SVYqUdY+/3/vmDXP25p1OGH7Z3Xo+CNr6aPhaj2PquXtfR1pvqO9\nSR2/6NPLRZe8Q5HTNxno6E+J9MHsA2JW0mpG4s9mTwV78Hew7AIyRXrkkNRR\nakhIrO44aC3PvsWKWCLOsBBaMpcNuqdiyZPRlpK+rLWym827Czq928eYqKjz\nmQwNxiK5a5HFdN0NDsqhh6EguJLIFrqCAiOaNz9ozvXEqefN/QQUyR2Oe8Y3\nFV3r346UG3mC/5choCsarzJw7AdpwKpzUasnOGrsJk9sy8D2LkptSqZ5U+kS\nCLnIhsm2Pf7izWQ/O2PD8VMMQGu8sVS3eIDDVF8/d5ChGiToW1DxhN70odaA\nUmj0nVYDQujr5c/CPEEsG2c3/1d8069PgXhoNXcO6HuUyLa3M9N49z559Yan\n4E9eip8iK/4iudVojuC2c6ogtQs8SYjPgzd1I1NedJ1h5+q5Z/BZQqy13WsZ\nXY1/\r\n=1TUh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/button":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/icon-button":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.de48eff0d.0_1626368973999_0.7106811489556264","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/snackbar","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a866401186b18d141c13ca10f3deab6e147f5e5d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.4f060adc5.0.tgz","fileCount":40,"integrity":"sha512-CdPlm4CUZMZWytmnXzkh1Br4GySeIgzqejRStHW8p4SIMzXnBamqnfbxEwAe/kMjiSxNCYYVDbWBgAxurO2KIg==","signatures":[{"sig":"MEUCIQCJRbWh58C+Ovdi3dpICm+d3X1DRY7QTJTTv19FT/VC5wIgfCR4e5ClRPvgwUtqb5Xp+BwAZVQe8KJp1OjxfbeNTuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IslCRA9TVsSAnZWagAAZ8gP/Rf9GEk+xJf0jeEHo3oV\nIhZBOi6q7A9wIiDwZfXzIvsjieajZ1waHcQG9w/zEf1OPfd0EAkiha52fL7w\nWNBNu1skP9QlW5ZVQ1OaGg413pExWFzoyTw6yR3cxIY3w1c1bPbVo6Ry95BV\nUCkPZoWSl+nAyXsRc8bTyEpIfYf06r1xM2UPdAjczN98yVzgASmtxrFM243O\nwnA6UH3s/D93Ed6XGdVOCdOwgLaJ/tNIG231hKDTeaiSUbSH4ID1bftLzIcS\nQCVI06w4bmc3mueoMSovNTgm8r4DEoUI+3bAOI82E5dkptdVODiOtrat3WtY\nXxGCL/4An7BadoEOATNtQ9gdf4owsxeP4IeqAfz+PbGxV44RVeeE0P9+Ndac\noi1+3VT8wj6OIdvWyhYqdkE9LQ85A3dkJO4xgubRH+7SI9IFu1MWHPyejSAt\n2scwk8lFNVUtQhJhcpObPyatDrXzYIDqjSIVnzFVyrab62nYTwYc37a/gbkd\nQmqLH4IvOZ6DZU8JaQjQLgw3aCvCVscX9e29DjBakFEcg+tLJ2tNhxblHZvI\nq6bE13n7vEgArFN7ObB4+T6PZpYYZDSg6eTBd9p+fnHDffzj+FXEZ7pwY+SO\nMkKzMJZ8RQVWBrG60rWMnM8QuGFoRTxYVn45PPtwfpW8r2V0JTOjtqz1MFyD\nZhkh\r\n=B4OY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/button":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/icon-button":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.4f060adc5.0_1626376997605_0.1779311152991545","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/snackbar","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c923a1a6089bd16c0157d45441792ba1621cf602","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.bd25779b2.0.tgz","fileCount":40,"integrity":"sha512-EfsFSYxJnVJ5AJATw92HUqgWFSaJ0hVb/8Xvgk/5Sxd5oXpfLlMet4BqEaXIKINvTenFLsdAA14psqvCe7b8tA==","signatures":[{"sig":"MEUCIQCOm3MiLQZR3KdqNP0zX2ibpVJtewejMoOOk7WW6r4iaQIgcBcZ9TQp+Jk6vL8N0jOaSTeZkAR+92KQrDTGuPr8jxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J38CRA9TVsSAnZWagAAsnQP+wUPkN3u7nYTfQxtQuDe\n6KW8aPxcNhWzRneQNdT8wTauc1TJZthjc28ew/eBOQdownToaR37Gprfmob2\ndQOsvfwjvBXXbMcPJpn86hFiU7PFT/BnqJZFJuCG6wUtvG+02iH7Ne/Hjd9H\n5glKa3MVvZy6xmno1ZOSnxQaJpNvAM4iJAlrZYFKa24ZqT75BZoVvxN097DZ\n9LEmdFSrUnTYF8wAZYgMVia5Dr13iL4wBWGHuUvcRKTKuMP11El8uORDTa+a\nfhWALx1Hwz6XtZB20TwRDmCo8yRbXlz3kcZNUVmGd5d4tG6rWxwtF7Fgr4/n\nMgMf4RBQW6Hl8qRHZGZykcLyyWpdwSlaDA1Vo2xZ0+kfaJcSrtZ4fZshgxBN\nLf26fK/0bD8fkPUUVSfvFaGjwk5iazgLImmcWBDrBtljTlxydfBMZvKSAIy+\nuSWTOppKOz0FzDYQKc0fVPMqA/ix+hgRHPV5FRk+q/48kUdZonl1rGUw/8XG\n86MflJRee9M8juo0FKoFtNVaAGfoDTGiePhj519SmWVYqEgOTh6oPhrRGG4i\nF5pDGJq7PuNKvKo7kAyoxOz3tKL0rfH7Q3jDKePt05yaTM70cQaIW2xZy/Er\n9bsMFmSImw4C2gTt4csCCFDXOAU7Rdfd2g5llRu9uGZskXBfbEmMnVuVsVbM\nLGW2\r\n=hvNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/button":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/icon-button":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.bd25779b2.0_1626381819922_0.10962262348950946","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/snackbar","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e90de2b17a9292b1d68313f8100acbcae48aafda","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.9f68a932e.0.tgz","fileCount":40,"integrity":"sha512-1eDYDrBVW5YqGmXa0GpIg/lJYo5eBQ/KuYXSAMJ4L5weSMPVatbkSBMqMLGesRmhbmORZFKSx93Zsxtkky8qpg==","signatures":[{"sig":"MEUCIDwIhJRNQ2q/cDRg3uEMZO1GWsLnBnl04cqitITe0hu4AiEA11EAxtKPLc+V6cpLNfV0Fa4udunwdj099HOjHvof+ZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHfCRA9TVsSAnZWagAAjSIP/2Fv0kfHEsQL6fnnGmqw\nhyNbi0NUMlgW7rGOEQOmXmD54Mdz9qV6Pq8M5tYYOlDuMqk7psUuN+LCY8Q+\nTv9puKYUJcqasXa5W9TVvO4mzpscl/GuwdUnvIZccxrO5cdvA09kQkEIj+6z\nEZrX+gvy3z4C0ywqInWzMnp3aVYSLIfij/uRjrDhOe/m6nRivapVqPr05cJv\nnZ/cezTM+CxLFPrsAL06ONpLpPTVY7TSFPAe75AMx9RkOUEUSp6FpkYVmAcb\nX5ESo7YCpTgWH6XCO3cOYsJ4PIKFhSF6By9L4Qw+RqN9O6FHIEkGAtMcI3gl\nMVB2ToHQ9IR9tx1nqVSz2QQi/wsNnWmqMSGbz04b+RLvHyNcw4Opu9ohv2IH\nkCEd5/Ok60W1QAO707XrXZCEpAA6lYjokQOP+B68SjGOlWNd+fJueMfGsDyi\n2e50JKL4w5xV/rfnTadHI/lau5VAWdVaYAPvoNVYuNd/hrgl8nbJ272g3pin\n3fell3IonN7+94L/ZNpS1FwMhYeib0FP0niWqYHZ0Zj7cJ+7ePwy16qpc8A/\nBIR3rpJAebbzBwCxDyNt5B3WiOhr4YjDdxw9Xh4SM1ZVM/xsPv6alKqi8StM\nKTPu5vmaPakbdXVbgvXl8Jr+cwTpOIZSunYcZIcupDIT94Z5IyiHel6+0YQF\nYuTN\r\n=RKKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/button":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/icon-button":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.9f68a932e.0_1626386911427_0.08433981381280908","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/snackbar","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffa130eccc6e8f1e9fadb96092ec50c15eb548f5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":40,"integrity":"sha512-KvuSYwBYbu0bQOoOh3CIgkQoLGe9y+Sh2/9Z293Px0NwHxXCmTcz3dw7n4/zxnLgCo7sDitZOQB9PCGmzVv+Ag==","signatures":[{"sig":"MEQCIHl6dxULneTuCL7hTZhZWDic3etFl2pRRAGKRl4vXaKvAiBeq9NvwF5gHf32Pw6Oof7HeHc648ySoQk9SJ7aXBXp6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z7JCRA9TVsSAnZWagAA86QQAKCUDY8cd8c8tjwT9GC1\nMdS/VqtdlKkDArr2b8HRXpaRTQoXunkSmSG5iseaWvk3DbHA/f+SmOVOkpMJ\nV/f67uaiyvUGuUKcIBHRJtHYFbOZU6g1+ze4EJaun1eZhgCWmt+PpE0N5ijO\nxVm7GQXS4l5/PrblRA6S/vSlmwnNLnYC8mFJB0vQBj9nPdyjSqntqVPR3ksc\n46061nao96T7ch8kvEf5v1d10Lrh1CbQJytgVpLXwzduRNnlwbAYimWQCgvC\njUbZxcpKKOhc4uUG2onVD55NzMIMs8M7ViSvtV5Jr+Ul9RprJL5t13QhtCQf\nze5HQBfzh+LuSE9UlQ6kviruRTY5yy0tE/rM7iFNsLWvIeQGotVXKD8xb8Rb\nsuGI8namlA2h/+qcNv8yEuUOjJvTmJHmOBgdtqXQkLjI7w8zZmvPabUVLp+p\n/sTGA6sJ3Vn7qM0wiGcMETIK9igbh7M91IrGO88mLYrNN5yNsi1pk3VArjWW\nr/j/bkSyNhscyPBLnRKZTH5ymlIyWDWZZinTkG1i51Ck4kbHWOlGLI/aljXO\nGma9DWrS28a9eiVXka2kbrq5STJPxlC2X3kfRY8atlwKn3EF6A/czqLfI3Yb\nnHoyA3sp7YSDk0iZ5vKwI1xiA6rUjagkRI81Y6z6yyszDG+nZ2KzPHbeaSbz\nMd6Q\r\n=TAYj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/button":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/icon-button":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.4eecdeaf0.0_1626447561612_0.6627764722021272","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/snackbar","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c8f06fdf1fe1d2b43d514b1d0c560a8e7022fe6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.7239684d4.0.tgz","fileCount":40,"integrity":"sha512-B36UqtrfPAHMDE7TZopXlxI6nhTMSNnWY6X5MQLdhB1LmKu4JKKgiDFR/eTB9Sn+JWX1NqFqiCvlQTDdE5/Tdw==","signatures":[{"sig":"MEUCIQDfzPQFJXkQ3f7R30oTbV0MpsLyO9BjwYWH+pOHi4WDuQIgALXZrI0rzOhdIC2LHmxGZp90OJRHtJF5uRl06Ol4yMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0cCRA9TVsSAnZWagAAp+4P/A4vsxFDgHZiwq4LKVsO\nIaLIlxNepc3gmc4iQgP56rBaQOnvdIu1twZhr7eLHorc1ezsbrZCnjsV3G2a\nhnZPBfcRVdQesSRNLka0q5snM5TARC1CXvyxuopOuAx1iGL5iyt6bIOV/a6L\nmAQp+PZ5E3Y3VVcB+S/uj0bsx8Ho/LtPsdbG2ZnQ/rg1dpmd4JJysGhsiQ8I\nCRCb1WLhuDs3FRtWOqxfgGvd8XKYqmRcG/iWDwprmps8bpIAqN2+DJqcpFpE\n9nvU5iU7UjJdCDX2suXkkPWebDnYuo/SaslHJ8SdiXDdiR3wbe/Wps+0K9+t\nvdWkQGlV4/hHabi3GIanicEHGSMPEMj75KylsHHYgHgjCqPn8YEWauK2GPQF\ny74z6cQ1ca4kCLHSo4lCHYC8sVLBd8OIoc46BTsIPll2b3W/d7ZJV9iltEQ6\nqcqtTxz2jVyhvS/cjLbmO77fbGm+DOQduZe4zRsUCO2/M40ZNwyOtEW6dLJA\nutaIHiYqUb+plT8O5W+6tiCQZF5h4XdzxHqp3tY3xhS8ZvoF3Xtw8VMVKrCc\n280d0TiqMkrVboRrHbFnNc+MP7K+jECUA7iSfsxRKoeAfx5lGXQ01tjCLILP\nfEltFEpXjZEE+DFd7ghhRsSOB7+SR6Mhz9ZnT6bZeYyJ+ZRXNYUWhdWbZZNa\nBZzR\r\n=vDCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/button":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/icon-button":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.7239684d4.0_1626451227982_0.4934358136312822","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/snackbar","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2941669272ac16360d83a9fa88b3ebdbc6fefc09","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":40,"integrity":"sha512-N0yUDg7aAakOzEe6GvqvT51RP6ehdFi0BsUuo8oAVrfCvdH+Yzu3hY/35bahJEPDqON2VAZs7lAeUlq77AkFvw==","signatures":[{"sig":"MEQCIA+/d9U5FIFNQ0z82iYJ3dc1+CBBAcQxrjxhVsmV+T1kAiBWOZujRJggyE6ZznmclhJojsHR8cM+qSCylRgWhhGC3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bCYCRA9TVsSAnZWagAAaz4P/2ald7nS+SBnpUYGZzEV\nywUAoWYtkXMLo0ic+GqSMZg5YiihohRjG+C3fqGKyL62vnOdEh32jznKDIpz\nM+QoAo3Yx9pw88rcvwlYAuGEvpdQbPew0dxcnfWMVjfuFIb94ELUoWq4uyXC\n/Q3q6TT+BuHMtkTAk0aVZzKWU/dMccef102kVJZSIKkFfFaK4VQtBRWZkqwI\nS9Dcqey8IUzS/090LgF9x4b62Vc1hTjgmbpYLsOZsB9nheo3digaCZzbbZw5\npXLmsC7nKBAX8CJO0KBM1aZA+CCltcYfu1b4HaUo0DXNMx4b01rSpO4QkR4B\naIBgUexZeyevQHenNeoLqjPprkHInzUZpi3lsNgWFfBkDi6g14Vt/lNJYFlZ\nmOwQ55IanzC0+N2fNGcPTtF3nO0FhKzfaOUNra9Z7I5PtzCOzgnPInOlnU2C\ntyNuaFOmp43XRtxvxpHnzYRbamnGhKiIfWda84DsVeYYMFRc7bwINpHocLgH\nb9H5jXteGLHGpjN0foSxjZRtosFRrPARX8FWLiEMY8q5A4XFzTT7WVz6/nlF\nOr8yUeSF1ObBmng5VeXlkuIHJcAvs4jG3yEZmfevsPedTodCRY9XlIJZkTMF\nXucn3Bj22usELLk65442GQY1Kj8N/IIoK+VfR9j7OAlmQeGjlXXuk/QqPGA8\nD9X1\r\n=EoVn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/button":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/icon-button":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.d5f1f7c72.0_1626452120672_0.44417071512813355","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/snackbar","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c594c710781e493d9189971b8c4129c058dce103","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.4d95812f9.0.tgz","fileCount":40,"integrity":"sha512-kjWvotMjzYDkYSZb3fHdj5ghJ5xCjttBlDhxJDUJQpPhYNdDiYyeDnrDDAr4oAt0ws5IEY2wUW9+wxYjIkiCqQ==","signatures":[{"sig":"MEYCIQC5Xx+3OcPKGLQZc79u0YbWdhPm+jfH5CF14CAau34COwIhAKJ0jaE/RuV8ybMbrDDWBs2jgv0dhIRbg/XTEr5LKdSX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGgCRA9TVsSAnZWagAA+3sP/2BE4Q29n+YJqAjxAlFC\nry2oy+gAD++qpLw9wrOJrAvdURLxpIbMJIYcCQACBvpMJiBvOcEty5Yzl92A\nXwbOqDP111KMJCmLiSapu+pW4ek/VGRpifBmA3lhmmJ35R3IWc58ooz/gpaU\nrErgoIBCMjXy8MnOwnZgOOaOjOzh5P1UI1fiFw/XMhwPq/QhJwwjS1b/6fHM\n9uVBxroIQu+9p9XVNjRckeWgx6OqGQXzEPBukDIG0ituRWzzTzDOzJ2fWhoX\nUdI+rpeCQ3d78nJeEe3/2N+vQn4sqczRHq0LuU8VN+5NXvkVc41ivQX6ne2p\n7JPM+af9gQJQMizlJkshJEdWKStd4pkNJWa5AberMSomRC8mBJOijH5va9XR\ndm+Ij/O1xbmHosM7kg8KEGaq71z4elRYUYXsNd79pB5HPAtfWeS99/u8dBNF\n/4Bsf7u1kyek2RT2dV+pDM2jJHCICJIL80F34/TscF1teJ6hEAU9wj/aqRe7\n9+uIgQoqUDbaG4rMNa47nV9WNw7q51RGjdOTalG0Ok/YLtQVoMdb9acmiIi8\nxHHW7YYtmuWifa8wj1ZK9/6HmmAlyQ5NhmxUsHFEwpi6AUiznOnjbkBNMM0M\nRwc+S4RhC9/qlFWNxFGJ4Hrk0p8G9njgeUtoSX2pA3mYTXYYBJ2C2y00vdwB\nPA1S\r\n=9jVF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/button":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/icon-button":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.4d95812f9.0_1626464672268_0.48423542818378684","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/snackbar","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e6fc57d1087bd3d54cf6b355785af1631ef9f36","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.38d1846cc.0.tgz","fileCount":40,"integrity":"sha512-cD7eD5u0IxIv+JKEdcUTxaYJcZUuytYATTTarHUWQ5XdYoxKYFYlFdZzvIF7h1TVPZbS287Euz/0/fwn5RMgPg==","signatures":[{"sig":"MEQCIFH6JGCsQJN1K2Fl4bDJN8MvPhRXon8LBlPDjOao1QlUAiAv+//5TcVaAVHst884+7Rdz5zd/n8na+mFDHMo6zdAWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cfQCRA9TVsSAnZWagAARfIP/3Bu+BLknMLcCcR8wbtq\n4VP8xXTS8NZd4SSrUbyuAV6Ns9YLRjOORPLZZJUgxvNxluxB/nsPglMr2nIJ\nev8tMc8l5AYLJFwzoD46rYJ2BCsPXFIGYLO7FIAsKawDm8kc8jOkrnKA81TE\nciW4PrIK8LqQ32XuMSUYf8+pJkpMjhoDpOGPBBX9nreyVe8mE4Gqv7/z6WPg\nuZ6M+rtxRHK9WPbXukliA+/hg5S+YSiXPdIpqa8kd7HzaR5inX7IMd1wmvi8\n6aDEr0AqHJkiLAL8FsHCVcsuyEv/TCr5XAiWLVMRYOs0Rq5n6WY4+IKqwnnP\nC2lusMoWVSrSx3pSpSZK2CguqXcqqScvNRyUol5kglMdLQUSO+oal+0GEpfV\nwUxRRLcjJTI49yr82cBa0ot9U7TNRo0IFBUTE9KyMge2Hq6dVnPuvJ/Iy1oY\n3Y9ZTW5quau/NzRHasgSsuHMJlzAkq0UF9wXTmeIr/+XWVNTO9M2ZlfChb55\nuSbI/cINlpvbGeJ4kIPVaxtKrEIQizxyw483ye5o/JNAhRAE8pre8eTlim+4\nf2l6nst/NvH4Dd1vwrU39qRwupQlEEqP83tsv+Q5DJAORb5IM81RPRSC0MYr\nv9VcwZf7byJHCsX4eKB1RbqNXgV/wN9m/RBdXQXsx+cFojO1q+Wm0n91yhMh\nLAtN\r\n=rh9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/button":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/icon-button":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.38d1846cc.0_1626720207982_0.7510008161101518","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/snackbar","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca6bf284b157ec9e9e20e547071bccdffc8c402b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.3f691eccf.0.tgz","fileCount":40,"integrity":"sha512-S6t3qFWf2hnsPMQW5WpDmW11Ddwfc2QlSkSOjzvDQ3pxXbH7TIsUN6GAS9TZp7W5TAB/Enw6zktzw/BGxrBKTg==","signatures":[{"sig":"MEQCICbW/ESZvSGR8TJ6b2dKqRPKuqM8eWFi0qAUPiYgOJSxAiBgmR/d6If18RNeB6avknEOXnvK3FOBgSeKd83eRQqZmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vV3CRA9TVsSAnZWagAAZ2sP/ihunPs09DfDAIf8wvPP\nXl5uQnyxBDousH7zuMdQerHglvxZV2ERvg6wTtKXvymeSnN7lXdwr2Kp3xUH\nVQmLlZRuvlkSZ3ZPRY0cwuiYSucLjuvby2SWXv/HnmuavodZP6dFoSubcCzm\nqS7pxou4guQyAT66gQNbwfFgXgYYndyGjv48QZnJ75yYLayLzZyk1GRFuKx8\nGLGWeGCsya0ARttEBwTPZxMRynmAgs9pgByxtUZmaVVFB6t/ZhUnhcXhw45r\nvIKj9baSGDEIwhtf+uXvVWS2jWWVAetVetNGGxVBGiiw9pHNysDpVlSSTBXX\nAPlmJDr5jobKMLPPoONvKzPMnWX2yJoeWA5QN8LDcQHU/MrBmGpPTKrz/8Z0\nkWqJeGxoAyY3/UllU9XN+qZD1flxGOUgrp9OC63OZEHrAcoeBq+/aZ8EQuaQ\n3LXim8Og7DKElBZjMXwBKGFFAAFEYuIL2T+HoUE1MVFNhL05uDjlxn7GEnwc\nvWGjOwS5QTUbPjT/+3tB0Y/JsB4Dr4uG9Q0LikTeSDkNb3HoLnayJ45RfXXm\nv0+j0yYQGhPcr+zpEQFTIBaqs7pLD9Fz5JogEEGE4TMlQ2TGIuCX8tagCrJN\nocCsTAw9pQMWuHlAJLwBpgHOnv1ULZRfQqooBGXG015Cg2Pl6js3ENSdf4sQ\nWXXw\r\n=pgv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/button":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/icon-button":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.3f691eccf.0_1626797431552_0.5158825387671284","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/snackbar","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc4665e45119ea5abfbdbe0173aa00b1334b9663","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":40,"integrity":"sha512-zCbNf9HT35lnqmG6zB1zrynYvVfA30YrchP0B9A6c28TZffCOBa+Qwsq6I7sIHxCgT2lLig9SNHbRED9YfAbtg==","signatures":[{"sig":"MEUCIFOdRSbJjtndabsuzFrcOlGH3o/y4pdAr+uMJue2v0uzAiEA64mDVtEjpHrTcesCfzAGg09TnN9EU+Xbji4prdtXBYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCjCRA9TVsSAnZWagAABAcP/3N5Ao94bzS2OB5g4r/B\nV/z/XGGE2LzOZ8T0jtd6sRBNFkevo1hqB69JLtmBhDHq4YS2N9kNjyB2CYPm\nh3daIlQ6TEEmF+dt+xvJYAWMQwTrj+rJLPJy4UiT8HK1YKuDAENQA7YnpAoU\n3flM3qIjVs5GCxBKiZGLB/Ta7yxVUK71syZFyeTX6WgVDufUlNo3E9DBOPP+\nr9eGyiauZt0/xWB5kV564J1UoNmIDRFxRiBNHJr7e01215jIjpgw/VeyvmDy\n0KOx1nJ+1KmJC5+5tgkG9Pc6D01CcOUkib4Bv8CrrIamcILn/7XDJK58ebOQ\n+rPRSTQzn/y7MvqeZJRwOlRikdol2QukArnlYCTmHiG3GdO9xmhTJDMC1NUX\noIzGvBojoeiumTR+3tI9aedYzUBlHJRVE6VZIeRPm9KhehMiGdwOcPUmw8p4\ndkDMUwayupDhv2TVzwA659GZBW39LjldLjl+UG4v22huy1fNj9TwVMvrMeNq\nxlQ+KeeE6rz+TQH55tPixgVx/pWWWq1bBIeHsDvxeG8bPfTwF1xxGaZruuit\nF7J5cAqVxw4iYzfZTr/+nFiyBsfmZ5Gn46gjbZ08TkyNvJgjXR4IyBxWgQfA\nJsR5kUu7KsZ9HZa2We7DcN4gjhZeE1bwewo5i5nQQvHun9b+CJW7TT6H5O0v\nkI5Q\r\n=3k66\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/button":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/icon-button":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ebb5c73bb.0_1626800291070_0.04978945732224216","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/snackbar","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6278c4f9347d1bb0234ce293a435224937e9e75","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-nightly.778a0e8a.0.tgz","fileCount":40,"integrity":"sha512-JfaP6vUcUV18jY0OSp4aJG+Q14Va742SeN6RVZmdZUB8A3E8+Lrp3gJjlBHs9wnHJB27cKvRrbfVKar/IAVvCw==","signatures":[{"sig":"MEUCIQCGJqrdpYH1ClUiKtTW8iI5CpV8/8i/D8D4icMbCRaO6gIgK+m4JZbA0wmkT0LyRmBBZscIAZrg+qTdDa9V4WnyVgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zruCRA9TVsSAnZWagAAQDcP/3MD3kLoUyUkASnden9Y\n6XoFY06ecoznQ91nbdNUCo9kpK5bymaX3wQW8RuO9pIrSoF2LAb+I3mZasum\nsTuyovvogJwIniKUFJGVciCF8U9XpDsKvVmrR6eBE7/ThnjrdUxj0sNXH2e2\nEiH6+RnZq5Z1DPbYGDnqcNbjmV6CEfLfiISnnPhHYcVyY9Wev+MlV4thoZVg\nTvuzPn3wxln8GUUo7YTWtNY1BPsdnj8kKil1eUosIeSZ6jtZZk5Paszn2oYH\ndDej5Yft1b086vbO6wwS5ZRv5MxntuW9HSAFuIn5/PehDu1GYySynlAyh+1e\nwPU9aBY2w/i1TbIUr5y4f4r14dZlOz09qNG1Le9mYFAXlgCFKo50eHUoVs2J\nZwuQVNH8inNOo/YGIxLJcp3Q3qBwrHOPgBVeCoXWRCC7/O3/VN0cQM5tfq7P\nCHe+lTzFDZ4ZVcOqJmiyM7cnFS2aGLVPRyZq1rMkJlL7rG0UtUGBMU6nHddE\n6+ikkuC2nGVeiALS/FvNTGterwtGLiqtT+dbgy92IBrhPYcmRbxJwfVGWLHe\nGVGthhkNEQxgUDa0BUp0qxUXN/nwFyiN1wL497d32r+ikz2yHMAlfW2Pt/BK\niozQ45Skq5T17guTA118tVlTkZqge2aJEdwwI9OLTegMql6Dt9vLAFo1oIM+\nXgjg\r\n=ZJln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/button":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/icon-button":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-nightly.778a0e8a.0_1626815214335_0.5425902216698166","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/snackbar","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28912db718465a0afd7f2fae2d407e6f90f3e812","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.791311bba.0.tgz","fileCount":40,"integrity":"sha512-+EZwRVBMbou8VJ+ezqo1bSM6KNWyOXa8Vd8O7Dhk3dnk2R4wnlNEKP900ju7a1LQRIKAaiAn69KOipiA28soiA==","signatures":[{"sig":"MEUCIFMb1p30oir55m4mowSReJ6hsodxi1itw0mRHLOAp7yCAiEAz73zZbmkBP0ogCnTf3BnYguK3Y5CDYW2IXyyf+EIM3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90l4CRA9TVsSAnZWagAAtB4P/077nFoqmp3AbvmBV8sR\nD3B8JObnq0VhVmTQumnNj+4JSBdpjIO9EJCjUioAis6J80Uqi5bWte84aRa9\n7c9aUto64/lmHRnYa5L5naD4vVKdmngYVVKAnNHiZu+iEZJktHqHVLaQOf84\n6T1YPio9VD0mSA1rQaHHNEFabMCBzJy4RiTFj1iHMJrmXtuaNBTbbLTWLLfX\nZQN98ISP9yR2EGhisLUK1H27e9QkIt0aQJ2mBYBbIkfD9IbrrVCF257HyvyT\nMHXeVaZv7XWo7APH2ExvU2T2YgwSvPLYCLcVTSrGQzshDK/cE2svl4HtTq4c\n1Sz00Z+1zfTz5cLwsUZziGbc2avYiKHHNc3Zz+jRSBWLzdWLSrr2vP92qcun\nEBaY4v4+RpwzuCxvP4iygAmuqRHaHjtPjL2zM9ovVYz2sXIbLh0NmRUEluZL\nmg22oxb5wWAIGHFrW0p/ao5vQB8ZRrFQAwNBN1DurL53PXvHJdH3daEN/5Vf\nWsgaKWd8KifUkOKRuxgGKeWoNfDJ1mpdgcyEKGj8zh5YBcwLj8Q2tA1i90Mk\njMkVgsk4sAN/W1Co1eAqY7N42xr05TZnZD67R92vwYu0reNskEuX2OnrnbxY\nMTNFq51Y/KChFzftMiPayEByN2x+Pn42F/HpQuYwfnX6uM01J7tCMSrSBCdE\nizRx\r\n=Af9k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/button":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/icon-button":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.791311bba.0_1626818936532_0.3142607469248324","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/snackbar","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2db2c4ca89af9899d78e654f6c7b298621b6c13","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":40,"integrity":"sha512-ZOpEDea2lfc0hs/9zybmHbwNLIuZSt4tDwcO6HKtaBI00O6QvY7EVP+jIgeO5QhSlxMDaHllnprlwzG/jzbDQQ==","signatures":[{"sig":"MEQCIGa0/7hShohO2dp/wG8VnpJfDizKlyubj21I8iG0F4okAiBcjEwClv+BfOM7nS9pr6Cn+pIYOaPz8UXGQUmqzt/MKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D80CRA9TVsSAnZWagAA2ZEQAIjdDzrU8oqNdihlpcb2\nmFXU7FgqPdbS3PyyFJbwcjc48Yc9xs2iXQb1800frFWPKsAfcNx/ZrFJXpCD\nwhfCsTvlHhnczfHkQwuyaSz7NO9OfVIOWcBghG1q5qhYO+6GQLdxtiWOo8Ua\nj5I2prZt1GPEpfArAOGkoyaRs8tZNwAhypEz19NAOb5EJx8hb3OMvfu8q4Xi\nYLH7cYHj73B+4WEXOdy0iHL/b08FB1U9gbUQKDQTczE7lyyZwvD+qgA4nLep\nSdtRsqeR68HcEPn1NO69T8JH9gR1EBx68JpSdeW2qsWiKOXgi2VnXgXb86Wp\nZxXPiU3GWOlKzhRZ0wfG6UGJDLju00wiYGf4Oh3qZEGJ/tVSa/EshwbnhvIE\nMtnowFfpeZLJU+HubKZXoxybj8zArPlOi0xkWTpwGeMB9Q3bzMVMII4kK7UU\nldnuFaIFrG/qHU1JYW4MwQeKhJR8QEfMtVaauK84fMbYyg4RyRgc81FtpQI3\nSV7VOH6K7EjIG0D1JwxUQvRyjVQjjq9kNtykWh40bciLP9wfGzsiDlFIQyOB\nW5lbstFaug4+m+QTAGS+stwwcBSCSNaZYSTWG4uKQ7GgfermUUFNOT3vjruq\nYW4IDTvMliMk8JJTNz6ibpYgMze+9jqPGvRUOUpTIvPejrWdIEKOvDWSnnq4\nxDL2\r\n=TbSc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/button":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/icon-button":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.85e9a6ac3.0_1626881844110_0.5611023373808937","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/snackbar","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc17d7a6ac4a4e08fc14163b6fc60ccb14b57f09","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.6b0442278.0.tgz","fileCount":40,"integrity":"sha512-qDEv4+E70yKVojdfLPXqyIYD9BmWcpCbewf8DIwj2Yi7tny27NYNF77Xiy4BXR2pOTfdfgjPlnoh1eKStRUbrw==","signatures":[{"sig":"MEUCIGMz+J69RbRkl3AkZrK9St8UE9xlVhHDZSuqDQ+PxlynAiEA05EAkKHACX13O73hFII22XmLcjZI0D6CPjqMXH4JxtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GykCRA9TVsSAnZWagAA00YP/i0auk3yjXCA1qypzeTd\nvbZnL2HqjXHV0QJmtti2fNNFlEr0Y+nJPH3+Wx/twd3mR2ezw4m0ld8fwoQP\n5werQMEIRvPRLocUHdgf5xSRLoSGX55gzN3mHTIft5ggV/bEbU7S6CTkdS3b\nXQ0s2EHZPYTO9Ea3WCoDBklAOFR7S+tqto0iZcj41oJ7Mt2mNgaUDa7jq3KT\no/9x12xhaw9n7V9IYSr17da5wAU2rgm+Dh8MirsJz6/TViyOO9yCSMhC/h4r\nOUEFLStwxHMtXVcqciOQckyQ1j41zgjt5pOpMylkl2irAlszAx2rnw3UEBxL\nzPZBK3GJjcxTOhYZ9R0DZXWEJ3+eiCWdY+ZMexGTsyyH6hMxEYMS6ffZh1H1\nBCDa0QQa4CGwui4zitQuyLRM7pbImCPvzGFbk5fi3og+516YDWAmiimlTL3A\nnRba8KhxDUbX3kF52i8F24vHT7/Wk+jZrLZUMDrZM/AaoOcsZ0wBVU4YE/Mf\n7VrBTAT1Sd0acUCCP+n/ll8oOMTJ0/yJUOiiZJAjRXDs2yC0bWd+rnaUmrgl\nx1jvzdM6LHi66Zc5AQK7O+SUrCG5KXYxYWVhqv8r39CSYYJxplELSHR07sdr\no0IwCPzqhSG5jre5t9EvfH5BB9A5E2WxkvVVKLLjNmKjUTVx1PtxKE6tSIvj\nf6uj\r\n=Xnue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/button":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/icon-button":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.6b0442278.0_1626893476030_0.11336757219253735","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/snackbar","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4912507bc1e294e778acf782b99d239aefd03040","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.5f00e454a.0.tgz","fileCount":40,"integrity":"sha512-hN1SDInGN2b0EyXQ2YXvtlBNlHPiIn5IxWTD4Ka/PIuMk2por7wnVIHTbGDWAEm7ctQWHLgLu9JW7QZiJ3T7KA==","signatures":[{"sig":"MEUCIBiDGDzif6+4+6JGfbg4IW98nyycu1gTQI3ePDha18u3AiEAmJ06SWpkj6SspHiWLh1JkAVmDJMcBcSrEiovxcEs4zc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXhCRA9TVsSAnZWagAApWoP/jBSA/16q1PsElqnVN7T\nVX5cXfhV/CnsoNRhF4qybroIzVp9JQszodUiL1w+lEDoeQ6WKw/vDFZdLnO3\npLaih9EBwLBWxvtUuFdzPO9TBrqi7sJAUeIlQ85IoPuXM26YzcbxsHuT+jw+\niAyb34urHZ95VGbZ0rADcZ+MJLtfG/L8MsrHNUvr3y7x7RSMTr3rQN2IM3mt\nObZn4Nu8oLyuN7CwN+KyLc0//Eigm5lVrRqXWLbuPZgFkNWkkHYfQHgUdZYB\nvXQIiC7wrBfcjjTG5TUPyEDp1kKGYcNw7ZafCHmgcab80q4xyBcuWguqF6i4\n6otPwcFRoTO17nk4ZSVuuD61BB3r4/NGPR5D+cjgusP343WCorTwz2p5sH+3\ndbV0t5kHgHbM8s3hZ2R+yJ3ozQlYUDs4c196v5gj4XbmxblmxBdaRZQhKoEz\namDNhBoFKtydpkkTPxlXkkaOjN1VAjPN0GxCcOJd7Ks/PzVYZ3gCb2NwAoDo\nmDf07D7t63ATxJOgHqwjiGxI/qcqhtfUW6WS1RQTMRoFyhKJQwvaKQflZ7Ls\nMPVEmpCsbxurPcDZF0DMtWBCoZJaWMPeavMam/I7mYWihLJ3HqjXoLC15d6W\nZ2YxvEYOVLwqC6aDV8re1zR8lOSGtKjU1kj7PrXM7OLuBv9PyQEw+isBUuY/\nVqJs\r\n=xe0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/button":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/icon-button":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.5f00e454a.0_1626973665524_0.14554636180805347","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/snackbar","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"144668c987118a04a16891a6a4554cd4f9fb680f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.90e08fc6b.0.tgz","fileCount":40,"integrity":"sha512-J29vqNeaGLYricI6Ys4dUwqcZD3d7TwaRDg/SuflTvHlndDq4kSEJPedKB/7hNXe7GNZFrk1u9MZLCq7FBcNSQ==","signatures":[{"sig":"MEUCIQCYpPGajIp9y2PiTOVoedHxMXIDLFHi+RkcFJOo8dJ6tQIgR8pyJh1roXSX4xDP8PUgZgDGgGNqYpIpeDKVa+ayVas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gG+CRA9TVsSAnZWagAAaQgQAIn1JNtCtK6nzBDGMVqE\nbHgu7hSpdR8SsnMm6sx+p5XSSMZxC8BzHKQ32k/1UWUEh75rgycoKRpfGDVk\nmOtXq/jTQR68vQu/3mXY5UZt3wjJFmGmW32XJ2w4wMLvwFnZJBqpyAdWsx7r\n13ghvoW4exUykNma4QyiMUPkqIZrgrec7ZJS+6E2PG5rKUl90zB+5tfqJgT9\nurepyWgnlLHW0TVBD0LHgdoCiOVjLTP6ZOMNX1dMvmDTVXM3buti/PuWzQdf\nGzyjmItSs64e0eVSP+7fZkwA5OdyOk3V/tAlSYSjTyj2J16pP4/AEzQG1HJa\np2q4Nwr2vIO+zYzaTxfp2PpI0sL/DnKxxp2eaU/eiyaZDSXKPrhngqHvOZlG\nfyxlDcLI5Fl9Av4RoYZcPWRrHEDwjGZg93C58I47GngswjJ/H1ybrasHlLKz\n+C8lor++sOUzLgone42qh9+zZSAIzMdj0gR4Sf/Hl+aK/qpE5nhvINS8bbOM\nAa2qvXhYEz+a2J9bp1ZflgdeEypUb6lffe0zq+6CvwC3yaziDUy+QheHaKfu\nbNfP+e4aw3mzNFS197j/Y1JhrjlrOEIiAu8wKwe9V8ZHivLOq0yL/NqcuXyp\nQWEI4SKV9CzxgQ/8n2M+KyUDdHETy04IkVpH1lToMFQr4Jc1nUK6ryALZhnK\ntwiR\r\n=uyw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/button":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/icon-button":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.90e08fc6b.0_1626997182388_0.8680958156856862","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/snackbar","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f279a1b37f65758fba6ca112f290af877c3b05c6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":40,"integrity":"sha512-n9zt5kwOPTUvOMeh+U7z9VR4TdPQGKmzq9ev1Q6H5D7HktIN2FAvqTrjd/IYGTyJ37EFJkbixncd1LF8vEYGSQ==","signatures":[{"sig":"MEUCIEvDeRGFPvkWpzGQogWaLAQ97GtXNnM4tYMPh8A+Np2zAiEA699W1xL0VkD8sVCZU2/CGT/GkfY0QlvX+ynLc1jQVWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbSCRA9TVsSAnZWagAAn1IP/2ZGvqyjB83mS/dlh18F\nkwZjo6SGkRu2qHhZli2KcPbSv1l39wH/Q5eCryzi+6gldeUprYGpqlPONoNT\nCoyGKEl5D6lDn2NwdzCUlHjAbb090auR322axCJ29JLa2908cCThLzW6uNH+\nfv/lVaQGuEsnjqGD38tNw8+oH33FHpi+gYXjK3EGDFQYqrAXEjB8MKfRDui/\nBsLo2Hjc6wPBvGNQoV6CQbsBf9l6xB4tukZXRCLXE15JOTk6UyegGoeLhsym\nkKT2e7JyA1Si/PodNeE130GregQ4YEIFn8gD9iR/kW0lB11RmyS2rAi5Xqab\nHaTxw10WSJDYN2SFe4vPlL1VNnjtZamRvQdBFMZtrG6duilgHkQSQqHQq/Zo\nfuGbj8imrE1O4OC5s2vuzYQu0txPIQKleWqKUIwfoGFCKtcp9zEhioJiWmkL\nY/cOgGtRu2tG1rVW3p0CfRhbPEgOAwy8+2Ong8gCvkiE4TLubt8mYG3Gu5Es\npiYP3oVKeefIciA2SItCA6wexJ9Aw4yhGwBfkZjhj27B/s2CaJrl5DWbR+6z\nrszncO97NH6cvKL078QgL8uG562zgscdwnewnYXjYvMWrek7JVBkawbUp6ei\nuA39PMXigS/QouBRPX5mYiVruPGKXNsISsTyw1VVaKcGgzexDCuJrTxjdRY7\nSdsV\r\n=COOu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/button":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/icon-button":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.cf5b9eb86.0_1627064018035_0.4095761057125811","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/snackbar","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeff7b95d62224cf650aa1f990e8445c31219909","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.3f36ac75c.0.tgz","fileCount":40,"integrity":"sha512-/kvA+QVm3emcZkgKAh1EHPlTaHCnQwSVUXY2El9ZA/R6dLeNgk+2x+KAGgCwgW/0XdFghf+fsnEKgccymzFcEA==","signatures":[{"sig":"MEUCIBN4oy1xBms8o8PiRoLiOpvqgSy6At0UqHU5NLPLPz07AiEAydznHpH2/IIAr6iZA3pKJ9BG800DCh+tMG3T4162TbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wt8CRA9TVsSAnZWagAANp8P/jO6MoCRyAP16uW1QYBN\nGDcm82EsDvJ/+Jj/C3jpqAJ9yJidq24SdjLmh2UyTQ9uhtuV6NUZPi/L4FHi\nB5mo0BpaZI4TTvNVAABYEkJKiNsflxEQ6MhEIGXBvRLtO2WC8SPBpuKoeTIZ\nA1PllMxMCdwy6mj3IPTOFdaNBkZkEpdvI2mZM1rUXsmL2u1Vh6WuIW7FTar4\n6AFsQlC2reaeUmWsGvvMijWCmxrTNqWwOExAV02TwhlEXtLqoZ8+zzv8NX7V\nzuCMqRm6jLyMm7dQLsErqQceBUN4BCgWfbRsLjbdHhMqYqgdjk2JQEia+FUC\ni52IM8oiHreKYq4h65YqpMv9vXyoRDkCPTSmoHAYU/0bbVx5++0mUfPDYPqW\nVKiGdWvvxV0i/sb2isYxzYnVZWJ4AJOe5hKEdc0N8qH5PY2i7AWKFt2kM+F6\nqB862abrKLYIQpFhZOq98r7C7e1bIEeqvqZ5jR4lPirCaLI9tYjnN++VONTb\n/VSGqmBng7NXkViGqzLrF54oNUfJq23E1lEQM9JPsH7frRv7tL5HAWOfNEt8\nj7Bzrq6IdokUNAwiyMPW//gXIqpTrJcXiw/xTPkmMXutz9vV1OFKtMBWWeY7\n6v7t+1OmS8DpIvkjuzEmozou9W0P38NzHkE3U1NTrodOUlGlBjWnzRKTwZiq\n8ygT\r\n=eK3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/button":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/icon-button":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.3f36ac75c.0_1627065212260_0.7011404391499048","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/snackbar","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9b2c703c657deacc2fe73e84e2cd05950a46c5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.ea1e1b850.0.tgz","fileCount":40,"integrity":"sha512-/db/gWDMWT9dsD9l27/9PQLNe+PatJJO5cV0dXWsAAJUfxuRQmL6k5bUaxnb3z6Z7LK36RDZa9m7K/u1qS2psw==","signatures":[{"sig":"MEUCIBI1IBmWVNAxO1UsrIM7o/Z9oA4fpFmKgECax6J9Bud6AiEA8OJ8Etw7uoGd2/EkbfoB3YQQMS6pWr0cA7B4nw/QBeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6jCRA9TVsSAnZWagAAJ4YP/2OyRHCNdgAWU2Z2RU0t\nGwzN7/RxzRlt2YJ2P2iPwdrlfaZrIK9O+tqLCMsZd623sJEbYkwSS0g5T+xA\n8N5D1BqFt79IasHjCUWzSKjHpN546wlH8jfKuYC0WNexy+AOdXkhNxmyyo8b\nQv23p8N8M3N3/gni46F5wojVAhD67cozt3CXFMUo9YvQF+EpgUNcVw4JM+iR\nVcDWXW62IIatky4FCTzKatP7q2XKnM4SnyoTMCCBvxLKGL/HOm44bO1WHf7N\n/DZ/id+mF+DT+TqAkmqYr8UsrKNqw1iOqWNZFJTQ0IFLcwN3cReyQmpq6d6k\njxPYYnMrZB1mDwfrOl07uRQeqqeCXL3czrsFCE7jf8+qMMa5AVWQnAjn8Vtc\nTn4B+bmrlf0J2lBigIruUQ64niFXCLDLfWAqrUQm6d4DBJqhEOVPiil26y4z\nc8+OU8iZqfLw+S/wpwXo/eVCkadpkrbVnCFbsHfvWsT+kl5G741xBUQ5ORzp\njmbHnMkh7RkLyDRHOvY6Upke4WlxpTx/2N105IN+lad5+pCSBRu5K3yPXNp2\nzOpbhJwkwN8qzAZTG+w/O8blXMcvBWPdLygD0qQ8UFDcpklJBFJKUF5rvD4X\nD2CkOusoJ6Z3dn4PxTJEKcKzK3asMs4TdCEc2xgvI0cY+90CzPipZW064CWU\nV7+X\r\n=tVFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/button":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/icon-button":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.ea1e1b850.0_1627160227538_0.8880286107547726","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/snackbar","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8351d1d11236e51e56fb30844be5d7440ca0396","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0-canary.22f390c43.0.tgz","fileCount":40,"integrity":"sha512-RuTeXclbSSvWxIaw6vYmorwo6gyd6gnuNeAf3IcwXfMIhfuMo1CrehNoOU9FNJbbkr6cd3ekqs1R1evjWfsyFw==","signatures":[{"sig":"MEQCIBxr4OJntfx3nadflJ94Ke/U4E231GaD0UIyWSLESN8+AiBf17ymTatQ0cSnGdVFbEv+W6eQq0r4av/CJsSA1hKI9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFf7CRA9TVsSAnZWagAAb1oP/iFHTq640Q6k1HuGeDr0\nqpTpLMRQO9/WJLGwjY9b32yQqa0P5epWwntzhsNYun4eJU/QMfBLzLdqcjme\nYq7fqk5H2gDy+vLqXNx6E/YTV96NjxvZr1eHvY51naowu5bitiGPOBpEUmam\nrcUONT7gyxnJTrXUcQ/m4PTrJfxL6IINFuTPXLhdHoIxraEKerZjg2jnMWZv\nY+mxWOdgWiX/y5YHKf0fbWVXtw99PmyqHv9ZB1hKoJ3STZkmFe7p72SyN/qJ\nooZvU0LF7lPLtnF2NmBnWTaBz2z/5FUObwBB72/0OQVICqsr3m7Yf+X9xkCr\n6zI1kWPJab9mH97OnE2nrEVhLpke19v7aqsqaTPzHEKDtob65ht7bdOcY75U\nimW7j+h4NIOpGVYoe+luRy+S4QVdzxTwr1js1YslnDziA1EhIhtoLuXZCdMG\nCtXxu+S0FyT/NnxKO23KfTiP0rMGuvUqjEa4LSuG1I3Njp1/VAhlRmlt3KNH\nAI+GOgwzkZaZeCIqBwWyQtvfnM6E9zc6ict59MfY7IctIlhwXpEuiL1UGInd\nuw9Eo5itPa4cy1hz7Rm2iRoUPJfGjezlpUpkmF7q68R2YJrQfCotHs/LD9/q\nPBqWbyV/KDtP9B36LiKpwwgPT7fLSCTn6OfNbx9DpzqPV4LkhwltlovhVqEw\nCK2R\r\n=Xril\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/button":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/icon-button":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0-canary.22f390c43.0_1627412474917_0.7641099979675405","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/snackbar","version":"12.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ea2fcbfd3493eb366a17347bdc34653b1a76fab","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-12.0.0.tgz","fileCount":39,"integrity":"sha512-n3GhuOhFvP8R2fDu5hu1nOgVS7N7wIgTtJ7+cLzSJRsk3ph6D/juPKnWusO+ddjdwLtjVpIoC+jSsE9JKeQW8A==","signatures":[{"sig":"MEYCIQDp33BcASoOOhFNi816MDvLt3tHUx1pfSvoLl3Yie8YlwIhAIS3cWmWR4Ls1HuyK8yAOX6vSmzw/+QPOTQC8zh8hE75","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPACRA9TVsSAnZWagAAv+wQAJgz9Lkp7YoG7UwPu3Zl\nyEoTf1PGpuy70teaPJX7bH4YZDIlsehpr57ai5I1qDfccke7jlmrpZv+HcVA\nC8qlW8LpdMaZPCXrFOaJkkKekzqKm1mqbwAgl62wPB8SlH4OPA9td0TyfKce\nRrTublLdzlN/SZibhW4HltJ9LPi5Zd1rbPk02T8bFQtLm2dlgvOyjDChTE7M\nkWadjB7/F7JaZCXNAGxOVw7sNr8d2Ov83TQ7bYPVOVz4wEmkM0hfIKpLR/mr\n8oEci6RdI4ADvsOacZcQnD9EQ7xv/BTbG8giC0v30qbShTnz02FqXWTHTE6z\nMpnlqen7z5S8tsideFtnnWSHcghqcv8KB9AlhdUWG2cnVQKHNQdJrVAGbQ0E\nozYF7lWuseFSRM7WStTkssMnETy7r1Zbrf8zdAv51SZc4VXAIDaz43I1o7/A\nv096q/krezUFmM2X7i1n4WogRP74FtY/eC+zf8QNHIg4w/yp6kwivYClTdtz\nf8t/gJrLgTo38UHn6ThGdfNKGE7GfnP17Isr1hFeiNJHmJEcgLgjgIYQcayM\nYKKcSGKhS/3REpFtr2mQPDHlNf0nmMm/X79TcvuqhHh7kAETK9FALsHG5HxU\nn5iYF+mBrRs5V37CvISj7SS76jdvAfSKkEaFeQO7zIJDwcYfBUhoNVBJXqnG\navky\r\n=HILE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/button":"^12.0.0","@material/ripple":"^12.0.0","@material/animation":"^12.0.0","@material/elevation":"^12.0.0","@material/typography":"^12.0.0","@material/icon-button":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_12.0.0_1627415488070_0.732869267899529","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/snackbar","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50dfc93e15ece30fbe538ca0a5b81f2af12c97d9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.ae85f7eba.0.tgz","fileCount":40,"integrity":"sha512-yoSr++DtSHTXTq53+1jducRMIV2/+fnswSS4PyrwaTmYQSOKJLX9vD9gvZ7SrBUQGsLH9jXXYNgc5wro/BF0iA==","signatures":[{"sig":"MEQCIHOdGqA7mhjALGrYTAt0jCJ3xi5wuF+a5GdwgW29AnnSAiBcA849zlbrMoUzcbPyxhJ8OSGyCl7L5rMxNkiR3UP2wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQcCRA9TVsSAnZWagAAxH8P/07xhrqt20I8slU/jcvA\npkEBAnuUnGEl8dQVPfXOKeFgbSjOFWcxRPgpHpxRF73ZCy02WE7lsIi57n4a\n06fRnL08zqstjKajW+2nmSuKK/LjDogxkH2fbyTR3oKrFNAG56i16jrpX8Xu\nKZbjGlw9nX6nTE5/aLOUMWIUNOgaWEOP4YMng2SPaB6udchZMGXR2MwP6wTh\nxcmZpsFw6Jy225cah6NGpW28fKgk5FgLVAopzNGK4COpvLmBk9+O/Duhg4lc\n0B/rvbnHKglx6LvXhow2c5eQgyWG6rEOIUMM9d5mxM4FPS7G8g5SmrUcpyvt\n0uQTXO4GAlN+UFOhqLP+8TrR39WyoLRc5tKlJN76VoVx6PsQgJQii2x/TLdb\ndtDHWhPl3u9WaIabqMklqbk7eiYxofA7QuSLmN1Qh7RDA/1sewkbA948Qbto\nMJbQhk6lbqTTUjrrtEElgcGxh2Td54j7VhlnzjW6OhlcZ+UjbcpVBjJtDTK+\nSc0Kzlo0HZKexcDFuX+TmFgnBqZdavoOvD8CeJmK+RlPUu1LmPLfcnG8C/zT\nEjdhaZG9ljMGMIsWV5RaHzrWRFQxaT/sbyvqdgY3xETgYKcJlXEn25gkRQUV\ngiPwU7jZB4WAtq6ZfyDXlp8mF4K+cPr8rork0CCMHnBRKduf1hegX/JDBpjb\nAywU\r\n=pSMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/button":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/icon-button":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.ae85f7eba.0_1627415580415_0.6423878518167037","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/snackbar","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"527ffde73760953ef5ebf1112f92fd7d2003a6ca","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.5981207f7.0.tgz","fileCount":40,"integrity":"sha512-NE7R8yPES4d9xyvXtGcMTRqBRs9WAbj071CBdYGcNg6/RUhOvoAw6eD/lFztVQoqIgcFbDQjBxzcLaaeOGdXZQ==","signatures":[{"sig":"MEYCIQCL9t96SU0nfIfY7BQFt5Vv7i+6kJ99Mara6tMQcR6f8wIhALNaV0qNeNsJ5rLgrVxvk/Fk1k6lLrGSZXmxNtvJi+oq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJSICRA9TVsSAnZWagAA4M0P/jGbzvmJBK1qaJxqyskn\n+fBRzQdKDWNejjeCmuAiTmHAcXQ8YLrxPPBkgt6AsbyskX5faNZ2LsS1nOIJ\nLsnrniovMdGYG7KuP1Nfm04g7mzNlg6NWNovglNYc9o7jhUwAGos74wmuUq+\nBpHC6DcfENSAB4kI4I40ODIsrup/RTLfplJlRDpbfpAXgEYrX7GG0hiEi8K4\n6ka/PMHtuCs/JIOUp4emxZcu8To7zT2qkgLk0EsMZJV75s8rkGRIPy3GUhrX\nwIcdCiIQ9NT3rcFU6wu2EH6l8BuzTSrJj9glOw6OvJhrzRJ4kC9cOfBXdIwI\no5j4Ow3GZC9wyFeTg4N1OhAjUYTXTFjEobKVK66yzUTkoxfqDNcjuzIiyBxG\nPuuJf41t++b/p4qw6VxQJcxC//AtYyhAjj6WLxGyQvQ+TiJ/sygjGpUg94m3\nnub0pPbBvaycWbZYSOVuiAWGusgK1vtWrOMB2/1siwNYHG0AAFn49yMaIj6j\ng2JRkWCKVqU3u6XugkN6QDEyLTY+t1lbJzmbw7Bt0TkAW7T7yVqbk/I65pNb\nk/LYxa+nChR2IX087Aq9kdgw+rhs5K3uz8nEi4sNRYpnXeCjVixYZq8VavVo\nXMyp/Hfw6ow2jj7OE0xI63zZ1jiLu9R3ppAuaC8y7LV9pwZHZoMAKHjSp5Wr\ndYz0\r\n=/Kz5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/button":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/icon-button":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.5981207f7.0_1627427975987_0.04558917377123084","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/snackbar","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d8e3f910df95acbb1487c814fb381daa273445f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.83bdd0222.0.tgz","fileCount":40,"integrity":"sha512-yvHeKGJ1wS1K25XWYS3aOBbNDJu3mhMvzBaiTxeaZnQRTd54W/z4u9Lks5GHylpC1cRxZpxpHPXejnEcthoQ1A==","signatures":[{"sig":"MEQCIA9MTA7kmmtDwZ6d4uwUsu8I3Du9/WF8PxZSQ2sSx8W0AiB2KPNbpBZvW8Ph6rrBLISUuWJgwYMO+R4zTE/wX1dHaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZN7CRA9TVsSAnZWagAAXzoQAJ947FFgFFhoRcuO9YV3\nBqkPNotOLxSyJheS/ta9oHe1rTWJTFKrvq5JokOKX1a/xOgpcyTLH3AorQ58\neoBUDV2NzeCvadQJ1wGAyklzzzSk+FoMZ+TINxVxusH/r3Ki8rZLKpCDSNAv\nyu2dJCEQpuYuNoo5QJIY5I9UYCoaAwLrdkyz7bXHMWhlxfMUL3zOaNgOdWCm\nr5BpDIEnWxBxl6M5Obj2hIQasYjlP4SbNzAZpUprQK1vOegz/FRj8I0PWpXX\nhFO8oq5qcQj/t03NSHe0u+JHy5IVlTmz7WFiTYfOFfXzHIuGlnzPfi5b0rHw\n7LBQ4GmvywbWiRu5xq2p9gpZpDpJtig5Leu0IpWJQtYk50m9YCFeABTJvLEq\nn2wP5b++lJmnr6Z2xRSAEgEVR7iZzkvbKNTG0njV/5w9nYBbX1kwGZq8Cq4A\nmRSS48lfSLXgTwkAGZeWShn0HVHu62Rqr9OBOvSQc4hECIF1ifr5w7KntPEK\nPItH6bNOmCF1HA9/QkK5JCNtpEzPo5i6Id8vrTxMgT1cHBG7hi/l6CuIeHY4\nT3qvt0ksJ2f/180utuRjXMdUAzP8+LNWsYAA9VOBOgzl+FRuhZjSW8yjPHyL\nTb5hr0KxcZ0CRK8N07vI3PCHRsdVlcRlOKISPFcKwdEB8NTAu1qJHIu4vDts\nXgB7\r\n=UZka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/button":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/icon-button":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.83bdd0222.0_1627493242930_0.9095696256410424","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/snackbar","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb596f06de1de6f4fdfa52b8d64ef00ebb083d75","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.28656298a.0.tgz","fileCount":40,"integrity":"sha512-1YMNX0TFcP2Ax9JENbfxbPtHBTAB5Nma1dlrUd+cJooQrsthjxiEPcpE/6QM/9QOABpDR88+E9c9UCwjDaxUeg==","signatures":[{"sig":"MEQCIH4Ewge/lu/RUTxGd0mJ/DmF4QQICBZ40JaGPNHLLhh2AiBjjTwdZoYDWKUGwCafj88b6o0yEQ05Ub/7w9Cbxrok7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvADCRA9TVsSAnZWagAAkhUQAIWoET1SNYBRXXiJw9Uz\n0J8UZKIIlk0Ly+TudYcsw+qugr0oYbyXyon6b4/0rzqHiB6K2pjRJ/Ew0Mvu\n0uMJkDzu2cXFiHKL0/kof12ZK5nlgZUXZI/VDwMov3w4djo/71uXSMJiU/CO\nNaIcOEs6m3DqnTEvpYh03UT3f/MdX8kIU1sKAzoj6WmqAgXuX74yGohv5wrI\nVN81k8uyDozJ0TqvL+nIVXi6JbQbKJllevPypgQO4T3vBco/9HiaXDykMZ0d\nfbaXyFPCYo/voDq3K+YPabM4ClvAXn8HuCGOjncn+6ghWSylYUUgO9Q3MBHJ\nikDWowRAjX6c+pxwF7maEf1Q8KTOWxK2fcvcglna/GNQiiPxHnXM4d7eQ5Ib\nw6qYskrsB8ykGfPXdRHbULItiwzx+PbsLE742SU1Nu92Oec4w0nQ7dQ18eQv\neBmfhVhZBc0lsVDXl9nVCXiv/zqtOgZYCB7Ep1JmsOWeMn6bGZjGNvryc1lc\nfCh1MCkg1HYeWJ6CbVRsL7MnmwYe/mpAnw0j0o2ce73fuStVjmBZOpLxqY0Y\nZfHCEumbPXPTniQTJ+8Y+pCb6LWDnrUmZlqpM6g/qpkg92Olwlc/dx/TAyk0\n95080b8dY0fpbf/0ASxF0PmXpyNA6+jby3ke+GHzoBjYABR2I7Std8GSPtEq\nh7Jq\r\n=hIPJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/button":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/icon-button":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.28656298a.0_1627582466874_0.4786709249347538","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/snackbar","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f22bca4d00a98554c5b05dceaad28ad86ad3f52","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.9e797daaf.0.tgz","fileCount":40,"integrity":"sha512-H0BSt5jC5BDTJNd+UlxDG/B8daybjZeyP0J51/mo1a5yFETWGMPjdxGSPU8893yUuTtd6c7NyPFAIx2geP2qdA==","signatures":[{"sig":"MEUCICx+5JTi/DOMbefk7IwTpsMnG0Br0f1GnhwG4RM4XxceAiEA2/XNs5QPCPRJ7NQK+IVDEZk8XPtNi4uGOuBZn6TW4AM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvU7CRA9TVsSAnZWagAA9QUP/2RXbrg8CmFo1nhaSD21\ntgtOrc6NhAKck8pO+YTF9c1n/S1harBS+cPojzMg9aJHMGa7nsRwQGRp+46m\nP2BCTwBEj8uEtPDUe9nHAoceKzeOQLHGGDJX+kyBjFpPqjT1EzT4MKmOV5OT\naPGImJJ/eiwk36MOlFYhUcNtuZ82PPUlFDSSBgWNhgWKGBZq2nPFPpjhZaNb\nqUkFGFudD6WGnFqIgcPEitwoXHXofPilPjoMuoK02ZTrMHNlC0kWQsFGUw2H\nooW1CWaIpGbsTs0cxApSy8MxwNuetQ6aDH0pH6+W0stnTNXjG7DEhs0hPUJw\n/08hgvxWtCJKnwffg1VEUsfFpx51ReUHlMbCh66W4VCk+hJMmxsN6lscbynC\n35O3cyHfi3uhiqPlw9uhZci4Pt2snOq/pzZJe4EGoD21gI6vr2SFReWLWGVQ\nlV6YrAW3XPQDu49n78cBfwmqzLafNN6oPBbzVvhjv4kMZz658zrdANkNzWHR\nWwkCNnjTHoH+UNyf0V9/feuHE92IaxKdqJ5G42ko6+xcwHHFCo/+upolkVFE\nUPeoYrHvIkoRtrGiS9kfTKQYkI1HX1hlp51qfT5/1zHirR+Dbrk+J4PbcGyN\ny65sDcsfbUD/jwvluIzVP/nxwXmzt9Veoi3wAmRkr8Y3rmAw4fgEDz1CylQh\nJAHX\r\n=46ZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/button":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/icon-button":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.9e797daaf.0_1627583802923_0.7896033837710343","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/snackbar","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10e0ea1f3ef75634bd2568157dd79a7f1006ca3e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":40,"integrity":"sha512-f4/9VsKxz9h8aSI8+ujHqGyMiyg88iLkprzeVhaUGbiciyVUI33funEpW0CHHjzzshFC2NDNsnK0oT8muvFVsQ==","signatures":[{"sig":"MEQCIFFhuEVF42eokpq5mVy3tA851EL6Hl+iBe79NKbT5HMNAiALPDRU1d+8UozYHOnNF2GkRwBGttqMdRVkQAL8qhU9uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE24CRA9TVsSAnZWagAAzhkQAJJM/qiJ9BEzaJgiybbP\nuRHKYoRstLYT94Je34f21SDfn94sjXVGP9TTuPoFW0WBQCqd8D9u/eG0DkZ7\nm2Bs64NaozzF3RlGcWzperyc/qe5bJDVGdBq5ApyI5d2khmuzAANY+QVV/5X\nPpfnPLPV4agYfk3ZAnRgmCdGbqRDkRSi8hwnCUZ6IhupfmRObxKPNSw3H7eo\n6csgFAYUBNWp3xN4HYvv1GcDR6WA0roVpBA0jMxTX8jHIbblM9GBY1vueEuO\nbVB4kYbesconudPXBjgtQ8XU/kVPTVA07ofKpgmZX1FowdECmjOA7X7BLzhX\n8M6Glugfyk3hsMvu+oucIp+RammS4pVTL/3Hzhwgt2ZCnmaRNT35zm1sjEyb\nyQDgb6E/zk3JnxEjAvABH4YjUTjdQYVZCG5Cp5xXuDk4xtIodzgB8RSVeBD2\nRm4VTmt/5zU9efTd8QPIG2gBNIvIo9+ldusJ9Z0ZxAXQwdoNudTPVkWW3jnW\n3cg0q4Y3xCONW9sq4elUCaTRtN+/A4p3qGmZs1SNwG37fnWpCz1rjz71vFUG\nehY9SvCxGBwX35bt5isJUFSvcf701f+FDyO2yd7nU3A5bFBOwOqOEgWGCsAz\njAmpwnP3K9vaAjWc03qzBL44Sp7hlNXLFIipQ86Ly09VaR8B4142SsXe8FIr\nEvdf\r\n=+uyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/button":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/icon-button":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.adb9f1ad8.0_1627671992009_0.991481934858663","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/snackbar","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa8c3a3c4df94fc0da1ef2dc0a79b70f4f79e902","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.cc5377458.0.tgz","fileCount":40,"integrity":"sha512-CbDcj5GCAkmlaP45JZfN/jfjuS+eoRBQprqGSYSSj6/Z4uehAHnC6X59ltCwjm6O+9yPwhi77yzy/z08wctJ0A==","signatures":[{"sig":"MEQCIDwAu6qtLr/HNaDIwllji4M4DL84aKOfuWUVkjnKS6wdAiAe+Qk9qvQCtSSw2062d4pHvR+sfYtY1qZ0tRzIxaN18g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHB0CRA9TVsSAnZWagAAJH4P/1v/IddyVzWEAk0oWA0s\nqgSRiloi4g7ILRhBuWSeyaI6AZh1Q8gbBiBk4ZZYRl6sVMUWqohRyFJAIOPU\nP9baRudOZi1yFRK4kz1GmHCrWVIrvuBZF5icBHv1681OR1oVwqtCoRiduciO\nHGkNXRt3q5zXiHSYRuPOWgyDYoSsnnwZgJYkdvPijVx4z3dbGLK29KJePi8Q\nt7Nk85fRJFFP81dlagdORyFtrMLpFVKjJGAizjzUDT9NLGghkF3xli8mC4ZN\naQ48c9wEcTk5P3foHtoF0qmflQaH+0AyCMqhDT032d9NLo4Zqa8LpBobAgQl\nVHqA/MQ6w2jYY/zJ5bZ2mXCbWKEXlBkvfe5Q5a3KWjppxgfoUqNutpqJxujt\n4P+Mx4nbH/Rplv8ptgcbv8h0/34bIIiseKdt9Ym2byeYag61m1ExFGrhGfev\nQr7DvoQCZzSpfhb2Db1KV0LEg7vtLhQv5TZUFf0XsaZreGTMRBBu9inBt9Jd\n4pYka6NtNRJtg2JTAZoUTIkLLEeqBboXFBShho961qZQOpvLbo8M/+xjfA0W\nvCRO+GdSFXxoUK2rNRfduhv3jzz+BswMAMJGENQVBw176LhzuSc9WiazK2an\nTQPGVTltUSKb0t1U3v6Q+bqOYi7QYvFPtDWAnxR6cf5EyhYJXgY2trAmWeet\nJZtJ\r\n=ZLa3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/button":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/icon-button":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.cc5377458.0_1627680884228_0.0536545625086553","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/snackbar","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99c880af1046dd941e9bf33f50a7b155a5601658","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.a395972cf.0.tgz","fileCount":40,"integrity":"sha512-qtc6BTi3x8/CdjvemJkgRKmTYGnkMq89gtEmAhvVJaJUnV49nHV76gaFDw/NianXKs5V5WplIa2AoWuTpdHglg==","signatures":[{"sig":"MEUCIQCGXg1qfOQL72nHz+hRY5OtqVQ8hj5Yr9N6np4u4/jz3gIgS7uVcIUyucpfSv/SBcraxzL84snIibSJ3o02NeTGYJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQcCRA9TVsSAnZWagAAgQAP/iH1H4wqaBZ2Ekv28gmn\n63QKeKXoa3Eellb0jX4pzIdOl7w4HnpQHaasJIWeKg8Nz2+PWDkAihW/H2/8\ny/58N2PEjlbuq52jHu+iVmn50Y7yD4Yg7ztB8x4yWAibxn7cPWmNwt7gdvT0\nwyjcCHOYQ9R9Ur0lGNOzqUpNT69H9QGp2TWeLerIJR+9ez4It72dP6lIK+eK\niOdp22Y4pwptEiCN/RvuzWs9Z+z0K96OPp/ZFljRGvjptEGPPqxfrjn0apev\ndndJSp3WGJj4TIK7Dbo7UxBAOOSQSiuKTpak50Zq7vG1uvXKCsg06qn5RyGE\nY0e3i7xJtqDIQMGeS+RVvrS4OQMisCcaqWvXHqbtkM4LnhHJXagJBAsisoT0\nycPqSnt3lqqRbx9Linx+B43vOrZQLuAbEbA+ggXL7ymSaKPekKRnc82TEzIg\nwEJMmTri99kWLE2EXHH6My5nIk4CiPHX5zMMnAA9n8OHcEeeQCmilbWZjHdH\nPBIz0Qy7f/Zi2+QlyoyLYLw1ApzhoQkozKBQrnAOtYgEAeIE8iACx0YcI3IQ\n0oLBRQswVvm9utf7WJjdXu2BBP1/gpnwbLrMbMRtB+rf6waFs8X3XCNDuhDa\ntXt8gbFouS7YDTPEFdOIBr36i2hACTsA7ek5AKn5txRZHSHsUmTwnrmQG1F/\nefIR\r\n=2RSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/button":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/icon-button":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.a395972cf.0_1628025884721_0.11843229323986249","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/snackbar","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f2b5171c35680af0a29ab38f44bbeac61570ecd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.7c96e6b98.0.tgz","fileCount":40,"integrity":"sha512-KVcqftjNfPEbDz5/xVFEss3XAQdwSMHmVZ6egdAuWrVfn0W2DF/FIrESlAR8QCMSXenEnUa46L4cMyegiTgVVw==","signatures":[{"sig":"MEYCIQCXONNE61RBaFB2manMRuiop4swJf4ho9fRAe7BTA9KWQIhAIAQ+XE3H2Mg38VDMcTi8lS1HH3CBdIxuoTIumjjzHtF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/2CRA9TVsSAnZWagAAz9kP/jkCP6F8HjozfrEhw5J0\nW8WDSdYtv2bGghFisf0/VNKl+U3jT+mqHMAH1Z0EnVrhsN1OnKoUqmuQGqV9\nCC2CTdAGEJx1QSwQ/PBjm7Y6qy8ieNicwc9h1s94hF8S2Us5Fmv0po1McM2y\n/uU+JBohJGCg222/+kbN6VUAxD+i7t/v5m/3Fr4wQS/zPNvLqUgf7t1swUez\nOBm1fHxLoby1qv9E8TpcCpFcMoDrOjzYQh4H8mUS+vNvOoYTvBihtrc7Phfr\nTNBQ7KFt8xg0yNX+DFsEADjxFr1/Ns+e3rSjLKwcf7lS7uc12+fhwbXkVob8\nzbz13X1jgRDV3OobKkkR4seBrfSndhLYAmkScg+fiFMFy2U+juIAbsxpRuR6\nIXnyy8+rhQgQc4oPcKnu6X5ZUIHkJPEiIEGQVMAopIvoHjXKoj69wQmodN+5\nGljzeQLOFG3IzTYZYxhnfSiFyumoZ2GKOZa1OjH+uifRCSzp6W/b4b59pHpB\nl68r5iVFP054iwlJjwzTN59td3xfE8V3/8j6SgjRQLI8BAsB4/htfKeYe5/5\n29wqTexUK9j31x9pLBuQ1W8EAka/RuSOSk3HUBVFTklJM6dr8PUt2jMxCbdV\nbK9tAPH+WWKUkOCLN00hPPcZBHs2OQAIoAM7uBLnZ525ldpIdXZQ8vPAdAbM\nBOE/\r\n=3AIQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/button":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/icon-button":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.7c96e6b98.0_1628028917833_0.43254509283614406","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/snackbar","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"469576e00d30ca050f64bd7b8a64c7b1c0dc85f0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":40,"integrity":"sha512-RhOALyHocOiTzVFMC/EfV6hDhOL3FYNSQbdi7ssKjSWlJa2h5qaMMbIyJOqujB398JboJt/nMrk7RJURFP17xw==","signatures":[{"sig":"MEYCIQCKsDGosXjy2BsfLc6fDmct+jMi5MiEhgBBOXk/iSLVqAIhAKyaTPyfTmNpFIrSPZgzqUyK5fs3laYpqIwFY4XU7ywy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCypGCRA9TVsSAnZWagAA+G4QAJA6iuqfR/SyC68G1w3T\n82BH2kyne7wMS5lJhtcJNoxdzX28oNb2zmHW1NZ+5YcFeLkaXz1hkhpDTeUA\nCl+rF9F3eOSQKcbgDEyb1G7fnkgrG9jjyv5/hdgE+8OVND1xtOYLQPQl7Ctt\nRqFvLwmfG2R9d82A3XGdFOnwTFDw++vJMd6PA/Lamvr27tSphW1qtmg7rIva\nV60a1K8i1+nw2KXOlFb/bbP9Eqf7FT9ROO5co1IxOH7dYkv3j5ORt4wDUlEA\nmXeSoqDPLyn2I1fJpCORyeoTN8ecq1stVsx+uHr2hJKYjkQonEbVITJJHquq\n282hed5CMv5did2pYM6cLqMB3XjOiCa+LVxYUrZPoCCcxaJ+jlbV7lOwU+ag\nSW5VDXLJhRxJ4iTeTgOzUeiw6/Eg68HEUP3qwTnLLuPJmAV/ojAvmY0gPkCw\nKYuGWZjsOLIJ5b7xmmD/lAiv0FPs6th6PEDkJoYIBGkQFcWYqs1P0WegHz7x\nrYgRCbbhql3Qa2P4FwUyge7Xhd4pXlnIurSVXc4QcN0dAASYEaXwHdXiAn87\nIIEv9vN6cAtM3FCSyEcT9okKiqy/smThoMyQaCgFSYQaCzm9wnsI9CsRFI9Y\nJ4pxs+KIIdrU8WDn/WgD7syxL4Dc2ff0hRCaNLJAmPEvgzeY2yELtfsGHOA4\nSi+m\r\n=9s8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/button":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/icon-button":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.a80c8b2c2.0_1628121670216_0.6422042688464247","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/snackbar","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9832d4b1923694e649e5f3281003b01ab620a9b1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.3dd611091.0.tgz","fileCount":40,"integrity":"sha512-vcqsEy2scFNPZWqBS9mPmq+MAl4cDFElX3cOExf2eZTzCZ59P5OU5ZkImBjdS5yw9R6yuMZwtYpOxvcQVsRZqg==","signatures":[{"sig":"MEUCIEUc3SEUkndMZxsHNp2udsFJksogX3uwXhAZ5SQPjg14AiEAvmvad8kd78Y1lixqkbrOvDCheiJsNjjvS5etB1jgbUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2HDCRA9TVsSAnZWagAA9jQP/3XlD8vuXRaNHUzIaPx8\n812dqRKZqq3pV4G1kT85Tjkg0G8dDijTKN424ZV824zKrc8Oy1QYgmB/kb6+\nid0VQPAMiaZhkKjjRcPZ0ic4C7+ReAweIl6bNQIvBngg0z4BVPrnt/W+iPlj\nNyaqtwLh9U7KNgApEX2aP3P2N/+NeUa1aYZsQgtUi6qiKCD9qK8tkNe+F6M7\nyLrra5P3cCMQojsvGXZASLgSu9PIjfRGy8l/r+e2LQIVaM/i929twRhNeGoN\nxC4DBgEstEmFXj/nlrznyvkaO7nFStS5fGpW/8U+PpB6rOba9xZiXtBB+XTG\n9yMsKp1L73juFDKjhIHyF47Rabj2S/58kIIKhMYnuN2VT3hTfpnCYEAFt0Mx\n7b76qBFqnWQNdhkEUgBZNTdk/b36LcWd1ghqAHIOCyHnNaxYj912nE8U7T0x\n3iFxXgXZ8GA7kQhpCZBp1nXNIPdb0w/4O7VJejI0STix6prX8MKyzBN8TlT6\naYr71cBJ+59fdpxxr995aFMScBE6ICcoCOOXhkizeuMHNkvPeGPYAgbirMca\nbB9MbqjfCjwwKnN4Rc8nGTn9u5Pzf4mzAn9YkZnc670MCI6NikbTwOmR3ICd\nZN1IEGzQkSBDOWlWTeKCpnAiPZI/ZsV0atX+hCUzS9X3cqygSLdxWf5DoVV2\nMLXZ\r\n=Kw70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/button":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/icon-button":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.3dd611091.0_1628135875633_0.6263867924404714","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/snackbar","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2c6bde7ddc8feb1f2a0a47ac007ccef38c250d7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.5dee37ff6.0.tgz","fileCount":40,"integrity":"sha512-g3zMcKBUABJu29t/alYNpd1KaJUhM+WU/RaF+B6xY3wS6RbHkUBeeKROW/+fuC2ZBBdWkfjQfTkWDVwFyRnrsw==","signatures":[{"sig":"MEQCIDylPNTkl5zWjwZj6q+5CeVPCXB/1dCv8JHqFotAY2ygAiA6XMfMZE8PIoSGu2dy1sP2TEoGrqVzOc2Mm2p8NTQmkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCNQCRA9TVsSAnZWagAAH1sQAICM2WSLuqiU2yiv8kEx\npMYHTUU6DF5K2AlMDYqALj26X2qRMuT/H5Fy79kENzIJ7gYfU5MwfdQancV+\nm27FusVONFV4VLX7W2q+y0M4cABYSSwd6IsyVnhb4PZjN4Eac3zdN0MSaF4y\nT9rMV9gD+RjtmOVQ4LjD/HLJEihWaOXkBAUOvpkXaD9/wXc+txRUpM5MeOBZ\nro+mV71va9IHU5qZ8PlFRj76s71p74iS3jrbFl2ocFfVmqYAWc6Q328YJ9aB\nRwzGTjiO4vfw3HJB0jB9xlXSyWumsaz2Al+IMB1U2egiVf0caVcVZsRU59qS\nNoeyIgCGh6FxtosjoWcaqtK4F4AxOevNfut2HsOW33rOs8dBELu53AHblqWw\nEupX/mtehx7QBhywX5B+gu6e2M3If28drMAkAq3+Gg2g07fkpS5Is1KjpEvo\n+fBEbszViFtHH3NKn7xJuOp8ic/qOzY+3GPbUSOMJCzJfW8ccuE4VQfwGmpm\nEoNnU9mPSMIGG4Q/NkbQ4OsPVtLU52/B7rt3J21X3U1e4KeGDIET2hE0C/e4\nWGwUG5hHUZX9BpLpCgp+yvnrboP7IRtiqVN6orZvSATtGhGxjp0F5J+wNSGd\ndpL5/wHL5cHSh/okXEXgEjwBxTyPUxEWXavt3ZcIldJSLRREEgGtVZO6UeA6\nVD6V\r\n=wCQ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/button":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/icon-button":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.5dee37ff6.0_1628185424242_0.4423166272943069","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/snackbar","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baa19f10e2cc1d7418cc6a4da97e722dde6c70d1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.bf405d22a.0.tgz","fileCount":40,"integrity":"sha512-CYJtnXK2t9ihAdx+N7EJOge1u4Z9+QLvDw8F5LyDkh/ldiUGFKbU99Y5s+55TvL+eN/9JT+G805co0jxOy9p+A==","signatures":[{"sig":"MEUCIQD0p/mHZkMq+bMvYzu4sakjDOrNCADNnKefHwXOvVXSeQIgdus4lblp3EJ/UzDlndVDXHZi9GcstIMIjQAHJn+LZiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEfVCRA9TVsSAnZWagAAYmcP/3jkae4Igj0cwR3wHlhn\n8EXNUfoC4DWsTY+QmgZVj3HsnaIBBhWjful6u3wMMmPwYqvf7nvCSO4n67AU\nmcp4iDASJJJmAdl1hgwr01saQf0ZqPLA3i/kB9dCr4Ksu8K2ZAVitGK9Y/fA\nwqFpLqthoA5BFIhFYBQrTPKe8DNRlsF/6naU7RXHawfQOUf/TtOHiYSpBLpQ\nqdr/aRi5giXEM2Q2TjtWGT3gzTKU6ZvcmeV/ESp8gNmIXTmmW98gIMTVAWI4\nH+FGZPbOt03VIT9eyvbnGQtqk4y65Bj7Jn2rOlfDLWST4Pg2V94EXh169+aF\nUuUcjlViD0lSi/fHx8bS485cJnJmg62KI3JjMnUPVZwqBj4vXdprWLdKQD9W\nR/lVGoXLhjT0SwWY5OHljMn8x5gcxD4EnAn54S9nfwOQK4Eos5aXbI9ak9PH\n7M9VQMOi/YUIa9TAJTO9WvOWNfyRKW9s/B+XyYdcJwhBQNwTC/jy2GkM/aLX\nIil7ysmdpAP3u/kD18XcpwpLgHAbSMK0qK9ZF/fR/PvHUqLcmjQm+vRMvgxO\nA2pEUees6cnOMOhD4QX6GFdf1q6r+RZldcvBCHNfAzbF+LGVCrzwXDlITc/M\n/vfrfchdl7JhQVNxOZ7IwrwHSpQEYkrjc13KedIrVn7oGlrgsUH0k60ugn5t\nNnmZ\r\n=HFYE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/button":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/icon-button":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.bf405d22a.0_1628194773143_0.4463429366031073","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/snackbar","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"297d7f84468a801d70f6d86ad8b983944d9f7868","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.b47dd37a6.0.tgz","fileCount":39,"integrity":"sha512-ohbyC1J3yOWoTc+0/LSxBFTO2wiuxwIGRRmqz8XHGeVY2oInTPckAxbuhuyL/E27HddEb8NKtQ4AYwQITHyNIw==","signatures":[{"sig":"MEUCIQCKDnpWtu9XxiOqEsdN4IGwrnf/SXSAuocohCKP35LNLQIgNC2gtCdNsSJpryWl/hYhGoPX5LOTfCN9aYsZa8NLuYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":464528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE9ICRA9TVsSAnZWagAAVh8P/Rm9Us++PzQZK6T1lIwC\nOLHBeBEDZGewjbbSISJ5JeaH2uW5xFO395Ec0D4d5pFx2CGvNf/XOpvVvC65\nOah1AR8mPH/WV3eANKUF+ZzxLXcplR57h7cAllsDoIs/2A46cAtP2Idk/goS\nFAFkDLdnLayiNRac8aSGpU9BN1KAzI4noxSK18LigGxbc/MrGsAkTF2b+NOG\nYhLnLjcZr2M4IuzFmCnvOI+piMW1sdPMsU26WUYT58QHua1IzKyasqKmWwjr\n2jUsQ1tCNtecqdPqezoXUImLoANMD2+dveGgsjI99rLGoEubZ/5znDW9cNGM\nY+lC4DlE6//z8XDC7IVZEI+SI9cquDY7xjFsrxzZvwfjqNWEAkqWZbnBQvKf\nR3kqnwHXxJovrfytvmB5E+JTJ/GUPelVEJMKBuuriHt32mOwpDRG6u2VQ7rl\ndqN6Fz+JC4hBJCob81tnqcltqXZbalqmJmGIpRaSf7RHrl6DINSIXJv+iEH4\nXmsVFNLKM3qbdHcPbVRZYTkPDYqi8lXBT/N0bOIk3fyUZNOCSndJ8Q0l4+yH\n0W8S6eNhZ11M1KQutuRHlsgZpYnYqKgJnlItR2pmKWBzdPVxEhjwkjLqvUrA\nN4En1zrfMhBOscNp8XeZ+yQx05eEM+ZneUqF9dyuct0ZeuvL8B772J2HSL2g\nhBLG\r\n=swc3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/button":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/icon-button":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.b47dd37a6.0_1628196680676_0.26891386692762653","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/snackbar","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e89b4d5d9620dd6787dbdc9dd25db9026b3535b6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.6c82b965b.0.tgz","fileCount":39,"integrity":"sha512-ucuqDbRNNz0VtrTVieNa6m4eF7UjlerVervZwDSYJenLWkIPm/hkxM1VZ8BGxa5Bej1wIWG9XM24IssSlwX0QA==","signatures":[{"sig":"MEQCIAuZqIgnx2uG94Fz1zF4UdNxE8zsV0rt8XZ1es9dJgq5AiA7CtSJ6UmANd8iN1zwoZMaevwoJ5AQYUD1+zUk7jw82Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":464528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWBOCRA9TVsSAnZWagAAZ6EP/A/dFGy3FJRT4Et8/op2\nA4Pjr7eV+LxsiXGMrAm6axSzieBHuqADJQN4stDSlM/VndbsUrp/lwluZzzS\niysP8CrUNAq7SAisDeGjX3tIWmeHf+EixejPZ2ir/xtOF76b9LVMzltPAXbJ\n3YT+oq1pSbWlgK9645n/DKMybOfSH7Q3mk59oRY4wXo4Ypvh5VSA6SEvIOnn\n1usmbpA43VS15a1sSgqMORk7hMNi2BTPBdL56s6Ke7nrnPUaR8ZzREUnE59/\nLFiTE7x36nV/THmiCz0UeuYwqQloHmRUhyopLBxpyuMgQTQg3FS3F82x871V\n3sjQb5B+MC9R5jndRZ8RTbYVM3qJDS0QyB0+jik7uP9TNAfNUmXm63LEpABD\n3cZvtRgju0eSIsy4dJn1AtkbE4g+JY4xNaOm4KjC6qTKjmmnFV1H6eYmWn1R\nFQ1mCAG06BI9hTnIWFomIaOFujNxQYwAR+d4bgMpdHlNzVzXLqHtVlKjl2Zn\n1JFoh0YBh6w9toJ9PYXpDBHydWzzap5j1JmzH0vT836lb2GScgNqFMkcpqlA\nyqSIL/Lsa+o3IyFqJ50iRuPIKNnSEbD2/zAacMpSwmuj+Qq2qU+7i9aVSXAb\nNAzTp5JDPJyI/+ITkzBS8OYySGG/gwsDBhI5JlDzvQCNTRMSYZaPhSSLMNm0\nvK9y\r\n=nMdn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/button":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/icon-button":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.6c82b965b.0_1628266574253_0.11586020446160439","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/snackbar","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cde523af83cf8f37212a0bafe4cdcdf0904fc738","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.4ca11fe76.0.tgz","fileCount":39,"integrity":"sha512-BfBVGVD52b9cOYuwPLJvz2SSQi3WqU5yT+oB7ZFEO3e7lTLhfwXZgFxV0Ol4iJsXRy1G6698i9QDCM0v9hrIVA==","signatures":[{"sig":"MEUCIA1LGACG49imR8mfqT531ahklaCNtQgu3dsQTEMONfP4AiEAvU1CU9zNqrHVjhrlB4FdntGHuR6XLy7N/Tkai33p/Ic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":464254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWyoCRA9TVsSAnZWagAA5LoP/RpnKjikTUswZYqY+lLn\ne8zufAIZuBILO/4pX+TCSAlS8U3+jBVMOkC3N5MEx5g1qz34BrLnE/t+cK8g\nLwfSWYXfwd3QPiLqW1yIrBUHn0W0jezZwbwLNkfRc0EmP//YwyAgSDxEkIcP\nSaEN6UnT3LnuFd1ncVD/F5IunnhznBO1iJ95D71ecaLADWUsC38YaSRoW9l2\nbikyNRyf6ZpuAV568OD6qdmjj5oep9AvusPR42PNAmooquZlwWCJKGWOwWum\nAlNiRjkchc9L8BkonreFgMhV/V98CevYkq7L22/AEJE7STj1M+4TWrcvZqOY\nyA8yenwK68TzQZpk+HsKkwqSlflUKbNV3oX2qkh/HswwJEAnLPdF2kC2t29y\nrEXW8bXxKN1tCUwG7DaU+UQ9DvcqGcpo/nWeLcQftFFs4iFKqXliFwS0hnrg\nhFl5siTcnLju8jvJRGFzpGA7G/15HaxlhEdePhfMtQvlL/7uxzFGaxeDL1ev\nNaGj1+4iV3TwLb6wZ3zUqxmqTafKKhdylFVppDHmfR138C7rw1E/NygAgrgy\n2bWeeuatcy5gNYtkNa9SrKcnuwEFGTlAeE/8dSvjH1RkUKagU8Th+aJ68UDz\nvqWDvVCZ6e2+LXUei+wDvoryfsMVqwQNENwhZkCRHDGxaD299nyAR39OF4BF\nCbmE\r\n=ieN9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/button":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/icon-button":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.4ca11fe76.0_1628269736252_0.24633406643240296","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/snackbar","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05bce97d9ea13e3b68a7d55eb711adf9dd96600","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.510cf90f2.0.tgz","fileCount":39,"integrity":"sha512-J/rPbyRpLnQQi7vJ3cOtwauz77U3GvLAt/I9z7EkpLpwzxw/4jSzDHo7oFNi8Qm2oQQAwUGaHeumROrGShktPQ==","signatures":[{"sig":"MEUCIHkCfL2IeQLAiD0r6QlYnZEDa3ldlL1OKGQF4NXC9sbUAiEArPKKnniJZa6r1Eqo1M5VgF/gTnsDWCVaAuwHt6oxQbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":464254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWN0CRA9TVsSAnZWagAA2msP/AlpeSB6hxDAiJ09OhLd\nI3hzkRlNZGOvHYLju4IceVsBZoql9n85mCEUTrpzSm0iBG1zTn4kp9d2/n4t\n8d1p7L3lFgmMW+TQAWOEE7D/l+21YqUUVMrD7Y/kdDXXjZ9xoHeSYSHcoSoq\n+qFsQnHiu6k0eS3f0WnWBIE0Mj0QbwpUZ1TzoDuFdccmTdWv2LXbMDX8yq/j\nZK4vfpMjUYojaH1vb2sxeB11bD8+ZNTQMCbKhU5jVinSPXT5i42Qs5R+JjRw\ndWqofK/9++JnEPcV+eEEB6kh1GxBvGip88RONlJVbqicVGsCfM36frR2C03I\n4ENCE2Zewu+epI6udRZ2QtbgbwzjyXpJ01bOTdKLiDpDLlmJKuZBZiQey15w\nL0MIVhTGP64wo+ykHQPCNF5FPHGvZx8vB7HGZg1gHHwT5vTLRD6iQelwa4/j\nmOHKeLv9NUULgQNZJn7OugXpNEV9bjNPLlFr7GhFgZbaxXnheESwVtyc6lum\n6oUM3njK+AQcQ36fnoK1lChHBuLuF2R69HdbK+7i8nMwLaO3EkDBi/3pliMN\nakVA5txCHgpSGcF5D4hhE5VuGoQWKKNbBNzLCD4aQMnDJnu+D0ljK+u/z/IM\nm4lRelK3u6W7gv9uz9QiHHV9XKKzrDtbAdZZxUht4Xe9dYDkNkXaqVxOHJQn\nJelK\r\n=XAMk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/button":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/icon-button":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.510cf90f2.0_1628529524048_0.7024068113567252","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/snackbar","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"349bfa1b7789960eb6bdcbaa5ff441499cbb1baf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.17580ebf7.0.tgz","fileCount":39,"integrity":"sha512-jdkMo57j5Xx6RJR3qT478XZopQh4Ktp+cx98oop0WNe62qX35kUdq2fsiV++SSwYpyQES0OFNERH1COUADYGjQ==","signatures":[{"sig":"MEUCIQCRjgAQwob01pRuxJMltt6SzZHniCRIxLLVgvyWZI+M2AIgK90FCk2UUtWaLwb4rFr+mSjGS8YTpsu4oOry8X2pRc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":458570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXGXCRA9TVsSAnZWagAAd7YP/1z+8DXymcpNDkrEBIcJ\nvvk5j5QinrIyGZp3Pnnly7h0UDIcwG1edWTSyLSfv3v4xQPOTJQWbe9NthJK\naq4rAQ01k607LDZVe988zZ5A37yiEvzZ9bl7+7vAMRTBmAUE59YfJBk7as/e\nEuAT4ibKzn4C1H9fo0kS6sjiXZjEhakKZHBhsUGozEt0i3z+cNbWsyLCobX/\ntMAOVxHjakhUUV5ex7pKSMSSkijgpmIl2QMT8KRz3o/dT7PBgMfHtVKZC6wG\nixT5TpssvZ4QAavsonqKnI/Ciuk5xY2ms+htti9p9BMX2ghs/tEl5e6T4KOl\n8g+l5ldFoaKIBzHzAGAv7KibOeNq6jTDcOlo7QlfymwHorC1Ps6oGGCxEQ5O\nBtDSji/N4mIHwqFi79oNDHwzwFyafjwHvls65R5LrnipkBX2t1lliDuOWzY6\n8JVMJqbqsO6c0W/u5csWlFaxRUeGzm9d5j7v267n+pYfiSAHLMRTJ4L5Vp/Z\nEUP/MpN+UWhm/FbC9l2rfq0/kK3q6wqYdKHqUSjVIlomI9UhBF2CKjJok6Nm\nLGvYeWs7uI2oxgiNJg8XYalCi2CH2NIYmkgjpBOlV5so5WP6X/8f1BRRfYKG\nFEQzirw71cYtbg28a7hSVj+57ZGiacyUEozWbR23Kj8VvDn9/z0kbhZTilhb\nDNWa\r\n=0mSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/button":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/icon-button":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.17580ebf7.0_1628533143305_0.48975900083489554","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/snackbar","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21456822abeef7a718027c3c9e7ad21d11a359e0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.7249a3060.0.tgz","fileCount":39,"integrity":"sha512-66+vhmR6817S/3fWHRLj2ku7nL+tY0OkOjvJwtgZUEnhFU0NOBiSCtiZ4r+OiRbURemnVGg7tpRej8e0OOlXQA==","signatures":[{"sig":"MEUCIQDEp8VUwPRiJIr6DCj3dMPYWs75aV5y9ilhUbn3XGweqgIgLD1ko2cU582ivunUj75pmPa+2JDbYntnBsf11f2ipm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":458570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXKECRA9TVsSAnZWagAAW2cQAJonF1Q0U7e21M+fHV/l\n87CpLEEhearSHOt9Up61MtL/HFAnLKwiDBUn3rExA+HHkBq/xzV0muK9n76Y\nsBcE3XZchG2ncF3S9mvRFg8RgijYMxELztbaft9XPFsdltwyjTTueW1153n6\ndC7wZ5m88Lh3aL3cJV5Emfz9wulZrW3ISCfBSG5eVv/JcJT+nxOG+NhDxb8H\nZF4mEuZQw9L2vC498QvInn7sf8tAJLDYxrKjcpLSICkRUg1ICwRTKE6ebTDv\n3MSPeP6Q6GDBwaL4VSiSZJ/AUf1Y4o642f3UM54jCFva7Qn+OIMtfXKdLkPj\n8EAZap/8L3l1N56mpJEe71uZrb6t5ZiLWRTPZz4QFpPPY/sUC/KsW0Kpp9v3\ndAuFzs41mjQLSnmobt6YIjss8SbfgnTvlmBjHkjCskQ0pyr0Ba4Xop15Mmaa\nElSPswX6y+KEmSL4GFV+p+rw7YOTqvh7IFJWfshnqiy+cLeWBRlWLXL29uXZ\nfjxqAW9zUMQQzuPFf6GuA35TEr5EWCx+LCJepgWqZQakjm8cpMw5K/OStxia\niAqUDx8Kk2byFXTloPY6UVEUxg67vBs/LaQPY+0V7sy4AzrEsmwZx/9wjVoB\neScWXh83+geN2qRyhweoUL4ZlKWE2f9GRja1H/e7UbFugoT5XDx4kTGvEGXx\nLugW\r\n=e/nJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/button":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/icon-button":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.7249a3060.0_1628533380399_0.7436344645541075","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/snackbar","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82b4a5b215261b17dc46b12b808014340053d84f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.4c405863b.0.tgz","fileCount":39,"integrity":"sha512-4RGL0R3m5u1F7wkmp+OGOHQatxr+3bdm2wWs4hMXPzEZtbhDVnLKXQA9RxJgxDINjlCRgQ8zna1KagTB9SUwYw==","signatures":[{"sig":"MEQCIFNG6oHdy1o9caRHEO6WTiDs83TGgrYinDXBl+zTvIGVAiALLOEPnvRWxa2Y120wVyQ6a9+iP/3JtGAIpXuz2coORQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":458570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErp3CRA9TVsSAnZWagAASo0QAJiriBPUxFA9aSnDBXcn\n7SUg3a6Pz/DNye7xgMjWca7BntQmVmWv1oePUIUQt6USTBuNJWbAgyn/RiBp\nCQzIIeZ5yxTHlZNGRXvXe0xdbPssH7NBHyncETUSgFaG4SyIkI50DY6k9bQo\nTE53Oe1kCX/1PXJqSV21D8YzVl7LbPlsh45jtMEwx6KUxV8WanzCCwVVoq3+\nuHLEh569vZC4zFxS4O3D0mKfFiJrv5mI3ObwvpdJnC40+37mQKaanBBQsjlh\nndPAh+xMwP5KLDaasX7XeuuBFOU7VSMIVS2B/IRwEGtCK1tfUKHRIIOnCpO3\nwlGTHuwsaCTkOxtHRbHAIXyEsWDjKP6iMc2cxwROkIt/b8yiDePfxlo+oVnm\nPlCYaVNdX0+3nzvT9Oavsx/skorQL3ITybZ3RHH6OFzeYQ1AI/gFmqKMdHHJ\n1AVwBSyv4ucqMr3euEJTW9Fj1dadp3Dcp6sf1Hsk4qcZ4/fPh6MRReLPEPnI\naEUSqBk6QACSdTghsBxEcdJsY9gkpZqsMkUdzFjw1RF2GIclYdF+nLeOg7U9\nA9P/mYOQePvPNj8K9rK7S/VodkuRycEQocgQlKuloWCr2s3PlAN5J+m9zhmO\nKEDgZLGP96BVWjTcXNbPbzAFOjVX7RFkk5ZsxBRBskbRsjJV+G/Pd7nRYyMp\nQUdX\r\n=Y+Wr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/button":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/icon-button":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.4c405863b.0_1628617335344_0.1404131551072425","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/snackbar","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d083ad64261229ff793c3770b8cb8d4f7421b3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.f4241a42a.0.tgz","fileCount":39,"integrity":"sha512-KFlM4opKJ/bifab7x9QIYoR5tIWnE1LK/maHAy191wHrZUrAfDc0oiDq6/i53ISQdSmkmcN4Z59xgrdWPPTYxg==","signatures":[{"sig":"MEYCIQDiwhPSvHiTqfD9L7mhBYn5l4VNiVaxtykbhCFJfc7TawIhALafl2Zt4owaCEGYuqFxBR5PGBOytBxD5xXttcRb5wkk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAJQCRA9TVsSAnZWagAAslUQAIO1xm8LLwlaqN+7QCG/\n/OEV2js1ACN0RKRQEgCIB8qaIDZ27xn27VYr1jWOMps+wkkfRq+D+t/wfgjl\nXcqHTH7qwS3wMesrqo4d06+bNEsu0LP2mII5YZW/ityXFi3+7Wv8lriZ1Yys\nnNDmsbpQMMY62y4L8iEISZYHBUJI8TDuRzA2Tv/3x86nIURIFU8DQajAE/pu\nZPfC+bUJ+HgGOI9awExVQF4zmzRLaAik+LoetCKMDTW6vAXbTd2agMxHsRsO\nc5yplZqj6hFDrHIMastq0UipmH5jtO2p5jNBq1e/KooLejxxdrB+2Am/Pg3t\nSCyzhqute/Nl34V2vaM6Hu8oLND/edp24LzmCgylop4dAFfPTfKUGAQyVi9y\nNv9UuqrPH3pvgH7vJEy2F0zeNA15ysqfC25lLw10STjJphHKYLDlmodvp5Ib\nK/pOBJ7tyZm0p0w3hZ36OnHb24yw/Ut4xwNX/k5HG4wEPEwgNs0mOimsyvgW\n3MALEWWocaKzpNSYHK8xAGEc1lkPeI/BwBxuaefd5r+yeHBjkiBskW4k80Lg\nCXlZJLdNZlmevw100+7OtYPzn6ytFm5l+ksN1oxfZkySG7U/tGysiL4uHy3H\nVmvFnpConN4f4abCGCsaCnt7XCh5nwyAT4CDtmy2gTjJB+ZiT2Z28Os9nfTG\nxEtb\r\n=teCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/button":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/icon-button":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.f4241a42a.0_1628701264784_0.5678501007225576","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/snackbar","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"956183c318a74053e402535c9e05b8ff9a5a5dc6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":39,"integrity":"sha512-+/GvNZhPP6XrXGHRJWcGrcGI7GhHMg5YSEGrEu48KXIh08BvSnVKWC8+abAHze9Q9yMpbgbMo6MroQE8nScIwg==","signatures":[{"sig":"MEQCIBJSHsoSzXCS6als+Ommi3/x+EO/k9Ia4hRQy03WEF6SAiA1PTyLV0QJWyaiq38JWc0/XSilyi8V6dlLSCt8G8uQgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFjCRA9TVsSAnZWagAAw78P/jQQwo17t7CnblRjnN1d\nwvhLs1qOO5rTU6aLgc9PwJmuvWsYOqowq12QDB6H/KsDwa4fAAQ3k75zY++0\nKLhTJyLN0151KJfHcs80ELZzSx6hObDksoAi0GeKM3Gdjgfd+NdaVu01SmNX\n7gH2v9pwvJk8Mv6O5FCnsT+3WCQgMQMEqAIoz2V8EJV6Zlrtr/LQu207jopz\ng5ILJBaLSP7IN4I9mmTX4eQjCqj1QEWlBAc1d9T00FA5lWhR7BsZHUP0GeEF\nkph5tkDziEvOw03FKeqRnmmMfBAVuzdzPs/Xr8KyYFbySBfmJWQQmO+kjBih\njON7SJjcEyMcitPRPwGnFFQveZbIb1C5gpaDo1O+Fu7aufXBGETv/RvdiUIf\n7yVDkL3Xj/xyBqZB+BWuzVvf2E2p8QhIz2BjXZGfUD70X3hBg/pBy7mN6C9/\nrSys0mEg5gNn+liw4ktW3Q3NFmjCiKSB0TsNj1EY4+sAh3koPJRS9HnGNBFT\nczNrrJgzmyVgIaiuWRubTSkhs4iuxyBv1wqR2HWVYB+eR14lysfutEcfoeiu\neRNBqrVMRnx/3gnbYhgMJd0RJBBU6LZoadsLIcIKOikegxepAri3WvvPF3Ff\nVXU1vGykLtEQG694OsONeaQt7J2hdbtjnuKUILrVFiTBkkrTKewAwECu2VTT\ngKyV\r\n=Sq1Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/button":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/icon-button":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.0ad12ed3c.0_1628717411158_0.3658354316354324","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/snackbar","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbdf0b22d350c4873b89e783444e862ab9a31992","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.077dcfcfe.0.tgz","fileCount":39,"integrity":"sha512-oXxeMpD4wVtSiJlcivwdSIPpwZJ/RMlxQrPy2Kf50VfNKYJ+wNxtQOn0oUhBBqxWWUBbp9/jKhTqWZVCIIg3sg==","signatures":[{"sig":"MEUCIQDbNMlbla8R8hBqNiUV/wxf7kEiAHQpwtFboDSBL87ONwIgV8Z3usRPUPjCidWufCGfmuf5mU4cwILT/9T//9gxDx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDhCRA9TVsSAnZWagAAAOwP/iIuM31/3n/jUY0aPPRK\nVwxiyHqbeCLIh3FydtXzgSlmS3Rgq2KqqHaqIS0b9W46MGXkd4V/v5Swa9tC\nIiNmsMcTjte2Oy8g0PrwOwmbgTh1EucfQZHauNCayUH2bHwFuVXr/dEA3YB+\nfN+JspeyXjqRRwNsat9kptHdwLH799q6YuEZ4XrKCPH9bzMs38ho6bi6Td70\ng3TDzDj+rO87E8jzYNeH6+XDOc0OUlm9LR01bh6xgcDOiSfGkJaVSYjBaW8B\nT0b/BXc6mfyWobm5FtVvPEEFdVFilEKeZPWvwR+KTr36BSW9hOaBsHiL08WH\nwt01qy9guJlUuzKWFTK/D5JXXQuOd2wUPWMH6+cduVU/6HhGUy95GJ7COAjn\nfAj+cIEeAM83JuE8vllAQA6S/yXp4h5BIMREnuq+n+a52LLhFkkCPvyvDvLM\nlseY7eZL5q7kSxRAjw7iGh4Hm1E5/1AjNBxdCRqoSBASoNlv53+gzgu61YIB\nR6XLbG3DJk0UJVaNLZZdNv6Fx6Pw1K20qwIcl4ebO9o0GzRxHJKLRzksogu0\nRR3JUfsPfQfy+FfokkHJrUUalf3t8EWbfoixi3QxkkgAqke5DROmLrjp7JQc\nPUilTwgrGFL6CAFiLuCCLQSC77ZR9AbTT9iLJUiifxm3c/AiVvRJGboab649\nWr1K\r\n=yiO9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/button":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/icon-button":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.077dcfcfe.0_1628791009192_0.15979893671177758","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/snackbar","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18d46c385383a56d1f391220e9f4af77abe456f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.e3346766f.0.tgz","fileCount":39,"integrity":"sha512-U+ZA8fMPgCXnZ0MiPuWK0Wlf0hvYq5mW4eD7RsT7aM1ZmAr5tuxXsEroTcQ9PPbw/Od+0EcFtPzrSEx7EoyVQQ==","signatures":[{"sig":"MEUCIFKk5susW1ZuLStEvpPgeSbYECCnWQ9DXf8JjCY7u5CPAiEA/cl5GiG8nFX1s7iiK4kS9IE7N3/zQ2XU4bJ1OWNvRzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswoCRA9TVsSAnZWagAAw0wP/RiV5fdg6G7JNeTHxR2S\nfxEqrz7bUYHzTFkJ1jo0Sw2VqWN+DDQGly6H4zjhJBuyRk56sf/oBnWieUHG\nZgb33C1fJgjJhOr2h4GzbGOJF3F5J3NLIXXpJK8PKFfxeSlzcTFnn8UriAuA\n5cRMBrmOTQ+Rw0FyFvPvdnTWA5gssBXsdpgJyPuJxklRnVtL/zgnmnoijQ9n\nIBJZUpQAGxkRpzv+yfcd9FMbXyE1dcORxqvBy1ly5xHLAznuaLIdhpoLPGbc\nV1k579Kh7P86CL3IVvF10qGaxbABrILApUHbqJvmkbvRF/WJlFC+0MCuYh/6\n5JUjtZjBW0fbYCokHvsV5SI4JxbIxjrL8GFMmwh3wBaEuQMIGzSeXAT7dZOw\nGfz+Ho28AtrkZ79z8pKzxa/r9K2IsaS9F1VYZ7HWDntxi3MVDoun9sA7ljQN\nD19Hvv7Ta2Mq2YluqEEC6sk/Lv1XBk4nYa8X6/s2DglA2DjI7ft80eZipK1c\nMCLNhkCEYDj6wEKSHgNQiSa9JtkpNUCcPeR/iRcdhuLPz1q3W4itJlSCtvrT\nz1a2npiM68P+C0YSzksI/B91JddNQLqnW0HY2pJ3MGwosRs+wTF6eV2ghag7\nTdbu9nIMbRM1G547Q6TEDsSJNqnQOWu4p7GdRBO+uwm6iWSrKKrIflVOKVs9\nixme\r\n=QMHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/button":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/icon-button":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.e3346766f.0_1628884007863_0.32072587310574674","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/snackbar","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e009e78a191838eeee06334e6fdbe9920fceefe9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.2fb068fb0.0.tgz","fileCount":39,"integrity":"sha512-FgLTUtN/tqw8qU8bVo+e9a7YMD7HibKquPUEzbcVF3LwCfd4ODUbBQUgXdHsZ24t53+d8d+1iO3TBefXD7pJtg==","signatures":[{"sig":"MEUCICRvvOtoJc3JzijW6NU89/LI9SywEVP8PMhVv0k9NxlAAiEA1/eLXE0CEsQXSIpVjdN0ARVlflGFPOBOY3bVRVQpsNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszoCRA9TVsSAnZWagAAKG0P/iFCrmRNqLZpVLc++BM9\n1w4r0kJg6IsH/3xYjMEW2D2sTmsW0L1KJqqFpAoY/zuLBr+DS1Cmd31jEQpp\nWYa4TNWKv5N51/hnE0GXc14xUdTDwDLPx/PXziFxMLcRzEoxfyVxANuaGf+Y\nV3/k6Ho9Crlc9BAfzx+o/bKs3rc8lTeKjt3calmXmdOUXJncSR+ddtBBYSpb\nZsIsUSp2Xwufei1EJtzf4n/ZAyaWP1gkEcF4ebtVGDZxU6Anjvsb36eyTwzj\nMEkxhuOu8IVsEXJyIm8QC4gG7CGiC5T+j/XV272WYJL/x4FAn8xs9GmeFk22\nhhfE7FJMyFgl45Uid82+NLbEg53eA2vss4lyldzUpOEfvVNfIfOz65/j+E+l\njMWWvOEdOg6Sg6DqFYwtbhINlZ0ngQlGJDLyHcY1JO7OnTJQ/w/uYXeO5Egy\nXfLFpfqm8V/G4L5q9Ck9ljT8p6exDl1S+O1a9gcOghtLI9hKMA+x3EQosmLt\n+efn1pvgrmr8YYfKg5aJn3ywHMBF+LZ9kgqQ7pbxECNV0aqcHzmlSrMQgb1s\nJODyr232JjWGbISJ3kbLm4XKLq5sDv6MIcsP1XgWwM8UayXGc5H65/+YimtQ\nBzC+Jzs1qlopLwe8RE/IifAvZ4Tbozbp7lPXrfaWu9PxW4gJRvDsNMFw4pVb\nmrmE\r\n=UKvA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/button":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/icon-button":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.2fb068fb0.0_1628884200095_0.6677732781911818","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/snackbar","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36fa033be65ed01d110f42b7c8069e60b7b38a90","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.fb76c5069.0.tgz","fileCount":39,"integrity":"sha512-SwqQWq6zlWH2TMAfAgeZ8Fyyt226Bqp07RVfEkiLmSWyux4Ae3mTV5Lna/XroGbGtN5hf583u4NmqWVlTLQhgQ==","signatures":[{"sig":"MEYCIQCRfTpM2vvuvpiEjYdUBifZd9DtqL1R1m9fFvUTIe4kvgIhAIzMsPwbK8kIuGz2pR14Iozf7FXCFhwm32425fP5ccgp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsX8CRA9TVsSAnZWagAATs8P+gOX1FkWFhDymaXoHhjG\nz3z5uzbMxglIgRghpJS0L0Eg2bwxhAKJKRIfVQCa3dwYA6hKR2QN/6fx/KWR\n+AQ3cLAh3aFADcBHdJdXWJRhnjGxPpF9LFs7xNq7xzjiY0H4+tcUYi7EPh4i\nB8joJuWuiPBjkMNnqnXBl20IlZbm/dFAu8hTwLazu8jKDAmZM0DjbrOZqOk2\ntSbxGnhcsIkChLh59aVdhLsvk/cgRvFFyA26tENmWv+FNqOd/yzJ7yGTM1JA\nuAB2FJcSdKNAotwo/AVvZgLMCRenBheP3sA2uh7rUfmgguSPF/sH7QPtSkX4\n6I+hSNKdc4G7C/tnWc4YAaDmrmJYfjBUWHPT1LPxetIArZwAbuCcqRNDUlI8\nns2HJv++AuoD0rnLTcQPhavYQlRPdpBa53B0GEvaGXpK4PCeOylccBdAjO1l\nMnN5p0oUnhSvGyA/tLw0GDJvk99/8p4c1V4xwPZZnGxWHGb7tsuTchsPVAbp\nPjyfaI3TB7QFu8bhkTsoQwxcyxFlVetVxavIy49/hhdu7W3zObyPRpAcirZR\nlH+K/uHhCf2vRDARe/Ex/uH2+K+C2jQ2TV/k/0JcllB8xADuF1Jzq0FlF9cd\n4v2dwpNjbdaeX4muZoXmXmGhOV4RNg6x7cyvgzoRfw/3OTaICAwdgcmguSSY\nuiTx\r\n=3wpT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/button":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/icon-button":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.fb76c5069.0_1629144572366_0.7770627320518539","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/snackbar","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f35272b3c18f1241ff89ba2fd3b1703930425893","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.457d89aad.0.tgz","fileCount":39,"integrity":"sha512-1Bz8+u0Dqu8T6gahAErnPyeXlPTEaioUni1RiO8Dt8PNAgTdVOmiTaJDDCsxk8A2Nou+fxY8YPBe4mhWuobhnQ==","signatures":[{"sig":"MEUCIQDj8FMa7i8ZhXUMIfQeI96n4fvbwaaLBLM4CrD2TwtFbAIgPpKbjcu5aghID8E8BXpK6wTzYHeVHxT2fPvPBEDl1JA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9RmCRA9TVsSAnZWagAAUTsQAJcvb3O2jWDrfIjwiH/z\nqDenulbSyIjc0UIK8VbvLY86IM/UiiahMLwfl87AKza2/EAJV01RNyX7Te97\nDMqvUf6F0vSF+01Nc67NPtX+leOgKm1grtWqWEqlWjSIqBjQnWUYYFk2PRm/\ne2r2puIcmKDzVlKVy7s/+TBaigOm1eGBDJRo5P7DwzVBA82oMFShZ2ro826e\n0Sp1FqFBy5jBbgZgm5TzlJgzyOYWRXcEGViMU9cpAbehqzz2/rNokhqMQ5D/\nXaGGsEOWs9Lwt75sPC5NfKy9lI7AtIRtD80IG5HqNXjiMZHJRfL5VrH6bEi+\ngYuGmzZVAf+Y2pCC+iNxaSCSrJoFa1fDNrmShDViRO0zgTIwRK9wiWNgj2PK\nkw3I8UELYbPh70F+/9H6sQd//iLugKePtw61tHQBQ9pqHxQyZrMnxqBBtcEG\nDzDMxloQJySVmslJwIR5sXbgb6YGDR60tOwc5Q6KuLSUVwKcVMoadq79zVs/\nKtvY6En3s1jLLzgpuhMnLd0YKr0uFUG0x/MdPz+Zqg1pmiqR13Y87Iu+uMwW\nhmy4eX3Cf9+7+N8VbBjj+OFDKi2cNYdL0S7arRWPikUuIbddrr+CqLMJwh5l\nHVkL1skueddLu1D2mU2upqvChW/+xwaA0Dgezmc0Hgvl77UJvPe2c1/8afgF\nA4oZ\r\n=LR3V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/button":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/icon-button":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.457d89aad.0_1629213797858_0.06631277395326851","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/snackbar","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa70899ffa96d768571fbf82104d4a0a2396ec68","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.0de2f2edc.0.tgz","fileCount":39,"integrity":"sha512-BUaLKq8XaHRVUKBINtG7Lho1ayzdWY+OHzJgR7Rqqq6T0RPC7x6nrilMoEZRo9i9/mu4otO9ZZMHT27B8cAxIw==","signatures":[{"sig":"MEYCIQCXxMd1wbhaJUP/ndr0UomXmtGyXo0E5ZTzUmxXVGsVNgIhAKIpFavWYkVaMZWkwmpiiUD+R9vRzh3JPMgEWLujfue1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCJLCRA9TVsSAnZWagAAlS8P/3W5i5hD9D7OTgWt+rsM\nuVNwBH36KAA0W6s7bbXswJc5MrMw+BKWNrRiTtQ69DsvARKpb30hVlxFD+wi\nv+E3s6l4PLfXKhnWRYND94Tz1tBx59hLzf5NmMFEDJMC12X6xJwA3gpNutRz\ni7WZWhYhZM3IN5EnJNEHAAO282QYUMLopv/FUpf9l6H0qnJZlqEf6d8xCPeI\nlol73TWCrTDkBu9nvOF6dj9pZxmdaRRz007kHRj/UZgpPgSnDROkKdR9e2MN\nn7w2d/CJnrqTcKMQ2aQ9JOrBr+rBJccwOGjWs2JnC7SgAc7JA4BBhs20Rl9l\nQ/qddv+yvG9XgaRpPtNBuYAN4q8K/Fywcf7PqsaJqKiUPSdxraf4Qq0yXLPK\n+xY0ZUXWiM5x4Om3MUJtEAPGCugndvNivHIbkjyO87oUKD25OSHtsH1dfzB5\nSD1Jq5CM8RPPyRaGEypUuhrv1qB6W/Ea1iWsDnLXsWeF//h92lY4AYkGsbbh\n/+7tgNGP/sXrMwfvOttrraU+m45rsmNvYuHZ1g/SveCg9DkazOc4UosAjmCH\nOZOZN/Ox6nKMO7F/BK7iWsewcX15o8wWQHxR9L2mObciNGzJtcYA79XwZIqn\nRHsZrurqq2aMXg9ktq17XziUnbtlFJLlFbO3oPzw14gqz5IBzm5MbOLMeIAm\nnOOi\r\n=BIcK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/button":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/icon-button":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.0de2f2edc.0_1629233739077_0.6058800879885307","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/snackbar","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e458a3f2fa92aa36fd66f74ffcd2f055113d5141","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.1f9259b9d.0.tgz","fileCount":39,"integrity":"sha512-lw+wDV47vMA0OjgeHgrnpbs902U7dxHnZI1Dcncid24d5neF1x6QcDJfm9n0Yxex8PEkE7KyIUhC+PkWVj4FQg==","signatures":[{"sig":"MEQCIEMtwYcsI5IRdbTnPetV8oZoxgYAppkNQIMpGRGGcmWVAiA/24z737thcLNygfeDSGzIziXPJpqfVNYBhzRx8UCEJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDUOCRA9TVsSAnZWagAA1c8QAJNs+Nq68G0Vi+ngmBh9\nv0LIeJY0j0Gyx1tJqvPB/moKepIb0+V3HRTencQ/DubpMbJUO8R1ynzvvBIm\nmVollAKsw0ZLD/PW5+xFUqG5yg0kj0h8VMjMdS8p7qozbeZRhzwdANEPz6bn\n2Pcv1xVdvHQ8QdFjGVFhMckfK8zmTlY0GJ/vdEz56qceCJDaIhd7FStDPQc6\naBSHhGqtZN74oV/vpsQHK+os5l5qdoRZtjHxY7Gp6u/mVNazv4TYIPvvgH1K\nVzN/Op9ezLMTRaXFnxXQn7v7cNwWzk5YV4n07iTKVvpLzzs1joPckIuEyBsz\nJzNPesXra6y5XAraxEUiOdgLVjrcuoGQiJFjthbhxf8qmRDNi4Eq3ah8nVzy\n9jWStirE0QztAgJungSXbrr5YIEDLTpsTVUyNGzPJO7nnXtEwwgtKi0SBivJ\nLzKvf7gq/bdWCTdToO1RQ6/YIrqDrbKiRxfYN0qg89uQV1LA2E5S+mS6jVHt\nUVdwCiuHZY6KMI/I16yRQhSdpVku7QF+FKwgROJiPQJIDqPOisAFJ/pYte8j\np2X+I6p14aJpmPtO/yTQOuX/rdojnimQs6dknBtD/QhGsBTA5OdTmCm5SwGU\nNV+av7UHtv4zEYZWbI/M3VjWZrCfT0+tAMUOpz7yUEvCPXR6aLWGrL18iKnu\nszef\r\n=hlSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/button":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/icon-button":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.1f9259b9d.0_1629238542377_0.9499293061960448","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/snackbar","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49d88e0179cc290a6d74174527f6813553d97821","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.3b9290351.0.tgz","fileCount":39,"integrity":"sha512-9tDAQ3hwnZqYI0YWeEklWR1B/Kg/1lPtUoVN3hTvJLSaBvEpCkOJXOQljFgYwpXY5b4R1/77wmogiT1IPs4mBA==","signatures":[{"sig":"MEUCIQC6u5l1RIYUYyA+9vq4RmSMZpy4lruehA6UgnHjw9Ec2gIgZAoJ4zWTHoKQ1cVKjEQ/Px/UCfefs7Bqyt0gMyhOT/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJnNCRA9TVsSAnZWagAAR6IP/iPEs5wuBXXYAwr3MS/y\n+DJVt7LOZxQxbEgTgPt050wOcLKcVHZN619/c7d5MJnZ5Gkrli9U7wXABBCT\nygKgA4yGCZkQbIEG80IP2GaGc4k5fgIpaxXhoQOyFyBwswGYAfM4IvhCtFNv\n34IREHT/oh3e0xnhosuKQxYdHIV7TuqvdlCyvZ+4vGthomMI5QAwzfbBNMBD\nbN8+XoERfN429GSsIAZHWR/BkNbNIe/GldO0IwHHj6itGndct1ufpyRHxij8\ngtN11Hlkb5yUu7LYzHQarzcJuCR2VUK0zkmUAVTb0n9vvA36PZcGIaU8z6Xe\n6c4i9ObakkUuT5hDCyq40w620bVGdxM5geRn8sOv8aNMepAfz6xpPejVSeJo\ni4K60ScGRzSzjXJHp8INqXUigkwCg6ENxpvMemyjK/RCPrrBBX3jTlOkMpF0\njoNo0+nD+yrgqdr4HrwoouOfYn/VW5P4FOJ2rmxn5iFxwvh0RQD1lcAW0MDC\n2W11fm5SanwRK+Sm3kb9fyVY6zr6twQULwST/kt/WKMVQNYchJBAtuprDZvY\nDhXtlbb2m6SdLBcMvcbbD0ORt1C9aFpW7qozsF9tYNHIyRR9UlkfrtjJ8Fbd\nTBVPkxv6ryEoZtyzWVN3xxSoztD1R1xhaoCSroP05Rt9yRBQqINoFV/iB97V\n7vtL\r\n=/0ND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/button":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/icon-button":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.3b9290351.0_1629264333751_0.5417330681419106","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/snackbar","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a69662e0be91a79f5d99eb070fa975a18698ace8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.43d2eed2a.0.tgz","fileCount":39,"integrity":"sha512-vkcg9hwfDaVi+8g1uBf+AVcCki7haaHvchGBFr2HG2+FfCfBT//ZccToXw3ZB8QibmAVQ5Lpe51yMMar7DYptA==","signatures":[{"sig":"MEUCIQC0U71Wp12upln+IEgD0yYW5+F88uJcab+Eh9k8qeNQQAIgXD1BGWtpKhXe1dwQ3XH1wwoUSpmIDK9hekxu0alegXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9aCRA9TVsSAnZWagAArYIP/3fHNdiAy5GD5VzROL2M\nsbsiWlpR1C+N+cRlIKN9PjYnzGsLknb/spHXyJwFYQh32GI6kmM7Q5vGkVOe\nwTJjg3ZqidDhq8a1A8O0fbahxKahg5948BT/Tav58ueVtTcYQwkfUBJXp1d/\nSZJxityq8kY63tQbOtOnZUxiaimSbWHTMXhSYwKdLYbzsAf5QSdibrGQxEdw\nIBrxGb7Adu80S5DFhXyEemq6d92ymCs9VZsmmI703riLmcZBStKZ9Qw7aK7F\nwvoXsfeeVduIU0s+cDhfroCTm8IHRPNpqm3I4NeqVus+3cGScXjU8vMa+cJj\n7eeqe8BZ8fH5oaLXK7qQK7FR62Xt55URxVTzpY7MQpQA2KCIPy6QRtUipZlj\nsFywzK3OKhtH4rX9a4FROaZtDKS3L2+j+yPZj84g536auh83ujAHlibxzfUr\nooYxCXdl/3R4+suiRQlVPOlHqpRtPQslk+xLaS6T5IiUx0e+aHUPynIHHcG1\nyYmmvObJv8Nx/bcBEnNxlKkxFACiOKH/wOl5eavwYnplcHpxg7mj+A883StL\nn/o2rhpiBJa66fBKx8JabyhWVbJ23xo3FSOI4RUaOQE2YtzmBBBe+IoHncYd\nDewH802zXvo1gc310kSBgoKHR4ZnEdCDe2F4ikSO3XMTMb6sOSUQoO8EaFCJ\nXRcY\r\n=a6jx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/button":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/icon-button":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.43d2eed2a.0_1629302618660_0.19076777257006783","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/snackbar","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00bbbd100f3eb4ac88396a8756589d45b7427c5f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.0a9069300.0.tgz","fileCount":39,"integrity":"sha512-PPH6KMcwUQy+yC8tJShwmKii+KU6IxoJ50phYoPHndAiEt4Rz29vzOdHZOKx6ltHQjk9Evn7yUw39cof0FdRSA==","signatures":[{"sig":"MEUCIQC6qWrAyFv2L+GS9c4zTW2MlGe2vKXL4aNe6jntg40hmgIgajp+HdceIMq649UzoKWBXJ6fftYn2RJemiWc2fZDL+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoR4CRA9TVsSAnZWagAAZCkP/RDe8S8ovC/sJwLplJLB\nq1GYg4pc3P/IcjbwNwQ+AJ1aHoMzrBv42vL11yz4fcWnUcFtahoCwiIpjfn9\n/jABkbt0GhEeXgsAQzNXkMC5xtFB3Yl178T6v80CdAknvBCTatfhdaWzyGes\nHSkHVsGLBisojn33oED7vFcYR5TJG7ar1S03GQnk4N/PBED8EjzsyMqUWv31\nEpsP7BGpqjIDjsE8iAEiUq/sfEsz2hugr8TjM/48TNJlhT3DrGJg9iCv2Gec\nIVkCs55ZJ6fk3LDyYq57HkhXCHhefGmAf1Bu1uuUk0sI6gRqzi/TfYxhCpwQ\nUCwMeUxeOIxVX99nC6LtPStgQwqX/YbFfTuClt2DwKNF+ycA3uuSmYNrvNMe\nDAthCrBHlS5G7fPyiC6VSGW6ftDPkbON7iw5EqFlLaoflo7fW+bhEJEVeuuW\nkis1HFUfPgDGaXX+NdWeoF+DJq7m9Vn8ndHdRwmjmJXnFnIJlZS64HHiohte\nrZ7HtYDU9XyWDec0U4TgsS6URG9Gcz9pI7W7rnWFtCRRH35ZMW3uclaoQubP\nvHhdfDmfMZetZrq7lqoNvzoXfTyXwDpn5kpAqKYnE5JbXIpUrrJuy1SEPRu4\n3n0e5pwb56rTooNAaTePP6fLUh6uJGzKmYMhgFiHFeamW0NS8ZILobqzgNdv\nBBWJ\r\n=b7xf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/button":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/icon-button":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.0a9069300.0_1629389944624_0.7738835837590581","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/snackbar","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97ead27f4302d3aed788261ba553644b2afc185b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.7da413ed8.0.tgz","fileCount":39,"integrity":"sha512-gQ6K0J+/tDtxyIfJxXOKhYTk2b/sS77ratb7+wZ0tV/0B/17vTELka+zUThO8bX+1GEfwsqqQeGOu9o5eFxVtw==","signatures":[{"sig":"MEUCIQDxPm1RGu2SduLEnjHnP0XraggCuYzNjrBXzARU8ljA8gIgGjv/6DjWXe17NN7hR2pDDl939CxoSjvH4eYkwZy2qJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH886CRA9TVsSAnZWagAARzwP/3J9IrULoiZ0auBt7WoM\nehi2DJftPw6ICtzh3ML9KAXg/2Q6redlimhxRmbTktqroW1bTaekcAAhASMF\ngzzLNcPjDBlxwDabMubCXjGNLTqsFqnJjTZyrS5y0OGhKZTb6hYAL4dVwsSI\nND7ti07pzFH8XYMufPNjNZAWH0L7kR0VF58Nnx6ckqoiC8KnbOVqfu3qrybz\nWmMVnnHEjo2yiPbRoWwllBOTwFaYC6Re1jE4ojasvK5+/7unxh7n149u5KoQ\noENJXGW73WiPboMEyxNEoDbXjp0hMthn77i5/BOHgGcmifUfvWStdZGoehSe\nIgyqk50ZiW9S+3LzIPVrOWHv4Kpw52GEKViJ8mslTk8/WnyZesog5rFd5ghS\nY70dnyCSrd48DEQV9LwijchX4v1/sNrW9hKAcD9t2aqcMDWlbiJiNfZEhioK\naoNnH3/+Y8JFbW+O8EVOdC0adh6QH/8cZRAXeOo1qUY14kjEsAiwKXqeDffV\n61eLmKcp6WPoauIi5nLizzuB2E1u8u/Dg031ZQKbKWwEgvqL9L+dQiMFyTMf\n7uiy4T1EArKYJ/B5coWtlQsx6kHE//VygYuKWNXGBVoaDM4Zy2187orzopsB\nZvTrRFH/NSH1HFHkCMgXX4JtSfya5o0XOc315FwtwUMKkqWYXhiyAb+e1EjE\nexVU\r\n=a7wD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/button":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/icon-button":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.7da413ed8.0_1629474618554_0.45693748367476816","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/snackbar","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6248ab77230a2d20ed043c05b8a3bd69fbaf239c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":39,"integrity":"sha512-dhKXKghn1d5C06XEIU2N55CCBYYgI1YKnxdGQyRJyd/vSPW4PtbvFsQJa9F6Al/pu2kxO3ipLVHIikvs3n4t0g==","signatures":[{"sig":"MEUCIQCkw4xLIGcHGJDxkboJn66t3GjuExfYxD6CIvseyUznmQIgRarotxo15WshZxlAsx0saIQyMXUpS4dvAJY9tPOkkLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAOSCRA9TVsSAnZWagAAJ50P/jsLLvbu1/yPI9y35SQe\n8SjY5K6CvrGJEGFTTj/RomoFu2UDvnLLcY90W9vtM40ratXjJ+0F3ipfop1g\no/LlkkYKnsK9Bpkl7YTINqjR0OyKynMzSzfmdKPFMzM3laDuzRZkGO6Sb2oH\ntoGnEE8VGLsjOVOZgTR7Fzyv8+++tN9m4RXgSN2EAcFy8k3XbcufuErebwy7\nLOWtYrzn24+oo1OEKK8+Gxt4TOwehWvmTep2/KXawmaf2dxFaDw4yjHe++5R\nWtc3oKMDg1jYXmquckJOmEPnMa5MRkC112I/Il4bynSMD1BgCIZm7l8+ehN+\n8KWUUtBW3f3SfaM3DIS+8pie4wg91LdEEqeMy9DhHFIKnpP2MPfYkAvCf1Dl\nFijZBFfGX6DCXLh31d0ibOiumAIIQg2fRPE48/QKT/jGbVRfuq99zQd3rWcn\ntnfzTjwBWzVLEUfbIIMiuvjCo16W9KUhD6/KcmfV/+pX8DACgoEKxh2z2WgZ\niib0rqGXsvQoeE7Z9NpjgamZPcBiodsZHIlyB8nfqVGbI2obpmNIfPkvB13s\n09nxrDjDxKym/HOg0SbS/lFrT/ZqRQRJCQoB7GKAxxn5voyIQoTFBh/iWydJ\npprw4y8cc3JGlYjQtXcmG04AXMJnTTnbm2wYsUJoEpU15IxVfFcftgE5a8Iq\n0niu\r\n=pDH9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/button":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/icon-button":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.e1e69fd8e.0_1629488018082_0.9519954328194764","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/snackbar","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2c3406a8c6d693affc34d58e9b1f89201d9e9c5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.f5afc16df.0.tgz","fileCount":39,"integrity":"sha512-f5PXsG/1FScsLNccm8iRthYntmQCVF4QpDBW9uFckXsNDcsloNQRWxy3fvZlFvDnRPT93SjDnWleIgCzVq9sQQ==","signatures":[{"sig":"MEYCIQDsRnjwTYtUQVCF/3zKy2mRgAaRl/aABTVU40dXy1CrSQIhAL+MTaivdVr5nm1/HGH1P7J0n+wzDMwRP9+mT6A4Vrnr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBVCRA9TVsSAnZWagAAbDIP/3zPesQqZJRo24XkDH8M\nzVHWk89L99rl11+9bUWEa3+Pdx871MFyp5Nm5QXf312//k8/2ahWJ29QfxTj\n1VW9LLsJ5ulYepaZVQMcwV9PGtHl7Efar5+q5vEZLmEZA9bLKxEnGMjqW5Q0\nNQZlQysA958ET0Bh+e/xyjHh4YyVh1ipVEKN/9nVxtt4uCOajnyrisjEYmF/\n374elxojAbhSFA0DZDmR6Oji25iKXWeWOps+VoJ0FMdLxsZdQrLPCi9B5APq\nISR/OcZqaDp5vl7LtOCgSpoJpT4QCc4mVzqFfdtcRrZsgsqaP2DcgqzqFJS2\nuQLgt0So5HVO9f8OK3yMathbKWPdrDB9J6K93AyQqOKfPVXclrzFEalp0aDS\n+j6l+owR2erilt4sG8T09WXx97RkcNV4DsGnYt910unDlSo/9D9yP4mBYW8/\nWZCenjYAVWjqpEv8eNuRVnskMtYdEejmun5fL1Gui5mD7tAsH3a2vXLS6W9G\njUu5609Ix0e65XjBT2jS3ipBs4TCAhk8avvXs0zbNGY82rjyVgFT4TjR5xJc\nNNeONf8B6yVA5M4c3FjipWuZxolYVtF5Y6atgQp8qJHQM7zDlb95jMx89UNF\n35+RK60QeU0ZSr6tibbJoRpCF8lIrcBpXXg10ssqtVIlOfJwb1Jo6kAo53MC\nPXXV\r\n=39O/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/button":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/icon-button":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.f5afc16df.0_1629491285544_0.2537896374811146","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/snackbar","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f49b00d244788a83f2981c729a23774677d9ae4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.28d0d75bb.0.tgz","fileCount":39,"integrity":"sha512-mDFl8+nnGN3MPzUiocTigVURSD2ygiN6V+AGmPrpDuCZmLyXXs2C8GLJfjWSgT2efqQ188pSRrznRv6eS4eLcw==","signatures":[{"sig":"MEYCIQDqH2pXgMG8qvz/UZ8Y0Zb68jWSeFpfOY/kz9KgRoP6lwIhAOZMRhJ5qFL0B8eemOc+6vawBVmCOSiBRjLEuXrsZRj/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICr5CRA9TVsSAnZWagAA/akP/A0TPtuTAc7is+y4VnKR\nGGYqrjk0q3d3z8S8bcaa0oXMcmgsqiwFIut32JtCr4HIOOZ+DBvGAZ0Y4fdz\nVEmYjgNcQuYBJNQCJjgjcYSs6It0RKyRj0j9FpdabPXHnjBO4w9VfVK87mhI\n/YcuyQrSTD4oRu0H5QuovSCcALYxTWIusNT1dBxYJQc04QWaanURkc8CFPOY\n3U0cvHudIdTj+oqRYuBjGG0FZgKIq0xcEL6Xhek3WNTr34TAkdr536w3deYe\n/Cw64mcT08RQOVcCsZc5SNT0D4mx8oJNI2u4hB1H6Y4E8k+lUlBRzM457Ctl\nrJ/SNe5I2oblcwCq6j+z9FVY3KrLCJPgb4yXh6KgJJOO9F/+czotpNOcnfF4\nMHkmmZ0kAn6qTBrheYAkhvvqpr6UxSNa25r3iQnk0caBTmHUrp0BL7PZP7aV\nL3KOLtTPVGvCoBZFrDvWjJWKQm4IaQ52dQohYuR6tQcIQY6MXmEdvwxuH5+U\nGC+BNiOU1fh2accmFGz24qm/DoC9mpHy26UH3783SIbMvJR6keJzjy7tWQHi\ntJ+II4J1VBNSuVaT9wEC44xz+NoL9TvH8QBmQnCJiSAxxQCPubfp1jg6kcxm\nqNyTgDgPIsl5eu8uWyS+yc/Xjf9N0oqZTMpN4Hjuh+ULKHbOSaXfm9b7pZGa\n0Qt5\r\n=wOv7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/button":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/icon-button":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.28d0d75bb.0_1629498105017_0.6185015365172137","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/snackbar","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ebd91eed654a2ce0386446c55689f819d18b05f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.21ece5360.0.tgz","fileCount":39,"integrity":"sha512-2YnrMPcyYqIRMmFb4EbXF9KIaWBGsN9rSpwjAeHK/SMeIYAkFwAwHHG2JJkW4T8KkVUEKs1Jw+ql0uM/Al+I6w==","signatures":[{"sig":"MEUCIQCHoRH0RYj86+d9Q4nPZTcihQdCmRONv9HEph2rW2920wIgRTjgfaHtjQT0Y0Shd1APNLhelkuRJGGxg9OQP2cyovw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6kCRA9TVsSAnZWagAAaMgP/1j80xcLDMkQaZSfjRGb\nVDzsqNjlsa83F0kIa28XXu3FA5LhN8/0SBK+lyL062Vv23M/RT25ynNLhbhe\npf9Ize9TukPcjj+zd7/ycExN01+dN8J30vqmISLBwiU+v5sh7oURS5PVOlC+\nec5maP42UY9TsEMArFww9HFO31J8f0secPefLkXsgsBkkinoJEvNGI3B+uyJ\nOhfHJ1DmkOySU6AQ5TdPggFsIy7ojzV6UfOI7XENxnR2inlXVvmO7Bt8d0cR\ne21nAFogplvHwlDhUoth+0BWrevM+FPvwq+zZXrxSbYcnYZyms/VfmBzZMLF\nXEXJLAbNoW7iZs0BUQDEzwwpkJ7HBU8arcATTYG4ZCzBbuqtLfjs6QL0SOdN\n84iX9mgnrFsWqJG+iwmCtx3zGMxiI3omubRlt9bUAmdHYb8TEP3qml92Slar\nulzjCkQLqae4/oxhPcqLRXsrFeIi3WI+piFBTbjw3go9dZa+nzYKWdykS0gN\nOMm09Zo8n5CCRMLasPa0PS/W4RkqGzTZuuzQH2Jom91d6U0EHJrCo8de31nu\nvzAFWcaKI8PydVp5W29nYzpgxm1ogrCB3wxh11hNyO95Ts95Z0D70FfJhY2H\n9PPmgZIutm6SAnDMDAav4EkLsgoYMNr/7lA4RoNVt70FpyAeezy22xPAwhgY\nSjrN\r\n=PrEU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/button":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/icon-button":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.21ece5360.0_1629503139893_0.8447969626199805","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/snackbar","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cc989e5d70d7977d512af32afa03f2d15f059aa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.8de07c02a.0.tgz","fileCount":39,"integrity":"sha512-XrbOxabf4UyY+V6lFGJwsUvXrRVoIGpXvpsMTcCR7P20adOdiwfqRNqQCLNBtH8knZZ6ftWNanhSOiACgzlBVw==","signatures":[{"sig":"MEUCIAYrGWr6eiVil5CCLFVlkqJIPPDat2DMHEGaE4CXMFe9AiEApEOy2LJZf7iyNNJdn+mLF1UHK7lW1xNSuiPIF4qT6ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI76HCRA9TVsSAnZWagAAFpIP/0+qBAC/YOZf+GSODfXN\nBdCFnrMt6jbXNazZ0x3xE32QUI6rlopoAFwBGrGU13lOAKzSeWoZ/VDK7QXk\nuxl5GoE6luF3RyMJRyWdN3hcRrRsDrp1S/H4iKyvCI+d/yvj75ccIyoa8jo2\nGzp0mGvi4djL9PTkWkKp/C/1PVCyqyZwSMMRMyCi3sy/aK3JXHiBatygSFij\nLLVgzijYZ2mqQqmap0YdwvehOdHSE6u9XZ+eUYzXIH1hHWdK8SWXZuqbkqeQ\nqIqxqrYKYAEYLeLZ+PyrYZPXxYhhSukfUFtTYE1Si8UdTnO5NvBK622QKINg\nsvuUJyA5GYcFP2QTS1jVL2LGa4Hz1di4QsHRopFLqddPOu9/Bk3A4tIU0uFd\nXkwLb100ugcibZTItptjkJdxq7NTFM0xjgp6+tVjUrsUi5nHcoxKg5tSBgTe\nLWyLNI/JIn3MAgpqjBgRK29UaSxqjJPHent1mhuXDDCiR8j0MXbuVjbOe+NK\nSIF9DbkERAfPm4vE7WPjVm5sgqp6rY7+nbGC1tFLE6iiJhvoOA5ukckSm+wF\nRiMQ08X9p6oBvSQ7oze3yfKnEc3+0tx1jEphQ5EAUO7K/QAEQDhoubsPCmqm\ndcZJo606XOrj/Cp9xl1kb9YW+lQ4+ZylG8Sjklqa+nqsvLwA8OViJQ0NiwlO\npjpm\r\n=Y9Vn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/button":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/icon-button":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.8de07c02a.0_1629732486946_0.21916290789171278","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/snackbar","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b03a5238793c2200e42f975f3748c1c5230bec42","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.65aa63b0c.0.tgz","fileCount":39,"integrity":"sha512-kkGK4qKCVaf5MVmkP2ESvQZaYYofcK8kCUvwpPsBOWYtv+SPM8VG8Kp9ptyoeQd1X7NUOqtx12Xc2RJdy9HSgQ==","signatures":[{"sig":"MEQCIEpWr+fA8mUNtmim+gWTDP/8e574ApBTLC8UFg3TE3HcAiAIShS4grUgkB0KzhVxNaHiMEuCO1MX2hiPad0xD6hVgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRCDCRA9TVsSAnZWagAAla0P/0FxiBU1JUIYePPoozwe\nqDCGLVYbZDSr/K22Z5EK6qVHXvKy8ZIP/MVcExNamsUXJvHhwPzZIo837qeG\niVLpbCBDFMkA2j+mzXq5lYyqnr2J/YYI+0bs2yhepY/ADNk7hKfp0WKowVwD\n8xQ3icigC2o4kmeK7uWVm9ScWxewPZ05Vo+x7+hnIb7hc5BWjaEUE5Qo+M07\nSk7RwKz8iEte535vUgqaSrdT/8vMazRuYBPzDPksMEMUwuCLN9IisYvNcnCI\nbhNmfZU+hcO4ZJXZlh6vlvQrY1iV5f0mB+oBuODtMH89x0t7G47pjzP3Dbq6\nziIjhM3JdWkosvh+noJ4HzKAcWJY7XpH3NTdwlIrucCM/pgi8ZvEH+9XvTVq\nemuor++KQQgJj+vWASSy4AGZhoJyo3DECaY3WyhIfVIRpOzuoZrvbee0gVUb\nSE55kSSVAU+MzXopdqeZLtCg1Cz4BjVzhDpnClaGjSpEW4ChrqylV5UGlGr6\npUF8Z1X6jeQXmPzCsL2s8YnsPmIhcm0V1Lza5+nvUMpgO/OEpmNFJl/fGYPw\nr83VbaxCsIF/YyGPno5mFw07EJz6xqRgJmc1lVNw3K3ipej7kg1jqgGjahaQ\nim0Cl6B/dFmIvrdEs90kM51tw8qGS9ulqVp9MuRCkDV/pgAHnBwrm4D9A2WU\nYnyc\r\n=Vvt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/button":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/icon-button":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.65aa63b0c.0_1629819011661_0.9118026834095108","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/snackbar","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"678062b979dcabe2ea0c577233780b5d4937cf92","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.15981e9d9.0.tgz","fileCount":39,"integrity":"sha512-5E+lr3jZqmbZIYuMKMp0F2yi4TmJOa4j53aiAx1hID48vAg5P/yviGkRbPEYiEETKjDrXXWAZ2osGEfKM2PNuQ==","signatures":[{"sig":"MEQCIHUo+J/+asbqxzIVHS2gufGlOsrST1jLz5VHulTfHokdAiB1HPeOTAsBV83U2OCGNa8tSnLHYzPICCEBFpKiY309BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvbCRA9TVsSAnZWagAAokMP/ipI19kofdFgNYxyBvI/\nDDxAeyIBfkXEcet87Tmzt+fZi+bbQi+PDdWSH5yWh79T1PNIjHdlAqTbw9fB\nIwSgdflJt4am8DdL3XFOe9mjoXueiFpH08Qn0jC927GVrUCN8mDUagz6Ho5u\nGpC44umaMKzBCgLdR66hA/e4xUGAWOX6JHqkeqvx9p0TnyTuqZxBwqz21Mlc\nbF8kopOuz+U+4qSOS2aWw2zPhfvDnJQgxZX5dqDLDR0mU7LXapBGwz00ocxU\nGg6HdMmNfrPV86PE2Z4s/rwvozeuOnBRkfCWwn1zzG3xJ6jZJ7kXchivigXb\ncmstDFnZG+5VTmIopJjyZpPnatIqmK03lHX7X0rT1ocLUMP4V8vqP/KQLAfc\n0mhiobn4k2jsZItl6wTOR1eLdDHJbvmVxp09Hgvo5sMy/BaoaBhN0AtqcNPM\nCrufT9C7j4C4IyruMkrQjOxZvckJtUBRNt32tbLdA+D7GdUZzGDwC4LN/Req\nvzhNnGBFhU/KSPo8O1W7igqE78jP7Q5fayuZT8Mdg7D8QMkCANr/Jl1lstHv\nfXWccaZUAkpTfBWGhQsj/QFFJwhdfow4JElnDN+j86E6fM6WpUB+TB4If3OF\n/QQV7F6Z+Ae+bLORpd7nUzc1FfNQTfMdU5MaCS20OMbOBFBzS0VHsKOgVhjL\nhJ3X\r\n=E9vZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/button":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/icon-button":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.15981e9d9.0_1629821915367_0.9353098268021254","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/snackbar","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10358375b05515341286f6e2816051eaa175bde1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.fa7520f62.0.tgz","fileCount":39,"integrity":"sha512-p9FPMePjvLsK6g9p9zlRrCg3UKcJ4mgNaCXBbPipANF5Yl5ZVFHjh2WZWC+1Ghl4zhHGG0fZkemDgceB7YyrLQ==","signatures":[{"sig":"MEQCIG0oGiUepHm41H6GKSnmovZvOa9YvBy57i7i8M0HyYQjAiBtJQKtDmSuZstnjP7cYBX4JzNDwm47XWdLjgIL5gBqSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXK9CRA9TVsSAnZWagAAmVoP/0z7zBr1AxLDavGr+GT7\nNYET2BVCrj2S172TvWex+LX24Qssn/Y1awokao6U/U/mMH3OLII//0P/VUQe\nI1QDKIh8u1HxoFaXOl9U2mU8EZcEo8IEuJubBWTljs28IR5pJBgGsXCL7bu+\n+coND2kJXTpqDKEQCHFq4k1I2vkOecr8jlsRkSrpA+MuLYlBBpUn+4v54zxo\nuQYIj2mAuSaH6oacnsP5LZQfbj1+V9NpkwsagVB1RiynwbclsZk3M6Mo90C9\nF1nkoeADmkp/ebYfBGlUv42qPc9jv6/BX6srhDlmN5WrN9v94fp3DQZaXsPp\nES8ihBMygQQMu7rVB3EY8jy7CcNUWpmWpz8nN+TADcgJMyZcoQ/7ZpsAnMgA\nsbpv4TKhTNaTt8zxYmvWXq7EuF3Ts6y/EXeP4c22nmV9m4wpOEQava3iuEb6\nn5qWPlKNBT+XqIOwzHihaqeMpKPk0OASL08DVHMxuil7zV8nCJMMHOFPhips\nYIirL2jw3l5ETtSQ47gUXqu2Zps2k0+bYbXos3mSQ8F/90xSoG8zaqRkKh8b\nw1Nug6p0/dQrVKEAIm65/Vfl2DPxpTJqQYqfv2HTSitQHHGCazEK9L86p9zt\n8hDstlVpa7xkXp0FlT6QPTQD3HK9g0XyFh5jHwpyLElqarOMj6TpcutxI4Bs\nWHrr\r\n=TjUL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/button":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/icon-button":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.fa7520f62.0_1629844157595_0.9307217869552973","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/snackbar","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc6558e696eef32ade040dc2ed8deea4fdccfe96","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":39,"integrity":"sha512-YoBR0VItBFOkywHJ6IvOAqbJIwHIskHsSxSKlXwDdvvI+mK23MRJ9ZdZnyaypLWSzGsyZ5aL8y0j77oaqLVhjg==","signatures":[{"sig":"MEUCIGQq+RHRyyydekAhlYgK3MuhPt3YHBDrLAcmQ2CfcnXvAiEAj5pWHcUfrVz0lUdG+S7aHxidVeQFDEqPRy8RgrdMfPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXeUCRA9TVsSAnZWagAA6z0P/j6xU8Kn4ARPLOcoJcDf\nEhWoNwt421oAUCb0Y3anPFAjqVyQm19mfb4V8eFutZussnn/guCUk1k3MJKn\nqnkf7ult7U+EKSQBrgRLXWcrS3iKMDm/gGQdZP5M27U6HC94v3mEPrUGSj4U\nWujsuoDfOq9ZQFHODrDDAbRirgE/RtANdHmtCPIJQxdnKQYB3iCcKfz/cMge\nSCXSQuWrWNXaZFEkbP3GtcFxDMZuFGl9lwl68jnSkVhlUYnzNE2SkExAxdbH\nHyu/Ns/tgfLRpv6s4a2M6Lo4QZP05E+tOOIXqZl/ZGCub7rXlTLJU4TzIa8P\nJOeX7HGjYsCGQWuZj+F7CLfLQKrS9tVkdCLH9k/CDT73OwGdAAGlJq0PGkIZ\n042vNjqYGPvdvQX6oX9dTMqvt/iTWJsVJaFeEoffKJbxKUjwwiM9hRh7kVn8\n70zCT9Zq2x+kQvEVh1G5Cu+jgUN0CURNCrX1idGCWO5a1TNjrfFafw/zx7ok\nrohzqYz4IIpGhlvyDVnbfWumHjzDYD0ISyBuUneZ/QmMPSskYrAa3m6AGkJq\n4DVD6+4qOk55Q57RYaKOD9smamrZeqgYWcd18AH2v/2xsvTIcJz+4HkS1P4m\n7w70wR5lX+qryISh1hWNwK+B0tGubXpvUUiK14h2o+7tiP7wBkmOpQfhhiq2\nAEKh\r\n=WvQB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/button":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/icon-button":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.ce25bc3ec.0_1629845396482_0.5155253009707959","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/snackbar","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29f7fa89d1ec81209b1e3e2e6690fb731ca88093","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.12f5622e1.0.tgz","fileCount":39,"integrity":"sha512-Bu0ZwYMqDiI9jdYRjbNYbke0wyAdneSi5ZJf2bFrz02TJk/FWtodC8ixDy76RNRjwd5S1L0FNrDbytMjxV3Tbw==","signatures":[{"sig":"MEYCIQCUerzXcwtGVUc0iEFCcodWy+KepY9k2cjQiMQToHSlkwIhAPD1+IneH+DpH0q0jTCGFJHQjuj4lGVzgA3SSlCfRK/B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX6MCRA9TVsSAnZWagAAAt0QAI++Nx5WbRGuHMOrOsc0\nH1JTPNnlGb2hQKYF/sO7JJXNaa6OyQByDo54ZW96qFR8NqASiwN8aWlARJoN\nyTebMoAt6/2ELx9QSIM4vP2KEcJFHWXZQ9bj5POMpeu+cuDq1VjMmBpK8wPF\nTj4ZchbsdomAezb9FTQ7muWZzh2l45xqK5US3ui1ojSsXXuHtojoy1o/oeuI\nhamIlhdIIHP9S4/UFx2ZC/4+W9QwLxdsfTVeq55kQGR7cCFDme6DKG8OuJcG\nETVBmsh3S4aoLk0aIqUDKYOXHCn47m98hyAY6sgENuvAgmCrp9V+tEPkdldA\nuXtgvo14nYVBgEcCu7DTFj322vc5dvoXfw9LDkWYPbFm/DTfhTKuYh1cifNS\no8RmJfdrdIZjtXi2RWIXn/5RCYIdDcE33/fmzabkiFKTJD/HihxqTluhGl0a\nDuLcIwzev1KW6WywPGRqW4xq7Vc1cIzy+64qjwP3R/pcnfibHOCjbnU9n9w4\nHVoSl37JrhJyhMD/vh8iScRU1ubR4c/M0dXwdB9qSbPfdp01SOuIq79SnNPM\nvs+5mg+1Jj6gtpRypfXjd6WaAe6pl6fva4Q5Ze5pvzS61wgY/M0HGFZTCIzi\nX3Jha+BuKg6MRwc7iILCLIrDMZ7an//w4j+m91/C7PPxapNYzIK2R1a5+tEi\nsG+3\r\n=ylL/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/button":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/icon-button":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.12f5622e1.0_1629847179888_0.17600453254130755","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/snackbar","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"facf50e13266e05bc96f2f6c17e4a9bdddad797d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.d97f8f133.0.tgz","fileCount":39,"integrity":"sha512-3o0cA1zkFGTWRQVgrM2U5N0h5UI61ZESLiuST5ON2DG3gTHd1qrUF70zppv8pyMDrSZVBhThM1P39OFTcYp2ww==","signatures":[{"sig":"MEYCIQDZ2uqKPp2r7XPwGuZVJcR6FNQaZFxapnQtZaYIlkH8DQIhAIr60GVDvkvq1xA/WelR924V4Slc6FI/g4Mu68q7wDbH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo1ACRA9TVsSAnZWagAAiUYP/RkPHGiBB9LNZNz7bwgx\nFe0hEQpTBbjatAnHwNFUUUMDfn3+pg+0tvz8VlUgkxsCpSK2A2IjgEIeS3dA\nkUPlggXYJ1u6AoTzzfB+ZDCFYV/5V6pSxy9CLnhfQGKhQacxgAN0/cnTwR55\npYWJ2ia+jVsOnN52mSQdrmg8k6HaOwfYEAiKIZLuqYuJil4+9KalHgEPO8R4\n90uTle87rdxR2cCWaRTPiYKYzvfqO6fRIVrVND3sVABPjHsll5Klb8F0RA4c\nnq4sIOuq16dNl+BF6cqBE4W0Uw9865Bz8/Vhfex//8/U/ylsLYBpc10yLiNJ\nowAl9MoobsFD46TvZshbTWpeFXLTAAH/wvvh71Ynuu51gOLmRYR9p0ElveX5\nCNvnOURsoZXENYVYZoBG8Cp8y2lSJBOIT3KiVfc+AwaJ3D57O3YZTtBDQd0q\nlhp9XyyzBMhnPfKg/2o/rmkNmttFZFWbCKLtfLY3JFN0V1sAEirij10ygUTI\nUSR4jN3qxK1ARPPf3PJNUYDsfTJfiVh6FlHstfRlzIh/G0GrO6lN9y11DozG\nBqm3MZMG3FAFfi2AjBH4gKZ3KJNP7bKywKAkNw5dyaqDQzVHgra8OBl2gjL9\nifE8Z/Y8PmZaT/tJpIjRnSLPfuzqaPyivG5Co0L7X7IX7iMfaJRIBkQW1wOy\nXi13\r\n=fhVB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/button":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/icon-button":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.d97f8f133.0_1629916480523_0.5288226266813303","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/snackbar","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1f5266bd203462c77f30c6e99ec83f0e1322745","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.d86fb6fac.0.tgz","fileCount":39,"integrity":"sha512-xkwRnq8w1hZMh4tgtNYG9vQdpSPIhm1JsZlTBN+pY2IN6Pr2yD4pE5e/i9JbD6dBIz51CkGcGF20d9pXoRwKGw==","signatures":[{"sig":"MEUCIQC+pLhYhDNSs9GRXyvCVil+dOmHgQa3NNJGt/x78GnxswIgTYkFIPsUTPPPHUVdMvukCf6OJKqeBOFL/+FiARDcv2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpIOCRA9TVsSAnZWagAAnyAP/0pLtHDVAhFJcQUKHNX8\nKMOgSagOOGExhzQXDr5q7WKUMXyhf7Bf4JkYD+QUhcSj9fSTnMWVHzdHMgXL\nTXUTb+h7rOTVLOg6J6jSh/E2gvkAM6Zrg+fJucZ9eYeZS897E1DZOhdHDNsk\ngW2vjw2QhR4ZBNC2bIjbO2vH1FL8gsuKgyNKtpJ1B4gcn12KL+LuqXBtmEen\nHEblsFfhN1xMQxoxzowuyw4tZSUFM75E3NvWjn24IR4jYQZ+cx2OKvMJvfhB\nV1+aWkPM6Lxdbbc7+cr+UPoQFcm/sZ4O0zAEmVlGJ3ygq5jCfv3vnANO9Pnh\nlnsii/ONxjoJJViOEDZdFQWYWX0Lnxof8o4xZYjqE/UEL9zrNl9idPbc3+ck\np3hryW1wURew2AMQRx4qRuoy77PQnIZ7mdKQsRtpnM06KGoNPyCYfRbvVyzY\n/HKB+voZAv+jtQlG2Jpa/xSeXWCLnTbiLnsw815nye7DN58jEo1FAMdn0FdO\nkVxIVuau6bmKNYuEMh5OYdKXRFd1JZEUvGOntvtxNvFdhZ7Q8P/lvv0TcuzJ\nUyaCjgqJtZHkOATw9mJB8xS29IPQ0xwi3idYB3BtOv/heU7yfOR1qLO4wLIC\nj3bsjmy/jLfAoQIfe/vnudlXSMtVJmkfSX5XPI7wSXsdCIjdevxZIG1TnjQC\n7M/f\r\n=UHDN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/button":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/icon-button":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.d86fb6fac.0_1629917710411_0.2156821533382971","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/snackbar","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef265ee77249d6c4d52de978318ed5e958554138","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.e8554dbbf.0.tgz","fileCount":39,"integrity":"sha512-MiFeyKbfdBht0If9A4ago/fjU7nfzQSeqrU+JHZSHsPEGPCjIvyg4WayOALJM7EvuCzCeETsQixYCtBJaHertw==","signatures":[{"sig":"MEYCIQCC9/WDMH/NHfdNe0sn+lB85gbIod/DRaLP5r+BOjCr2gIhAKuMUCFdxafH2/U2BN4L5pY5OGUwjIXdtBEFJDp0IPXZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2WCRA9TVsSAnZWagAAUWYP/1qzozuVKvqljkQZckn5\nYK2TIOAn3c3syRq/b7WST/yvQv6FyQfLsffdHv7lfws150K06CPAtmXG5k9G\nQSHApGH4iGNb9dpgY8FcLPWoERH/1rlmZP1j4xRFbwq9jrMBXbKfjPsRLPsA\nvau+ZBmF5bqtsEjqnJ73JjLjJei/TEi9euPsfu9aoK5H7+4QCV6k+rrWrP6x\n9JbJu+9DR92iizVNocPujXbZiqfb0+Brkk+pxeE/ucw305iTLL5LSYwPhlRo\nHQ6V27XBP4XNzgi+MKuA4nDZfIiN/EcTjDx+sl8FDsRSFQNUG06j70qH7fqG\nygeibpnj0971YBzX7Nr5BUTMRVkrgBmGCBpe8uab7xWjWl8K6bpCUkPM97tB\nMNN4MSy/J28La3SY4g8ZXf8Xso5JQRdsp2GXvbaoHtUvl8HuzV9avGjBijJ3\nGYt84DJ01XwpjwZq6D9KvVrfi4EhkRsiFhlvTVu5i7ZCzztaXMEl82Ea7IoD\nq7hNjmozvnzgH1n3xnxaQEWrNB1QfzXFC905OEQJAIcTXBLa9tRxoQ0brloG\n9rrjGvpwKL1tfr2bhqsRfuwUFbB9MUtLR2wpdJgdHo12RkGxXYvoCja6D2cV\nOwIQYw9cS3nNkX+sZwgU6QXdrL8nulXunXjk+WmbrAN8w8fOH0t1EdAgT1Qw\n3s6b\r\n=i7Mk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/button":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/icon-button":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.e8554dbbf.0_1629928854416_0.5257282326483534","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/snackbar","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bc95f552fad88ff34d54bb472a7a2e565edaef4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.877e3fb0d.0.tgz","fileCount":39,"integrity":"sha512-jtDZ3rmxToh+8S088GyKij0c9U7Q2QNNfTiwYMjSfDP5ZPKNkaoxXQ2iNj0lsWSY6pF+Uv9CeqJ8fjC2X5J8xw==","signatures":[{"sig":"MEUCIQDr+s28KqST0BBqjweLVt91znqkzatZJuS5npsv9ATUXAIgb82DpDEwG9ncO+2wcC5odrQucU0u0WhWglhOZu/mm9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7W+CRA9TVsSAnZWagAA20gP/3w6vkOblPBwYcxLI88Y\nms/66G7w4cENj7HJtnkv9OOkHnrO3T3GkLNZMXASKpdWmAEPmRxPx9EnMeuh\nnRRS0GU33Fxod9ZqJ9TLvWbvIBWhCfvZxYIlPwOxbfAm/UqGxrr4/H6wWI31\n6cr/ZSpoxtIJIA+3pbQNT2NZEOKFzKFUCmmSlRsB0ER3ikVXrttMvDnPglGZ\nK9PWIGr7rQUJlU8H/0QETDTszMBFAi/c0Mn9BvvbJAKVBtF+IZiji1uL9h+O\n1BQXf9DBxjmb+X4rJIRgH1vFWkqirKhYzctaKcjp/FP/V4mZF5vBsPQ1MMRf\nSy+9JQ+vetjj4huR9KT6Wv9qZWz/XGbxWFVPUVF0Q65+YBfeEHrq7ZelwaOJ\ngTMUX7+mzRAo4rc1Awz9sQ2vJnDy7oc5OvNYywIiLd/QrT4pYqO0NGn6aIGa\nXFVYWOrvSN5sqaxZSrDGvNMHm25PNYUaKpjZ/EaKYKJVDdLayriJl60GuLjV\n+rSYLnXBlf7rtGv3Nm6uUx74xVU0U0bQpLQbSGMkRTw//ErsvLyUMo+hGuSN\n3qRtu6GARMce6QejZ0+h5kktBGRBHhpkWHhzFTLavVnnPiFR347UbNjSDzwT\nyAVetuUEI/qLmGMGuk2GeLGY92G9M44ZvUjRM6U+zSLiYu55AObUS0hnPdJC\nr1e7\r\n=+Nvd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/button":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/icon-button":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.877e3fb0d.0_1629992382359_0.31554501060735185","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/snackbar","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c95e3283e62de66ed9b950dfa3c9df08ae4b064","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.6236f3576.0.tgz","fileCount":39,"integrity":"sha512-KZafGnSxrGAglU8HbSEpCQKXS/xUm7v4dXLpXb31T5vWipMnpBbaM/K4pI1sojK245U6fQ3gb8szGEFF2wSRQg==","signatures":[{"sig":"MEYCIQDGlPaOctzAUE5Nul+AwoTbE23GBiYqs0zH7cEU8YImsAIhANvdi179JwieVfmVxoYg7lt6ubY/QY4BqO+6TkGE9m/W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7xBCRA9TVsSAnZWagAAFeQP/28AXDFikIBAM6T5mC5w\nef2HBT1KU7sUXTI1oJ2TK2SjWppNGSxbv8DbrWNFsZBbu42nmHvkITL/oXrw\ncn4wfFw/0Eo0ITW1qvEfN77Rcbi2Fu5R3e5fQ1aiZrW9O/aEHn9vZ9wrDacv\nJgSTCon+T9rrILR1tSBCmh2pVhAbRv5avB0N3Ppk9LrzJ3fg9EbT5ljb0tnY\n6pU5JWYB6JahpkULxp4fu8pDpDDd3vrFYwgCRABAPzSH9C4ezK8YtQG9GQEN\nc2FMHQ2ANdMawhH0FvYC1/jjpfF+gAzYpD6JC7bFR0OVlMcGQamcBW6RRfCv\nDh8kHTF7+ocBBi9U8Ff1X1z8K02xm2CCS7hOOfwUV1CBTg6GjA2EKpU9sr2/\n+uAuw1Mi9m0qIoXOFZ1CdnHyWWk9q9mtibAkGhvo7Fdi/cHpL1dICUgMFxa9\nJCzBYLxnxgLJ6SB71cKzNNqhO9CXHqhTiLD5j1utmzkrYHIAHsqvBcI+hTNI\nbSBVR0hROo3R0khRTqP6tYysWBq1RLgIJnsRQVIxfmqgQsRZpUHltvzHcrG6\nFtY3UOmc9PSk4lWqSOYRcEjhti9I2ViKUwEtaAWYCdVF0a4OURZYOOaqb5wf\ntnAYYmwJRaTCsPNsKU0H/mU30piwQChksPV8la4X2lsqrHACZd8rOeWaL/FJ\nyy4z\r\n=TBSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/button":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/icon-button":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.6236f3576.0_1629994048974_0.9293421065076262","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/snackbar","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5015acecdc5ae373355ee7b6b220e673b4f968ad","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.1d19158a1.0.tgz","fileCount":39,"integrity":"sha512-y4xj9uDR1gDCgk++Vw6MY+2OBWadNAMcGRRPLGSmaM0I7AfIf99IY4kBvIhS7HZfeYeqhbxv9zTRLlPOjYvVHw==","signatures":[{"sig":"MEUCIQDR844zEybYCr3JRnAaR5kXt9J/SH0bVan9HjRg5zinwQIgG2u0keCN9H+btkANjkNocbtpq90bnTWBvEQR5nrLxcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8sQCRA9TVsSAnZWagAA7+4QAIngwcuv6LpufVNveUvZ\nBHv0Uk6ttJjJkwA8TFvXE21IK1eoAjXP4ClNqxyYWLr0TE8hLT0+ZTA88GNh\nzNX5QMTRdui59mnEPasP8eeAh1R9p/HWwLaWGwFH/6hgITZMK58f42TuMdH1\nbL68LBQGSSrLarbjUy6QmUcqRftWerF09mIz98Nw82biV4kLrDtxXzCEg48i\nsOU3DcOjAlOH6hVADxXIO18dMBJZGl/6r1caOaffGMIiSm4jMtowDQWL+OLB\ndFQoTfRejpym1ZbnIsHzf1clH1YWULYBQSyGCGTPEXlyx88xuO9+q3xNETc3\nn+Ct5yEJaKU4IlyknjORDQ1/xWj3oSjPdn2QQ7LohyAECwBVAiqeZsXQ5pa0\nHoGJswVkUEPwHUIlZq6hSgxb+YWaeVorNCnJZIt6D+xo6Qr5R6k1DfN/iPx0\nWRxzwlUXWODnlX5FwQX9t6yH5zTQPc+pPXclTHsvN6VIoexu7WaAw9Q5DcOj\nx3rCDrC1t4+GQIsHXiMuFTLTeaSoqsP7T7vCJAoxqHuuVj72UUMPaDFHN2gf\nygzEAbPUomL73PtgIg3KGdG4kEhiLDnqII4h1Inqj6cG5Fl75rZHmhUsjaP4\nx8r6dGqKmoVtNtLLdeIhEZSvDb0I50dqhBF4FBwZfrBi13UDPhnE9sM46ZaM\nyDQI\r\n=QPk4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/button":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/icon-button":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.1d19158a1.0_1629997840659_0.9864690378238623","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/snackbar","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ef3da98f19583ccd6268557b8802472bf18c788","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.6adc9e83f.0.tgz","fileCount":39,"integrity":"sha512-bbXkWhyltwmDBOAvDwNvSUn/xcUmjh1MlGYgE1Z9mH7f13UY32YyF23/uLp7PDw4/G+ECq2fuOet1md99xdk/A==","signatures":[{"sig":"MEUCIDFI7fBD6Sas3gSr/qbEzYS8Qk4+URAuzNanbLbma4k3AiEAsabqaOyXGZ3OPIWNCBsiicwkDFvEd8WkllsVfvkSBzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+YCRA9TVsSAnZWagAAFTMP/jkjwiW1IaTy6RZ4iiTb\nimv7Q+tp70ddOxapK/kFCx0QuoKrME2TVPNhDlYMg2io4S/J38RNunstiPPH\nGNio3NJxq0UuTKEWVbjwS4AnWN8eE+xnuCA42Smi6qbQ67X3xJ5xG8AnGqjH\nSiFHijlqPSQzYWpzUY0IhbbaQJlMMm/m8QP4ZGpKISvPO76hIFWoY263wlMx\nx9iYkJCdj4dAPXcFjDs90N4bPDWvwE/IggYt6UnAfD3BFCiDc9ixx2OyAvJF\nD1p7qHdarFqGg2pwMOb+JMyTT5NvWyshNiXX9ob4a842ZmoQ8wrkBjy0zSr2\ndtg/Ke0QCcQBN2gosNta/j6s3lE2LiwAp11Vqcw/d0jzhYMSbnVqEEqetGiq\ngxfA4/x9DRUNgaoXHSY3xppO3X29WuP+MsMlE8U/bzko5LqKYxrTT5wgiQRK\nPkEF7LK/PvMNotXWK6jEhlHDUBrpH2j0nea7G5NystDEbAXKw67oupy8OMcE\nrl6fR4OaoClOU//CFA9Z6okOv9rrOmL6JfSxXvZP6z7mS5bp1K4bOUvNSy1R\nMMCjVXrCqs7VjBeT3FZ9MnfqeV7T2rgyFkUHiUDtqD+ypt8joh3wjWOh04nW\nZgxGSngZr6jUUKFaW9kOw6j7JPvfjweC6wNGwces0VEM7Tu8nH4VGG4cOJ9U\n7lLL\r\n=Kj+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/button":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/icon-button":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.6adc9e83f.0_1630363543912_0.7143960669315297","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/snackbar","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f73a77076510e68a99a6fbb89b124c190611d2e0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.d082790f0.0.tgz","fileCount":39,"integrity":"sha512-65T/5Xy/Bp5eCoh7VRW9Mr3HnpPEokc9+JMNZk70vAFXGmExBfjhn6PvdR16Vk00lCyvfWmmv9bkfwjZVMlMQQ==","signatures":[{"sig":"MEYCIQDnoP7UeJk02CEjQe9QoTsYKR/a6yQEH/Y2BOwFH0Qt8gIhAMuzIoDoRwvuxjhffwd/pT4LqSRRtlFoUuCsgDTwcvXH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/biCRA9TVsSAnZWagAAemgP/jF2ROwrY3H4jtHdKvCB\nLEF6FSE7alL3dettVhDTJW8yNxsd7Pcu11ochEUSunljQtvIxAwxp3Ot5BQK\nzke+r26oit2eED5+JjNxjkRlEF7XUu4EEHXUWreJTWqGNutiq7/JlImKjzw0\ngXZp5FfTGDecnfGpR2s1ANnCV5HmAM7Qwa8bnbp+Fi5pk4RLSqzaOeOVKIoJ\nd7TyYSQbLDMDWeFzjrHimZPJROxrHyoohba8IzbYigVw+p/jOqg6puXxEbTm\nVjsaPYKdX0Km+MjFbgTAFqLHo6TBea7LXxafY10tSMAbTmy6XzqzvWqaUdSX\nPuMYIEL3W2gSp1B+Fao3QM4g0FTceC+/8Docg3hx8ZT0+cTCvT06VT8bV30V\nq5jiEEby6XBUohXTnKr01KloFWz/nrhjtBzYxXjCLy8El9/XgIUvdKyE8kjZ\n9JJYqSJopxbuLl2dySpCxqpiP4ZAhvhlJg/EzVI0T2AI8EXS+sEFSffwTOhB\n9e0CFrMnEqyBkz/2+WRcjVuxpYDNpNq26kC39HKizK2MtXmk0DW9Z++uZ23k\nRB0lSjhHEBAFcIcS7jEVBnotqOmMbpIyRcpZTIVN8RBk/8YSxlfh3IgSQW51\nxwLMQP0svgOdxAc7jEqwbFnglDnWRyjDTYU3mr1PDL9Pgjg7OeLS6XthSau+\nZD+x\r\n=LP7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/button":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/icon-button":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.d082790f0.0_1630533346371_0.9523344966513594","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/snackbar","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37486f5bbb8ea1d109effe6b8abb4533d7f81bd0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.e2c4f0196.0.tgz","fileCount":39,"integrity":"sha512-jFyJYJ0E2+kYXA6AmmneThc8dBtUTDW3v/hT+YcbbbCAJL97uCSOLEwb0tkumGMgNxJF2nHTaP3IOI67nJvpTw==","signatures":[{"sig":"MEUCIQDUClo9aG2MGO6NbEW+qKOxD31DvjNkfH0opMYpVlNaagIgVFCHGEEEYMNep9HQ/zRSRSjeVa2OGiQ6+bzTudsdBzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDMoCRA9TVsSAnZWagAA1TIP/R0yyfuJ2tFlZbgwu5Kg\nHInOQ2PfrGlDc7JHkM9rVbyd90C17phYz7n5gX6FTS6Pj0ThDvjooK4T5Ny9\n2/Cv4OkGCi8/8LnQ7Xj/AJBm3U08FJrFwNyVH+VJ0iD9tdAShIlG6w45FLZV\n7boP4LuTLpS+i3GdfuEWIHm7DaundY/f7eI4T+ieEQU/pUiKQnkTKn3+qy7z\nK6ScXeoiSK8DRqq9uGHJI2fpEi3B9ZY+l1D8exNi1+fvic9BRQAzIC/RIMgq\nzm3y642CM0tMQcehYQdVt3pEaQkAFelBW87bxSo5K7W0FNPUV5pqUMycnVBA\nG6B4wwX1Ro2aCIXDkRsdOpwQFln8EyciRDkW+bZeLQ/1hVg0jPcfuRbFBwl9\nu8eQOGmnvlXJBv/ICGGmIT0gnZ2deaQfEDKAvQXTucP79AJQX4N40jU8GGU7\n2+QXlPXa482V62GOCEgjG9YJ9ajU9W5ia4Fmb+hXiGDMdyL2tBnNalgSTitw\neiG2B9+TeVjjQdp96eN2iMzRtYFnG8NuBLWUGMRNFdU1LMNIojH8iHFvl7gV\nwb0VxwhlxkL2Dom+dbP+zP1I8XKxfZbAPjOo40lh23UQQcORFX8Wl1nszxzS\ny3O8E80Lu4zCpIRselT1SQoBPV97utNR7FRpvaMEunecqumJCFdveFzCLYNF\nEdc/\r\n=MjbD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/button":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/icon-button":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.e2c4f0196.0_1630548775898_0.2520722999014784","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/snackbar","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"680c584acaf87cc895db9e780d27029862d6ff53","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.611db508e.0.tgz","fileCount":39,"integrity":"sha512-set7kw/hhcc/Dj6BA+Z/YHT8071BduqGItZn3erVUYAhswbIG/O+xeuh7pvkvaEGkYQY+2aIwVyWjgPR3CFXiw==","signatures":[{"sig":"MEUCIFUTzmbMJEv6CfsNFmGJj+Hxj9oHfmY1k3xotdaywjCdAiEA0HcnaraOkEi9Db7WvQYVGZDnDBILva9QE4nPelyzWkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEIbCRA9TVsSAnZWagAAdOEP/2XRqp8Pi47UFe1Pxp3e\nPjpePBpTwJ23hsWE0fAypqRUodVOGo7cROrwQyoGLGVTsCfjGcQBFpHqSk7x\ns1zghuj2oLw/dh/uaJlkC0zObLeYLHiAalca7rsOfxoYHgIKqJMAYe6+P7Pt\nSdLl1R1AaPPABk9QKJ8cTxAczJDvt99NuEQMVu7IYiIJ6aiNOKicBLIx3gl2\nxlcXsNz4MoOWSq5hto2g4GD0/vAjkWnWlV1e7eH8cOhbTxH+7zfyrps6UHk1\nW/ZGIMNRu9UnzHplMnUQLZ2+j9R54rDQGaMu0pCR1ar39in51PJrjflbPSdW\npKP7CIqrC9B02zA7iCiInXJsfeiDFEsqSQzOFV5EfEsK8pv/g6Uqp6hPYVja\nL8u9YEjlcsuURbdt+/uMg3dsJbMD3TcN+sB8D/F80UyxqO9mumXwrVe8boyA\nOn7rxWy1e/YPNRCqD6JaddK7qdIzhu9/2lBtTaYfwT7jBF7F7TKMVWQY5Lcn\nb0yVK8mNkqbsumfp8C4a2LJHiYU8Ody3rL/b2IPY8jL/bpzw7jCxoXS664P6\n6ms/7hvTZbPWo4oNPX7ZPeJCL10KjrBgqcnLUpE6I+COP2s30Tj6o5aD785u\nWgr3PCAvYjtMVi2Kdspi1vEWgY92HLBoqMZXbrIRPkNRaBO02KynlC5uQeVu\nWziA\r\n=wjfU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/button":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/icon-button":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.611db508e.0_1630552603070_0.39232215926878466","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/snackbar","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15a8f95e538c6734f1a1ff092ed71ed713eb5c4d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.d4706933f.0.tgz","fileCount":39,"integrity":"sha512-uVWug4e3150Z+tAJRbQUf8+e8ic/wmqcI3GNYLpPw7n6jPBGnKUramVx/l+u+jQ8FmBQtckcLZZ9Te6UiSLMGA==","signatures":[{"sig":"MEQCIGG0QPURCzRy5TFOtAn6ykS4ZEwVNL89K+p/NWAo3PUSAiAx+5FeYrUY50Lbq9yXgn4xHxYLh1w2tEWGXhoxXIGPZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPAmCRA9TVsSAnZWagAAGnUP/ReKiLVoSFdOcOlmMK+e\nFnWX2BKnSLAZnDBM/IehRRto7S6Mm9mIkzdf3CZmLVzLe6y8Fgh9HBIOy3KL\n4vTXdiq/2aNJjiUGc2G9d+ybplsxNR4rbykfPAe7afeFQMJjnoDNez/8BvyW\npdnQzSlUSUeUvWKT5EzHNsdkb24iRbBym77F8jupQd/y2oUBoIPdvyryuDVk\nXcxyVeWMKKkEn9x57OXedjPNv/LvMRUoT8/Nus01J0JNnFjfcIogzcTHFjcO\njA1cMwfyMSDYd9iXsuVRhd3GOV9iC7rvbJx5ECE4OOuEJ4Gj+/FJgTvL+/w0\nr9deGHkqAA8JoqKFv8QYsn+BcI9ErtuOTsj/oFkr+2AzbbHaO8iUP/NH0Fyr\nCINB/E6jIz9UJHc0LR4AAW9uXPvnFqKIN58GvgUliedwqLaNvyDyMOyaLIYv\nU1AzTYnH/rerPNkUk2TX/3lkPlioLcrfowUlsna9xdInu/Cri/y8SYovd+8C\nSBT2G1mPZUq1WMFsKBf2HRIsb4WuNokJ++Pqs5org97e+J69dDjuuaqYz5PG\nhcpSY5MmJgTptBlPSvnCgWj/rd8Kohdj9TUcw0Rl4a/YvIwYL/9WPQFiJGgr\nv977eXxCbvYwi6MiyUb4i4olEiGjpgqVLlec6MSqsJR2woNZOTVj6Lk/vo/C\nNcRU\r\n=9sQ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/button":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/icon-button":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.d4706933f.0_1630597158755_0.7189562660460458","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/snackbar","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d5083e6bf1ad57c5c86b3ce1b8b4c4abed0711f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.c16fe03ce.0.tgz","fileCount":39,"integrity":"sha512-Bwl77fRwBXdtWJVQiHdNEMKeKDNEWm0Cyr4ag943jgQ0coXsQm2W6I2zjplP+t+eu5BUbsmIAgH8YLIuHwx5Kg==","signatures":[{"sig":"MEUCIQDSa41cKsOs0PpSnNvwYooKs5B2z9UWlsvIcoEalrUqNAIgGc8g2OSQRrCqV+P+CFZ40icozkHwEcFlaPPnofHTk1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ3pCRA9TVsSAnZWagAAYfsP/jCtLDVHP4A1si/PKLB7\nDo9T3tVHDUw1Dt1DFbyuIjs9hj6P8+xdiSGhscuwkVo96UpnMEUfr1WBQKOA\nehUSrYLoC0RA0lM0KIAurziun7uaD6T5ivS3XmCx8LYoBJlv3TxNbxn1b0Nu\nBkLjKbYMjEnfFxmo/W4A8iH/QQrqfGDQwYZPD9xCTB0DdZSW5AYa5irpRLl4\n0IXDVVeXhASMPBaISn2XQv5UK5m5YIeF0+PP4MFeuESiEY9JfM4NpHMM49+5\nFLEiUJLV7DhVCYCm+pVlJYtTlmo8lnDbQ9Sezw4v+Q0IbDEJtRSVrK0SHG+g\npDqchT/BUAI6Ll4IcQK25qwL6ZAnx0F213xYTxb5PkZqAdcwoHP8OngVRvl6\n2Xl1Kl5dsrfw8SauhG1tLVGrkiIh0XBPfmEo1oBC1GLe+R5gnzezIfaSUSvp\nunaKFsx8b8DWtoNCyhNvQvfVWqZzfYQ7N1i/N/HsfmlVJdlTWphps0ab2mp8\nL1Rv3E/mAf1Ej0USzN/uwWLL0hgv8f64o3jKaRA1P/THmphIQwqOIbjWNykZ\n92Wa7jJ/e9gI40/+tQci/1+n3p1I0i9Ljm3woO/YWSxn/KaSydYRHHoCruiC\nU0d8V5BSeY9rKISgy6yJiGONQRiP9Ep3o2D76ThzfZn6LEvtMZwnMGN4w+zr\nDpfU\r\n=AhXr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/button":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/icon-button":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.c16fe03ce.0_1630604777551_0.7134217147303674","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/snackbar","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fca43016fd852e89b4a464f591b2d2b98b3d50e5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.9203a958a.0.tgz","fileCount":39,"integrity":"sha512-a+W8iiVEWJTIsWY9VdfdWKFVPpGlpYVjbG3MDNFPSa9NtwT5ckGiS/vF+nPXjLwPcEaNqNnVS5VOXkYxy+aunw==","signatures":[{"sig":"MEUCID6hk8HMbkmfC7rZuemyBDASKgGyroAEVVAL/v+/EkpUAiEAqKnuTYU1Z3EPUMXsEqJOOsLV82LbbeUVXpwqU2h+ULw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWK5CRA9TVsSAnZWagAAb1oP/jIl72Ue67hP5RsIhRR2\nWg/ZSXlTqUNd50dxvn4w0b3JOXfvkEFMONyBZk3XbjubFzErF4JVWEP4nnM5\nHHpNv98+WRZ7CIZlB+ZSyY54bhS92uYp0rnPybzc3iElRcX2MJ5CL/PjEM7a\n/3AUlFkli4AnMquZ8OnjwoY0ufyFFC9kiKiOlib61ts6U//8YFQyMWUtVxgF\nlFIbu07bCr2X5QMQkRH3vTfpBEhzGxReIQ5UZrutIuTt4VbCJSxeNFVkDy7L\ntV9G4dNCL8q64GYXH9zeJwb1+G5MXQSFL3WYl34pLM2/Tb1QLVWvv0ZIclkW\nUXdTkqYMRsg2ByGxcPNC4Vk1mZiEFugt0VUep0Bkky2SRyBVJl6zeJsi5Xe8\nfvDjKzCH6Avz0MmNWZ4/5ptM7XUwbZlluc8iUWlV+MK7mOVG2NtlsUQdrCXn\n2iwbYxD1qE23EQd9gbiLYZWu2OyaMKVTqaghGhcOVlcpVS7ml5YpzPn+62Zo\nlMURAnOWxvUqcapzp6yKZT7SNk0lFUEUdFma7tLF0tbjc3aJl11KBxU4t5mh\naJWaSqzjyPrxQcXxuDGZgD6fBcxe5oKKKwHiQWEwoeOZeNHHge3EgKH8cdP1\nzfdLGlXOuxsWFxHkH4W+8HGNH+i61aujOLWEE2H7rGbkjvTtH53P3L81ZLx9\npNDS\r\n=ZiV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/button":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/icon-button":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.9203a958a.0_1630626489396_0.23890533215525522","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/snackbar","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"232affe992bbb94af650c71a2fe20946b5abda76","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.fddd5ae93.0.tgz","fileCount":39,"integrity":"sha512-avSoymA4OoP8LJW+7PUPnVBZXUeBL90yJjATdlQFYKmPqPJqI6i+KX6F2T+42faXKBMorJPnk5x0pGJarFu3gg==","signatures":[{"sig":"MEYCIQCbV3umrmYHSk+ebwVFqLeZb/MmJFoQxeK8b+dI68O5BQIhAPgWtUbs3+8CmHHKdHgDp3rg5aphHe83P6cG9Bz0ScTe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9zCRA9TVsSAnZWagAAr+AP+wXewigTRBypzRaP1FOQ\nEuPtsOO/fMEch28GVNF4A24YnFucbQworWzagO8Ue8VPmxXZ10P2GpA+U47+\naTAbA44bNJX7n4Nf2shMhXlXNueEfmkmbUSIkkuRCAi8BL9/ezYe5jl4INz7\nUOMI2olqQziN5m24E3RPt4YeiS9oo8QNiR87se8lGuVr0zr9WBuHwpb17k40\nME8XRP3Rjxlbimz1nRgqcQtWNWIv+96CBorhyAERDMlPpQd+1ZAManZaB06h\nXrkOe0vm5dREK2p4QL42tCqsJhgEtJR/nFPG0LrSpuhAxgbyIQfrJX+aCsqa\nfV44jL+B+UZU9MQwwYUj8W+kFrh6LfGLWztP3CeHPl/nykqlc5A/EcxLoKBa\n0B9JkRSl6A8+277ysPsYUhm4okE9yZ942/VWD+OcO4qrte9GIGCYVYJHAnRc\neMV35HPkvSN3zX916XoFPjeLiigQzpJVCW3M+VTgVVpLAca1JCEnhY6zKEOf\nAM6jo3zNomLBMn4jd5RgKJHlTsAw2u9GKWzCcsoQ2gSrW1/X2YlpI2iodUgI\n36RR33QGFlGCa8mh2r2aSlKtsArRUc5aEA5t6SpSJFxao2pnYLx+s0tAU3qH\nql1fu8mvqBkuQ2M8ahXqwVejjf3gD+D9xcZHPDG/T0FRbreXBX3fuXOOFo6z\nzz/r\r\n=T5xc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/button":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/icon-button":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.fddd5ae93.0_1630654323701_0.9830791397339318","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/snackbar","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05cc9877c7c95905f9a70f6b2edb4da018fe17b9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.117599a8b.0.tgz","fileCount":39,"integrity":"sha512-Uh+CKsxDC8IJhM05aKMK1hfx84OkSFnKzO46NTOWILfXqJk41uXsqg+yHAhwIz8ST+6+RRgVpwV6dZC4CCzf1Q==","signatures":[{"sig":"MEUCIQCgQKfWbx7UUJfgdi9huWsfDPyxvy+u9sH5NDMtcHrbnQIgMboxZOd+S31h8zmS1jIMSsJmRquiuoLjbh8TwX6a6PU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/KCRA9TVsSAnZWagAAuBUP/1k0pPwyZnEXRbv91oH9\nFJmh5NqLvgfjZw4XyHxl/w2mNrYFwoudXjjdizWSc7WE5ELFR4Jme/XjS69J\nBYPkJ/qg/KDhXBQajm8QiyWDQT195cbJk+4mfTBJuLXTorg+YqFmob9CLM2F\nGOrdUxVrzFILnxOog3YWOROdp3dbIjfx8+3SeGlyJCNSpw6GsiOyJZ36wzKS\nrYxR2ftfy8Q5ObcuD5Brzk6gcrsXSKhkyG18cz2iFbscQ1go5G2cSuQ7cCCv\nlE+sRu3CFA3o8StS+x933qtJJrIEWSKN8uqfaHBAigM5wlK12xRXjOlXGoCf\nC4zIevp0J8mI+cwpZ4mnhYXsBWean2AINCFryEQSV+RsUGkJRJeznYKux30L\nJtM1f6iMixnCHXNgeLqy7/AGkdYrvikahy6wLzUCVUcKei3enAjddSOVUfYi\npmOlt+4OGoDgfK3iZqYSCwvaQ0yVRzZKdga+yuLP6wo5InLXroYLhO6rdDdi\nPINUc4AuQBbhjikmmocLaRZBqkSW/narF1TseBBzjXsoSTddgC1xHGD3Ay4r\nVX0YvUFb3Uuu3qMnpK9VDpxfwb3RTBeongbCM8ymd4mPZCLu651xWMSiipB8\ne06oY3u3RoX+Xgc2wWhHU3g4hTy0YuDoVtejTWR0p5p9SeSH+V4pgR1r5of9\nSkaL\r\n=Q2ZQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/button":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/icon-button":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.117599a8b.0_1630654410037_0.44109125368008173","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/snackbar","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47691cdaeb0a4052d94bf8efe321f26007b9456b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.e4180d07b.0.tgz","fileCount":39,"integrity":"sha512-29WKDk/hF7k+XeCx5sm3HFc9P8LQP6jbQD3D+w2Em3DOYI8eu4h4YuH4WvCwGhPkn15+4Fy8K930FYQ3bTlJ8Q==","signatures":[{"sig":"MEUCIQDUeFXkuYSzpIwLfRBQ6UJYSsfN53PQLXMwITtvp/WuVwIgU3icRrFQt262278D7edPm00waMD9sAu4FLHbNIredKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/hCRA9TVsSAnZWagAA4aQP/3fzDPcWud/1i6L0XYlN\nm2ihYUe8TZ7JRP1V6arOdIgxCi7nWP470M78jCHPp5j7O2yjZ44g6zOvXGHh\n4+DHP1J9zfcW+1JYs4809v7iFMlUJJhDq9B6DsauwQMjDdUWHi0gcIKZnFkA\nj76v/mCL7iTVJNR3o2cQf1JTw/VpJOGz44aUiTWbkSErXweueCn5SekDk46R\nPTYRi6GWi4mjygHrQ40IoFO8FXgn0ItwguwWZQ3h089Quw5DbVwYFUCoHPIz\nDhBThvlkFuZPhgBQ5LpOY+ClIwQodCBISMCPcyAfoWf1UOjAQxvEGd8o/+VT\nglxp1NtqtKVu4FvRv2UXycNbeEGYTVDijCNPZOBu4z1FIcaT7HyPqTAQu4Aq\nXtmDxBSbSieuPYSIOTpBJbKTQDR4ZeaDxrz9B6cluTAZ32v+3o9VK1+5LQAN\nzo0vI3ISZxE7K61Ebl84JBcCBPf4XEYnEc4zDnJuTOVGaog3eODueVIbaHYY\nE5258HFxvuhbfZ25880Cl1vwJKCWalcvbHXbxFmJnQ8kxSSByoPlDi7Cq+Ie\n5lIkdcqe23sS3DPrVybPcAcDOVTqBIHY+7NTBC3PIOAB0Airf8vkRtNQ5TZ/\n/Gi2ZcmApGP5kfc4J//4b2+Wa66KVGNSP7KZAYkPr5jbfM3VBWKPgtC6ufw1\nK+4N\r\n=M8Fl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/button":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/icon-button":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.e4180d07b.0_1630654433579_0.08316903407238652","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/snackbar","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbe2b4ce520083a64f96c227e5b78335496be81b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.42d175efc.0.tgz","fileCount":39,"integrity":"sha512-iMFwyhQuVi6ZAIXgD/uXrzhXUrRlGuL0VvcdN5giYJiDZ3Sghh6/JsRLfKBkdwUWYoEew4rjOR75Pk7EARqyGA==","signatures":[{"sig":"MEQCIAJh4VOn40cgEdHY2J8D+RLwVcUU8imZAEjr6+ufRoFzAiBRPuV1Eez/eoUarqTm49qhZgwlGJMQ6pPGD8HXZXsltg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLnCRA9TVsSAnZWagAAuGMQAInaJs8x6gAegIvkC51G\n/O9R0a682Tar8eenc+hbgo9ZmOl5vT6sXKGElsBz+T37IfT99EFj7nEyJEG/\njKZ1q1GaW3L3K690XMfxb0F9AGsVMQYo+3j2MBM3XoSUU/LPd/w+25Fwa3Bu\n6zJe9Kvx11cfYCV39iMJbmwBFkSTE/OqWEFascD/uHJey+ARxVamCQt5WUaT\npgcVn/v3gNnpKQur30O1DclAyJJ10MpUcojOBFljU2oo4re7yNQFR+YZEIXC\noiEUCm+r4+4Wb6lp42ACiXpgtphPR0uYbq+k95eUiPGvgOuPOcCuHXGrkRKF\nlfjPYNDiUsjHwXCH8gGmtkplM1nWn2/qHn5fp71b6+TL6CHHcZGtsndJnUUz\n5B9xT+DXTC+HIW6yJaEdKZmas5o3FGJXvID296KpgMLm6e7zXIWFlgf4twyB\nyJ0APJ/IA99gV+xTl15gajEHRucPc0bl5EzvMN9Zc54jx7YyxJSCNbadWFTi\n8jb+ZHTkAZeLH5L/E0qFaZGg1HbHLaKiK5uYKlReX/vY9lql+Bvrk6ZYG30a\nlNUaI3xMfdBgGlfU1LY4pIeam4a9y9ugDtPS5fHaUYZwsrf9Zz0I9UiVMqKR\nyztgw2K1ElH8IPVpy1hNGvGc0EQXJY85rWvIGrFFhxAyVOfXj62yJxaWc2Ej\nfNh/\r\n=uRbl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/button":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/icon-button":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.42d175efc.0_1630683879135_0.21520576111389844","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/snackbar","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f2080b46016f5d01760e312517ba95c8c105552","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.72464476c.0.tgz","fileCount":39,"integrity":"sha512-58E6/cjhqIs8eW/Vt+UJ/mopif5Xg985n4E94cL3nsrTWRQBl8sDEhKW5OE2Abb0KuKL+6jdCr+W+u8+vi4JLg==","signatures":[{"sig":"MEQCIEQp/Mdfeo3N3J10E6IHYBo9P7UVqKCvzlTrP0fzIjvoAiAWWmhJSXR9EeZh1CCX+0wahiR1vgnCIGNYTbSKMhq7fQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4bcCRA9TVsSAnZWagAASFkQAJ3olLhrIhoNxJdrAI5N\nsT49SVWFG+GnwghAFdohOhL2lS5lIIfIiwIkYez6Ae+Jrt35NaN2Dw4Rj4Ad\n3a+NvXR3WsD4Uyq31JNUJgHIw7wXMmXsxJX0s19ogDkuD1iUxFWfFcXwukza\nJj5HMDMC+IlGrDymjV/ng2xNWa+nZQeajC1m2AtYSoW/ryl34nMfBnQb8Ukz\nX6xG8tyowL8f5bTLayMo1z06+0c3dwHw/P4p/ffNgv3MuewfJZUCuDMx9R+Y\ne7RIPl3AyR7ioleCiayy+Qv89NoLg4jzk5bwhgiEhJTuEo4LuS3WE1dsaKb2\n4VFRPmdlut/KktbX3nXllGa5UI0tZ97YlAHEHu9xarGurVi7wi5UWF5te8Ln\n5Yc1bmAFVWgBs3k5LJzfJcoV8cafIvNKbERylSG1oyWajUJHgusmpqxHVyv4\nNZqfRrYDltesL5MOq4O0YuChjGjtDh/y4pjpWM3pGBHrkz35voIZ5zPh+8js\nvPQkVj/HcRUQKWE1McL+IZk7iOF/QWa93HAa9EuH59SjMkRsNY5PPKzJ96Ys\nPwBy/W772tAmBRflehj7b6Q4avFmz05/1NeTZXZJfQpL674Zy6lKKKgK5K35\nOpvh7rJXgdG1UZsIZtG938CzQB/A19uJjqEwWUjdiZYprIe5kL7HCBEG/guc\n6z4L\r\n=oU1q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/button":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/icon-button":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.72464476c.0_1631028956671_0.4955729746942219","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/snackbar","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ee0e2bdbf9d0dbd685801b7d3430d643803a564","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.37d4db866.0.tgz","fileCount":39,"integrity":"sha512-lAK26kYr1nR7asO5734jcRxXNvyUMkL52mPtve/GpgWfXWZWk4MC4KisNWB9dHg5Ak0SkOO6GGPrTrenPA/EOA==","signatures":[{"sig":"MEYCIQDjTrRoXG3VyXlrotaYzzlBr4oeLMidX+jq7fIHcNjV9gIhALmP2mNkadknFD04sQu59w5ZTVlJFYGkEtWEiEX8J/xD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhuhCRA9TVsSAnZWagAAB90P/Ropm+A4l3ASB04I14QJ\nKpzh+sSV4szEP0I3E9nYUT/tLk0oL7vEHtYp1gDICPAhyCRioaw+TTO3lTKz\n0YB6mYtjPOSu32OKoAodw9ktGHn37s+OQN06l7S8T6NVuRLROwqnYbjzA5UC\ng2UiCZoGcrAMhG5vX7ofShWrUz9YtXL9GHhBeDVnrDT1GwKVKzO62eI1BvPV\npiP6NQEMzADv+aRFQf5NX/3TxGotQfVgSvjXPhcAc6Fb1EoCbk/D8nuG0yrN\nTMovvB8na5JMVLnr1IEwj+IKLqq7MGD4yeSnZhg8yN2/hcZ4hHQZlqxs/IxS\ns5yEBUUmMuN5FauZnT1jPwxFe4hAno7OzdA/DOx9eHJOw2F7h2ZbXTSyqUSH\nC6WFHp95y7Nc1XWSe1sfJ6+iLwbAmNs60Nbty43LYDIEw8AxGhKfftuV3XSj\nQJWLkPEY+q2dpVtSp075+beeEgf/drIar6XyCarzjGzutBXbrJr0P8qMMdWi\nEmK3NgGVkGxkHVPHnh/1LL6PSiLwsKxQJq/05E+qbCnm2kciSpIZ9ToUUamc\nAyAxT6ttErNFAOAeApXLg5QCXwK+154nxy0gqlVqQW2Eu6rDqexVq0htXLEU\nS/h4gwiml+a7Es6KPK03LPc2lao1fESVKDReurYdLT8IRsYewlajpUKk7twe\n8W4B\r\n=2CPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/button":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/icon-button":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.37d4db866.0_1631198113235_0.1654385660024862","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/snackbar","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f3d331d791c718b35a252ee63cdeedf53fef6c3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.6df682e74.0.tgz","fileCount":39,"integrity":"sha512-aLwhXu7Q7H7U95Ua8hQal7ThvLc6FXVPBMPMjgjNtYPFokuIdlXZRYZNzwW+77SaTtVvcO38EOp1eea2u/6Naw==","signatures":[{"sig":"MEQCIAh1J6zOYJTsqQ7CAMyPSUa/aai0yIuIvNFJ6OWTBLzJAiAb78uuk18nnYcDzju+yjXXxxYqLg0aEC/0rGDv85nlvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiv3CRA9TVsSAnZWagAA+Q8P/ipaNKuHtDlUR0Mp8PBs\nWbSBc8u3+SnxtHP6dMEhf7jV0LemepjJ20gFIzKLoK62NhgYXF4fxxB1xfF4\n+j16lbcoP7Q33ZqLdy2mivdLPdKAXAhHnF5k3PYkEcJ0e/6YmXcXp7LS53+W\nhihRHB8D3A92ICgUe/a5bVu42G0ApVLrVWpmqwnIPqNPxXnk6YDOw5MQXifd\nJ5fCLY2sImHF1bMgua98rlbaLwiCLaEnCtG14t9IPsgqxFk3DblemsROUp3X\npiNZPyNpiGtVy7LBBlpNfcVMhg+5WTcEBI2P2qSgd4zZlutK4DsHAJld+k68\nHDLslFEIKK05Tqt88PyGLzck4A9WajcoCGCbBNRZIFCdbxcwVXHrcE/oJSNx\nY56emikb74cu9x2qTOq0bKpxry49Tc0M1ZIYteQhHHfgzXT617NCIZcgyi73\nAhXpUv/3Q9OQZmNJ/C16LJnEps1hYomE1S8kEJiKmuCUPlkhnpAPXio3Be3s\n6NieDlCdY5h+3/2k0Hk1Bj/juJOSYMOBIE4+AYQG31ocdx9LCXj71XnqkoIY\nJpwUuu6OxAoWi9UbwfRk7egyA+RP0+vyafl2Rx8Qdy0OxwJs2xxozlY6KQcX\nz6qp/Vl9lVrn+S8UcA8jjfWzZ4REnZjyMGGD7AzLfmT4/N2nlIe9ei95sldQ\njbdc\r\n=MqZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/button":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/icon-button":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.6df682e74.0_1631202295397_0.3001590441088595","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/snackbar","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ddb0a74b2c6ff1e4f246f8040a2b83bfe096be2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.b49359c35.0.tgz","fileCount":39,"integrity":"sha512-YNAC1A17Tkv3h2rBiz3iywssxa+j5EiqI5mVM/oLqC5VXhYnX4DScaYFp5o44ZK0nyYRT67SLw/Zk+cy0rfduw==","signatures":[{"sig":"MEUCIQDNmSD7tY5J0iiUupTAkHOx9FDBPCu6vHNRg1aQ52wQHQIgZ3bmHGS16h2cOQQ8iOioY6iDtJiWH3JdZOgkCsffUKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkZSCRA9TVsSAnZWagAAG+AP/0TY/rMr337vwbAVgeYF\nQi0NYeY3rOPOGQpxfZjNn7yh8tMTWh1O5tVw41ht7OWdFPLkhHE7akPBi6EW\n6oso1mMfTlFf+fDlhMsbF9anIhZPmYg2MGBdjsuBUaBPHQk2OheqoEtzHiJU\npXPCyPzbV/+RIEwq3oW/QaqFVvIaJGTEY0MjahSE1CaYUhx5sa3ckTpnTKBV\nRY+rBvOHSkwJVQbfVxykiHcUP7QOL8W7qj0fTuyvtmUjovw2Q1gWao0v7u2a\n6R3RTaSKDVdAykU8Bg5RmCYIbcQGix3j0c8X2Ld3GU6Fp4Hs939TkD9FjAmf\nfZ7uU3vAo3vT+fCByXdqbeZ7llZTQW0VUBYLgiSrEFLp6i+SeMz1Fy7YHEv1\nTiSDTjfjrUtqnaWueewNsTp5fPDrYWtLuG6/blaD/yTjmwRwgBEkR+cVgr/Z\nzpSXGORIrkRcKeUJn2sz8qWTI/ggamlGE85YUetVdc8W22hiLdeiX5QvCEX2\nq+HGtCsfoHAatmnormYzZISLwpDvKdEhjt68h8BKZvIYxK2tREw0roi46zhT\nht0p5uWs/tC1wNDuJp112zMZikxnmBiBo7vRls5lqqTb4+loNpdshHS68o1T\nTlg0UyLLnpDhqq6eOmBRRUu/aMK4OvIb8CaVe0W1zWTOSIqJhELr8yAVCGaT\n/Gss\r\n=gIVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/button":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/icon-button":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.b49359c35.0_1631209042723_0.3521078854844353","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/snackbar","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1356324a7eaccca5d3e1812e9c28db389d68556d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.470bd34e8.0.tgz","fileCount":39,"integrity":"sha512-0Fj1FS5sZY5Wa0UzRiY4SaYur5UJYjN/Z+r1DUahPTVLrXyMMykinhTyTPeObHncOz7zPMjgt9N5GWV5H6QO1Q==","signatures":[{"sig":"MEUCIQCJlMTC48K1kcn7EWTAKOd9LZ3TJ/DC6Z6tuIQKO3mQpgIgPho4BsVvtV2ksgsY17MbTm1HJOu9ZqTksCnPKqfeo8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkxYCRA9TVsSAnZWagAANcIQAJZtWmBW51T9ZK8Tf4PU\nEjKI5qe2k1dboJHN1fS5K3R25uEIaMwMeQngBwpCAjp6FUlm47LAWE4vtviD\nM8cXYaEqDD/5f0j0W9rAUyB3FXuc+Jc6iIO/s7Uo5VyXjYQwBAZXCBUDj6oc\nbENq1kZZ0kojF9vCJxnG7VvOx5Z6ucRtT5TaIHCWe/m0+IeT6rtEiHYELhHw\nER2EM4d0AaM18Y5HVfl8tvozd3nwkogH2uKLPHW/io7gOAEhP2fBBA7KBRne\nMtjYTRr1DffaM42ElH/Y8vUYiIzwzhPI07T6sFcHb/Cb5pgVmbT8m35JgGpI\nqw52EZxnPO2jbbkyZIKMTBPVSdjV9xgb5bMLCxQvkl7y21yFAh1IFB4vTHbq\nkapbMQPXLFYmqpvqwg0OJgDdhwnvnSYRx21iEqtEawW23qtmSw38PyrLryXe\nBk13+nqvE/Ds/ImK/3FDVGGPlFAUg9Wgglml84PiMgZRAf9FdVHhklLe3ZJ4\nuNGfFLljY7uV+FSRwY1nYRCnID0MKLrllD98hbgawxKfD76paIwkUi2uUhOl\nJov6VWatK8VweBPjip8++bVuGoDlAyFHRw0ebc9EMIQWGbvYe+MW4XIA2M+k\nzKnop05pQxrwl+kgg+g73nmMTlMPFpmLZL0g6gfaoadsQEWcfIhsuMka5Qdh\nZTQ9\r\n=aujO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/button":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/icon-button":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.470bd34e8.0_1631210584444_0.9331053739650321","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/snackbar","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7fe9bea4709cfd273083702a3d7cf441d54d23b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.d48a01771.0.tgz","fileCount":39,"integrity":"sha512-Oag20gsxNkP8ZMpaXcETIXT9yjc2V6jB2uWSzk8TQoqgCnXhP1z80Byg2kzDVZcRwbg2p5Zs/Ubu1yIBPnLM5g==","signatures":[{"sig":"MEYCIQCV3ldWc29vRlKexGPo41e2ZJUMbUXwTMdDGfhnkwBbNgIhAPzj+5UYXp01mDpW2ZuPeQLImph3aa7PLxwq/Ud07Tiy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk52CRA9TVsSAnZWagAAZpsQAJ6djZGzPLNzEvfw56Ti\nVA6ehv6qou7fgQ0xqex2korsIDqSjIwOTYqmNlw1Vb3kMU2El7CfXS2IPF5y\nth/XYPLcsIWQ+qiBKFnp4ht1qNd+h+2IcCFG47DJgIlz3UcBeUTxVvd5fT1R\nxHWLNwuAoIMW6aou0IjmGcO6H2/qeSfVYi/HMUYCUHhgZAxf4PXEMMZdiOY+\nDm8lrdR/vONT9pRlIbVq+Ku5rrxHobxDP4YTkTB1+r21ymxaxo4yRChkkFmw\nfjPErPQ+kEV3/tPKpGLH7MSI3v/0aXsYfd8/xoPb2GZ5qtTWKoNJrtyY4BGV\nZZL/bUVXfgFouegSlkL9NAgD8yzj/L8OI9zORV0vhJ/D6LmTNYcr4PEqNRgQ\nrbQk+Hcih923eSppfR8LZV42xwHmokwnBd9FLtrqwNLiJTZhXUPS4eeiTID7\nj0Wnfs0aTbdcjG9BsNtlduqawo4XOD//0Z62C7nzuMnob0X30wXU/GOiFNFB\nfqQXY+1q+kWCzhp2NEqB6mLUVHuepOa4EC/67EcTSgPsnp1fKwIa1rYuhZEK\n/8wg6DzCTzxOSmQNDG+L9Ba88pWu3REigMhv2jOOYzXP6yFx61wh7FY82uyT\nhB43jcyPo57Fpr88U7XOc2wS/aSmXNM75tdjgOMUZKFcJCH6+U5FhwzIsVXr\neeIx\r\n=IASn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/button":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/icon-button":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.d48a01771.0_1631211126234_0.18822194588618002","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/snackbar","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0ba84c20ae5467756d623258e97835768dacec3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.13db34b34.0.tgz","fileCount":39,"integrity":"sha512-9PbJtmTl/D3ekEaPqkmvMB9fB14N7xCNgmI8K9ML0zwn1ehpVg2/AsFrB/ry3JRkHlUQGjmDSmn+BlhcsCO+lg==","signatures":[{"sig":"MEQCIFwO8MF9np2HuyE2jbf0tCaPBgwOJ2Q9IM50D22wxJyDAiAPyYM+/SCNY8r2SYL0kNqXObWjYi7vbKEVwi1MEycnjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlH8CRA9TVsSAnZWagAArSEP/A++SCmjaMD/h6jhm5Wb\n89q+pynU8p+mHFam00xzIHOZweXGFiDMPbYAXdkqCSdqL8UXsCLQYgg5oKW4\nLaJKK/4kNcyFTbspzTbXRyP2s11KHtM1Bd7uYRYRrO0hj0boQIKeLGlcQz3h\n55KU04Ka/APJXmw2VKC/81ChiRkbOBUHZr48+zQqpz/6qwo5YHJ1DmbZcUB4\nX4T/OCgD02ix32bh6ukDWvM5jQLkV3VEZJxRiAKoQ8ukKQNVAzXcejxB6XKk\neldKBHrxBNIIZb+2IM1+tEyAzsWPViYIF/XZt+cOieE5xzkuW5FIP1m87hEK\n5sioxjycHzNf0X1aCMI1YfEHnn1dVdTxDDXU0jiruRQmJdfKqrWqkhh05D7U\nYoFO2RzUxiSa6Cx6y9BlGxwXAH2DsienDkl6BY2PQVd7MS3h+ApMWBUuSWo9\nMGZLQUnwefCQJ8F1CooTm5r30++Tj6WB35IRlhLrbaiZKhqnSPFEItxKcXy/\n/JeMJgCyI1t4gGxesONMI+VxYiBs47GsrdGEwTOasgWmPw1V91fbn+n626Rc\nQDTbB3nwtkgFAEkZAAr88txx6eLPRTx/eUwXOhLH+tXNbcyr++9Aw8AribKH\n1Jn/g4nBThBOuFRtUH+WJoTPUOL74ICBjbf6e/I0ecZD7thg+vrpTnxnmksd\nyKWs\r\n=NwY1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/button":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/icon-button":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.13db34b34.0_1631212028669_0.06927721264785958","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/snackbar","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ba652666bf51fd96b0f0557f33fc1566c667208","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.864798678.0.tgz","fileCount":39,"integrity":"sha512-7q8PgBMxcwIUkTL15cVyEEAwG3xh64oW72aHFVaEh//S1RH6XXiGq8NpboSky/QDJqhdKmsnGBVPI9bo48VBDA==","signatures":[{"sig":"MEQCIHpBYBa/Ypc3jyBJPWo8/VsKaQKSAc5IqwOifGV8RlpyAiB0RJfB9dmkl8ExlJuFLjhlY3tGA9AUEm1onrfzxiL3YQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSwCRA9TVsSAnZWagAAqu0P+QA5fqZ9kdu1V2hBJIMR\n/Ocw642dt46NqH3qZsxxHv+Iyxya4YXqZbHu+s4gSc9WVHmMgTpxGER7xfbL\nt44PswHwxZHTd0NdHvi7E4T7/vQBmDrhTwlRrrpnbyhlvcR+LhbsDPt7OCOM\npPgu4wsl6tg10uWZscX3j//tHGbZbFvfCxn4CQ3h314w7q1kDmGB9IsxQlMQ\nQiTth005dqnYOYj2cOLAQiqnSD0J3MyFx8bdtKXc7Sfh+7wbShzo4OVWZEBF\nZ758VoOYR9PvS8rJrTiGX9vzVh3tMpPYJG5pgnmZa8ALwX0OdCMNmrFr0Udy\ntqtSljP1UGzJRHRvFEh9hoqgonqT3o6YXimFGH+TxV8YG6+wVWDwX+pcMavl\nT4GdJPSmGzetgFW09/n+CESsBZlAsP2kHlgEt3wutQ/3mGgvcbp2U723Flr4\nvRqJDHmDXdrAYN9625PlupJcAr4J0+7wTQi/RvdRysWC57oSogs9Cu7yX6Hs\nav/v2zMTw43pStRKiQBpFLEmJeiuxHKi6SiRqp8whrNS2EYvqNbU51gcZUfw\nC3kArWC+w4+ARRWYhOgMy2/TtXEgIXjTD4lYGz4pHLtHdiC+VR9AocAJmxEz\nvvs1J9EJim4YqVMr2Eq2UDlFRT0ISgaPfMSY1iHKTkpmOcdqh1yvwYIOsfm2\neZF6\r\n=ZSOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/button":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/icon-button":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.864798678.0_1631212720436_0.3382585047624487","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/snackbar","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e9b7c2698d0c1c3fdb62a9a6a029aa40db4262f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.d04bda3fb.0.tgz","fileCount":39,"integrity":"sha512-S7b2BGMTPe7kyIeH29QM3czIZWjzcvmESokYVYBLHdas5cyAsjBxPJv6p+bAr4wq8s71CWT9O9aGeOptLTmrow==","signatures":[{"sig":"MEUCIQDe1Qu701GiTytfXVPAtK6IceF0OG7vQw9lW+dcpe8fEgIgHe4jhLkO7SSiuTx8SuHhj/SjlU5hoIKMEenkK8MeBvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3h4CRA9TVsSAnZWagAAmvMP/iPaTw7dETRJqAdpT0Ws\nID1hUPdD4lYek43mD6pVPDrHuHqyzne5kSlIMP2+XRXtBagbfXHcNhIJjt0d\no/uaZuXh59jKnzn7sh2/JQf21r+BujiOoQC1shxaQOt19XlOntff261l3F9F\nCT/wAa7MrrzdF+S4oUX9iiGrHex6gLvo2B5ufHCx3LR/mCj2k+UGbDGo0TMc\nK0qw3rGt2slHNLcb2rosjO2UU9kkQQlBiSCbeFAMds71P4elKuoL7kFCLVAT\nIRqi7zCOZFtct9X3KO3Jw8uUeTQvNh4P3m5Wn7hbMEUpvmlL7w/CopvB97oH\nO5KuhnpTUaWYv07v0kakKifhQRLF4D7nWka+gxyNse5k+kDyBluop6KHGhjj\nTmcro25DHzB2eEk5HeoLZUivOB3jhZxqt2vCZhleXjNTQZ1mxwD9RMpzXzDw\nqJgEq6O1VTrXjaIG5lrTNV02f6pGqxsF2WcWiqk9my3NWw2ZLOXbnaadiZ+M\nksAP+Z72GqPbi9t1FNQFjaRrcxxXEizA+8L0TsiebFNCVDZRYQLHa+UvetOc\nieLnpatLGFyo/o+VXp6PQ9IpJae5d5jdHK4eaYFDZijRe8sAbDEmmbkMXvOB\n6Hc41HEjzFMPD6Alczc2Cyk2aYdEESmaAhKgGbBPbqI/Df+zCLpLt4sGOmFu\ni+Ty\r\n=g6ze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/button":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/icon-button":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.d04bda3fb.0_1631287416400_0.08998731991013087","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/snackbar","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0384c610f0173b92180b7c002acc0d9abd7f125","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.5533f73d3.0.tgz","fileCount":39,"integrity":"sha512-1NgmR0baRmbWdjixP6ProjskJ/4Y3cOyg9rqbjHasVDTf6OpLd35PncJFQ47Q0Spg3J81QKHneECk1ysYhz+qA==","signatures":[{"sig":"MEUCIFgGXYGqFANpaYc5LNpKei10d0S/OFXisV6qXfZ2y0u3AiEA6Jmu6D6j0jnnkC8sgmDZjdqHO0bsNKVQ1peHnCtK4g0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9k2CRA9TVsSAnZWagAAvmgP/jrdlIsuIkCNijDZ10r0\nq0OvZlqAEGJq1XITbyC6gzsEcyo06lqh3EigzpVrwUI2/rHA4HmYNro7qoeP\nyDPeiNtIpgZykO3FLzg4f8+YGnHapHKN6TN3PUh3dIc6pOrN1/cZGFFFsuar\nTb9ezsviuIKAY3/nb7BHSv19ISTQMsVlQLa21IX7UJlQKopmjUsJ73V2Rq2l\nBODwj0uB/yDTLQL5lj6VxMl8QMThhfKos+5XA+F2GNPKjHH+hoX99KYIquOJ\nj/RWwTJXHpZuT/Ojt1TdHJ/ldu4uJloY8qtPeJLsCAzFgDYkFvktLAPCaqmA\nDPww/sF+hyRIsHqTX3wvygcIjq61PjRChmcMvqwG53mzd7k2ajFMFBM2LPbv\nhxztmmmEOGUqz8ynFK+wy2jinYyI7sJJpZhQButLa0jNPQ4utCOe/RS08B/F\nc2sNZFIHB3l7BKMoMShJ84lCm7SkA+yQlFpmw7Et35n1yuh7Khd4sdjb0k4x\nhBnn9urpMFock6qo0wyqU6IweTqDNGMySEa/KmTCg2rTXdI8/SVqnT7PEErV\nPlePKybTfIRnsBV4EgrD2VTbHCWYVPAhjdFxqU2fESHR+VSmx83ZdyvwpTzG\npuF2oXOT/rOdAOax/akvI6sAlOoB6Vc+RnQuM/k/Z7tGknJM6Z38lpDPwDIF\nxwzi\r\n=SE0J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/button":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/icon-button":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.5533f73d3.0_1631574326451_0.10771832441961138","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/snackbar","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b11ffd025f18ae3d51bb446f35e6386d9467f3b7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.08398f880.0.tgz","fileCount":39,"integrity":"sha512-DV5mFVkEGE821QjxSa937Cu726AtpokdPYez8ikBJGcmkIWA1F5YXrFrfvTB9ghzrcUGVb9vOub9lOvpqvaeYA==","signatures":[{"sig":"MEUCIGzjfnHiGGgA/9UGKO2mUqrSja4+jOojWGUpr5LCb1VxAiEA+5RtvWc9tf0AoiFWzjAp03J+qgzmIX0teWNySoFxoD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BeCRA9TVsSAnZWagAAjlAP/1ELcda9UoAsn3mwaqf3\nRdo+Jft15FUFyCvGEeMid+iyh/fOo7JMEkoYa0ANLLrVsa+JWJOMmpniNUSI\nhL5viuH/xq3CvLWftilFSoO31h7glOLVXCwLtpU8JWKYR0WBw8tcZBOnWz2G\nAYEr5zL/wrXdVNuipp9RWaOWAmut6Cgf1iGJjaEjf1QqMLnT5XqR9XAXrddX\ntROpHKPZ7drxeY8k8z8vN09usRNwG/9aEKTp167+us6ALaLXOdKaJlHnrDEk\nEuM3r4tZxdtMzegPq4xi/E/6Q2tStrpAE/Klzc/wHZkxKCuyZ12+orQEVqd2\nSKEkWBjTuK6MqMRIgr1IS5eh/5jCuk386A7EhSZgCvHP/hPtgffsu6E3wdFQ\nIQHofR35Lx/mDaKgbB8zM/g0U4sgrliMV52EBcZI4oZ8NhK89HGPx8BfoENa\nZ4Bt0UGtVOiHHiqgpD9CRvz83HvK21N/+kMNvcr0jr0qtFLiNWpwdt1XiGvD\nnP4j5DJtLofW/nIUnOIV9amZZrJrIqO9TTjagNW5h91UKxm8tJohYZo5l4Ey\nCoPooZAOk+yONbt6lddMUlohLguXnTSjxy0biOsmDYsxCqWp11BQct1YXZ9D\nzUpJZMQew/GMViWlwE+XHsMXX44pUGIPWd3oGIwIBQ9XYRuzSMPGk6mf8m8N\nTrNh\r\n=OXSv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/button":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/icon-button":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.08398f880.0_1631576158694_0.22601540162098233","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/snackbar","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbe8fceda2a8a227c8c22f61dd16da22cc9c11e8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.818f4ee93.0.tgz","fileCount":39,"integrity":"sha512-ZFh1V3NByQalSAxfiW58LC38xTreuPj4IWrOdrcFCaLUHOSbty2WXBastL9669DytPfNnGN59F5mkW5TTpo3Pg==","signatures":[{"sig":"MEUCIGifgOQbYnV+zFAC3gbtAsMcBZr4Gc9/ahQ77YQwhXlyAiEA7WXn29xXPhq5cqt/IlrOMuALr+fY35+1aGBzM+JdMjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjLACRA9TVsSAnZWagAAFv8P/Ridmhyt6XFrL5+2iAO+\nESAiJ/YzCCtGoSFNF/Ek/gsZwvcKHrLnTUOSx5kGrIc3Rbecz7DvovSaGEJV\n/yV47R+OyEXIysTiQljHDN6sKV6KJbXqItYYh5r+hNGaME1WtkgUFs9bm7Wl\nHxgS7t6H/qkr1ADcykcVJRCu1wd/ozOCQ1UObJoNp8WFs6gA76w94F+wjcTh\n6zT+ZCJHn9orpvSSrCRGSlOaKu4pXHtLEES3drIq8g0RyFppWIDYyZW1zMas\niNmqMBRjWs+vfpaVeCLVQg7F6cGCA/xc/oL2N1CknFEzeHGNqmktMY+MYFTk\nPvQ8nlzZJyb2sh2I8/y6NAwX2RTvuKEmPZaXFvyF2BToHICgQO0USXp+M4ip\nbYLHNSQmS9FFcSpTFLumuE/7VjiELXLcrVelmkkWCC2XDbH+6vnjg7faCC1p\n97WSC6A8mV+FEWRtWbfCRgLSHEzdM61kht79W6OlE+WVlXwf+Xx/3NTBVVCx\nKTOz7AxSyMe/mzYrot3eDBW0wb9aljd5AGdJny+N5oswm3tFyrtG4+DBQEyw\nZ8qS6+jqy0vBNiMrisIl14b70aCrZAIB2lY5G9ZIDMY67egQYWsxt1kTKd5d\nc0Z47B4VXSRXxecN1h++9LiH9mxZViST+cn6gg5z96a0YQlAuVB+klP7YAd0\n0fdu\r\n=pUt9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/button":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/icon-button":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.818f4ee93.0_1631728320754_0.4863071441096738","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/snackbar","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ae3c3109548530f3b3b8342d1e46d23c15f152","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.8355e14dc.0.tgz","fileCount":39,"integrity":"sha512-8Rx6mxmhaGnMpuhg87sYCdQ8vECwHyAdHqjuOjqA6NN1IU67PDuUriI/iJGrvIlsv0b1+6BzmMTemdGZAHc+qg==","signatures":[{"sig":"MEYCIQDb/yS7uoAQghiA7yVyUsxTe7WeDji/FzLkVAw83xRXwAIhAKsOBZWT+KbcQkmbTUcEgYc1Rs6J05HsMyutDFCeO+/c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkX8CRA9TVsSAnZWagAAqjsP/j9WIk722SZc0QgAM7aV\n2mcN0I4uqmFfMQhwNnfa05ltYF+6jPYa0Opq/jXIlQGrlw/xzT8MFTR54/SG\nP511t7g1PVP3sNxeciMeb5xHaSnkWG439Q5Uj/ag5JqzAN5tYGhTCve5bHkP\nDi94AHwLd3O5IJSMWkjMV0BIErgW40GsWqW5IAtL9yz0hGjVOS8ZAetwzhyj\nFif/MAiToJgQRpf0OymGixuoYdunWC0T13RLFgkIc9qA1lefmmKT4rQfEeOy\nYg0QapHsGndJbDBrsofJqxRCMMm9vG7wGoP4BaDhLG/bn2QzDtb1zsswi1Hd\n3OUIKHij/ZOTVPjCeMkg7NtXNtBBBp6iIvE9ExgsN+RB7ma0LFP3Pui2/ue7\nmu/D+ugeIeArRG9e4t2oPhkq7KiRhgn+a9VUk4Ev2qAMDLGEd1eaOELSP5HD\nFB+w5vmeEVBdKy9qbcRlOVMVye7LpXtuP88OpbqUqJkZc6M76CvthD1/QBMS\n5nbsbp5MDwbufnp47NyVJR5jRACCbtlMhzxVUuhBbTB8vhGNd9ERvbzyN/8p\nCj4qi67cv/PHyZmgdnwcBtrCXF63L43cR9FkDM0D0NOxjZHtJTv3xz3cq+TH\n14nZJwFMNNvUAeCGbXFfyVyGxMHopTDGWzbo5nqjDFuhXxF6hs9uor7a9UZJ\n5ku7\r\n=vd55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/button":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/icon-button":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.8355e14dc.0_1631733243707_0.25879264867750074","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/snackbar","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a1d7121396f35f746ac5cb20d2f7160a98d7d1b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":39,"integrity":"sha512-StlQW0hQOsbx4B1FktopXReMWO8AbK0ALFqj+I6hWCtRAsNlP674+go8qRdBq2y+/dKtwTxAzyA3O7f8OMciCg==","signatures":[{"sig":"MEUCIQCxX1Xay19ZHV2aal6rtSdODmKZO5dd0mbvTl6uVXMmqQIgQxVQOEjEMVE7UpaZce0QI+YQ3m4Bb7CcK0S5QoiFDAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQm0SCRA9TVsSAnZWagAArY8QAJAwXU8W11sHLI6dwuje\n1HCJmzQ3ZwsjttD5zT1mpDG2Cg8lohtZXUeXj/F64v0oQcntBf5Ft41q/4KP\nj2Bg1nZETImiBW78Ik/f8U13xXr0Sv1TRgQKjAiCSeLAK4AcpmfZvr3l7LI4\n+twijJdRTlq7xuDONhsfZqa3Ofhd4HB7mLdnZcyNSYQFKTu1erPmMMhHF7Sm\n2C5IdQhv5duW/nPGFxWnEshg38x/b2yhQYIrGtcN7m+bmysKyBlb4te/X6KA\nJpzHFlSUeWOih6eqIgcLfPOCGneoGXu47JiY0BQOVXWR5nl9t02CxwIfo075\n1PSjWDXyM7bJsMLdyjoYYtzaDqTVhqYcNqihORIcbgUBQghRP3YZvSSoHp4d\nE4+53pB6fgHpeH4vrK46e+FuDCt+sMHxlHzVOjVHQl+l2NMWRUlFGEryWMus\nxJ+HjIrNUUcWwadMrRIrgrxX3v8sGWqA9c5f9Dmi5wRYneSpE5NtGRk2wkE9\n3vyjXHnkGqY9ihq45Cd5AOjEhaV43Kscso/k4mxpy8W/och7IfE5kWgBGGu/\nela/QIPzzfnrWX0Rh1DMIic5W6wk2mk7SimX1AxkHqtSW5rXb3FaGmpoE7bi\nn6WVhEJLhb/z7YCVYpoQ9JIMBtyDIPelfsOyR+PpKUXp9S0oC99mKADuVmLh\nyis5\r\n=mGq5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/button":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/icon-button":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.d4e16a6c4.0_1631743250363_0.9287954943950287","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/snackbar","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d21c6fb1ebb00be4dd7e511677ae198ec2e3bd44","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.65125b3a6.0.tgz","fileCount":39,"integrity":"sha512-b8Rdu+8l9Ne64Df7HazrIiDXzlWOESKMSXVuvk2lB2agLjjW2LmwWPHTqYQPtvwQMLKZfattLNJFDvMF0DXMHQ==","signatures":[{"sig":"MEUCIQCldM7rDSbt4VTuFvanJW0/bblGrgE4PJ5n2okQg6Z54wIgQWXw0h8pi/zFk11XoEkzGkx5ksu/FIDeQCYWTsMZMkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7TMCRA9TVsSAnZWagAAORMP/3p9UxwTVhs9yQo8WjZ3\nRn/TG907NsZLRzowa/+x+HBMkSQrB9FNcmldfOALG2iAWPPrK0wFhWuH7TOs\neO95tKaFC2fViw7pmhqz6x+rMJ19hFy0ILjtI8W4qLt9DV1w1jI1oRKr5ytv\nGOvhWUIc29Yrza8lgdPdGeEV7jvQli9A5fBhPPFa/I7nHnndCXZHXtWqQN2w\nPz2liS1F/bsYiBP4NZqEQrxHP6fFYjF/+KAzAd4NUbrczTQzjx64VGMXRAZR\nnuKVFffbPbexLiWAs4z2ZfQAU5ayKCF6Q3bhjEHNzZo8XaGbN6SSzW+631CA\nbCjP9Jec9TVmA6SPFK1bPJ03bI4ZHa1VHTmJlpZ79khX1CvkcfqNP8ZI6YDX\n4foVDiq/4Hc7mmw84K+R5C8tUBnriiXpmRWNPi+L2KnlM5WOlljX8HDlv2m6\nYyIYGWOA2sXkCaolyrfvrbztQhErT0r779E74cX2LRTNBSVy66vbDorux5Xs\nyrYpnsnT3IukmV/4xcqmdZrPtLfz/Jt8pxvWHwCWOswQuVGqwXbUtvVaWOBe\no9/Lvp44TvHa5eM4BIJdfE6vtVuuDXQb4aYOcukUXzrgRdZV3lnZY1Nj06ST\nrlEogu6ZqxkBTMSUkVAXejnQK9oLl2q4Q9eExJIAhD6lGTlzC/MSTVAKwFwD\nwj0r\r\n=+IrD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/button":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/icon-button":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.65125b3a6.0_1631827148644_0.8993825885686724","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/snackbar","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e8759edae98950bb62a3dea1c9fdbe50180bd74","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.80a583365.0.tgz","fileCount":39,"integrity":"sha512-NqSjzykgESF5TGjfzb+pk42cSVWRKA8yvAyA6ZgWiKAPrrX5v+odh3dse3Av3k9ihHOKwYDrSSoPukLeO5bZUA==","signatures":[{"sig":"MEQCIEV+vxdWOo3IgciKD4+4k76Zs7jANr+5LNzN9a4l2voCAiAbMf2YbYKSkxPH8ZSASmO9cZfnfPNTbYMJYaPu3quUgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472898},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/button":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/icon-button":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.80a583365.0_1631911022793_0.6899409546112867","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/snackbar","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dcf8d0678823fd239b010bf21553ec85a0b4046","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.83900936a.0.tgz","fileCount":39,"integrity":"sha512-+D8tl7pLFim26VVFlilLYc2fnzZaFkHexhlS3Go9fY3jIsHoJ/BzVmy+yKg0R7wGdAOfAjhICrmEMmHyyNEhqQ==","signatures":[{"sig":"MEQCIDblDYyClD3iLg73v5d5v2tPinQv6JE0FSt6hgmJsWGyAiBBokBJTj8o7d8TzPfVcbilV4fl5yVJRaTdBzX1JqkP+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472898},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/button":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/icon-button":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.83900936a.0_1631921129471_0.540839375419464","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/snackbar","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a37859d59836abb47a30229e266865a4bcacc42","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.860ad06a1.0.tgz","fileCount":39,"integrity":"sha512-MBVWrq+RzV/Db8glZUCIKBXW2sqYkEBOphFTIJz0Qs3OAdmkPaniU9OhMVkqJ0EOTdJZQIBucSJVvfOkb7eXiQ==","signatures":[{"sig":"MEUCIQD6bbU2/toAqDbDNl1DSGfGyoRFRfIa1yN8/pZtXwqNWgIgYqym6YGjNc0Egbc0Ag/5RU8XkUyeWU3OZK+fETIo0jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472898},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/button":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/icon-button":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.860ad06a1.0_1631921826745_0.07849281219004633","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/snackbar","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9a50aaa5a9cfcc9bbd7de6948105bdb818d41f2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.3b8d4429e.0.tgz","fileCount":39,"integrity":"sha512-a+9Srrv4YNChxDglh7n/ewsyG7HXeMGcuRbwRjUuUo/nYSCf9ldpS3N3nlkL2syOrq2cszfQmuFyVhZowhtrNw==","signatures":[{"sig":"MEYCIQC0bOjwvfc4hC80BNypA7wgoCH6d3OVVIOOYgzgqRcjtgIhAPqTJvpYP7uj8XwaxuGzsE2zq7O0jeOyIowGQlykW/Tx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473048},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/button":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/icon-button":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.3b8d4429e.0_1632160124334_0.6479033923881865","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/snackbar","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"926894cb89f6785ffd42f66951ebd76bb0952237","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.2da3606b9.0.tgz","fileCount":39,"integrity":"sha512-ahE1rcr9/uCfwu6YkAjYDtdNiwTWkXOgpI64Si2AqXgXanQc4hrASekM/CecYXiFyeaFteH53jFPUMXRZCwb+A==","signatures":[{"sig":"MEUCIQDyAjLbMoXSmu9BTSFhi5mov+uYpX2tpb4EC2VfUtgP7gIgLVHNneorspFYjaF2v3pRl2zCLWskTkBWkBBxqpTjpZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473138},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/button":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/icon-button":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.2da3606b9.0_1632166730389_0.3055857449807824","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/snackbar","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cbcfac310ea06e506a4bec9df269ab3fbe47c28","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.e8c598d1e.0.tgz","fileCount":39,"integrity":"sha512-kLhzjjE+OQ/lozgcMETMhvm61XB3gM6Eha1Ajv+76L7cLp+pKX9e+pbjMaIn82vh3tBFE4ONjD/aBsVnoZBMjw==","signatures":[{"sig":"MEYCIQDfNLC5OZFdzPgBWhmFm7HNuZTVibKcqn9tKyvx9guQ+QIhALjvTA7TpNYRJ3M6DyhuCWdcgkNguk+0HHNmyGAq/ihG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484232},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/button":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/icon-button":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.e8c598d1e.0_1632172395447_0.2185115802773674","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/snackbar","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b4a59f00820da21a7a3f329c6dfc66758d63a39","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.1340ee9f7.0.tgz","fileCount":39,"integrity":"sha512-PRixUl7gJnp7qMS+yFsTB2wlI6hi0OzfZBJGOyVd2BRe12iUm1Fvr+iV7BHijG6syulFI6EHXedSWg4eLoFg9g==","signatures":[{"sig":"MEQCIGZ4cvf3ii7EcxYU/CrSf/rIeaVPEA/GYdDv52/U5ikTAiBtF6yfXoWQBEfCcR68QV9qbvogFbdDNguBvlxWpREAMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484264},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/button":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/icon-button":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.1340ee9f7.0_1632333548683_0.5680699732485355","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/snackbar","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32b1e7719903f770ad8f2cbfcd5a21eda3d8aa7c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.65084baff.0.tgz","fileCount":39,"integrity":"sha512-1RDaHjN1icPQCeOB5IG1npdPQH0k6Omrg9ZBD5B8lh8mdMpHYkFrscwi4CdgTmv9RUfTw87XZq2f7VNPTPa5NA==","signatures":[{"sig":"MEYCIQCgAb+RJ1F3Pj9zy6kSidUycrv3WcUpxVVZ/Cy177flDwIhAKCIGefylgiQ2a28d5t7rALgDlU8Cc19iKPaT7W/1L1I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484264},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/button":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/icon-button":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.65084baff.0_1632432398225_0.8476162339438038","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/snackbar","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe7efca787a74769649f803e785aec61ed24e17","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":39,"integrity":"sha512-MyZ2aFgDbxxPKC8KZWPK2xpfEUkQ/z6igqTnLceJeQQa5RJzSbAYLCwXQhnWUS+GDcwOfVKkJaX3/KsmawMujg==","signatures":[{"sig":"MEYCIQC1EUiIkhPEb74SOPGASXxd1X/bo2Z7wtBw7GH2G2zoAwIhAN0KyqHwQsu1VpnS9F9tlw2yPlJ+ajydTykRxjZFYq0c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484264},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/button":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/icon-button":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0-canary.c79aa0cdd.0_1632490994005_0.1857417745817005","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/snackbar","version":"13.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63798b832c6931ecb99350c9ef99ac23a7e47f18","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-13.0.0.tgz","fileCount":38,"integrity":"sha512-z59aYCeMWWEbsUU04QDZN4CxzCCOp3OIc5tzrdqnY3qRq4wwApxncf7RKKKSU2K6WTEWfdHHOc7aNX8kqlDmUg==","signatures":[{"sig":"MEUCIQDzViIzbii2QxldCZOVyXiUnmnZQnOmFKDCQ/oq2nrDPAIgdacKpQLFIvu/YzZGVrCPjs0EnDl53O7/2heYK99WQc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483344},"main":"dist/mdc.snackbar.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/button":"^13.0.0","@material/ripple":"^13.0.0","@material/animation":"^13.0.0","@material/elevation":"^13.0.0","@material/typography":"^13.0.0","@material/icon-button":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_13.0.0_1632512823351_0.26753916001435196","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/snackbar","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c2cbf841cb276bdeca888cde1aa41e540d7d1a9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.198431fcd.0.tgz","fileCount":39,"integrity":"sha512-Dje1kSvlN1p72BIA+kQcGH6m5URDSUoheJt0Qx4Mh2lCKfi2uAVOyzzWl5pzGJCkCMd6C6scDLbpvvUUfq2YzQ==","signatures":[{"sig":"MEUCIQDiP7Hdy/PlnM8NQ2OpNJf7B3DUNGRjYyRVTEb9xFtQJwIgZJlXG0XYnjnZmGdTA4XSCSY6EwEI2nNLI7VznjMAa6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484264},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/button":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/icon-button":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.198431fcd.0_1632512866582_0.3338296085726411","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/snackbar","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e8d2e33ec116835ee6b846f64f0332d0aabab82","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":39,"integrity":"sha512-u7ASIYyqkGT/51wTeA7imI/OhiC459G5L4FNX36iVBAi9hJ3Zm+uN1r+7uw2dLKOEU8iRLLm+EM2AwgWIblcKA==","signatures":[{"sig":"MEUCIQCWv7/7N7aSywre6rElam1isYAuYb0DabXNjaWeVb5uwwIgPA9ObI+GabVbGccWTlcZ/IoKGpecmylkgQx7Ui4Nt8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484437},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/button":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/icon-button":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.9a02b6ef8.0_1632575530899_0.7848394442185904","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/snackbar","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c8169d7865e279fb406b3df801cc5b7631e5cfb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.758ce31d9.0.tgz","fileCount":39,"integrity":"sha512-DbciLUZZouLeRCZMzIgOoW4jTgUUDjYc9LX0ixGNpcP9JRb6Y+zTshs1EK1R+vVMERJdMZ6qQmm74pcb5VurKA==","signatures":[{"sig":"MEUCIB/uoIP/AOrWEwhp3099/9BNZnwCDSonIRfGouMm58ObAiEAgg8gOExJqeff0ACHu1Ps4O5NbJHT+OR7KyTDF6llxA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484437},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/button":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/icon-button":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.758ce31d9.0_1632763828654_0.004997221147800435","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/snackbar","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b3703fcceaeb4bd29db0de6065e81df9c012c7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.86b50ef74.0.tgz","fileCount":39,"integrity":"sha512-eaYCofxtZiIdQWHu1KsNdToBEZzCrsw8IxjeAUi3OYqxDxUdEKcORAxMZ08+rOoRyDQPJnXTNcT92PrFk+Uc5g==","signatures":[{"sig":"MEUCIQCk3WQO1YVo9kBjs7F+X/g0pwpIBkZb5hvzhi4vw4aJtgIgP5KClPNWQnE7vtNLOlIXE0DJjMCDC0CpW7ZXDMtMQtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484437},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/button":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/icon-button":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.86b50ef74.0_1632851059358_0.8939444107865868","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/snackbar","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab14a7f7bcdda98c2974287bc04519f032512d04","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.b2fe3528b.0.tgz","fileCount":39,"integrity":"sha512-pojaW/RASqdOlYnGbiEk8RcoSJ+F72Fotj1lRa03V1ZcAeXwHm6TFVrYcKwS+LgmrNiDhtfZHeDMWws2cFtqWg==","signatures":[{"sig":"MEUCIQDQU7nqLP7jXS5Ff2knNvMU/KdjfGfUHKDrWLONCC79CwIgInQ+ftxZW3yMzblrf27mhfcVn4U4dnCtfBuxF/rWvS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484437},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/button":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/icon-button":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.b2fe3528b.0_1632956284843_0.8684367563551361","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/snackbar","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be0b37ecfe34fbf817e38b1f766937b53a5c435","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.586e740dd.0.tgz","fileCount":39,"integrity":"sha512-g8ur2Ogs1TWE1to/a3qA06zrjxqhsWiYjgPBowdbnYHhyGoNASp7UAjmUUGTQH8pxPfnrRdPcPEcG08MNZByLg==","signatures":[{"sig":"MEYCIQD25GrgYCVFTkCOqqOh0DVEleXhv8BW/XfMK0r7w7+eGQIhAM92MRJ01WWKNZ9dFhHOo9Bpmw9s2TEpplr+ELpnUZ9q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484437},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/button":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/icon-button":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.586e740dd.0_1633019550890_0.6020793874496182","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/snackbar","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90fe8fbf8028449c8df6c190e25ede79c3cee74b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.2ac92d766.0.tgz","fileCount":39,"integrity":"sha512-mnljsMqpcpeOcKSjs9SrPAB7Q6inDz49Q2JSyewoguQhxeSqK29WKdlMzxE89/GdcpXu+L1eKnWpINTp31F7HQ==","signatures":[{"sig":"MEQCIEnCX2/QuRZM5syBgwyxrvK8XaByjmPwWpCnInEby58vAiBhl9PUEiSjsI21t0lBgNc4OUAYq4TnTZgp7LX8VyU6ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484217},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/button":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/icon-button":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.2ac92d766.0_1633462182194_0.15035193614615494","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/snackbar","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6536c6d4375e8df5d8f7f9e5a9b259973496a09","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.353ca7e9f.0.tgz","fileCount":39,"integrity":"sha512-qKlDkgK6KsuqxVLdUoK0bC1vDry0UdVLQTRgyHOnqjHZisyf6w2HHwdFkNIdx+XgdNT18tAcuBAgiI0sPYwO/g==","signatures":[{"sig":"MEUCIQCrwLrY6IFwnKEk7yz2z+ysbINCOjox1gB2X8tO4mURaAIgUItT3MSzZAcl0FyelxZa7VICbvIToYNULM34bdDTepY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484217},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/button":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/icon-button":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.353ca7e9f.0_1633718886932_0.13829963090754083","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/snackbar","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a52a197e0168b17b437f0026357df082b5138909","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.c78ff0429.0.tgz","fileCount":39,"integrity":"sha512-fjVoKLcvwjr0QlHGXJ/Mv/vnP8xlSXcfm51SnWI+zYj8CIN3w7fmas68UAREBQJj1VI4w/4Bbm/OISPEWt4LqA==","signatures":[{"sig":"MEQCIBQKW8BZzKBCQUc9IUoW1SIobNt+9HVfvPF08u+NfQyDAiB11G+Zm/tt8XmbwjlklQSHl3iSjIM9K06FkfOOwFhlig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/button":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/icon-button":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.c78ff0429.0_1633973006511_0.32150995986323916","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/snackbar","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c33ce965fe6c0ce92b4451b7edaa3212b3866c88","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.261f2db59.0.tgz","fileCount":39,"integrity":"sha512-RLxO0dWBmhU+3y/PCYN0oiQUvzw8cdeFLmiUN9BPn2unwmTPp5nUdaTde7TQ93vRNidyPtDnkEFnflunDCk2Ew==","signatures":[{"sig":"MEUCIAGTgo33/jlMQ6Z5LwqtsBAkM6VmGASr+g05CkZzW4FMAiEAkNClA8QN3Uh1SC3clM19nn7gatZJVUj+zCVIOmow/m8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/button":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/icon-button":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.261f2db59.0_1634749249589_0.5155220414468944","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/snackbar","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5038bdda0f302e2292dae97d3b4ea1f3fb16cbd8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.9803d2dc1.0.tgz","fileCount":39,"integrity":"sha512-OWKhkHKUbHvjYPzEpepHCbWKEUp0WM8tEqa4AKfIozjunemo63vuoFllLOKhyNkmaHM9EzcplolykU1lSaVpxQ==","signatures":[{"sig":"MEUCIBRKxZOY05TOwfIxBQYL0CWlVh3CoXDK+A8fmCoh6ExuAiEA2QJ20a0bIM1nzAOvXIIyY+PjhYJtFfAQdZxqm8X0w14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/button":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/icon-button":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.9803d2dc1.0_1634757784720_0.2396763238734141","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/snackbar","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a750bfc2b2f29d50ef7895a26668e896de345a37","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.348665978.0.tgz","fileCount":39,"integrity":"sha512-l1CMM6kPJMVvw3eIAs36/O5PwE2w23sHbAB5L7c3Yq7OZUNExyixEP8rfKTsrmLEywpFb8L/1kxrdhDx+IEOlw==","signatures":[{"sig":"MEQCICj6QfzV3HrtLX+GoFXxXiU/kJqFdV5hbcU5+Dz4IQf8AiBT8KLoDBmcEoHy3DLc+JpP5hVbhtd6pAhdG7x+UVJq6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/button":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/icon-button":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.348665978.0_1634827921318_0.40518415655430995","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/snackbar","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68ec08ec1130178b7e9433c4f75fbf57589fd80c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.b2b979a8a.0.tgz","fileCount":39,"integrity":"sha512-54uVl3PSOKhj6HKn9gH0HonVUDry2yXPJt8CsZSdsQ1Q3F6nvvbL+nuEx5MTfmCU9OuwNB1q4IMHyMZc3u/50w==","signatures":[{"sig":"MEYCIQCLWIwmetwV11SbNp86FCR6ezWpLR4gcLZcTqYBjBxRiwIhAM7gIoRkpJzpKkPqfvmRkKAZukO0VHGfVmsFriHds7xw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/button":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/icon-button":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.b2b979a8a.0_1635434028185_0.28788726592237257","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/snackbar","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89332a89f575d3e16d22d19c3cd45f12c25c3b13","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":39,"integrity":"sha512-XLVPY0DNQ11/PukrLJ7cxu6NhsekJPJHarg2Le8VnPqAy2lUeIezldgpojTMvPfRv0bRJc7sB/i8F9wkDnj42Q==","signatures":[{"sig":"MEQCIDJhowhkRAMfIqVTJlQJ9BXyPXeek5h364bC2gXGBDR+AiACemA1WnUjHuk/yvzJI/DClQn1si0Cy4o0zvVKrYgOQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/button":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/icon-button":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.1af7c1c4a.0_1635443642165_0.5949468606706101","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/snackbar","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c13df350474315a7fd2440044e031edb669a0f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.4afd353cd.0.tgz","fileCount":39,"integrity":"sha512-xgc1OhR2ZugkNv/1hf/7DRbGF8bHlByjzhUUI9JdGRkEKIJRlJ18V0qEGBYJRArv5OccyaTbZqyffxA4+DigEA==","signatures":[{"sig":"MEUCIBjGMX92hnP8P2q1qqwuP+pFNzkqON6FAOLMnsddKXr6AiEA8BMU6psF4rIs0WLDE97TbDU9+srSZZHmUrjZHHOe4V8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/button":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/icon-button":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.4afd353cd.0_1635519769865_0.2763637082068451","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/snackbar","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c24e2c7faf72a7b6763f18d4e85a8b49631276af","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.a986df922.0.tgz","fileCount":39,"integrity":"sha512-K950fj19mI5QbSjCwUxLcMyFBhya8XITRbozhHdDJn4WHpMiVXyIf1puEbW/D0Vk5kqziPZHIAcUMMZH07NbuQ==","signatures":[{"sig":"MEYCIQD7KP7hxrmbDZGwX1b3YjJKPBpeCufJTJ6Mkb/HFlNEPgIhAPMVGz+A5k1uhHHudtVTmlRGRB2c72+bs2JvMR5v0NhW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/button":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/icon-button":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.a986df922.0_1635543373213_0.516662010648258","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/snackbar","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0363392e4a928083c88bb15f1fb56160c753d7d2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.c3cdff07b.0.tgz","fileCount":39,"integrity":"sha512-ycnoenONpwc9OP1EXxuRLmUax+D76QMBic5R9PbLogPivYn1ZaEiTO0DoupeX5CfGgYhITLWfrAlVn0WJTm65A==","signatures":[{"sig":"MEQCIDenr7I2xMCfjYa/1PG4kXx1+s8VscppyMLbMDa/Yi3KAiB6thEkTglFLwoTF/+EdA7E09X+ICR4D1s9eOc5p6AXZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/button":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/icon-button":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.c3cdff07b.0_1636484831100_0.02294602920507538","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/snackbar","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"354969cdc9d18817dbf99c4280733fe4ac1f456f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.468392606.0.tgz","fileCount":39,"integrity":"sha512-69/NtPs64Y5ieb0XwEy3HYRXqwJ98JcIaGFd8JM7HGLVyhZMW1B1zf070I3OeYGiby939uWuIRTWW6bDwDn0AA==","signatures":[{"sig":"MEUCIEnPumJ+Mh5rH0dRUbjZFW+SmOY41v9PyKRs9Bd89UU3AiEA3I6wy8t1L5YOfIQ2Agz/mxLulIvJnYI4qyHv2AaobRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/button":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/icon-button":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.468392606.0_1636659684492_0.574488046577651","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/snackbar","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e56cf1a4d8c8ff80b77eef2106a7c6b343659670","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.828f9803b.0.tgz","fileCount":39,"integrity":"sha512-4EG6WGpfb8955VuclnrPk7RHC3lXMC6W1RK5urqOMwolPGsrPXDzK7vIGApOhiEaEDsE5wL/8lP5hE5uH5Yoew==","signatures":[{"sig":"MEUCIQCeOeGfgiK7CaxU3s7/aiH0cWq/GS4onULN+5/OwR6j9gIgMuuNyqcbtG8LLTVgUsE5wuvZffRSrZKkCMUArPXYsGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/button":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/icon-button":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.828f9803b.0_1636660318189_0.7700057274457839","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/snackbar","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d83732d91eab813a0b8ccf43583897dc4c60975","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.8795cba87.0.tgz","fileCount":39,"integrity":"sha512-2uoTJv5S2Fae1MQkgseSVLgOtsKNWQ5fFGVX6cHcI0yirQucKj5L7A8L9czWjr0CbixdiwzSX+RK57Z7p6eevw==","signatures":[{"sig":"MEUCICcLsFdXRZXHnJCNtgHajB0UwfLygsMdEEMxbwN+Aa3/AiEAt9aPqkLPAN/I6mlRjJz35BLAFyjKOqKa9lBwdnIjeuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/button":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/icon-button":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.8795cba87.0_1636660678061_0.6909338469667097","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/snackbar","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4415f8dfab1c2f6edc9726372a4e02a696db11b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.cd7f8cace.0.tgz","fileCount":39,"integrity":"sha512-hZ91xAAjvQq0sZpzmgEO+amQUl3vwAElM2VhG+bYhdUDLvInFyRyI13mi+Iqw8AVoHlRno9x4GVPI4YqvJejWg==","signatures":[{"sig":"MEYCIQD1E0f/SaM/Lr9fHq54Fl8VTXFlE4KpmYgyvsWyAzLGlQIhANdAGt0J2Jhx2/r6xbLeO9IymXru4OcqGKEOymgcQtWE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/button":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/icon-button":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.cd7f8cace.0_1636660781702_0.8480615357789072","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/snackbar","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdbc17efec02dac382d94376e12f14077a2612db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.207230eb8.0.tgz","fileCount":39,"integrity":"sha512-+LFurQ8GOtKDjarmpeqHXiQo2Zo+jdsEoAa8ug0doBXlAKcgyQUq3nL/f+kp6O/WTxeKcMKA6KKwkwMcCyrbVA==","signatures":[{"sig":"MEUCIQCk4nBJjC78DrN28dpY8jvep2nLiGrTr78QStryieINPgIgY+dD/FFi8/5HbEQ/s+erY/eIjdFC8xYvghEMsGVe/cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/button":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/icon-button":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.207230eb8.0_1636669545000_0.7133126775652863","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/snackbar","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8c529f333bec6b32006b76107aa5adf8ab1d15","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.991fb99f7.0.tgz","fileCount":39,"integrity":"sha512-dq0INAMJPSDDCDOYuhbCczz3lkAB8iu2x9G43FdO0LFs3jIlCJe646BuTD4CEVy2v64rCYELT/C7UaHjc51PzA==","signatures":[{"sig":"MEYCIQC2Vq0HSr8PZBy+Y4PaMa/TNgffieDXegRjniDF2BAbHQIhAJCy1tdi7o/TRuBJXV9bGtUBRWByzGuNIF6QVFDv33fR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/button":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/icon-button":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.991fb99f7.0_1636670257575_0.8993990477880407","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/snackbar","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bd64e31d8ba9a69b2aa0a031d4ed9815e928f79","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.15db4f164.0.tgz","fileCount":39,"integrity":"sha512-lgDgQY/qckaICM7eQwWt+PySMWX0FDMtllywV03C46HETpQ15mZniFtrrWB1zBaN6ZTAsui4TNu0sZRl7xu8+w==","signatures":[{"sig":"MEYCIQDoXzK20awdi5hep9FGPpAu+TR/SXkIOLyKfTTXNbM/jQIhAOVI47EWmLphaXhe6jS7cJphYBcUXb5sGMcRZ2D/jZfn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/button":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/icon-button":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.15db4f164.0_1636738262987_0.4595140049582138","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/snackbar","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"445c77b7a3757626171bb9ac96b265dc5bd21f60","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":39,"integrity":"sha512-Tw2Bhnhm60JK8gTcKVM3Waf238kViDsXtRuSUNgKy4iCXiTL+gD7Xx2fq6oW2qESwjf6clz2rRUHvwhl3Wsxsg==","signatures":[{"sig":"MEQCIEPJq+1JBD7O21muov1nSD4zYOwVDRvlLj7ww2pmeoAHAiAoho4KDKglwpyqwAiErGQUw0wAX7hFOEZii9XvmQmAiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/button":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/icon-button":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.8fcad5a3c.0_1636744500179_0.1700314736064581","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/snackbar","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f0850047db695a831e808880c4bd0484c8c435f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.f81fb1d23.0.tgz","fileCount":39,"integrity":"sha512-CnFLvKOGG7tTPKx8IxGMqhbSXWFSpf3Zv+pdB8guaevYCEXfP9bMJCoEg8S0qyjW/4tIIW6r/wE26ziiQ+Sn5A==","signatures":[{"sig":"MEYCIQDoDRagffkie6/lG7DUZzv6gQi09kP5AYqlFAq+N2AZPwIhAIbc4pj9SepazpChz0kkRbh6vX+tO0Xk4BWE5aUnPvCd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/button":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/icon-button":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.f81fb1d23.0_1636756891020_0.8619336165192752","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/snackbar","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4400e3644aaed628d2996dc6d236c2261c1b9563","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.783f6fd5a.0.tgz","fileCount":39,"integrity":"sha512-8ru9IC07qI4s1P6Sh+xmUOp7RDX/VPGKnIjXnhmxhFWtV5Ai5Bx5QhuE7OEV9RtSF6vQRlavHK8VPR13Eif5MA==","signatures":[{"sig":"MEUCIBkLv+UYTMq8iS1PRqVlyRMyVICuY+7C0I/QXHmQljaQAiEAjbUfJgT9HvQ7TVKevc/5JdV0WMR9eLMgcZRONFG3nB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0blCRA9TVsSAnZWagAACJYP/1FkF7wG+jhhLo8n6fS8\nt5HPorhpWGYNyaj3AozEjBvSqpJ72zVZMl7zLgq1BD9/mJ4FGF7IZDxLeIpz\ngNxGDwH7AXcS+tecRjM3ZnW4rImrHDU5IflmPyzw2sdn6OHWKtbsCOlUCuWH\n4ehouiWQ1KWkJY3u/Zfw5rGnE6tKLYRbr8VRb/6h2jj9vOFjLbQOtL/cg/TJ\nQKMz7p9kjf6VzCQlmf4aQ8wZNVMKUvqxfZ4ytw4X9qOXKDq6TyssFeGGdTWh\njsAruimmJ0lGCCaF2ODSqZ8GpmFBLj8DRXpIJ2IAkmQJpzOec9Ez+Hhmq1o9\nyfLu/MqvOQC30gpJkq+pUCCUC0NaToCwSf2Pk9ofQtcAt8XgK9VuzfoYEjAy\n2Eecq3NQJUHQnrQMVQfTzMU66Y/x+Y0ImJoic0e1Ud7ihxaL5xPt3UY0J25k\nGK0CX7XmpmBI4MHT2vY7iQHGmD04Ea73Ap5pyposyQ9rEJZ2g/3CrfzjVpXJ\n2gspxOCmACTSdpJJJqU4xCiThglBhGSiRNYkGYpHIGlJNpJtnuL/rrieZl1w\n+mxN2tWXpO6DeeYZ0cEmMxzPdGOQiEsjvz84rcTSGcaAQ/kcfSZtz3sCHUZC\nmN0r0sAJeJdSv61JOGFsTome+QotWSbw3Bwh789G1Oc1pg5Ou5aD3ieHNCT0\nWuJ7\r\n=vjRA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/button":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/icon-button":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.783f6fd5a.0_1637041893194_0.8259959038632378","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/snackbar","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00db8e66c0f429fde509a86435f00b1a252bb308","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.d57ec74c7.0.tgz","fileCount":39,"integrity":"sha512-mFO8++8g39a1MWWWLgb6uK62ZmIIzBX5LRe6C7diyhQer+back1MEm4ZODw6/6roSvviaYVBQsmFTisCKNIefw==","signatures":[{"sig":"MEYCIQC6PJsEBh9oAUbzn+XWIYAfL4jcBQATuN6GCvJJdGBV9wIhAM7aqxZ03fXbWex5E6bHZqz3jCG942pUy0MBg/T+ORPe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nlCRA9TVsSAnZWagAAZJ0P/i2Fw5f4ATvuHYIj+qBT\nFQX3QnfFy25g14rA/fMmK77agGDkaFsxK5G69GiPDg2Tj81rMJUbS7CF4Om7\n/2LIxQpUR5nC/XBtPm57MQzm5kMZMPNXh01MHfQTF9MNG7Ih4Bzg0ILpwgkQ\nLUltyWV7laYXTcIzVMceCHnSD9FSlKx3uQDLW/f0OBbeI9VytOu3lJqLMHCi\n7WgJF0wL5cy50CVdoN2VP+aKSNHPOef72HkPWWwlPVLVoj0TFpOjUBO2VbEO\nL4es7hbroZXojr/Do4P/NqavWATABmNrgFTpZqnHvv2CUXsZk78/aa7OnZMT\n6vAfPAjC7aEIWwgyhiLUAbPT9IeD0O6Q2fC3bDEC++BzEu/SuVes/n5Fslbl\nV8bU1cOX+ZKX9BxGDAvwnAf4QpUHHl0FRY+AF6pv6Gu5GPa5DZOR500jVTiT\nknmyv/kUy2KgUjqu4UziD3oZFWnzJ0FGK/22qsIimTh7VnvXkLcJrMXGv50X\nQBhBwQOkYRpHuoP110AqeTqGccMijN1fPCdfioZK26bYjNXS4BAZtZibGg8S\nBA6AQ0txq+4++kslT2NkPgQOzduK+Gwu2kdgvH0svjRsrakHvHJjLyDvnEnE\nEs9kXA6NWVHD3viZK/KKxg8xeLvvGiEOfyynOv83TTdUgeQ9IyU4YMYqH9oz\n0ZXT\r\n=eyGp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/button":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/icon-button":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.d57ec74c7.0_1637079525668_0.9509965379423813","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/snackbar","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0251fe8a81a916f924f4b13b70ce1fca48269147","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.554c71829.0.tgz","fileCount":39,"integrity":"sha512-yOO7vdE+CRIswUT+0jKEuqkGLbNxhJi7aTNVvoHAyJTkrVrIy/z6Mw6GwF0/4a1mSQdTYxEe2w2VG7/hyNBWhQ==","signatures":[{"sig":"MEQCIETueZ3Udmnn4fpDzLhT6FgVB9mRy8nstxuemiXmpf/zAiBdplrEU7/mFb8Gp/HsUDWA4g32oTH3gVmWM82LYPkAlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/button":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/icon-button":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.554c71829.0_1637079676292_0.9977830610426013","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/snackbar","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34fda8e69df66cd0f81f493e7b4364b59dbda9da","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.3ef470efe.0.tgz","fileCount":39,"integrity":"sha512-3TbFIGtr3mc9GkOo5LC/Q/Zpd05XOMUNMDjuKUCz9mXtpHnI9AlRgPfNjoDdKeioOid0kLk3MJtNCCv4LfF5Ow==","signatures":[{"sig":"MEQCICOKa9iu3gQ/pTOhyDKOCnKg2SqCAZSSyxA0dMnpOrjWAiBtMkJ9nWEQQRWLzNcvUVG7Tx6n2Sg9eUJI4bEH+RMk1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9uVCRA9TVsSAnZWagAAI4MP/j2ApnSuBiJYGT5kqI4m\n/V5lawzyZn2oIzCbzSm0l11xPnut7bp9JPCbCLOmC9GfsEfMeKNYoN6XTJEF\nBl7d/RrnSnaYRsM0vIwmf01poorlZ7ffVtPYdFHy5mrkOQFwxergj6SyP3NT\ngMQ+/h1x3B9/StRlw8xUdsWZEzO4WkST9EcqVYuUjmqZ8FY8wfuYS2YbH+eF\nAQ0N+lWWeCUwWyqYXrqAqZJ2WAqRev5yxbrbIffKCCTOafHfQFPstQP8JhLI\nWvhtwc2PzR7KOOTWrUasfSUnpGNSu0f9xyj/G33IgXRouD+YwYk/Duir+tdS\n3PgXtNHYw8T9tfKvf0Iqyt93VKUXS//OzCxhiVPkSsNqy3ON4A1qwydbQ0a1\nGkJvFp7+wZVPATE0CnNjkkYIBSWYQrDlPek+nnsZGnQa/qhJIDqmlQG6ieBi\n9uhSxcMfTgtb1i3FQ1LndBpXiZEAzU7CDi8tB5WvKAkmfAx1cfu8Y8IGKVY1\nZ5WFlOvnZpBYTlIlUBJQKY6vwz+gbJdsoq8zY1NyFDHw7GEAyyo6tKU9WZZV\nD1SkJ+ZOFldBRLYpYFbLJWhdS6FDz3HQyoJF+RWOWYJ4e6L/t/o50YYIn4Zr\nkGvYv5ePyUwhF2rCgUPTfCf9+OYZeZAeBT1ooVDQ3Bsc4vN7Gv9l/pHes0M2\n0dn6\r\n=UEed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/button":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/icon-button":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.3ef470efe.0_1637079957528_0.8953935778139119","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/snackbar","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2c906529af78395e8e4eeb96c444cefce1fd82c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.61a28b2b5.0.tgz","fileCount":39,"integrity":"sha512-CsZR6LNBh1Ae36vnWlv4p4DJ7xuNtMxIa3ouwhRoOFdwyhPEseetfrui85eyiaqEFIsgbsrXCQO3ggImPGuKQg==","signatures":[{"sig":"MEQCIA5TPHR7CfOyaFq7SxOZ0/5dEyyioGnjeX6ziZJC2khSAiBVPiJ45otnCDaZsWaJXM7fDcZ2uyvOjAjq/+8tQBa5mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFxCRA9TVsSAnZWagAACUwP/1xx7HjmHOJiLEk0aS/8\n+F7b1q60E5lX8LAGgHjySVbS4nz5DItpU5R84Wt2z5u0rmiy6NTrFfsWUxQo\nC+2PqKwbkDUDtcgs4rrM14+g6s/19dlCx5CL5wSf+rICoIYsdOKkqwgMMT6s\ns/S3y3ysfVTRb8BnjnK7wsEkb619+V5MXvY5OFQ5vuwZkB2Z7A9gbjiZacnx\nX49tSVXZSCesgBmCEYerokBoUShBWkEcBa5vDHGffStNsRs+i0LjdqzD/Qpo\nDa3d//eilEUvZLcX7MDVExCpN0tvrTPx6idOgGsvvgigoNG8HWyckHUpIspM\ni4qjrh/rlpixzI1Qf+VWMmdVwfV/m/NLJpQPS0Iq/kYDNkYDYFN8UVNOF5TQ\nl3EoBkzLz1t2d/qaVUQw0U8Pkc/Bld0dtm6UThVo3LVY6p1H/mx2UBAo8PWk\nNMJqPQMIf2C2s8oiT1Pajt3jAt4xX13tHS4tCisVxZ/+gPD5NNXbA60q3qA6\nIRhGiUd64ZKNIIOAhSeSC2qWjgbGRo2V3ZlNPE+STMK8ITsI8E6wJCwqJ1GU\nTsvj05ftGhMNOEPh7CuoI7IWV8Lvm7Q+q9jmV2rAIWv/5FD1QO7Zm8n+0DCl\nioeCB9bORMmWTs5fC+YaM8Ztl8w844x5DjD/fjPjUjoP9ui63uKAf0we4FMR\nHLkJ\r\n=W6Os\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/button":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/icon-button":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.61a28b2b5.0_1637175665168_0.5168013142847043","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/snackbar","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b96e42a235dc1be4d837c5a91c7d8eab784c1c58","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.fae6c652d.0.tgz","fileCount":39,"integrity":"sha512-dPfG4cXIlIvwSRZL1DwazlleugyHF2jdp7CX6fVsWBdM8Bsrakb+jwPE7HqOLKrpybo8NCspEypBqRANd3LVCg==","signatures":[{"sig":"MEUCIB2Lml7IuBqQr1lp4qNI5Up3olEcqpNcZsqx7Qu3ZXORAiEAoSqkzc0kXd6LkB7QY5N7E7bFnLWhql6bOinzZK2IZm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln68CRA9TVsSAnZWagAA4EIP/1dpzXZhjzJRA7gvBvg8\nClwXinrFwN+Fk1ZuYS1bD1ONtU7VIoV5pCc815iiv5cybfHKPj8jDKeDDDZM\nWY2lCU+LJGhUamVAJI65p2be1fEh3E/yJFI0vH71Xr59JNYfAYXAuoHty/2n\nr3C79ilXxXkNkP2n5q0wIOTkioOTC6CB/eoaYddb8cOxWw4mHL2QEGNw2uW8\nX34K6Lk16qHshyGCfBSVFApGpWGhhVMfqNi9mzEEF0Y3i/cFwgH8LZv1w5Fv\n4yN5tEpBU/LRANusuzBOkpMLdxYya9fPmacstuRj57VSTb7cO2slJfM9PmUM\nNyfm7pYmpTb+6VVB3jKgn6PJ9NLk9u3lD38zAiChxq1zfG9XTE9kV+IpNau4\npJWoXmPpcvli2WDG5pY4KXhcBwywe1RZK2inr58Paq5yvwd1bsMb/a6cWT5N\nkqpdeDfygotJPrYjETJV5v12PZbNrY2iFlBrWeWWFbpaDmlklw6JjHIHSKWr\ngTsJGveeLRs3YlLkW0yNi4ugzSwOWRWhdbSUTYM9Pz2paQVxR3dLEGSKFmnd\n6Wa3jXbPSBGVHtDoE0q/3kN9QWcXQGG+umqBFe5I1/ra//Mb8yGNU19DPRU2\nBgsyD3cQds0xeqOyKrzCoVpxHm5ZN/bDPt6IyPU5UT6gCDZ2MYGjgG2yYBKX\nciY6\r\n=AigJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/button":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/icon-button":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.fae6c652d.0_1637252796071_0.048923698199216936","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/snackbar","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bed771ab3c5e0078758d39f071ccb8c76cd112d9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.978a3b5bb.0.tgz","fileCount":39,"integrity":"sha512-/SPYtoFHLQ7IPYceOwClgKj9P7VSfMz6D8MxRGt4FrhCP94+DeN06Ager4RjyhDsG60an8jXVbUHaMP23VcRPw==","signatures":[{"sig":"MEUCIQCmC2fKTs0du7h3gUzqncHLlevbTQ5jgnTaoCmD4fIL0gIgAqHouYJExtSNSLAgm+aWzqrA/nSdpud+wESFHOPWhnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/3QCRA9TVsSAnZWagAAIdoP/0INCqFtZTgxjPRmyIxI\nmX+ffdThZUv4Z0cIggrptCjKpWBqD88tUZcGhJq1/l7PFeZ+K/51EWHemcWj\nC1Cwu2KSsmaOeJgXt1kADxbFcRGM6mgvYy6qWx3Dwdh7MBFGyz/ZOmUDLqKI\nm321k5jI9pk0+TASoxxTOK8l0XR0o6l8EFlu+TF8GWa7CyfFkr05Y9edL2gV\nR2NQBQszTImCx42LV1L25Z/iLHZ1muIH8Z1u+s4wkssXx1Vbm8JNCmr4ni24\n594ccrxddKBbYGSAckr3GKB1yMXSuhdCzdb7l9davnuda5CaJmUnu4mqXvsA\nMtONXAxKy0AjTKgGoEouFvCaAZpE4ine8cGCa0r0MmxSAbKmZ4iy9FTNeCT+\npkEComyTQasGPvHl2SA1fUFQRGhH336pxRxpea1x2o3wYseUoZMuzshcjg0h\nce+6ZWJroQ6P5D+SZ23C1lPZbKiyqErll3WoJA8wYPgG6ShhwEumY8xiEJ20\nNfL24zYAI7Ob7nl4Y9NLOHfCB8n1psGz2TZKCHWIcgm46pQYWj3L9hs2dsNa\n3jq6aRQ7ZxbkM9w5+8d/ZxQyPDiz05VsPDlk3HACp4mWeL8Jg5961GjT5e4o\n6VVIvX5E3fa3IVsRMUvsh5pFLcFnOsln7RYdLeD/9s/Xb4HOV1vH9zo+gymA\nDHmX\r\n=Tzw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/button":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/icon-button":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.978a3b5bb.0_1637350864101_0.23586342879814026","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/snackbar","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b55729745fceae414413af0a2b06256646e5f38e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.e6f43cf44.0.tgz","fileCount":39,"integrity":"sha512-3Y8DaQhggHuYvftZss6OXFIXCHJnqPTaZ5yKFzVmX0n0dOqRJYSZeZ4lZcCv0q/3WjBniBURgBpiuc5YtUyDFA==","signatures":[{"sig":"MEYCIQCgELGfBNqzoNqH+cTzXoB9tKXnC+nL3S8H948FhxiJRwIhAOHm49Uaihr7Zgts462p43qRm0qxoZjz0S5jjqiXNlSB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UyCRA9TVsSAnZWagAAyZIP/3EU0MGqZLUltYjDzVzT\nxzd726UpnmG8D/ifZUGQ1PoaXLTpFLgip7z54KyhuF6dNdW8JCQes8H5brDW\nlBbVoWAyEWY1GKJbzPH3nMY1142JYnHEESH6836AWp1ZPe7RZzXWMNNaW2yp\nclVDBDsCMLYXYXljSef/ruOaV23rlzeNWic0GM/eK3E19MRY+JgFvxJogqhz\nTJ3YFrsL5VMweBZy3phsehq8PcwUfFU8Y0t2ZQXHd5dnGvrmlT6UrOiuQYiy\nZu2ccNoiz3kp0GG8EgDMDPCXNgu+8qxD6Wip5ZOc/t9v6QasUzbQWOCE6PBe\nrV37/k+FfpM59dVJn3Tf6gDOPxRLxNqfQX/J23ceu3tP4NkyzyjQjlEUGdPJ\n5f+H8vmqiAPoCy7Gq71VurI0DpLiCUFpzW/oiP4ZRDGJy5BpYFFZKuZbOHAA\nQZpZ7uO/DbwN6YLF5sJo0UNbljilQXUllhbylodzEep+wpqRVmNBGk/n6mvo\nprvJoULwY8brV3vqIf/JfWPhPSNP+850IupXBTzBOp22GFSIkFMhlWIFaHF8\nkBD5n/RFs2csRu7jzz7BtSw7DuDx8tNHMH52sW3TIBh/8040xKG4srVRMAZ1\nIm1LTa2zcwVuYkbU4kDon7iMNiZCyl9I9JHEsozvEXUusVK5zvp/WxVtunlo\nvNS2\r\n=z4xQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/button":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/icon-button":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.e6f43cf44.0_1637602610255_0.7892342295077455","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/snackbar","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f75217cb61d29fd62c31280a6adf6fa4b8b3df","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.39cf14bc3.0.tgz","fileCount":39,"integrity":"sha512-LiqLuutrO8WArVAUF/SzZu4CCKtfZiuWlCt3S+ZlXRveJzc4jYwi288ei1N58U4CQESP3QaToQP29ZSaHaZDDQ==","signatures":[{"sig":"MEUCIQCTzLwWKHTX3912LYSz88lmlprewBslIDqFc7RXMf6DJQIgbTb/1kiWL/2t8kaTAiU9WiKHpEWpKDi+Fx1J/RE3VSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJpCRA9TVsSAnZWagAADEUP/RT0Pg0X5nUyO//F1jyz\n/Yam6Ialf27o91R8KQcJOcIp0zECalbU/T11rhE3i+DPyASR8DNcf4dj05oi\n7/9teoKsSupCUiw0V9mLWzlPoNJeRtZF/0QkoxktIFDjvxafFxA23kVSzOo3\n8QEsbeOTmnfzz2Fn3jpxkJ8mzBfqjbSNa9RJhji34hgcGXxj6O62U1duByTe\nia//l3fDzRNCLauNhkWrvRh2xnRCPl5gWwgGsoBRKIHv6DNmA0WLhwDvAKwv\nHEEbjJrTPXah6dY+m42hYzt092X2a3xNR4hmtngMUuxiipjiOLwp2idHxwcb\n0r5hkJIgDOsznGtSFXUuBENeY7XzPkV27t+ouFY7yFllg1quDfYuAnr6Ry8M\ngd+xuwgcYY7HrANFze4DZ/E2xUQAJJHlvTLriyW4H06IyulFZjOx9Z7hF8Wj\nkErynTJ2jkPvzDWI4e3RZ1z2aA49kSMIOsiY4MiXzwARA6XgzZHW7Fnfw55p\nHGd0uCebSk0UJdjH+YAFJCeoiRr5MrLOmbJcU5rudrF9KSwUmq+4g9sLBinw\nH2xGO+zIcTlXeoJUOov9RfO7ujtvVpKEV1G1mGFu3CwrAqzs4jOKi/3oKmYU\n1DfX4IFfWhrg0gr0RC37n8msZv6zduYsFf8jd+JjfSQYElV5i0I04fNmL5gJ\n/RdB\r\n=4Ha7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/button":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/icon-button":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.39cf14bc3.0_1637622377056_0.18973537030130783","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/snackbar","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.93134d453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55a012ebc9b5dd6f5daf60ef04eb4ad299655f4f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.93134d453.0.tgz","fileCount":39,"integrity":"sha512-vDvXpYZ19XW1cLVMxy6K6tYt0wrRRqWmiqCh1qJdbPmRh2I+jeY/VIjfw7cmxwXFfVWxnCv9zD2qWqFbevq3Ag==","signatures":[{"sig":"MEUCIQDI1AkXtTA3Y9Fy0kUEUudXe+nWLQfNfZWmodPQfZJswQIgXr8e12m0joZQMSaioA9NQrb4tVNrjrEpuM+q5YtWZTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQuOCRA9TVsSAnZWagAADi8QAIt3ajIrkYSsE268BNFv\nAcYef+1fG2frvguFpDBB1P3/0Bj2YHIItzKhudB8aHDrpxqhf5T6tstgKFWD\nh0JhZp+yzO9JCoYJYKryykU4WvmxqYxo6yFgpSLyK1EqjWBtwsHHgm/5uG9H\nIol1vs9bBtxUGEVje87YeW3U0cMnnwi+OqY77bqmkO4xSyXcrPlLr9X39CDX\n9S/PNzfQDmi987op9Rxz4qmOrTgd+zhGqMux/k67Io9Xcmyqv+ncCZhtBFbj\nbnBBoyEN2NDGO/3fjCYGUCbElNPmoBeYJPu1fXXMUptIuJK9fEq2sD0D39qt\nlGEyfTGl3X5OFxuEKcDtOvonzYIGsJgPuhacEsS36xpsuvv77uADNeWIZH06\nTOMT3Z0+jCs2c0N6PkqnosBygJ3nBReyx0suy2prFgau4tZ0yDDzGf1pjkTi\nvXZJcnHWxU47rnq8WNbFwfWDG38oES+2exAPzMob4ZF7svBSeGNc1a8JCbJQ\neyR7WMAFy7mvafCf4e+qRxHnFKiitHVycT3ggM+GhTvQAV06lB3JrBNRI/Wy\nk4CSINQomATD0SZsjqHUu+PsanaOsGkz88UyTexV4sqgEs1sS4iqtk6eefZD\n4eQ9JGyRk7kl/k3Jvwjdpi9jyTaPt7UFdRhHB2QPCPgUNOcFvXxMPlKzehF/\nUMJk\r\n=kZX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/button":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/icon-button":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.93134d453.0_1637682062610_0.2647027802000306","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/snackbar","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca7b762abc6dec18545af0d802089027e97479c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.bbd11268f.0.tgz","fileCount":39,"integrity":"sha512-/0q/DvAi7O7R+ViI2Onl7pXGTHeYrwPPA47thI3Kau3UOBOI0RwCkPvGQPJfApPugJr3Muq5B2ictDB6z0G/UA==","signatures":[{"sig":"MEUCIEzwr2KI1jRLAvKBh+lUXA75uG13DX+E1BF/La4SBipvAiEAvAgMNHFcLdjUs0a9pqFRV5XLIireM4RxBICWZaS2Muw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWxUCRA9TVsSAnZWagAAsawP/Rt2xxmkR5b/N06vwh2I\npfQFqf/xe4NlQha7LsReHAg/XgLCVhWISNbbjmO5G8aOjYJMpazvtfDJaFEE\nLqMZ8kJumh+rTe5HA+kNOtjZRTraAl8za/9TPCstlYYbwMD56CK+8cJJ+vKw\nHMx/l1UYdNHTALdo8IDmyDYbv1fTDSAav9+/HsmJvi0Re+Bj0Akwym4TjX8P\nyl4VXF+2WEgDSOrEOe9y+i0P69icUAcv1Sbtfy6zeQvRRaZjZTAVe7bbu07M\nfiBZGmsYwDg/cQcAJ9BPYHEFlzTEQSgnYXslkm/+t43UClNLhabPdA6yQAwb\nZAOBoIcKW/yYncPD663/jGozQgYW8lF2pei6cIHMfGYAlKad0MiI0sirmEYq\n2B1HEsTI4JsoMW+5Cjb6RHrTWOxS9anUdSlgpVa2WMvPB4CJvEVppb/fuP4D\nb/bSbE6a+b0hZmOKN8nRzdW0IJfZJSeOEilOmPZuVxct3Yvd2XjE3viI6cBp\nSYGfyUJZBSbr5tr+bMMGnhlzXE+BtWCe0A28jN/8yFVm2nS3Mtmq33OsgU1j\nSO/SeGsVOHcL/OXnIi2oxbTB5n9EtORYvMGItZKiqh3sv4/BEWGK8mnQUql2\n02ZWiNdgQ7ZqjVoF71pVMWJ81LBscPoy4FVVNSiO//oYItWIxpgNxheL6F62\n+Apc\r\n=+88f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/button":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/icon-button":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.bbd11268f.0_1637706836263_0.9341784824324486","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/snackbar","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86426efcd66e4e1155de7681eb9055b312d26dd1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":39,"integrity":"sha512-Jj844Rg3+Y8e0mDJ20NHcCIbCTYApm8v4/q0wO/Yl/Pt1Ah73uMNfUW/2LM49wgWrbrAjZkUydkEQ+VsHzbvAw==","signatures":[{"sig":"MEUCIGCaFMHt4SqDiEnCbdt0d3a6KG5SQhUiI8txQpfRk6YzAiEA2K6P8uSfYl0QXMSOL4tTOKoAgig/jL0ef+4miaeU2Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlyZCRA9TVsSAnZWagAAHy4P/iwdZ0GYPoTFfPOg9kO0\njaXN9Z3NUBhCsRzMXsffPPREUh+6LqcK3lAHVEiEeA1BeK3GBLL9KYlDrmGh\nB9thfVlko29YREZzfxR+w17L+Wyi5YCiKDjzX11VqujzQiT9SM89Wal7Ih02\n+LpHqN20T4+lf1NSihcsr2nq85NjFYmRqwN7z2KAv9Yq/pBeocoYA1TUMxka\ntPxN+SKSlAUrb/Ukc6Qm/FP0RuvzH7lVQ/175uKjOE9Wb6v4d91WR4mUAzYP\ntmmMOwAv+sow8HSFRDKsiY59FewNDSnpN1++ZZtnBT194HxsPeN5ziSmnloZ\nA3pHpII2oNV82FDhQs+2zNZs+xPzJV/idvIQimNvdU2PaBifv6HSYI12R+Q5\nDUhA46ccljYm9TAXdIX4f33672wsJlI4b7kOyZ4kLdoN4t3QjDvmPAy+lLdv\nrfAJ5mhIBitXJNl1VGkA+7cRsi4uwqrpVY26k/Xn8MtnrnoXXAJ0dSB2b9n3\nuez3m2KfTYcfUIN8q5hKQExamVfQgqa4qgdAGDZeVdlBPWLpVMvVGy5Btrvq\nkWG5pL9HlD8IoqjSnuWuli+sPCp607DNZtrayNzHZaevzgBqRIlloguDwDAC\nURycmzS1Qeo3V0GtYdw6Jwrz31oB1gQUOk30BB+2EgIuG2HDgMHGeJR6jNJ6\nzFUy\r\n=PKDW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/button":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/icon-button":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.3db9c4d3d.0_1637768345749_0.05669077215445828","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/snackbar","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfee40b64cc0d99bc083ea0ff14f341691195450","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.78305b6d5.0.tgz","fileCount":39,"integrity":"sha512-qmLgD6w9YUIEPi7qkVrIGXfFkrueEy2SCF7kxXwqBBLYQbh2J9BoMHIayLdNI7HGqBcbmW5Lqn+Ip0+u5IguEA==","signatures":[{"sig":"MEUCIHOjmJ2FIkmTvePtAL0C20uGbueBXds6WBUfBiSzj3FMAiEA+7cnWN6Esv1/7Kt40KzHFQIcoAnUZZpPJJEafI2dlr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfzCRA9TVsSAnZWagAAe/8P/A2n1aWeKO2GRHNMHMy5\nDGKoiXDyD7ixfupL7VE7R0eTrqxq8phdH7BtHBPx4OEesrAjCYbQCylLD1Zw\nyIr94IAmrMHJrRiVSxG1MrZc87US2eo8wMl2wEIXV2eFENqS8cmF3L3xmR2P\nJ7YK+rSb4sxU5TRvv374YRgle+M73ozcGffxBux5d4R95PTDxsL5UYqk4sW7\nxsgXhw7tocd+uAtduYvkQ2T+B8NtXlEG7q67KJk3GYc9ygQgj1vLzi048c0r\nWR0AyP0iWJyBKgV5f87yhlHbXHBdTwb1TenlpG95tSoXJNqjn5CT0e7bdMPM\n7XjgBYarOogCWfFpea+k6o+ZdVibL2szsj4DecEntAt7XZPXZnHJ0kNDwnn6\n71ObvFHhBjutWh+Z3k3NIxJcHW82uV9FMTDuEChRw29zH7sGN2xnIZUFQmM7\n66EC1P0W8pmC/g7akd9wWahvXt7HyAC50F6LKw7kjOSXeMT+PESIhIR+FmPs\nlUWsqVrSJXd/2OpCNaKCBsnRYoYg23zQWMCETpeNTgAuJQO43FpetQgtnwyO\nQAchRqTLWA67i25/c2Q/aGJLbEv3cid5/wDYLPLjJXrgDGqXl2WQUeytP311\n3E277VvCQ6F+EBn00h4xFiR6raOzyqJ2eNwXnloHuTbu2jFWBQpJA3NTRIeA\nTyN4\r\n=ZRtZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/button":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/icon-button":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.78305b6d5.0_1637783539808_0.1280328445961303","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/snackbar","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10b79e605f3ece136b011d46b0f6400ac5802178","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.43d08ba77.0.tgz","fileCount":39,"integrity":"sha512-1Pgs2w7DmYz4glTi/67clFiKC4s04crgnU1uy4hzlaZRUKDUABYnEwq7gX2PBlMhNlOsO1u0VvvMQPsjWQtTiw==","signatures":[{"sig":"MEUCIGebDVYY3oH2h62DGfSQl7RxJwP4GNzjOiI6+uhEu/TSAiEAkEMG/jQpvr00FOZn7Ol9PMFaudAWGl0zawo+Dtym3m4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxmCRA9TVsSAnZWagAAlzIP/i0noo4lo9lgzb0WHbqQ\narQuthJknq+qrOR5sDnJfkUNFlK3jLVYSc8Ta+UHeauMWsZ0V9igjGZJuW7M\nXnTolhPMy/px1AIj0A0idQJVPmj5mzkkw+PopoQ+UPCcmznpxgY7nr1QDWg5\nGcCkGERuQ9iOarx7HzIOBJaxdW3ov28/0IeN4+B9FpD+dB7cy2wcBGO6KtTu\nFJvD1VWZVAY7pe2xnAw0YTaZloOveoclxAyUDa5y91kx2aRXNqFxuNqPm7+h\nvGTWc7kvEWL/1x2NHKP8lUYhDH12aVgwi+MJu6AEo0rfcNDcbMEUVXjN6WNW\nW+BEeB1FhyjvT7gnN2NEkFf3ADbmvojOflwP0KPRJCmxmhUpOwvOIXc4cSw/\nmpdG/Ka3TC2sM1WZ2CpsUXmdGeSULc8BSOsF5dMRjn5uJrVIq7qZ4urWI/UO\n+yABKYR9Rj7PyOL06cXhANi5P84yqx9EzdKQfUz8um+3SB/vnfngdPHQsCek\nKRqqz89H+9WP5o1DFHz2rp+lYDnwZxczpx6Lhpmj3r37kqQm3G1QGY2CzIrY\ndT/5ZXPtZtSX74t46g8AqcFSGBjU/3l4Nm7FIPPAr6na6nOXlcnNmKU7Dhu5\nNhvaAo4vXCjey01qZS3F3ZPKy1e+Wn7S3ho+fwF+4XO3hoOoRqyWLrwICAVH\n4Iaa\r\n=M29L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/button":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/icon-button":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.43d08ba77.0_1638313062644_0.30066413681817217","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/snackbar","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.17a072535.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"188023d65ddb4a0ec1b262c2ca6e1d5e37031059","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.17a072535.0.tgz","fileCount":39,"integrity":"sha512-e9X3EiLRcFi/NTsCUPuZXZ8EFsTdp217q4zQdLnO5iAtwFbcpvRAnTtQZwkjC8/H7ODZ3uvkAyFpXauaaCBTcA==","signatures":[{"sig":"MEUCIQD7yRZosjoCcUo74yQ9mt8Y7kaXygZYite3AQ0SLkDJzwIgKgDfoi3A6sjxjB/3I181DLyitj410Kg+0thGnzCP/YI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQtFCRA9TVsSAnZWagAA4mAP/3ao+lZbrcWaKwpgEcse\n5q33vM6ZtR/OvB172lcUnLADjXtbNlfld+OcvtGuCWss0cWyWN1rfDUolF/x\nrceBZqJmN2h/uHS2N7B8HUm3iayV8u0v6wiG3CI92p5If8Oj4hYAKqOMt7PK\n8k5/aCqzy6Aom/Viaogrzv2HyQgfDFMy4oc4gkhlICk1g+g62BzvA0uZY/eq\nXklUiGqhvBWEgiegV4SARzQDBjtkwAU/6PIEGAIbgi5G7I42LzIeBF9rhd3r\nFXVOD7JiEc0o/bbrJfj0BUdxOAUlbr4qLEHUBxh6CHPcdTSA4maFowbhPiCR\nm4nu0yLKt5l16V2etHUYivTifTIAF1yDZ4vZcjOtx44vbJwVirvYrYPFrFtE\nUCA1SWlWkZ4iGmbbXiXeiBM4tCgFK8VI+48tVdBPOiTTXtF/oD+soLRdQSgS\ncwO+jqiN9l16OwWd+Fu/UAHm0avuDiEcglqFBN+3bqlHzyKIKZNTrBJ+I+KH\nUlrdEPTDyMARZvTlg/X8+arqdfMnfHU2XYVlsm1Il+d0AqH6Eo3hoMXIi0Vu\nY5PffpmLeIeANu+nlYMHemXOyH9FLRNc5FADJr8jj+MDZwsoHKvqt9nw4sjK\nJK2Ga64DzTaS6ura8EQ/+zx+TY4DbqqhXYB3R1YDuQAewR2NoL/n8/AW0XTF\naXZy\r\n=GmRi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/button":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/icon-button":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.17a072535.0_1638468421088_0.9788224298537394","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/snackbar","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.5d809696c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c8db827af70eec5827252fa5f9fc8b8edddf57","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.5d809696c.0.tgz","fileCount":39,"integrity":"sha512-/7zGag86iFv8g4tkDRuuwX4BQxcPj+5wIbbJFh2L+y8nFKeUSu9NPsRCrjdMiQ5LjRtUJRtYzDevTZENIfAMeg==","signatures":[{"sig":"MEYCIQD5WuVlIazD8NjWs2TaHsNsyc8Xxi4sQggiHH8AVm/XfwIhAMAlP53pOSjdjq6LPfyc6YR91msJNGj64OzcAbHtDo0x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO9kCRA9TVsSAnZWagAAUmkP/i0zlmM5PTU2U0CGlF5N\nIKbdHEM901MLTsSaiKJlbE9taZKe2FgOKZ6wVgRSVGmFKM9i/posnqGFtOrD\nZpdjdVHxA3rD2Xtxrvh6OuD8CUGzKC0T4TRKVAkLZkDbmXOGoSeE8xSXRMi2\nM+lgUVaARXjZkkSoQi2VQLFH/bRdFEo2srJ7yhQxKukJPrXuKz9QP+VqtzCN\nd0OEcsy6fvQKCV5yjpjzGkSFF0fPBBmbbLEVaThuBT3iY4ZD/0CDpEoM9TYB\nt7jDy0G0hcKiauGl8LmWuln1SedoU+IrwtfrKpuGhTq4CZBn2KXpXOHqsurH\nQb97F98R322/d1NhXRLLZkfJeHnQxwyn4Tt346KgMt/ltD36HoXAaHR6i1wj\nqO9iPu4XetAfrM50Vem3mSql82U99PbRyda2ZsrM59/HWYoRSDa3kjOHxj+M\niAApe1rqav1VJtMOR5BrsEbdwOerd3iFUqwA3/THB4wYWt45HcuXAchnpIA7\n+SkMOWGDfE08wL2G1ZGA1Fq7JKbXWh9wdyIK4zSUh5vtAGn5FL4o7AuYUX3k\ndt2RChTUsGM5QafmP3mWLodUp6UBVDaqyRjo/asRw0g9dilTYU9kD85h9jTq\nDlF4ewZuESSa0QElpxnB6L3W14nrNa8ARP0HTh1ngOgxcbtZFABKpZGeY5HW\nEqNo\r\n=VK0f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/button":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/icon-button":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.5d809696c.0_1638985572117_0.2948090286274323","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/snackbar","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20e7c93bc8158adab8b22a7b19380da2ec099786","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.b6510c8c1.0.tgz","fileCount":39,"integrity":"sha512-xW9BL0DvLfycsDGyIWyUin3QzaKfRfKi8sjOqT7j3dFgAvztnGCqv+SUUd/qbMv3XFMXRyGawyClxI+udR8hNA==","signatures":[{"sig":"MEUCIQDVhnsbDk1uqUMHBR69DSSo9WfTbAAX7mHKaC+e/AQJ/AIgFbINRbJGETbEYlPWR8L9INPiO3cHoFGPY/BjCYBgfeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPSUCRA9TVsSAnZWagAAmhoP/3j2ZJC06Diw5h8m9ywF\n2hkMbXWOQJemWrmaeeHPDIDGYfS2KWeqWJsFGhcqE23fXrfLZGMUjdjFRlX6\nALWScIrOsWusBc3Wh4d7w34kcaLp6srO33wBoHX3Vdncw23IWd5Z4JZtcMhe\nfVEJhdR+7280/ren73w71bjJ5ll93/R6RoOirRLjonXWfaJqijzbsXqFLl8k\nkRzh7stUNuV4tGlagtXdHfGErdmny3XWsEHZwoo3tkPRmV81cwI9fVUs+McO\nAQIV3Mm9nC6qDKqVBKuk7puhveveUs0ep5kb5ihOcX1LPlXtOnCPVd2L//aJ\npZsIjFqW7z5gKsBDZ8lup7hcYSxYBgQKLOaXRpjLWkzwz8MkC2zR6m2QqESX\nWxkvBFW3pdRljeOo1PS/fpRZfvM9NNfV9L/jC1NrKu0zRvawh/TQtEy3o8ju\n5YuGBCKHrPTXGCcMuSqBPCYVf+T54jpinUonZffe6fhaYc/WZgD2UDyaVyz4\ncpyI/A1ey4BFvyuP2XrKs14Hr18Ckd2GYzRyOr8NIG5bdgZuNZsSdyEA/BRi\n+xJjurTVeRXyz9zrpriVXhujwj4y3rHCiZ80Y4lZE9GG/IB3Tv8mzjffuwrl\nPvf9fwGJ0R2vlJmd5Sx4knrzEazJaeeZR6PvUxnxYry9J0OiRmnGySKvX2Y/\nM5mu\r\n=bt4L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/button":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/icon-button":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.b6510c8c1.0_1638986900743_0.20142334255451755","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/snackbar","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.f460e23da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"024508d56079d99b1d633c1fa01b2c3d981b775b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.f460e23da.0.tgz","fileCount":39,"integrity":"sha512-zpMDBymjHzQQobm34sYTmU6iZJFWa3WxB9gMHsocu3fhY5P/4unQ2w7Dyzfb1s0sXLBJNfdB6674aL6tlAzdyQ==","signatures":[{"sig":"MEUCIQDE9mvZsK0dtgjNhHgO7MhANl5h97JkFyIm22lT3EhqOQIgek7+6ea37kR36BHm99Jjrd97tj0uby8y4B2XfN/wM/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3HMCRA9TVsSAnZWagAAFTsP/1Z1gBx5X7t0d1nsRfuH\nZBHNDrQGoEqDv2g0mFoKgT5tdNYhbTzwBqV+BJm+65SWNYQzb/4O0MAgbZyr\nbHOk0rUL9PsVzKe2TM1uCBEU/rc0qFIz422nmAsPYMDPOb1b6VyIVsmRCD6C\npPNxzDnmzHSR1cJK9wx0iVbPB3I9w1kDI6DDE5DKBV0NK417/oM357vbVSKt\n9XIk++bdYgpeMErOs3JDToE60R+rxn7PpB/shJSWxuE4jcNfEi+qUk6vAHwb\nqBeDEkM3uzlyFOpuEGeyS7wWxd9Caon3nMCEWWTNhGt1BcpajiuBrDQ+wmew\nLxVDHJzjKBTqHR0logS/z0wW1LRh1sUqzaaT9YjnRqTv45dnKYEojvCdyTlz\nS+CdVAhtpo+ZStxPiqFzYD2vYXDKqzjtDO1KvPuSdr1e0UbZ/+n9h4anfvKl\n6pkyFUhAeVJIIwkpXNBPH9/DsWleSy+YOKvvLEdn9A8FRVrgiqXyYaVlFJVA\nWiJl1msj754RaCn/guCESYmIYTsRGZxomCK1qP9/DM6jouFuf1UuuGYN0Ucx\ntH7aK/oO5C5a4WgNsNGFDOo5bnmS2sMvJ82jMEQ116zUZ5FcMvdFCz5IBhrt\nAvIexOlyE1xiWFnbRWuRNe4cCZvXvFudUNMBkDQIa/n8RvLlJwVdJ9QL+Mrm\nvMbv\r\n=AVKV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/button":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/icon-button":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.f460e23da.0_1639150027925_0.9837295007717501","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/snackbar","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a92da22f34a4aeeb78285ec8434cada3d234891","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.7d8ea4624.0.tgz","fileCount":39,"integrity":"sha512-r7vVtQbOknXHv9LL/aBA18EcmZXNysq60qCC2Sf+M+vzATrIe92oZ22d9v/uXL17k3HAVw4sUWWRUo5owndS8A==","signatures":[{"sig":"MEUCIQDOuN6RCVc4CApmfVZ4FUZnyVn06K2B7RYCHWfx25JnvwIgRI7d/ieo5fj8f3DpXrJzBgQMcbifhUvqQuIRf2sZRjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6r0CRA9TVsSAnZWagAAYE0P/jbk9/PTlE6hM37l/QUP\n3q5JdB+HsbqAjYlSPr4h/wB+G0BhqGB/ySCPehraNQbHcF9Cwwvoj1TxqHZ0\ncQ+m+ehb0Yd91rCfFsYzI2Au9tipKbDCwFf1D7n8gT5RPwB9C2lOUXIk7ISg\nqB7ra13QXxJ7ZWpwF+OILshIYwGYhMW8gWkey4j2kPLEoSxYamn/zo+IkUcW\nXJShfyWk2V3OGF0b2D5VxfHNX9aFgQeJ8rgBsVY7wIex+N3uNPV256Mvf9J1\nFsqsv0qyq1gkxPnjIVp4/epvCerMTo3DFm3wzlCuNpoUvqWwykSIwt8d9hCZ\nChTI+0jMbDVMFYEc2garhuj5m0rfu+XcczDQbvrFd4MHD48RNrC1zeoiP4KB\nadBVTOzk1LzFN1POUrnM3MjnzpeULtQVHNBqqxvGMPzzJJKbS2IsXPDq57jW\ntYpSkns/NC1jFe8oFjdXsDVsAakqaLfxtgP3LGvqSvQTK9KgUWv4bObcg3V7\nNjbk9U6RXvOfeNMLFQoKOKAYlaHi/lHczLejx5rcDcZIC3oUldf7mJ2FxLGJ\nLEWirggPn2YzkFl+VI1HN4dpCMrJPO5UMXRgGF7q202UKLIIPNzdLqVdh05B\nNLq2oqxf+y8/eGop2DsTLWYjYsoxxYpmIYgvZw3XWipSoBJBiUk5s18aVSVq\nn1W4\r\n=b9LY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/button":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/icon-button":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.7d8ea4624.0_1639164660308_0.4144820799679034","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/snackbar","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90590835803e41a13f777d2be1ec629acca96872","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":39,"integrity":"sha512-pf9TwoWQ3oqXGJPypXSduV6vlCHc+x//Hmyl8eWXEJGW9TeCBSFnOUYaHImvdsKCHAbmAQXIoG2CKkhLhblWPg==","signatures":[{"sig":"MEUCIFzLkzqJufLcUTNECJvAHvH8kt2o6jM+CN/yQsCOT31dAiEA0w67S/iJDB5mDPsQZd5In6YHRvcDHnLpDkntPbfymlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFxeCRA9TVsSAnZWagAAO6cP+wWsii37hdoBvmNQEIPC\nlFJakni+XJhXx0dL5jOpYea/DaFUeFUeV+Y9ZI6u6856GH4vXiudNrWCAA4l\n965rrHDAutbmWlyAOZWintXocd4EWrvbrjnaNSfRKpTPpenAUeghpgzCviZY\ncjA0JGiOey63GkiV1kZqJw/+Uwfof4YWfXu1quYwHX/iGM1YfHl6YZ13TYwP\nVdouS4x0VEjz7LdPLZyvsiBukQzqNq2LTU387Gws3KRl38d7kUL5l/GVJx+2\nxyWf9HJlFP2Bi6LCrSIXqy+f7GKF10184CCmK4420fSFfIwTkI7GW/Z87koY\n/bG8ePcHE8lUsc+pWs1DzTDpZ+TtOJ+dpNKdfVLhntUZwx8uH8h+HMblek7T\nVdSsGlp/1esw8jCuxhKcngpHO87FbN3htJcP7zftiYx6cSFIN/uJ5HI8s0H4\nNReAp+1iFfrb1ZBfDSBhXaX7VTEOgBDifW6f5hka8PyKBlz0zPL8bmj8Jla7\nDOQC247V1kqjd4JnYupCM6uEMmUp2oxgQ4wqKfh8qcxzshcJ3oDKazWVdW5v\n64FjgjdLDjW10EwLh4oAl+X0mKMgr01ehxOZZez7c8XoXMpiIU1GH6iqZOU3\nJGBs2eRrYFJ2o79qJbs2tz9B8ofkpGDThA1ZHWXKuwfx8gb4abNJIQy+KEE7\n/GKG\r\n=Qdwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/button":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/icon-button":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.8fffcb5dd.0_1639472222293_0.6166616967276326","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/snackbar","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f28aa689c31086cbeda0aa9bb31bc616d356ed97","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.21e1cb9be.0.tgz","fileCount":39,"integrity":"sha512-2tySqj0uHF9QS1BLVvtODxaGvC0uo3aVUalJxNDBUKPUPmIHGSZEWPLNvc6TZtDV8gE9EnCLK+mASwjjOdgL3Q==","signatures":[{"sig":"MEUCIDRY3EXsLZGnrX1zjcJMN7NxzAkBuMU5BZ6MnWADfsjTAiEApkaIvvFthVd34g7KJNRwb4wM8hZgKbTGktA5Ozww948=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPN0CRA9TVsSAnZWagAAcAMQAJZ3lxVGnzjAc4nVDO9x\nsgwpAqcznx877kv6zzqjkTOsKpPgEVx8nRzeMuJPPE4kyRdTELRJpmwhOPcf\n8Yh6TwkW2u3rQsVuVQM32H+m6xWVcUuF3dds4vM8Mmb9ynV85j++lI2mH9ZU\nuYDadxJeJmjqjPcTMCcYIEEjP1JH3mPR+7lk076b2NY5kT3DD6ReqUvhmK+g\n7umksxTYq7YLS2sZYpx7ckWhSrCBsVAstcEn5L5lFfpnKFfAoOzr0wGZjh+F\nCG9uBO+Z4l7BnzdWgHKdBGo+A2xVsPYAPRNKRSXsxF2ze8uhaTYuvBk6DaGD\nLD+8vQAWpPYHAQB6Zu6us5+m1sCxInSlpRUjCRpMZ5tJbUaHdVc4cl1I1NoO\nUsAhPxCRKWe3itaoY8I/ZN7OYLztdA14I9YwvkIqE3Z8W6kWIWwTtt6V7azh\n5cN//EwoEPZ2i2SE6kuITdo2Kg7k2QiZGa3LHaDYbViYx1IxIrpcayHFu0d7\nRldDAni1pk8RYT95fSnckNpIVOSzpd5iAn6tlZEKuvunLX92Qr4xdhPzGL1L\nqQm2ADEBTDeJvlmvYPKBCqIJ5W0cUqcExWM0dikZtVxaLbgBPUs7a/z5Qdin\nvU0bz8Kuc7iIJ0mF34aKTJB27QSbj3vda4NV/6ukhCvgkNFsic8//XWZYrGg\n0jLb\r\n=TXB1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/button":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/icon-button":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.21e1cb9be.0_1639510900094_0.7955288080731764","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/snackbar","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a391dd0e77fc574b3326bbfe3b726e09d7d9e2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.ba78e8724.0.tgz","fileCount":39,"integrity":"sha512-QEChMdkw0JN2S9A+ns6txGN8H+reU6EBuzFduUEXtxEOtVIe66loK/dlHwUiNZ/ZfEqtXXaplop1f6zxdRmC5Q==","signatures":[{"sig":"MEYCIQD+4odjhWXozv75NmwpP9JdJhJlnKsIoJP7iv32dPkrYAIhAJ6cnp3dATAaF5Q2VDfd/l/MHbjbYZP2Ns2jwQomZ86z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumjRCRA9TVsSAnZWagAAjPsP/jFlWH+/Z3jYX581jng0\n71ZlkR/T8GOlpuzNCoIfZ1vW3ucYbDjts7YT+yu6v47yy1VPFSiyye1d9r2h\nYf2ReLEXfM7I1qIrCWNCKCkKEn/b8qXxw/j2PRtXOCTktpqlG3UvUo/9yB1h\ncgwFIBC+8Gi/XQU8S5rknBcqJbFOpQmy0slI9wWHgT2HFW7J1M8Sgr8HvgFK\nWkArejtkAs+/UnvhhOvCuYB8mu+P0VlLhWB/NUegwR5lA49WjRnkNWs88cr0\nPGe0dRCvyD2TOtVyQH6EEaVKrLUMACKsA7ExjLyEyeoKvMGEBkPf/IjYnQOk\nvXIBfNe2cZzpPf1l+K1BlerGPJCo3PJaIqVIyyoRHCGMsqnw00K70DvryXbG\nY+gvmssiz2m/kP2n47jkn4c7XziYT7yD8ccBo4jR0SjkhvENHRQuWSrO+kqA\nyVFc/3faOQAyV924dnhAHZplAFcQgpPIyzmHiF82ByNPV3R58wRip3GLeXas\nkpPm/PbDt4ud+d3tcMXWsbPyHZiuF01n8IK4vtbBn8SYRS2OQJ5yQhnIzYNo\nL8U5K547z3PljtggJwPGEBghsdKCBk3uZ1l5bm+UKQq4tNHTqF8nlrvRJ5G7\n3K0GxyJeN9P+SEwo1PnuzuaFHv1eBhg8qTP52hx47XYhvCsRpWfuASUSPDyf\nuAZf\r\n=Chgn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/button":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/icon-button":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.ba78e8724.0_1639606481341_0.5528239450560328","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/snackbar","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c70b9a863119562003dff22aa13ef5dc6cd125c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.e3e073c00.0.tgz","fileCount":39,"integrity":"sha512-NF+gGJOlDzT9I4TzbEHM8bq2EAOlqQChuk8r/JHPApgide6RvHED9LjMa6fteF3d52+5vRHqF19GNxZ+Yl2Uuw==","signatures":[{"sig":"MEYCIQCRMhXWT5PHsjqLj5v7dIq0/oGWGaYD53Jvf+Iv61JW7gIhAPlQJUTuNi8ceFW02N514V7NxA8pkWXJTNUSErKcZ3co","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPGBCRA9TVsSAnZWagAAewgP/3RDMk5pADPh6qK8guQb\nJVltrt6UC/wqNi81Nm0gwDyggjbpJ+QyhwlafTyUv6vz+BxmbLSBKC/HwI2X\nRnxwe4waxaju/3b20C9xl+//mRgiR6KjzVY9keT6QGJmQnASCtp+uwWaUWIE\npZBooKTLD1Px4+FLCpBGxdaIxT4ut0Th7zWMTZLlY5ulCLXwFZANi0lSt6U9\nLgMGIVs2iFblaa2wlqBPTWUUaK8j98B2OlIy1qIKLytt1QJl4+jPCoes0OiB\nnXzYb5HlzEyQhl+5l2ffarFtaJFzkbi1ZPkqSTDnnKjarqMk2SAXeMd3jysw\nXKHSGiRElMATa9Pj6wo1E7apFNQK3uJ1WPU4jwV+C634Bzd+RaZeYd65Z5xA\nOsi6E+k7X/pzRSAa5C0wjvAJWBdvb2nufcwJ+Fvy5jaCGIap0LfzhhAgO6lm\nGJmKCnRYWn8GSleIC6J5LgZ5+juBZshL9O6N8wLaAeUmC4tpWuOb1/6mV5vy\n2Yn7PMrfVWEYYmQ40ABgwh61qjzufqrFxhA8qHnHjiFjfVhpKsSMM4AumLPG\nfBIA4y0FwGtKMjXJFREB7yb79tuRwZJNhkIE3z7sO3lxS/H9xg5af43aUw94\nzX0po3eoeH/SKwSKXaFcBKX0W2o/sLwBm/lU2Mlzv0REyLRgwZ707K3BxRV/\nuoqE\r\n=vwqL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/button":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/icon-button":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.e3e073c00.0_1640034689423_0.5243433596103144","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/snackbar","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86d2903e7d157c240de8162ae5a3e615895708f0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.3366a71d7.0.tgz","fileCount":39,"integrity":"sha512-sDStOJcoA7FjGIeUlkY6dL0WEqbQa0XXQUcchKSiVN7nGi5L8Ybb/OtIouvo0dhalxk87NZUrkeu55zrE+Ld/w==","signatures":[{"sig":"MEYCIQDKVG2rRiMJbU/iXHT6vJaOuzHerKwMFcyevvNeVPd4iQIhAMb1pQLq1ahyXuOoPisWCgVsXwrGpvBq3p/Ov1e0Tpyl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxtDCRA9TVsSAnZWagAAcV4P/0rOZLoPSOK5MrbPKnXn\niRXq1DWG+HRFhxzgfn+lOZ/sCPp6bO7VzPvoBRFnAY4xBTScxeOh5gedre1p\ngmYADMIlxDswDBGymWfCtBptqaWI651guNl0QVrGNRDIOtc3q0znvQrPSaBp\n9bgJ1gCyG8zttfxD7Qz4vBsy+tp3pdEES/+/DV020YfAFYKwlKCoJfuT9AXo\nnjNRfhkuah/paj56//RarA9mFb0mWQs5H7HaRiRKdl5XwMtI8FH0Jiziqwk+\n+tEqm5+e6OHIIozuE8g/eXunbYmtu9ar3rRvWMemqAXKawma9lusVylEx3Bb\nSuPsx9hljIjQILjz6g5Y1o3mk2tMDEw3yEVZbLUnvhMQLdxGs8h9KTOm8V7P\nhPrlh53DO3e9dNFv4/4S7EdULzalfVRS3xEOoKmq1RrN56o8S6bnXQOMh+HF\nheFKE21k47jLCnY/BKRa/Nw41VjkEXlMHRWTUbP9JaUsJRJBeCkB7usbkhq+\nIUxboWpKrk0FrOMvPFFO7fVwnilpIj8MpEthY9L8bnLUQL0+r98ggjNeAYbu\np4hRcBUN0eI0Jwnjn7cTIjpqK0OBsq09QXxQejnkgWSGvF/WS8uLqQw0rVOd\n+wF3EjCyj6a0Q2N8KJc/jkXicje/1UPjm2/WFfpDT6BoFqh+0o5+pgz+IhJb\nRpX8\r\n=o/je\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/button":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/icon-button":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.3366a71d7.0_1640176451105_0.3164696610533162","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/snackbar","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85a6ad431b163c9c034bf93774da1fd11963cab2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.c047f7c19.0.tgz","fileCount":39,"integrity":"sha512-ZtO2l5gqTvknc+Orc+MbG6/vlnIgsLm8WFbswfhgPidltNNMZsCYARKZCcLgWc5B2A6T0JSx3f1CAQgD67dvVQ==","signatures":[{"sig":"MEYCIQCPOFppEDs7vhFqvi4BxLJ25WpfKctf52L8bJalWFLa2QIhAIcqnPwnrYpgVezIeWSA7XIftswh7MCJSEyHRvJwjM8b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cuuCRA9TVsSAnZWagAA+TcP/1Qups7NABA/JtWhRLPn\n7DtNCMGyVuSCQwi/GKhZ7fSaJUekQu4bv6yyE1ymMva5FlZ0sX/CgnB/dQus\nbxjaTHGMvzCZf3Dosp+IIOTUDmJ60i5Lk4AkrcmEiHVayQAO+zjKiaAda/gc\nzlD0V/d95ZlTepFbHC36R01jo06HDiH4k5EhNw44NaOmKm6PXb5+b+2nXQPr\nd7HdcZsOgaY1UsYwnmA/+cVPtTA8B5PnissWGEkzyfVaKzWnQhAa/HsbPCb8\n66g3moh8Wh31kYk9w2jd9SEy52N7rWPSAcYC/4jpjmtWxnCPK8Au6eNtCnmW\nqZ1WkJ8LNpuNIxlC1wJjrqf9zbQdprokZT/qWPOkoWwUq8skr6uy+86jQdDr\n2SYUmS5qOTGzcJQnQ3s6hKKkg24TbwNJmYWS/h+Am1HeCd/eriarpn9k42n8\nDFDRpWKH+ORIPWu8lxdbWGgIylYU5TZoEbGOfwn+mvLgjJQzvOvDICl0Uqwj\nUcTznWBmKTjdtoCpBQrw5gWUOlFvT8044zllAvyO8ZmWbiNL26uKfEq9dW3H\n/6vzdGvludxCnMUpFieBnIi70b642o2NDbHAjmAXmsq+KsiuIhpp6KqlmwOA\n6fCvXtFv4aYyO6VoWRPUnYWTL2gjWZTxuG9pk3ESuz0rj5PsFVtBaB88h6x/\n/HGB\r\n=DDrB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/button":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/icon-button":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.c047f7c19.0_1641401262041_0.7280353788828413","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/snackbar","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d260bc8001bfd951fe362742b3ca0c2eb4589e7f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.05db65ec0.0.tgz","fileCount":39,"integrity":"sha512-/+/USjcEnphp2VVXxbTctiywRlwJw4EqkQ7VTLpf54NpjszH2IOOb2cHhmwSP3As+CurLFV64CM8vl1/ki7c/w==","signatures":[{"sig":"MEQCIAvM1WIKt8D0TVglDG7L/ptrFx5et/d1jlj8fCCMjPESAiAQuJ3kc/dX7ilqjcBHSQu/Wfo6ZS9/92lphYjTO6WDwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yPMCRA9TVsSAnZWagAA0nUP/jCrYWvwX3eYclj4MsVY\nEGZ0mizk9tH39xpYoHCO8Jnk0qD9daPSAPswNQ46GX+SrpD8kysl6DnQdlqi\ntR7ncCnBlFPq1hTbiEX4+MyQ7ywBWY/7V4/ThpfgGQSBSk174dUoGmWAnksf\nzbjjB9WiI3+xX8c4RSY/7DLpqwiH+iKHcgZzK9ZvFPbhy6mw/7pF/aJiqddd\nQtEv37oqCMTP+i4V/aJTdFMz1wNq1b00UolQFjq9zztRvVFLha3bFCP891Tb\nDZ7pdbYxfd3CZ1kUeVt/8TiH8AjyiAb6H4fJCDRuGJvICc754lTAWTN9Qy6x\nPl/ue8ThE5datqFcJ2hBdQCA6uxNNshVyKAC8W3zgqa1aGRraMSM+ijSTkVO\ncqQQ65P3jsI9RGi3lAq88wMumvUzwDEb75dCY04F4LZIrYVZjGg+6k1bt3xT\nmIzbsEUrh/phW3SLqsP0tg9e8pE8RbH//+A+p3Tqmb5X+299S3zIlcEOszEC\n8TS1b18O97TvWCzOqiGCmSX+cHi1/+rYxMybraCBeJWEU3IOfDPOcn+q/OAs\nOM/QeLEmIl9syLF9wR1BBAB/uwKkU8/9YrXL6W3Qsu2HyE9z30AlTvolKbhn\ndSl1Cg0M8g0g7hOurfJs0kcDCifdGpLOtu9ZhF+LxyweqMfid0EG+VOBiEjW\nnzc2\r\n=pYAo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/button":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/icon-button":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.05db65ec0.0_1641489356021_0.1874479700889229","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/snackbar","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60d9d9a084cd1117e180fd7f1f30a9a62cd4bed1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":39,"integrity":"sha512-2OSdYCEBYS3oSaoaapWAN23/cKEJ3Hxa+gAqyqKL2lTexJBxwm4MEc6nbNSpszf2b5k1YpBAJd3WkNkI0Z3YQg==","signatures":[{"sig":"MEYCIQDYk9W0Cx7pObgfOCN/av59kGakPJ+9bPELx5ycAy8v4wIhAIt7yG632gK9h84pB9cOup6fitRwuPpXl+17nJ8VWONS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQ0CRA9TVsSAnZWagAAQDEP/23A8s5V6UwIVwgAMB1d\nvFKUEEh9zy9spou9CFraig8LKaFXemiQ4wFpHTuz2K7iNohkJhVH3GbFj0t3\ncy1QKag0mhudfD2tbJRKDhJkqSa8KZ6clsIptQ0tVkOovG5trK9bz3JOzKYH\nnTdFkHWGQgYaofoGlGu5hPIolYYN8BcTwsAw0vUV7YCaSSdKeozikV1mD2ec\nWDcpRct6KnoIAsODyknhSHwnz5lwZxkjGLjunls5+CAVwbS0q7JpO7b1abHA\nkg1qJA4nS+eIvNDJiNwWQQKQL875BEuKHOXmFBjWUcDGoU/PtMWCeY/cxojf\npDi7rt9teZB9j/4AwW5fh5vZgY+phb+H/852krDfBm4chM8wVAECZGdMATs+\ngTVIUGqwlI6znFRapw3sl0Gs6JedvY0uMCCVRmr62GH0xpY03Rcxgg1EXzws\nE+2w10sBQ7aBFM6Xwn3v3LsCtE4OWgBw/kdxfv3rfm7R08Hge7m2H2u5RBcM\nCJbHcR3bDL/M3nhiC/q8HTLlknLwknm5bfk2NGC7pHJQqGKc+H+DrkQgPXfI\nIcO0327LjsvyB/XKEFiTLs33PQW44Kkw8Qh/mEIhrJsmcIg5xLM9NG8j7DUL\n2cgYZrDi/7g8ZgHoAxGPGKU3FxWr+M+r18gq7C2UbDrbiKFDDPUCT6odNilT\neMRB\r\n=zgHw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/button":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/icon-button":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.6ca8b8f85.0_1641571380751_0.17654311649988053","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/snackbar","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e74cda2a2368cff48c58df5d5f0496c26cfa2adb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.173ee7a7a.0.tgz","fileCount":39,"integrity":"sha512-y7YP32eA9wYl/QHfNe5H88qVqktgoOQO/XPgr8+ofJkKXBScYzDNpugSiYPuVRQdqJnK2rmDyHOccBd27H+z6g==","signatures":[{"sig":"MEQCIGBUQ1wAF9F1CRUIkqJDF09Z+fzFTkqfL97U/xUvQpGQAiBV3PkoFx5q5zDsbOoUB+ciQR9K02UC8RMoUGaTn1n0+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GUmCRA9TVsSAnZWagAAZVEQAJ4YkwyjyKR7YV+2iveM\n88g63CbcGin3RbetDBar+qCH4/88Eiz7rIwy0hbsHa0oW6iR7LUXzF8wGKD/\n9j+iwoLaCKMHmvpgu6+5i14CcJvFqdCbA76KNMy2ewWugXxqJqz9v4Zd4ZLv\nsv/H5ICgLugZJdspzondDVWqqMR/6/EwLIhXz9+w+Q88MedqqV+Liq31oaoX\nXDWixh6XAYLxmFG8Y4mpf+M+VF54FnGtb0xnFxaFe/ZBK83UR8iMXc7W+4j1\n5oNaF7eDSwzpu3rVct+gREprGaHJeTrk1QAXv0kvXz1AmtDWkq1UZDgMG7vI\n7RFcqEASGZafo7ixYy9cH7wwjyYo/BifSRp2mrxTy4UsGiUAd3zvEuSMTpP4\nq+0lXRj3tUiLbfufvmYWSgnVD+ceQR/hXW1dFVhv4w8HyKIyS/y+qPLaMYWe\n/R06QSR6SKdod8885/ZPF5K+km+6HRrg+MfVV6I2lPqhmpS+3B3eJJ5ECqq/\na3QSmiMIj49TpgRljWkx7GhiVDV+5sG9vyAxtuWqqOh7LLxoBqLnzZtl350V\nSCmDQerDqS+xo6+LHZTH6yzsLlAve/z00fWj2yd1oFOQbS536wnhqb3znRPj\nMJA5QGpqUpiiQwLX1+6Z5L4ofLQgl5AJGwSP/RlwuWZ6A1pP4HGma/yOMoja\n1EuW\r\n=ZoHN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/button":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/icon-button":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.173ee7a7a.0_1641833765987_0.6409701604470321","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/snackbar","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd129d9cd41308ee60614dde5863a4a17f80f60e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.b704e4dfc.0.tgz","fileCount":39,"integrity":"sha512-V1lS0ymZwDf4JQaUleGMFF26ReNjguicIgdN/AbnIb1Xjph58MEswFas2/HTIncgGiYBdWp2vh+n5nRAswsUGw==","signatures":[{"sig":"MEUCIQCWpkV6WtS3i58gMSPQPBu7u5kRDxbnxSFJdlMK0BePWQIgDQVM176ZzU9UCUdLY2vIDPAm+kWlCDhtFUHoyB2Q3jE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HxBCRA9TVsSAnZWagAAzHkP/jO8HLySCfNKfYsedUJi\nsbqqLW92tekz6UQsR4HZH0fNsuWSzI/1WiTVBAJJaRWwPEws5cmxUbD+rHnl\n9Rq1h5K9Ct4EBtPt7zusm4y0ToXB8EoidUw+WySJdICyzqGhtyey9jV3PkjH\n0tMh68atS/gouhjUnjUSgZ00CXHBIz57Uvgzx3nQqYawYfPiBbhbR+lkeyk4\ny9ElvNAXd8Tm2iDA1aNOyFKY/BgreY+RP52jQNTGaAxJK8nWxaQ2MaTtSAsg\nbBAkys94G8R81LnukD6KvP/YKZErVzzkbN7OorcBCmXwlvAf5dQuwMU/wG63\ngycBArBvlSJpcEEc+kKqRpHTEF+SYxsmcnZWDyT2ionnfidwMBISKIaWMD5i\nw7wkV85eSxccHDbvAltACzUwD5B9K8aZCGRm29m01zUsrjgVa402/nHqYigC\nLiZrxN26zU+TP26oJBbhuN6XW9YTi9OTua83h2Jo53xaaQiKkObd8kXxmch7\nPOe9UNNh7Pz0e3g7RKXf3aLSzHUt3EXs4URPQ8SdHR1Zr+irh3DAjsN3E2pv\n4P2bG1tLFbj649xuZlaWmEdj8P7CHHccP9+RSw1BP+Vdm8fKQHghERQmBvYU\nWenS15LKoyXM9xNJlKkkJynnr0Ut9KzczrutVg/C4If3kACgCh1NT98vi5lA\noyf8\r\n=EFqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/button":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/icon-button":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.b704e4dfc.0_1641839681164_0.7716706870971088","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/snackbar","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f47485494397a3d5a1fef6a7f32860653f8229bb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.c14e977ee.0.tgz","fileCount":39,"integrity":"sha512-1RtsqBChlFv08zDnA5aQ8NPw4rpHZsS1BIZ11vwPHkTJhrhjY1EwzrgQioODUM+vYGb2D4ki1JQMxTfPWR3lYw==","signatures":[{"sig":"MEUCIQCpP4l7DQTCbjXHy6NyagFU72VDzotcy3qY9YeCsxy/CQIgA4Nbhipk2k3kjrm5l2+JdKE9CTtMLegvxNJqgI7Umkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ad+CRA9TVsSAnZWagAA1y0P/jW4G3IgbgqPdRkChs9x\n+PpOBQuWZlYEcgmrcwjQeQECxjUgAFxJISeBNkd8zQHg7/gYcPV7+cCUnrGq\nHEWt0AKwdL1Ftap4BF4hePOIAL54ynfv6vPmIbaMqaH9i+5G1GtJz4zAOb29\nqDCv6kJ0vNarIhHivrjHsWLjzjtQPYvmkgES4OJgoe9H7iyktx9Tsl0PAWjW\nXOpVHYKPKK2sE41VKv0NHsBGHhijXI8flPRT3KqoldxbUPqOfdxWKRZAvfqR\n/9qQl+IKZKTn7kE0LYP4+nHXLk2kZFwibvVikIh2t3KqJYf4VML8til4LsJT\nBNuhW7wEnJoZ8ox/Qxa69FEgXkHIQFXcQ3dzB/RsVVzS56XuX50g3+3VBWf8\n4iQRtI+8sGWFCfaQm3H44ap8iySVSiUu1Kf46ZsPAObLbpNg20nQwpVKTmDH\ngH5GP33t9+FCh7OxSLk/VhShwRXC5G4F8I2MHi1oaTyX+lDMmJxIYYdtCUx5\npAP+gkIJn+SR0uvdPUMFW1HV7MNh/EQi39t7x4JqhUnpGj/pcYJdAxXv9BYP\n0Z57a7yAkMY07IMmP++GS9WW6GTddHb/237QXQ1olTqVGdkyeWJJMFG1VmgD\nQXULaFaIlWG0/O3mq5PgypX22DVjHVQfY6Tl+uNjCKWEAc15BbQE4iDcL+RV\n83lt\r\n=Zs52\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/button":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/icon-button":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.c14e977ee.0_1641916286003_0.9936184711156237","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/snackbar","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d98feeb9459b983f506b9135aa70368b1c29c03","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.b094eaa4e.0.tgz","fileCount":39,"integrity":"sha512-xXXl/XJRBWDucbEjZ9D4edoFQOhgfxkJmSaujx8MtcUA1ntsRylfLtR97CTjLx35b9/o36valyPrASkj9B6CWw==","signatures":[{"sig":"MEUCIAbjmV9RolCO4MdUiqX3WMY7ulwA1jOBPrxdl9LgbpTQAiEAwkJUZoMzL3oveZ8aE5dRQsUoHh5ZM6n9jeDpk5dB1DE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cR7CRA9TVsSAnZWagAAHlwQAJttDzSBXvx2nwOyp2HX\nazHRk0RQNpqdRCxoHKzcyp8hT+Dmq+Sh2KWyJaxJ74hhThWYREJYt/p3SA4e\nO5Q5WTv4KkxzmP+9DYbmysu2UxgTR3/7lQVdFQjswvuPzQO3/SDKfRf2xwfN\nOMm2pa/hQr4IWttHuXCoEBBQABDw0apiJgX+RW6zjBE0Qmha2rzsiRb3UZA1\nPBioH9KBeOKgcA2+ym635hfPsCZDRt4k97cbRBzPyOGwzHk4rcnox4ksxcKu\nU7GPUNk78CAIvKyAB+fmZ4Ao5ob5+xj5GIhOjxqqSD1AHPEOxwETNmtS2hlb\n71GU6TkKPpXoBP87elG5YmP1zvF+Y+EOUxG+X0KFDH0zxORM0zGgxm6huhl4\nRmuqF6Lf4MxjIy7jXIZzJPGkZTKE6j3Ilk871bC81hawSY47FwMA/L5YzKkK\nCI8EgTgDGSRxW023g1V5QBA0icX4Ao/Jtwqk+VrHV6d+2NiN4dfqvXMbKWUZ\nrHQvgv9Meut/yalSQb5RlluAPg2xy9RD2243+lqEWUOYS7V3QhWARMJqHMIA\nIzbS1sd2skdkG83DoF4JwUzeLo8u7RVbEJFfDmP4+sMlNan9OSLKWkoQX14/\nF+XZ7VgnkucINkQ/xUiQoVoghSasUQBdHnIczgLReR/D6epVHQbqV6sV7J64\nLfEy\r\n=C/lH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/button":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/icon-button":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.b094eaa4e.0_1642185851616_0.8176024021022426","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/snackbar","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.390220e42.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eea69db6604caeb00a30c9c5a043245afbe1f9c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.390220e42.0.tgz","fileCount":39,"integrity":"sha512-iG8PjuLIgIsU7CBNuhs4uarxCHzIYZWevQeU3xoD+21g/Nc8a6pxazdqfYnMt53eA3arfv/QzsuQWaTMk4aC5A==","signatures":[{"sig":"MEQCIG9rR3/pQt/qr6uaPGD7oqbuUVf6cim2NKDf9s6XAyGSAiBjLxnc756zmqXI+pVTPQSuetCZApYw1jFASw4+i7c8Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z3ACRA9TVsSAnZWagAAadYP/RpHy+Vte0FRoLEPGAxL\ncuAg6XtIgtAX9ptLffyzOSyvLTm1XELyaYlpJEXkQgfN8Ak0kLi0YLlnys2s\nLZ/yPfikf/a1ObfL8AIuqZcaTvCkkgl2Q//BcOr+mjsJnNbqfzITtbC2g4w0\nZ6yXKdFxh1cz4/wlygalv266/spHaW/hSa4F1WZ2Ax4965p2Ki4KkIq5Ej4/\nmW3ocaiH7NrzEBzj7u0JyusX5d3o4Cy+LHCpu5Ikpd18hH6CpyybZhBCsr2h\n5QNSGzmuX8E2FJPhG9DUcqRYJ++HvqWyFInu4cSsKywwk0Y8fvKe88J9lpJz\nUh/wtHfyGErV0lVuIzHTyqOoZL49l9PDy4D9wc61xuGZb2DStvVDAiBBWweE\nyU0CvzLjeh91TNf6G4OqiijtbT28vhd3YOSSwb74tgN8vSMYnTX09hrK+h/E\nBebI2YrJlRRgLcSS3hPT3J8z6AmdbXPHb1VbmQrrQPdDM7z+ACQf88z/oBc7\nGQ0cTHAdld3x2+PAai1VUV1TK5wAIx3SB0Gjx3xfClwT6QEQh6ovmwsYfYaq\nWjaTN+1EAtNH9EYOx9qcHF3bmIdA2P8ZUo5GkuA7L1u8fjDW62RjWxGCkGBj\nRXPUrOkMSc7EjTvteRZEwqvrO+I+yXIqf4Heey8LLS9t8jeSkMTOHqEppHVI\n/vJM\r\n=myve\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/button":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/icon-button":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.390220e42.0_1642438080019_0.7120197647872841","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/snackbar","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f69dec510122bf3cecd0447597d39960ba1a775","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.4b5391f8b.0.tgz","fileCount":39,"integrity":"sha512-7oQvZYLf7aW0OOoluCdG85jJr/x+8iFTUXYxr6ROvzDFR/0YsUbXPXQrUPijsehlmM/zf4X96cxQ/S4NkQR1RQ==","signatures":[{"sig":"MEUCIG2vIVywdk35tUyWHq1tfKMJzpTggwga6AJyKGQSGhRjAiEA1la4fCMBSS3JJV4GJxfSS+Qv3LkAt5XR8lITO4NzgCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KS0CRA9TVsSAnZWagAAuT4QAJ22YAwACdYgrDCVvQcp\niyRkvkzy0/9arrVZcwJFGQ8FY67x2xPt6RBidF36hf9m1eGlZiFnk7LfY9Z5\n58H33ZoLnXxqk68tguKfJD50sRqqSNeGcD78bLIpM+GnaBHlNY4OANJ/pTWH\ngNmuQ4ivqLTaKG1i8e68oewmDzVYqhC6HdrYa6DkgZnYar4yr/WLG82misQY\nNV+0uGBXoydYUU470NR8RQOyazejZ7fQT9bij85h+3UVrhYa47KCpgTVphfE\n0Izczl/4q04F0ftTcEgfMUzxMZtpO+zeNFt1aAtx35JcoZfF/V5GNyANQ+2h\nXccFBNuu6A8iPJ3YM344/OMTzfTapgVi6xfHmCJISXmboEYG7Xw4x7r/d+Hp\nGN/sNmz7mKK6iwhAnFB+1tWNNLRwjE8t0H9SVdX4m3o8zivGlPI++8S862Bp\na3lERUk2HT6VN7TjqM3tEjlL3mDHB6+DVYDOslkZQA6ywRrnrAFljEyL1aeX\nZ9OlzucyNTk5uHCgv5daRei7uDTfpjTa3D92EjiNd4z44mpMf9JMsoxrfzvO\nKqux0FGQQ0nb5SDxYnNEjTJqE/Pea2Dad4peVv02EGqSTdK44YnL9idIUqFh\nWRIAi8g6ct2FwzraDErOC2Fd8EZdxr0vfMDEnrcair1HD6WlaLnLGRpb7VNw\nliZQ\r\n=uN0A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/button":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/icon-button":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.4b5391f8b.0_1642636468711_0.7430668654907253","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/snackbar","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"612d27daeadbcc21b6b5e533904a60217fcba5c8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.cef6bc623.0.tgz","fileCount":39,"integrity":"sha512-0pTKRKBrrUMdFZdpSt4M8Nu/FMXnZmkWmhgapxAYTylZAoYbXJNrHOvILcqysbHNpbostQT0a0jfh4naNM7H6w==","signatures":[{"sig":"MEUCIAYnqXB4rDILvWYQDPXV2DTUIGAmHdrtS8JCOPJl7G/JAiEAtyVAC0DwyJFIsPEvX6+XSkfZ2m7qTInRXy9PsccujjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KqCCRA9TVsSAnZWagAANTkQAJRUG7sH1pQGfTPKxglC\nCEdCgYSnolJnMl3HRHqN3gQKLFPWLmw79eZNu3CkgaJ6eeCdN6wGVKZ2htjx\nIYEU1A1fyqOvQ+BMOmaBGgpPL73BleXbEOqaraWDwbfeKObQcx5KHBMVbokZ\npei3csFGgfB1Ho8ZAQz3OEGRqvY6w7zESE6jA26DeDEjcr5kCOqIHX5easus\nvAGNXye8apt9t4xaPlPG6/R5nOCLUYgAA4SOyiRDjtBzvExBYarxEL/QjrP0\n1u7EmDsrecJLwYPZDOHmz6y7uuJAyTwtdCMmWpz9IrIffcWSIL48RTz5u5oD\nQ7Ew04jWfxUSBM/5TCL02HJw55Ag3nBKI0TNMl2bM0nhXxqeCC7C9dxEXmpn\nImeOgChpJPurQNBqvxVUVGdjeQmy3xT8rJN4ufyBhvRy+LU2hJKgdnZ5b0BR\nzKveskN9DNTGaeXzZUQG/wp2JU/8mPSX1wt45ERki4TRz03bF65/AhhGwUxN\nJ+aiBt10KqmDwxssxP1kTkYo7iFU5rOlqY3Ureo87IcM7qAuJq2uisDR/sRX\n7r59Ibx5hSGyjjg3BzaPoX1KM8FuZwPVc+aDq90cD3sLQHyPmVxeYe7EI0DP\nUixHgvH1eJ8TSN3hbHSMb3rxME8wy1gALoZNonw0Dx50viq32Fv6hYMGwgKS\nTxZr\r\n=d8jl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/button":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/icon-button":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.cef6bc623.0_1642637954308_0.8209506941755902","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/snackbar","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.0379179c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0edd5cc1ddfdbeef8abb9ff4117eda5dc754e5bf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.0379179c4.0.tgz","fileCount":39,"integrity":"sha512-Yi/O28oGnALdxbZ5yyMjFl70UetIUmsi532RgIkIrVQ6t5grrwb9GdZbB07JZdHoFqmqs9ACR+Ha09MXFToRmA==","signatures":[{"sig":"MEYCIQC8pFvtjQ6sHndcLa0hotLBQkhE3v0i5ZUtNsmxJDWL/wIhALmc2Y6Pl1ACOvBYBuAxVjmoYSDA7AoBnyDq1C3NQTvm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bBLCRA9TVsSAnZWagAAQzMP/ieLmYnojgNfjHi3JxQ5\nMELhXId4blkECK7OBQSdvHvGAYL5+8MiGw+XjBc+qrJmDM0i4CMjhX8QCer0\nzMzA1Wjgjwvmew2EfAWXwMDnPcKNNyv4BFW/sia8WtF+Z6+SWuhNFNgrEmA/\nZZmYJWsu8REyDCvXFKnft+ODFkijr6xr9wizATZvX6jubsxIbYoc5VBL25EA\nTvfxD7LEVqe0VEbVGh5RyZAxz5Lg88mg8SXhwxF1unyb0ks7vOIgGeCxvYvf\niJ0JqsZaOQmitQj+hHtbUl98/UuvFpQPZnLufz4RjQItP8i275BeRP2zlhku\nEWYp3cHGaeChpqP5f+iwmMLL1XBzIfJb93pBAzWReu0vVAkWmkq4RbAFGoSp\nc0GfMJ9FcuUykSUcFfGUhwsopV2g70ZOYjAezl9C4PSa62Og0twEU1R5dNJK\n5aR99Wq/ZTr60+qx3JHQVrblevFr4mwQXx0mYe/VhUfLIau0CGO9slKQo4bg\nt1Pl/LHNJsUg1AVSBQQnMeKLoUzchPSiLRCX4iQ50U3RHe53qoef8/Dil/rh\nFrQiOxCdPEQsV9b/bpRQMeQI31h9Rr2MZok4rR72tsfry5rH0tnV6ej0K0vs\nt4gQG7csy0UuTVrCyexCV/uq/GLUGjBxMB+5F1djbkbsPaKmTVRaU56QH/ab\nb9Pu\r\n=AmSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/button":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/icon-button":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.0379179c4.0_1642704971705_0.23353420847605788","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/snackbar","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bb65808c744fd5f220b21c6230c0b235738a2d9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.e62f3dabf.0.tgz","fileCount":39,"integrity":"sha512-/J4eP7J8kRyqdT3sGaSPJESSDiAJoxXxgRvgLJJrCJfEc5GCHyx8x/qyYIlXf5AeCAT1wwNqadsoNirqUygZYA==","signatures":[{"sig":"MEUCIBDJaZLinr3SCAs6NL/cga2pB2svWESsuvIWnrgd3tt7AiEA3M1Kd3TQDGy0VtXj1sWNBKNujXpOlrq2cMLYgAL4aLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zwiCRA9TVsSAnZWagAA0uIP/1h/FbLhyOI2sUnTd3CP\n8MqDEFXfOER5YSTQh7brNA8YF/MufioLhNxC6msB8Xl5UGVDydjswtbAtkJJ\npIY2cuN/U5mGRALhumwiYt4BG7yv9TOBZj4/2h2zbAB7PS3445OOy2HoOeEZ\nEvWwYxn7lzHUMgerSTBOjvf2mbWPipft6gizJ+OKmL16MSaJhKt66/PBq53y\nGLrYjxrB6d6FOEAEup33jr2QdlRd2qnp4QdZH9r/0X1yix06pSLLOhAAq0ZP\ngZVIg9R5RDF9XPViqaLtY8+lyKW7C3jggHrQ7lxeutav9TM/Wj3OWLk0pqt9\n6Af91V7BDfw9I0AH7c0kU1N4nYBaux0LaS6WS4T0K7v4++X8RTgSax1aRg6b\nrC/FYCph9CEk3+r6wMW5mIljuus5a0laOoD4/lHZOE8uK+jpKAYUEz1Ozot2\nxvUm8mAeigByaJ8o1jdK6jzNVpXIXCFotb9rhpneFpv+d9n9itTjtHjqByN/\nEQQ10f0NIcGzCir5wHJdbSbB5YSdurQXCvgee2au+Sv3CFmTL4kvL3rlY76D\nlEgbGnkN5hOLjBYspAuvTrncaVxfNjS0z2wruVl8wCE3gNYiOc18VNPP1q6o\n32tRMYT9RnNIJFvAdTiECe01BBhX5EuxXQhbNAwaGC+0/GnqUMFvZU8J7I13\nDubD\r\n=Yop0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/button":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/icon-button":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.e62f3dabf.0_1642806306706_0.796519254216226","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/snackbar","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9e0793adce520863851ddbcf365115095648368","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.3e20c1de8.0.tgz","fileCount":39,"integrity":"sha512-4sLHP4HgQ6H+iDAjnyrSTDeihzBb60dLe6UbOjFYCpNhH6J8Tq5EnLzVSwa5c1A3LU4DEeW2hruYatrIhPUjWw==","signatures":[{"sig":"MEUCIQCDUu8ogWaqFZ9/O4X5r/Wer1Xphfpg/D5bYC1b7FQbXAIgIQMQx8m2+hQcEXXphV1n9nrlaRxetw3rpCgu3JLFb5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BhdCRA9TVsSAnZWagAAulMP/RftY1Reu2ryPkluvFVj\nqoiBZhEni/jxAkNKJlcYdnGA4q1Jpwx0hcsv5jzgQoxpBr3IW24FuSgdp1FW\ng/vecXtJflqPoDIuS88FjMDKbxll3QwMWsbrwcWPv8l7EPhV9Q6yygteQiSE\n/5lGA5dL//eb/SNOYtDZA8UCFUZbp7UkUMfuY9QqCTz0L0e7NYgAr0Nw1yrF\nrZEaKHVQ4zMxIsfScnjf/ecNB0kUD1UgJa/bnn2+poI4WDB9ezE63DeXkben\nm2Icc1fE+/9VqEjGf+DLTO7LHR5o4Acu6xk9kDU8ble6CzkV9gs0o8azFkZO\nasqI9oSqBhNJLnvvXj4lxY6gEh1xdR5v/wBpHXAHcxQIzdbpATFgHzidPxBM\nuUb+7nL0++w1oOqG1in7HnxF1vbaG7/Sj/o7XJ/my2xStY/Iy0wafcB1xyJa\nSIvZMciNCM7bA0pp4saMDcdtjmzehnsR9Z7QYz9haL6guxGKEI3bYQSsMnUL\n2jLzssUkk8O7d4h1HWrcEShyLglRpSwIHWhSCsf6aljIXb8cy3VCgAkH8Fa8\nON1/lEO4+ASSqqbnZAxJkL1vvxEwCee/3buU65zd2UV//ej0eFVouPQpLz7R\n6/jYwOvFkFukxntRSZIk1KwiLcViLmi8yVreAqmtwF47HuPg3f7rY88yvhUz\nCgyN\r\n=Ex6/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/button":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/icon-button":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.3e20c1de8.0_1643124828983_0.08289651336985737","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/snackbar","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0bc70243ec197cad3b4a0680a70d487c3a52c31","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.9f9d928b2.0.tgz","fileCount":39,"integrity":"sha512-64VbQU15Hd8mJ071GuToTXQiAsqVgE4HAsL7ZqfPXyRKE62XskKc5LOqr5N2+8qg7u0lnuSpqHRbe9es6hsPhA==","signatures":[{"sig":"MEUCIBrQ1Eo17/dJqn4+lPDJSkz52OEU13SOLVvKZPuVFKI8AiEAtpyVGHaTvSMri5kt97bYi6aIZ4UZFiJqNQbJvqHrq7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uEdCRA9TVsSAnZWagAAhm8P/iPShA/T2R1x2JeXcbxT\ngNoXvXRYD6CZBlKBuZJIgJ/8XrCvSlRTPydbIS11+Cf5msERISFbwKUS4AD5\nzt/mZlpBI4//ftvVK8LhYRE7AppDGo2maNgxaOX0KtuuZfWAf8TJIUgjUCsh\nxmpBJwAkDa/DXKjoUT9qVtPOePEWHWAKDMUNldvMHD61OC7HRh1ZPjhCaBNj\n1tmQyluHTVb2Q8GqFtpS2dS208nBQuiPybvWl8FiGDQcSOzV/nroFtGRMMrY\n+KGBZJWpic6PbuzBsu8ZdPy1xMaRxeFsWUjBB+gRHGLgmnJSbLvMqjRvhLva\n21FBfvUjkeoAHFF7s6owJiBNCuANyf0Xj9ZGTpx+yOMt1jc2a+Xkn9QD96JU\nDIwH9MExfJY/z7ovA9hDAQJ7si9qzvV9vsxMC91q0+H3LrgoydNciCmDjo25\nz0B+vOrfyaZThYKXgygG5oYHT9ry/aZfjxPdv2pseQJblaXIOsnsIQyxIDBP\nkifIvjzWHxBMfgX/Xj1GTDCYsg1fDSc5ARwVtRyxVXdmN3JOJzCDm5rFwDL5\na4O/Px1HXDuNM6jF+shIwvBM1SHF/X/kmZ8nQUhZ2iMB5qhLU8SQLev7E5fg\n5fl71bdr7R0T7mWFUGNOD4RnMSU/jgg5PxRW1ijxgs7iq4p6BFrnLtHoDRPa\n3j5s\r\n=BxKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/button":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/icon-button":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.9f9d928b2.0_1643307293136_0.9132674083428896","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/snackbar","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"613faa1d6dddcce1603a74831c91c1afc0d0cfa2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.a2bcb065c.0.tgz","fileCount":39,"integrity":"sha512-Pn215VfTqSrpoR+my/URkblp/xK4tc7GyTvMJV+UJtEMaf5uIv2J73sQb/9pFh9iXBAG7/0HRXDZ4RfjHJ9ZUg==","signatures":[{"sig":"MEYCIQD90d0gPPwGMG7afNHTf6hhiO+m4YdNKFEQKcn3uHAlKQIhAJXJIgfk/ku9RYMdgUyWMqgGQVOL062FqGhKTi18BPSn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EZYCRA9TVsSAnZWagAAsfIP/A1Oo+23urkQ0DTVEacH\npPvFQe0rgidPXnIXifaC9bYDwALU+oF0BImhd9OymdtAkYv9n9fm/zOFNgGB\nxKQIp+vPpLWHME51/pK66Fx+z9mMu56dT+BAKjIYB/IodmIdQbZj31DZEToo\noZvdoLbcWGNmQiYQmCKzoh+RQh1X8M1a/wHeo0/r2nynqMeLxCmUqtuQA6r4\nYPP4bnMETj5wpyq+aucIHMsmCk4DkDOA5irkHj5kgpDU9+jgr13HO/nZVp+9\ngrVgGms6bBQ+xGGxXQ/2a0gLQt+IJpFnb2TdVba3O3F0iRHdq98QSIMl1dWA\nuH/CD88J+ImTAZN5OizARuuzZa54Fv/TnfBWkNLMh1mJzpO5wvI1lhHD7AS7\nxFMVpRbcLwe64oItCnJuvKdD9nx2w0+PwmZ1DWC8iU0fu25u2FSrPZ9dVnUM\n5M7eui73tHkP7Jqp4Nl50vEXaXKuJe/wBC0ZVbuS1EuhKntOBFQtYxhoNeNc\nzi1NxQIv2ibxXRap72KV9gEHcj/sSDT6ZC78Wc7QXlTvOMekmaqDnu1sg9AY\nTOzYfcY8eTD6e3Sv3Zz8et0FHo8kcTgL/5unl4UkrBqAsbpCDyKkeRTftfq8\ntDPRK32cw9Tn61y0gasNgvb+AcJh+eYiFWbVtscUaHGfaMZhpZo1cscyomh3\nCOls\r\n=d6tS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/button":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/icon-button":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.a2bcb065c.0_1643398744168_0.6977428643297279","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/snackbar","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e207255b59628815c3a840789790c460feb3ae3e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":39,"integrity":"sha512-ZVkIqOJUBqKeCk3WPoIN5w3PUJUBDU8aitRpnlIuy2RNlf9BxlMZK75vRLXjJ9fvx5UBUFPtWrh1aJGQqA61Hg==","signatures":[{"sig":"MEUCIQCw5fMcBma4fhXLbjH+v+GhUbcGQEDHG1Vtmxyn2DEtPwIgHLH04u+XjbI9qt67cVySN7rPf6pZ/vZTRUXrKWyrTwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EdJCRA9TVsSAnZWagAAg+MQAICayt5m35kSwPVZcD1y\n66fssruAQbZ3OlHSvstlPFkU0mKv9TOsEAVsXrx2hzWadjOdzVpG5sH94JVN\nzirwmFdIoMeIJpWoX+5AAIfRoaHCofucMMm/RRxIkrJSUkfs0B8Tbj9ZyN5J\nbBkeYAU62Im64ndnTcL4Sb8O4a+fUuJwSnvhQoi6dsKfFhpmEJ/gXkba5CzX\nmjtemvB7alyrQ6D6FtezEsBmOu62s6p3DKyjz2A0kKM0CCYaeSWY98iFwgcW\neQ60t8DK1/zdHGLGBNH9AKOnPc+Ojkfy9CE6jeuEILUAs7GbW1xTvGN2X7Z5\n0qoSg3QZPim6UPxIrrnaaHFgS4VP84lEcpDC1KMqM1uHdTZAeN+/L+t7Gpb/\nKpNrI7kz84z9rdgroXnFas+2jgYLxzHWehgd2jB7h8s3WR8DhgZzxrY7jBrN\n1VvYbazXg2VunZsZ3GUjMlwqhFn3sfoQvpnm5Hb6aHjvrNaIJyEJqkdk1crD\nwQpgChsGd8VPA7yu15olPdgi/oJu7h41oKEzAUVgkQYF0LqB5Xkv/hVbgjj8\nngTwvOw96n56xGvVFMoQaIVXm5tn4GotMvMFz/PfLEJYetbtB8BBy6o+d0FJ\nfY9jF4JXySv8gLWVGXfzYg1JHPgsYTXKsbs+tIUEo0hjFGnHmL062YnZFNhR\nLDm6\r\n=og6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/button":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/icon-button":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.4e66fb2e1.0_1643398984946_0.9860140091207814","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/snackbar","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eb52ddba56e5bb792a766e0fb0f777f344e037f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.9736ddce9.0.tgz","fileCount":39,"integrity":"sha512-Rcs7gItX5CWxNfz/58utw2AH0Wh3WvGuI7+cvxLMQch7tud3B4jjScOaPX5vxjPbRtAq0XrClyeIR/BT/p3OTg==","signatures":[{"sig":"MEYCIQDbtjt372Zqxw4jQSmpmvnuMVQugBF5PncBdkHQ0tsJnwIhAJE08QSrE32RLxvTojIEIcMyeIW5mvEwZxHr7Fh28lms","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4mCRA9TVsSAnZWagAA3rcP/1XoBQZGmbDxp5m5La7B\no2kEcYyEAf49YHuQv6TX+aXpeNdbdFrO0jC1EAM42Du2NeYoE46/A4n4MKru\nyyicq+BzMN4ejdwmQWTCSziC0tn64v2s4yfSim0E5BWrVFZ6Mg4UwYHFIaec\nTKMwSI0EfaLKj/hlLZedISzBQhBzsjG0Q3Kz/qGLQZRKUbL68b5dp0hcmbvm\npMh16eJYq7C4Ca8J4n8VFZwuBQoszSChvMKg6s9NADnMzP3aA50KbIAFxy0o\noGugHtpqOVhP9PPjSD+lCrzvsET/07xIcvu2pIiK15zt5rgLyOmjCd5laUul\nL9eqt5jeEK2A6VMzAhKIKx01pvyUhlLsFgr1vIakVXhPSvBmtY43g954EAfs\nvY8WykdeXq5iU9MPb1MwyLWLCUiLGlrGJklgli+UFHUDe5jtmc0EeLGzJBm/\nor4l0pfxNrk07Nf0G/ljxRgg0rmzB+rs0JY5dOMDb0KLsRWxCXeSNYpdDuXd\n+M3TpGneiRTP8PoptkhlFjyrshT3HtFZPHCpnaKqsAOuAfM2xdhVt9l8tj8S\nbIjohPDhCXXPYr0oVaxF8W5F+NZAe20u1n1OItGnE3GAoPbCt7ycFziBrW+S\nVHzw9uLfaliRy/lmImV8ia3DjJPUAK81x9gkHeZ/ZrRk/TXY7V8mw8VfdnbL\nC+IT\r\n=F4Yw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/button":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/icon-button":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.9736ddce9.0_1643449893996_0.2621677002222482","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/snackbar","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8b3a07fb7384f937597634f23a5585670d12f3a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":39,"integrity":"sha512-4TQQUdTa+dqyfn3MCIfeL5rzSslUag63kPzcq7frosCxABwa8I9JfVR8NL8bbM+Tutz+fS9GoWX0+QGF6ZZVmw==","signatures":[{"sig":"MEQCIAhdX/0/h/9PdgWig8CDHSvQ5rgfcqVW72Q1mxQyeSdFAiB8LI8BL/M5DU6pRDALyfSuGfNZESYNz3t9WOj8/djQTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W9nCRA9TVsSAnZWagAA2WgQAJH+ZBKQ40xZbcJR29ZS\n4LpfNQQzV+JtliK1EM3wgPpW0HHopz5vINJ8F2JaOGad23V6e2hJejXmQML6\nIPS+AU4ZxYRNQdz7XEHpkwmttaEox85oYfyxPfCdlUCVWhmtZTvvvN6eXlCs\nNM3I8oQAWwWv25SltLc4gzlKz0OUk6kQxWbtQq9ZkLvX8aHAS4u8FqWNsk0n\nRJs5hUTkz+ZBy2WIEXbz4Kv1ejpL0OIChf7vLFN2zEWoTC9o9Qmfs7wrrS/Y\nPPfdOhTgmLJymRsKSCyEBLgbV8BTnoK5/Af/H2QOWjKX0f4pfUgn1QI+MAtk\nf/Rki4TDtgyYq2X0B0zltC38FaphsvCRF5aLutDmc+J3N2H07SSrdEBlsYyc\nAKsKIcKUL5jIwnycRe07Iho9r17cku3ivpq4qw7xlzf+sb/hDnN6+Z2DVp9M\nju98xjxjba8+v64iG8uSEtUtDtfYS4bmQABVNSkosxmDIqkq+HuJb1it46B0\nkjk+mk8oQfjs6zxIPWKGRIpsPlrXKfKhdSK2n2/qM01DWGUsfOnKm1ICy+80\nRQqeRfRkr8CivkotviLIA/TaKTdypSp8lSyOmjLa8P0o4rIj32caOCz5SedM\nkBrVZ8rwenL7xWjmzWlGr6kVjldxV+A03CgcTvLqwx9MsP2nxAXMYwWm6UVD\nlyYQ\r\n=Zw0D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/button":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/icon-button":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.cc4ed13cc.0_1643999078908_0.6557245881513971","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/snackbar","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f91ac52f3109da65457c58780fd4c6dd37d7dc1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.dcba26fe1.0.tgz","fileCount":39,"integrity":"sha512-Kf+TRINQ4O3uahGgnlL80/DpHC3rB4J9r1m3+rnyw6/7Fs4WCSihSdgOrTuU5SpD5RhvvltuxBybzEhZnFMPGA==","signatures":[{"sig":"MEQCIB8xsLspGouXzNs4wEo3W4MkPU2v79oHwcBIrLU4Lk9bAiBtliO8kD2MIeCvixCI2hFl/whdCnnzSoSvmm0je2j9rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aGdCRA9TVsSAnZWagAAOd4QAIxZap+/BYfrldbQBgQz\n86gfRfDPcZwbllU6SnPeaXxK2n0j4BIQ2gh/Q0Ildrkfo50TPisy3Cb1tukj\nMgBNr0QZZz6BLWpvtnF7MlRE1jCf2Suis6C7n3sWvTLrNeAfc++fsllni+Fz\nkvivx2rE7D6XGoQx/BMR/GWgILwhZHo9x4E+V4RRYhJZmScf7coKWPC10z19\nUHCdhHO9pJ3Yk7blJEh1wv33w8HtBaaHHkDIljqA33JEdcRVoItTd3qnTBR4\nqSVCy6jIJSuUvkUZBJqIMQcBxn4QMkI1mKeHKgwRkKn3BSE69lzFqdkPYmGf\nPI5sAPYXHywNmI1eg3t0DnW8cYCgtL/ZegBACymAP6610EniZac5SbCms1OQ\n67RHFAJXMXCi59Q8FedEfOAan8HvUTngUPVyB/+FKOoQJ/eBajRuC5f9oeX/\nKRW+rp8RlhB3KStJMRr3TZkPfiOY53JlygHfUuqnIxGspW7VAqMhBwUhpSAt\nmTGG476a3hUcBtmgiyyAd2z9rvHqVYNuE3/tmCGHaTpxp5A0XV7lrNwTTFhs\no9TQC62xviGJOiLqRsjZBtiQvoqKh+VIHtc3Lz/2iczGsDolR74Y09nz4Av3\n36mQjW5rzpACS3UrGX7WE7RijfU3uYUIJTGGoY0xspWsJRdR7ga7DI0rnC2y\nGZqX\r\n=m3R3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/button":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/icon-button":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.dcba26fe1.0_1644011933478_0.41332691118575204","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/snackbar","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1975fdc69cb1d7b18f4ca18ca965b4f19c16f508","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.ec54d9046.0.tgz","fileCount":39,"integrity":"sha512-OnEq2iTcRKFXhMsr3dXXnBgUOrflSBf/w/5xFe6nn0jhHDbRwcLskBIsWE1bC5/zOdfDGLD1XdRSMlPSqekiCw==","signatures":[{"sig":"MEUCIQCgw9Fq7ZaSuVa05QwTHvZN5jmOLEoiQqwVjXKVNat+dgIgGWoBSg/JRrPyXEer3gqgQhxHKABKU5X6oa6Tt3etyAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT9RCRA9TVsSAnZWagAArQoP/2FkoVCyA8mCUu9/Hosb\np9i/cdV8rWWq9V1Jmqs9T6/20wTA4qEPTcMVt+ehKDJwlQmNh7w5sOn0AzxD\nAUvEV5RqOsgshJeDkzi8zGZE077GcWdb0Bg3+X7OM9HETxlBfoBgWczjXbXp\nzdXFjt04ECRCM6RRSUqcx7wvlx0iRWOHE2OTvvWQQTVSgAFA7Nkb9n9H5dZV\nb0FxWtRqVgl5zMUZS+GWdtSwrkih8W9T/QNCOIbnEz1cAX63RG7lst5MyO3+\n24eYdoJmU7vJ8jjM+QYtEsYYmitmnKzWUpGYR0TApzR7blaS04PytdVyvp2a\nZkUJh8IDld+0NdAnwDMMOOns4u3BWv+Rj45D3oJVD8Tblsrsbly+e2JqHfHo\nEfW573a1uW/i6Zp5rH4D/wLGvONCPCR2wxOyZJph6b1EAGO2KoxmJdUF0s5o\nBxCyEIet7l81/FV6R+7TCXHpCr9xFg5mdW4ttiBsWM8BvAnLJhia+CbJ9TjG\n8YSiy5jqHgUZX8MEzaojfNxssMjfwlXXY39+GVaO9EhtKma8++i0zD9LKIDE\nnysenAerkbMSyAEHgEhYIx6rUiwnDRT0nSqu18W0q3s75NjFQJLJP+Eckkf+\n4CLJIL5lCqKOOv2JiDRFUo0C8Ua0xCQXXvRsDNnOg9xhzva7yPdn+ITu5tLV\nWT3B\r\n=Y3I4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/button":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/icon-button":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.ec54d9046.0_1644248913724_0.5388566912954256","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/snackbar","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c4cb45ac3b84899b3f20ca364a12c794c231c2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.ea9b5b463.0.tgz","fileCount":39,"integrity":"sha512-i5GpwqFTTnpGI1/teb96IaUDGvbRGkt5GXw4bdl5qt79LbhAxpYJWCV0Wp22iClknOx1ujqZpMrjiKaO7xgfnQ==","signatures":[{"sig":"MEQCIFHE5T9z4EVZSN1bDMppOgkiv5PPdGy3gnBPgUqkOSHDAiBuUwaLVWgZ8+3J69npp/AIEk6U+wDBSh/nD4COeoJOnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBAAQCRA9TVsSAnZWagAAzD0QAJPMut0zFb7RwPbZjgsu\nUMaygNdC86KEzjLRKsrKzhN3EJt5MbxcQlNN9a7grViZQgAVlVe65E1jOEGU\nfUz1MR/ZZS58XilQCyzUBxoBo0d7lGyObZEVNC6AO6ZObM0/gc3BHi4u4HYO\n/mgm1LlzHg34sM4TtsXkJafTQ05BlnrPN/0rZVkRYPwymrLluqPIpAOkVYK7\n6RrYb4US2frMIQfveNkG9SyO8L+bnq4dCtb07XdL+vzUk5E6iE15jOMOzF24\n0pVJPcCevawrnubiXrcQn8ynvrodIqqNxSXt1yIvSPVBsiGz27zhcGhOQMR+\nDpuMv8RUX0JBSjHTMxfVDu2kcywo3GWJDhcIyuDz2fB3s7ygZL98Mm68sLIC\nUU+BRvCYM/7eosKWfNSnVEBDNGxU0lva60rg+l/wzMJA8uovQ0EnCVNMfZnA\nu3r+fBPeO42YUeHgaeJbqKbBhTzxl0Lrmg3NzGBY14gvls61/Hr56FEpRUo3\nmlQNdoxvdC1EbOs5+kj7nHOc7AtAyP8Qqz0waEHvI82UNWHHOsEzXLPqUpZI\nb84GLk1LBeb5u9ZKzWNLcIhbfHhuXRsEtFuXcXUs1N8fo401w7l8usGgtPL5\n2PmSQYKtmza1UdJsqK5HcrKD7oqUIKejn2q1DUSqD9Rgqj9i4SbHkhimO9Nq\npy/j\r\n=Aio7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/button":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/icon-button":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.ea9b5b463.0_1644429328822_0.34940076109170315","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/snackbar","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49c491014707c5af200b80ebf7e6eb42e4d355c3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.96ea061c1.0.tgz","fileCount":39,"integrity":"sha512-1xND89kYgLTDFxnRl2oxXPMQMWXdgr71z0DfXqEsL1vbzP4EWPP6IBupVGE5WmTTW3r5/xE+ZW7XQdXKjwSFmw==","signatures":[{"sig":"MEYCIQCYM9MliIxMjidI7/mqMsdtN2F7Ng3wSaUkvEPBwrH81wIhAMALN97NRywgPdKe+T0eB/ClmBJ/EnWEXT7d+aIboqtZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9zCRA9TVsSAnZWagAAJZ4P/24JOVjQ69SfNNapXJPg\nAWo8ZOIJ/yh+/cjC7iAq2yIXEbsiRtXRJowieKlCd+VruAQx+wIS4UueTiuX\nnNkLekJGWwmMzziUgVoI0/E/SC3w17XSvImPYaRvLXWjvCb5rkCLwESZ/zao\nxLM47XdQkN8QKXUjOU3ZGm1qClYCb9c36MqDsQKd1ny/QIBI/lYvBu8/WMiI\niGWQ1pZK2fo9FcVkpbB2QVXpbzKbsdRo5Z/rX9B/JeVSEHELgUs0CePQ+tF4\nXoLUQ0VMow9lEyxYYebQYBeaB08llcKNYm3Hvq+WXzeeKDD7KZrDNWqz5PQB\n/LTkqTuK196cA+9HqjhMcHxIcah0ulqRq/KBWl74juLDldb4zYGU8IcQSwel\nCmXFnLV2SU1poiMSYegAdhVCNs4euBqAujbpY/EW8Mx1L63ShqYFgsLLHMic\nUG/fM0AjJ1oFHNJuk2C5HvNZG34O0P8zogrS9PkFt1/1/JXOS4dbKoC3rbLn\nb9ye9+WxqBV6KztUBoodv9/pyttoUQxjDDN7Hjuz1uyupZgtpyLATvQJK0rY\n1w/0kJcMKX2YmS2wmkh5wSUDMrtH7h9UwtArrEmdL9AHgSlDmOvgPamLijkl\nrfzJlpYREr2qGhE1jx/WdNt5Rgqm6aS4nFe5grmNU8ZGdinNnPnFGCY+dQlk\nigmi\r\n=hyzH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/button":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/icon-button":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.96ea061c1.0_1644433267727_0.7096473937553058","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/snackbar","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.e00181e59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a22ac13e93d495a33c4c58991cae09b7b1d70062","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.e00181e59.0.tgz","fileCount":39,"integrity":"sha512-LK3nFvYWQUQOv+H3o4fRoAvOA84pkulF3eQQFf+SaMZiYtZM3cVsj+yF0ynjjQ94YBhcrWpq4NyHINHU2o2LHA==","signatures":[{"sig":"MEYCIQCpa/SqtLmbcs4T1KcKNB6ciTu0esCRIKBBCTiYWiFENQIhAPehGyrSbTdknfMAeIJIPKqqzrv6QVOAXWAg6jm6zoFk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXC2CRA9TVsSAnZWagAAhK8P/R0SLVBed0Q+755CLWku\nKvmwe/Kb9BrMAlCd6Wj6r5sbdvK/6sfs9dY2WT6brNdGDTqKMCirt8B9R4z1\nQ96uFk00nxHR0i5sgfiUb28ucTc2fc2d1LDN1CAgAKlqlx4SvBw+7n6jFrd3\n/KhnIZEEVny4sNY6Dni2fFGpTuBWbt7QrHHpUf7ROuQ9LiFQFav7C2JYFveV\nA3dA57TPS7ZILxLgZp5KtYGeevEfpDkGctIc/pOrxTBRu6shVAugdrplqTpn\ncvMHAsgHyTo68yvTsq3L1e+6MKtJsirVROeEY8zlah621MOciAYFFHZbO5uW\nuQc7v/FRmQ/Uk1CgCoJ15sK4LqICgux1G8d6Yn67tCoi2lMrPxSW7XRXxaBy\nzPgYHEKt8n/sPFvx1KzMcV00ij8dMa9szMAs4ycuhUj+zgDLbEg2RvwM1vaf\nSy+RebgFBoXt+UR8q+8qgiEE9jbNyg84R57NbxX23ELsiDZhXg8+PjXOZzfP\nRwYXNCnXWpYMPdIV0hYIoouEHSj4FIMZ1OifaaCiw3rOiCbiRG51m3MvPY6J\nBf/C0defiIKuGmbHG9w37jeae8KYQWho0uQUCh+4CEiM/Z2GIiAHfTdgviQk\n72fpbHRp4huqWQ+fWwuBwv2ZE9RzLlh/EWFKzJbmBjuF3LPHg/TRSlfNxcfP\nxk+0\r\n=ckiF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/button":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/icon-button":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.e00181e59.0_1644523702739_0.1385261875945436","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/snackbar","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.037285f9b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"513f6af366d173c820c3d162b4cd5402f7de0a28","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.037285f9b.0.tgz","fileCount":39,"integrity":"sha512-YJ9ziXdwEi2uhUE+XxD+5bmMmV7w7DnPnYYu52mq054DwF134WxMG4zjL8TPI25So2EKTINvv0I3KJmY04/WFA==","signatures":[{"sig":"MEUCIQCkInkYvwx6+Xc0DbHHNtJEWQ772PsBjqHxZrZ0f/mqKQIgV6F5Bf5gT89gNxAqJNd6sudxTa2ZIVtYvePn6J/t0d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtuCRA9TVsSAnZWagAAXskP/0JdPS19PVIYqm8Z3UYL\n0JQfrYFvDCCWrhfNQu8qDtfft47N8D1Q9nJwcwDEQ4iffvlxVpxvZws5CuWw\nff6nmPF3Qhzo+K6SlNlyq89G1r7bT6VXR8hzE4AqX13GikaXVITPg0JdJtGi\nabBgckK5QpjOk/tzQvhcoq6YDbvJJytXvoDGtoMr9mWQU8c6vM2pd8Dql6q5\n7oaYR2moMVBACiYYBGBL2s1ahfgUZYyxIcsL2wQUCAXSMku/+Gc93Y5XJI2t\nlWPDJT9UHj69EKkHSz8KbSCmcqcbb/mgZLbSKTcSGvUFY38rSSvh+F3Yc15C\nLx2s58DpFLNrEg0bokmVrysWzsH1X04ZcZKXhMzVvDcfWbGKKmKFl5YJLsfO\nvyfGg9U/upWryfiEMQWaTT5Hm9HOiFrLVKGfLvuU5MNCYe9GeNkdNGyJ+P1q\nN8tzap8yvU0H/gl1UWGT2mGogKVcBhYSy3BHy56bWD5mwP3grid+OERabPCj\njne6dRC7iumVx9NIr5QFsU8AmAVTfB3IomPBM1WOdIaWHXLNx/MsdyaGqfyS\nPag29L1ZWxjQjoSahHbU/gG8ZFi9tM2dtRim4imdCINr3QrLfZF9yccUXSXv\nWpGuoq6zA8SJLxHOFhywmNqVWQ0VfnA8FPxIHWigu5QgG/kqo93gKw+2L+XP\nCrXt\r\n=NMaE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/button":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/icon-button":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.037285f9b.0_1644604270421_0.8156372873870108","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/snackbar","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e49c70c6b48ba11599fa004e8f5b33118a68a2d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.1aaa68dda.0.tgz","fileCount":39,"integrity":"sha512-ULe5IUqJkBnd7LN2xwGCseLlYCZ7qOKtSSXTSwHAD9rm1UJ4F25kVvLXw8KwbgSvjEmWeszlkHRpYC1aGwY/Ig==","signatures":[{"sig":"MEUCIQDCIL7GpV/69kBPulFrm31KH3Pe07EbrGJ0KngX7l9hKQIgBVEy5tCVoHRCehiAZvywLUso8294jofHsCVmcBkYeBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVWRCRA9TVsSAnZWagAAC8wQAIPDtdy+gbTv+658Sp8U\nWT5P439SoZD/ZXi5XpB6GwiIlkBmA4RDGwll9i6pLcL4dJ1EAGwHE8hQdrso\nhFQzC0MJvB/4SViwz/H+toN4DexM3N9LZt0tgB/VIbgWZPeaguBQX4qdBfFd\nHlMbyljdjJZUplLqwTotBlw4RbYHHq+2C5fuOlLAGfehI7bZgQ3E141uOVTh\nT3YxYSim7D8ZteofoNBPCoiBlxFdTW+kA0Cp6kuU9XD4huG3/kKdKA3LacrK\nEUo60JOvo31xzqcK5rkmtehTFaEjZmzRLw6vxuERas1fVsgsGvNdhlsMO7+N\n+eYEVozk8tfM/xZhOXEXTEw6d0sHdGYBom0S08ZQAyHrxyI9DeL9qxg7Z1e0\no4LtjQrhkV5IwezQIfUEtsDiF28XSPAOOvMICfjO8O22R/2ahyGUVo+U/mGA\nXAQOTfyEbNOrX4izgoaBLcLz2fKG8lXctuX8uGYtn7T+wF/LkdKH/A23/1wi\n+2WMTQRBQq1pT+3hhTcnk6HFfXFliSVxMjbVG/QgfPzavTdXVv4WI7LPmS76\nBy0kRsMCThU4Y9qQH4h5X9/t+63yJhg03RzXjf4/okV5JacmLPCUs90qNdUf\npKkuDnkXreJeRUl1wY8f4+nBqaSejXTIWhw7nODYmzQajDTyd5azQXcGy0Mh\n9I7Y\r\n=dBww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/button":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/icon-button":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.1aaa68dda.0_1645041041453_0.6442629657564936","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/snackbar","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1638319e1a3cd9538e780a709dceb99e7a6b166","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.ab4aba1af.0.tgz","fileCount":39,"integrity":"sha512-3LGe2peKwYU3eEfYCeCtnOlus/KEmnPLGTxOZ1ht8G4JR3iQo62Ke6F7QMuLu7ec33Pl/y3RRcVe4bifTE2Tzg==","signatures":[{"sig":"MEQCIAnmMUCvGuDqVooZH2gJMbp95jvVO52w5951SuejQv8WAiA1WzQ9ZmMkd4fuJS/QaVdNvHYes+LCphJg2w2nCABY5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpFIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoILA/+Jeg3kzDt5sEjEpd8wzKmwlTT+7mYNve398m8cKZpkwgxNtd3\r\nIdnNlNGoIn5aW77NHHZEEBRYTmzMBaHQIulvH6qh6qwQbrCVOztjokCVEE/B\r\nInxfBdr1+pWFFl2qApQEgA+zWcp3e9OkuBFKXMXLqlBaKhs+CdmiuC93jlxN\r\nSJIKME0auc12T2WwA8hGixBItKAz+C2e3LW7FePfc6g1HEgVqibB17RZMQk/\r\nnJNjNxONB5mJnqBvOuqm94qumFhcBU1MpQZnj239CdmIopPqdjBBLGvl0JWf\r\nxQEIQWYDukh/LX08OTvSiPy8tirsLXLFVcslxBerUbzPvOOCmOWx19Qn9Kd1\r\nIfe7hzFdcd9uRDfNaHnVc5D8j5iuWPwvcpHIt3qL224VIsEhUz2sJBmPmF1I\r\nUmS22KRrTZKtNuiQ2X48qCggJw35g151YEr1xaorlDGtWuXIj3ClCwD0bUZ1\r\ndFaB8KzncjONj7OU5CdWMVUqTAyHzMM9Z/ukjQGXg5PsQME9vtsc1K6V9osO\r\nvBxlaBstgTME1pocxSmoJrFIsQP2q+15JFae1AhVR/MUdYOLVc5d8gV8M81J\r\nR1hkXNr0D0K5GHoAjQSzugzjpHiknHt9CcIyHRbLjPu1KnjLpyYsdBf9a2B/\r\nIBNUcMIfBNSXoILeLbIHYgY7ubsS7LAc+KE=\r\n=4zHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/button":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/icon-button":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.ab4aba1af.0_1645121864066_0.32228397592551183","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/snackbar","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46f6f49ef6e9a635138b009f8c53872bd516c558","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.e58552c6e.0.tgz","fileCount":39,"integrity":"sha512-ZnF06wrr+bbrnoOUEin5w0tsy2UftFXAJQfVIm4vmLh8rBEhum9CQnGUqdqyROnwhdMmBeTKzeneCP3b+CU1dw==","signatures":[{"sig":"MEYCIQCy1zDrGolFZaOYq3/tIEHVDUrxUeBmb06AMPSw4WkaqQIhAOF5dGa8ONCN+9VuNlpkfuBdOLlLPW1Bg6F1SKpd3lBm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyvA/+N+sh2SFmBgo8URHu7mfihfHQavHA+eTkQL7CxfaOrs484Kw1\r\nht5yAXT831nRyNe1G/jHPWOihVSkcPKQgdMs0N0FjAKRpWdaWekqsCMFa3lW\r\n9OFoHO5cb3Pk17+DoLET2UsTwTvh8CeS2BbK3l3ooWsusSEqRY5DioTkH3mk\r\nfnwg0I6XWVG8bJbkBwnstK51JFM0TuQLIXz9cdQY6zWKVqSV5UQQDvt0xcvb\r\n65dHX00SPSkOVhT0w39C9zSYKo+1eNq0QOzd2cvN9f7QCNTPFVIhvPBPeEvq\r\nQlrOGPwJ1A4Sy+V96m5TBlYBksDUC24EosExWZZO++ktPghVwBqXgWmNncAb\r\naE1ynKv+VHaoRPQxy5KP7soYH8OT9I/O9FcXuaX3haRMBSfT7ZXBx/qLEwDR\r\nCdeZG1iC8rmmdxTzX83vad+9WCm9z3dqYD6lp7iC6i6SXMrPVJ/MUz2vTujt\r\nAbUiDRZkySUHt2gZn7k6N8O8yk1Xl3faQt1hJ8yQT233D2TXIFR5jBjPA5Kc\r\n5An3//5r2HSX2WpS+QvaemjD/82V1tZGgbmrI0aeavEWhedINKTj7IoGWvTJ\r\nhESqwsY3znVcV0dLxZvi/9xXKESVwlhlc3FT+z4eQdZwE5H5smVEF2cIgOaV\r\nQXr9A0CKu2Fuy2lI8gcORS7bXnUKV0fEF0A=\r\n=X8Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/button":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/icon-button":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.e58552c6e.0_1645207529938_0.3641929450467014","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/snackbar","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.868793776.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da32005c036b7fa7d2c9124d486485e61197f430","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.868793776.0.tgz","fileCount":39,"integrity":"sha512-+pxKkxEZxhPyN4zudZtgm+XstnGiTLrkCdZHrmspwUE1vxSU1uXV9ZDMimv9jRjxpOnnq6kKtWPlvXXrZH/JPA==","signatures":[{"sig":"MEQCICD/ZdBvzWVNQuYNRqBWZXYD3bKmz0rJ9hrbu0ftpZ3KAiB6gaBys936UMl0EUyjzK0Hm1pvkd4LFQ48eAePghzUvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTuOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmotrw//SCHIBR4WhnTl7q8HIpkNTCL1mOG6wBKozUmbpV9l6d9X9DhQ\r\nUpSeOcK6MN+KcZpWpegP+E5lKgxPOEhJEbcjZXefZ4IKvbKZesDGwb1p/Us+\r\n82dysoi+vDckslXJjdNaq0gDhwVXMSUqS9gRAG2wDL6ALt1/ry37C65WTFEV\r\ncS/KcaRC+QeAjjZiUj3DeGH5vuNvYxUvrPoY0ldGEDn2Qy9TkavW/IOYFyoz\r\nUfxCLSttQfa7mf+nLQUnOLeTDOc4rKdOg6J2EpRD/d+/J2OwicMmc7iTbt5V\r\n7zwuk/Kyru9D4qkftTdPCOCxFfudGlfp0VPa/41ogWHbifrMnIn99n2KgJzr\r\nq8Spl9bmyCNIYoMOfNGwhPOWg9/odGOfPji9Wwc7fZMtxQWJHod1JhhEM3nE\r\neAB9nZdV9VMwLdAJKl4Im0V36guCGn20mVNr8RDMflZv4AOxE5rs6Yp0pDRp\r\nKffU75wo1JstXYFFVfhQtAgDbAw4pDGI8aSM7fULcFu66MLFFpAjM0e08yKg\r\n3C8mPSdB0zb3YGEd/R1hSoSewqsTBd0n77byfq6ncCru7n60/j0LtpFY1Lve\r\nW10wLN+76mRS9QMHrdF5hy2oVJChEqWPCVjdbYSpUasc0flT5FReqn+gpUw+\r\nen/U2bGeiErl/hj+WsNh2b4mmFOb0cI8Qlc=\r\n=Ii3v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/button":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/icon-button":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.868793776.0_1645558670526_0.7725129777287352","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/snackbar","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66108514bb5112869738cfec3c73de0de1681a52","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.fdc37a445.0.tgz","fileCount":39,"integrity":"sha512-qWHYsDWUoR+7mdwMC6bkmRHMdc7YbtSMfm1RVrj6Bt3uPDcLyMaP2cRSCswwmU9n4rJ5LoYX+aRmAsB9sZ6GGw==","signatures":[{"sig":"MEYCIQD7ZJWRZO3gZ+RfjChkksvuWsakeyVaGMl73hBKx28cOwIhAPsuyLamuf8jnGKVa25sNkqhOV9CWX7ckCpUPsPLohVy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRjAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpapg//bHGw28B4d6nvzLoTM3A+el5faIZ2+NF7CtG1B2N/1QAaAQ8m\r\nWHAUr4OuwXSsC+SZEcHcllf8StS0V1fASJUqjosc4uzZPxVrlqs5tePU4sGF\r\nrmYcbfJstcT9PggScuPz6fcES9ETI5ElwXAC/6I81euWNFyrDh+8WS9DPK16\r\ng8hPo1lBFmOc7BBfUBzL3AQPM9n4c/TezPdh8b4H/XWXnA9YqImmjDuHJkco\r\nyDLs5tXY1SzUbuOsEyCzKltH9jVjBuhOlFeMgapUOPqQiieWnfsMYzofLxNB\r\nKq/ccOOQQ2NdRqwYqvhsfE8pO7jXQnPVCj4TYbdyJiZHjiKOI0DOGA0jV76h\r\n8MHuwnDIIfQIFiNaqy20ueg9FuBjuW4Di3assDefBllzo5/FwlotAn+GdJzI\r\nNwdJAmwhCT6EIXP1YzXdCDf1PtLBPrPMCccwrjLvkzJZ36/b6QQLu2YdRFhL\r\nr98mJ79vZYGMPb2Ql3u+1pmD6uO1Pb9p1JU5bxI0sNYpQTbmkJd7VJOhTNAw\r\nlQMyA7C3kRg1f7fQgKRElCidKZflkzSll4jrJ5SuGEE0JJCo34ch9i0CO35u\r\nCGdQCVzmvPjagenAJYzfKtjLozG5Hf3RzX7L66/Gb9HmrmcG1jbfVaq6W3Rz\r\nCO8XyzeD2UmTkW/mJSXx5JupY3NCrzmOzaQ=\r\n=nBrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/button":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/icon-button":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.fdc37a445.0_1646074048074_0.6360099424854722","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/snackbar","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9c7179ad003a11110087c982ebaa143e4da6324","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.43c7d87dc.0.tgz","fileCount":39,"integrity":"sha512-3JHqMWmU1nVibXlMQlwoTR0NxPnasvqqJ10aNWRodDulI/zCfUrS6wjH4mUVG6RFcfKHgOq5ZkzVBvRrNg+CDg==","signatures":[{"sig":"MEQCIBTD2Injz9jqtqYC+3yFIR/QMqExdWUzq5VCnge1FDWsAiBpxb3rRmbQABOY/jJTIDMMJgwTGSGuQvNXkgEgjf7IiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHj0MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT4BAAiP2K7FZK/fVhpPT1LtJYFzCm631KOO3C/wvKJljWbtYkApks\r\n+Kc9AqS7qJ6SXOPlza7M3rkmwUhk2OeyRJr6e90FfknPa7KuYzV2gz0ElVq8\r\nU17MG9HK5qN2SysVE9S2zGOvoz2fpGAkTXqQpDTqGcRDjYc0rE3g4RldcJOU\r\nV0858qUX8MdKNWdiqHXHtz2v5clUsHsCEETkJtY8xvz3+iNCDMLZjgE/vGD3\r\nHEX7OBoy7SXoftH7USsDP3rtYBRn7zq4aCQfMf54oDjtHFOyC9nh87wTx3Wg\r\n1CmgTSDQkKcJc8pWgYoqcQPUuY4ZucCp+i2G4xSGmrOL9T6bnlV+wVJEDSzm\r\ndEA05068f0BLgWaZu67dkHszdH3WbMifdFL9XLc8DEcXjrwRqld06OFBquNL\r\nByZG1P0deRF4kyNTR3XeXfi0d8Yyq1SvsBL6KSP2oCjLFVF/k8j+jpBwazG4\r\nPN3HClPwAy1Kid+hq2lHbmP8wMyWE7LnRjmq03zjIIcwnQ4V55UOfsm7pR3N\r\ntxuwFrd6T30ux1VY89oLKdCfqXsmjDSFc5qkyCCvFVXadojyplAx2uioA0hf\r\nH8AlHj0OgOeWT29TJsT9ESxyPCgM+BegJHaYk8Q0XkxpXpIEfOjzXNDvRdBm\r\nFwpGf14QUm1PO8iQ3rItdMtcczFGBbaThAU=\r\n=vo/x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/button":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/icon-button":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.43c7d87dc.0_1646148875848_0.44091211940628394","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/snackbar","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.23043acd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2765c022eced9763a6845e66bbed433fa848017c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.23043acd0.0.tgz","fileCount":39,"integrity":"sha512-OAYO1Blo0YTBi98jSghK53/X8ym6VGQ9VXKgiAQiyERwGgbZfyHpdTkCbhxn30p4ZNeQ1cUMMHXFjTQnryuIdQ==","signatures":[{"sig":"MEUCIQC96tlyToRPvw4FmvcfRJqlTBz71xetxtd352A1pRgwCAIgPItKTNkP+CV82fYGfK3zUo3RVn3JlCKvbVAoAT+X5SM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9N6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJwg//S2BcUH5tEnJLRJacuUH2vay4YlgkO6xgwg+Jjg/V1+CBhRSO\r\nWZ+RXwk/9iroPX2fy69/6hM5UWfNW0/kuNegLDD9ntpBfvkTxD/9hLGolS+D\r\ngH0d1lPq7VLYqW+jsz5+mYxnq/Hmz138MJDDOpTedMp+c86x19SrF8JYkzVr\r\nKWKgIAsvPjJhycjRIZdG1iTld0LOkWNG8aHXCNQbCPRZm5XedY4i1gGeVBek\r\nHBKUh+3IC51qgsWX0r5XHa/wc9BWvR8q3V1oXo3Jkc6FB8WeWfJMBINtfJLk\r\nwZHMkuU2NExa41+pmS8K89mpAXBdxOrtY10pWraaYUemkTdAD0DuMk2CKtyI\r\nmpj0oJUvXi4rFuwUsxZ2HW8LNoMzqxkfi31eBYLNxnR68W43kHk6u2rihLtM\r\n8oZI0oK9vqOf5aMkYDkI00GdlAn5sFV2VbQkcnrXSDbXliHv8rnKlwuIEJT7\r\nv8kdgZBzfhrid3Ar38Oo770PWMvfjy/zryDfkARFDRfavqnUn4bNVYsNbcqa\r\nGFFlORm88/DEbZ2ssm4+RukcIZ7lj6X8+7t2DwAlEpp8RW8O0zozoVLxl63P\r\nXoo+nMpRMaZN1qpwgTdzj3BRz672m4KLL6FcOeUsU1TV5DsH+NODP0k9hDWF\r\n+QYETsO3HIDyLh/4hca1E389uCAHWln1h5g=\r\n=X7N3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/button":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/icon-button":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.23043acd0.0_1646252921992_0.9158513797816958","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/snackbar","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8054571289b80e1bd9f68b9988828207d712cf0c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.6505e61c5.0.tgz","fileCount":39,"integrity":"sha512-Z+PTDKyV9G/exRhEmmiLKL623Kza9/APMfQ/2ibWObS353PSp57XZfl3FFCkCl4fsKrY57eDcGwhb5KANhZo1w==","signatures":[{"sig":"MEYCIQDuo98YxxHnQKvF0DhOk41RPPW0TN+zUqAWJQMGQDXG5QIhANzOo/Nu7kL4v8psenNUnV6XIB90zIAER3VGIu26G9BB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR7BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5tw//Xqt7WP66cr4Hh4lHLn9j5DNPeRaxxrSW0QqmdMyW1BSa1gOc\r\nxskGvmjgkmke8OFXPm1wsui4hZ0wyWlZjbhLqxDTf51akKZpWhUazu4+U5wC\r\nB/I8o6bGo6pOedfjmp/Dfxt3xH2SrzhMntaRi5fhj4QGC2kxgW/sDtuPfqHu\r\ngPjCKEXW0OoyFhIIWYU7wWV7T1ieTaQDbK/qPdfMeBQDTsEL9gbuwAkrdjqc\r\n/I1ATQ2oi8iOur/EnPR04SWIpRcTyvtjbxc6jZFGRfhB6PaXRcvG6i6wIJRU\r\nzlKwFJfMi5gDyTuNNtjmX2xuZD51xLNhEUXf/7no/uR2PHkish1o8de+dCJF\r\nCZWSKb+PfBaDveETZoxBXOA58N/NcP7Yi4+Y+WyDW0RH81aJ+WS58N/jlFjf\r\nhklCIXM+4M+kwoLwDbagcHZP1zxV6sgbqNXETOVPFT4kmpJ99qfX1zlqC3Q6\r\noj4vf02tL3K9Cg9aUpbpNu2DXlvS5/cp1Pmbt7a8RO02kz2mw13pB+xFBZuD\r\nimfQ9Sbl8I2zRvLh4sqFXpWiV1BqT0BE6TKH61YhqO0jnEZCeul78UBogYZM\r\nCXnh51L2mZxWvrWa+qaTzfKAaKQdDqBlQ2HEhYVnhjp3DPGtrG/NvdciySY/\r\no5iZF0qp2s9R7IOydDzZb1l/FUPiz/v4OB4=\r\n=US/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/button":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/icon-button":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.6505e61c5.0_1646337728900_0.5500219380472944","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/snackbar","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.16c166154.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8131d2cdfc1634cef49112bc6529594a19f5dfcf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.16c166154.0.tgz","fileCount":39,"integrity":"sha512-M0IuXWua2n0SocpmXmXZHRUvJEWZkvfb+ABpim9zC1VTms+dAOhCrEZ8elrFxyBgM8FG/hdLFlnPJcdad0c0TA==","signatures":[{"sig":"MEUCIGZ2Uy18465eYxU/54G++Ws3+HvpguYtDuMalME13T53AiEAl8QpLENvV8iGcY8+z0u6tCPgxIqR7/PCR1pONgarO6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+V7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq67A/9HYRJgjk/NpNinBcyjItChpVlBthXegeOpCDWq/gI8pDVv3Yj\r\nLiMCsvYTA1rdpghceIcmaAD9H3CJRHQhQm6AjxXM9EEn3kVFMbkNnm6bAI0U\r\nlTvlFQkQ8tZOQt7ArHOLjXH2n7WsRi9u2sqftC4oqSyD4fIjN8Lu67+ZvEru\r\nyzKt22Gq1+eezwPuQpVFtli/VUrflJqa1RK2cyt8LOjWHB4SCXhsyrOgcBGn\r\nmwUC5LLTLY4m3s1wMfEdjzSGFKhhghM0L0qkrXGBX0gHEdpbznNE+oHPuLuk\r\nlKN08Sws/srHjWqov9Hrp6ui77YBEKFVANxvyphRqOixy80rj8SIxCmWB7OK\r\nvJt9WF9jZP2VJBSLG/KZW7hinn+kfZ3Fi2Mmn91sCF0n51+BpDmichyfjeWN\r\njKREKSmRTswcbl9GRonkZnCx1BM4RztOrRTem/SCVsSIpnl3TwflQqEQGF6i\r\nRZVZAMW5Yw0t6vBYN5U9O+URqNzGAFsKm0krxLC+CgIy5cEvMQCfZtGvMeSn\r\nJb3AY85gvUKfAYJcY9TVDN8eJXLdOR61jIFfQIQ4vULmaDVRCo77RbZH7aMu\r\ng9uzY3OYVHyIv6Gr31eS+BDRMFIpkHeOjyyN6dqPBlet4wbVO7Tbj1bBiBqX\r\ncfh69UGsPPz1Ua6DmrudsvRz/r4QMH4bhJI=\r\n=7Su2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/button":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/icon-button":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.16c166154.0_1646781819403_0.32317995778957775","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/snackbar","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"598a8deac9b75f845bfd1acac714ab08f275eb45","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.bdf1d3771.0.tgz","fileCount":39,"integrity":"sha512-CNWKBGLbhggZiCHdKltDVnFeGUMbI9GEGfCpHBleExjBor2Zai5WCMPhNFMQ2/os9xAGb0ixACG7jybdpdpbMA==","signatures":[{"sig":"MEYCIQCktofozGWKMJMtM0rCshxykmjwIk5FO25t9is+CEcYyAIhAPQG8BrTrQDmfeA4ZnB3cC2ookXcDZipCFf83LNv78UI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWRQ//bOdGGx/AEZEOX9XMOtGfPvK9Ep4XqxNWGQGNiLkDri9WCtSu\r\n6aoeMHHqpvQgnareTIRbnxcXgECU6qtzJKZjU9i65FiPlxwzyVSVfihivBbd\r\nNh32UKR/6paD3Hg3cepFzM3qXWP/Xh9hd9BBKOQCJoqPH8yszsrfiIrI4BnG\r\nnnttiv/+6fJEf4HY3TkLD6juBUVnlrJekwYnzzwAPC9JXvwBqm+KR4z0ijCO\r\nbGMtpQxLv+n9JPdyX//Z6hQoLAQqK1PJ/5XbK2ZqWzH3whPRm3eQCz9l7doa\r\neoZ/rFogwuS2Ak0adQZcsWgZT/B3A4lCrRa5KjC1BOfD4XboE8Qp619xV9lp\r\nqCECdOYQXkpMZsXlHMMV1MnhjZLdCqxVWhUatNfUXARtHRMjieoPAbv6Zw44\r\nAfujuo/JxUU3qQTRUXYL2qkusUQ+Z9mk4Q7YwXV2NFoEDpDyy6dZXJNK7Adj\r\n6hyn7zTw4k+vMw9yNs9bf2Xu2kvSRTzKstoU152bNgU1mQoUozvtxPecxPFv\r\nyakinzuQcgcOSoMmpZY0aaPdC6ze0ZCinSx/ZjVEyJP+KF3iuCaUQjD+LtbC\r\nf6f+k7ww/yMU5xCAdpNuKdrmuw+u3HRzADo+v0Yv8skq+RIkuN1Auq1eK6BX\r\nKwdyY5bJQh57GwH/xvbCbGhd1kNj9YFFMeA=\r\n=gHe7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/button":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/icon-button":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.bdf1d3771.0_1647268202360_0.9386292639876948","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/snackbar","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.cf4292778.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b16435c5289dd7e971c61e1e4f0d35dd61484752","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.cf4292778.0.tgz","fileCount":39,"integrity":"sha512-HFaEDfpHbk6a+FpIPfHNWDfY7uGzNbKVSzNGZ26H/j2Q1Ttu7HXxvKOSgxFJLecfMsjjpDrRaz0nbX9oaSJyog==","signatures":[{"sig":"MEUCIEesFeIHzL+mqIVoZnfUi4Vpdf+tNW5t4scbK8AWRhJ/AiEAtv2aQM1pXId4v806rydzbcHcEimsfBlGARXyGjbifuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL95CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7YA//VL03nJqWCkW/EzBSfMlhz5d8XVqi8xRESJMQNSEo4Ij3z2LM\r\nHXKmGUSNl1oPZ603sjjqBNDRPRkkeyizgKLZtXVI53NYlVNrd2coJD8eNLIL\r\nwL/+43Zrr7nfZEdovTiXJgTYgtPrpSjCoi2d23hNAErwqynn92v+wmQR3Od0\r\n8zlvltEgApAcCrqUJl2biHPS40FdqmL8VaL2miZQW8yUloSlZzPzc8LTMuvL\r\n3CEQoo9fubfiO20EwZWg9De7DhzGFCKKqBWu/Qo+fsEwVgN8RD9fZF+9sDlE\r\nuVWQXuVOVV877kMnxpSw+DGgQUrmPDO//HLC3nYk/tzUFD0Wqu64rKq+nge2\r\nl04IVGjJf1epEPCysqF0E///MxnzJz41TgJnBlfOUGcbnDh19Daxo0a5CIwd\r\nRhOh6TkjN3dZtxI1RtnWg7OjnARmFNzhDEQWHUfFrabdclBFMmLruC3Dmj3q\r\nDaaBfdF430m3dLT2+Fuj+I/kEqhBXhKBIaad/8760uTKWGZdpbvxhKhnibaV\r\nvDBUfq7xLxhDwiLYIj7zumhyr4h1rzdGG77AnS+baOPPf/Y9a0a773RTpDZj\r\nsjC3HKkq35ZwlnDSEX7ccXYyfS+7c9K5k+6K6fFUnDEiS+wnitiMnkcetaFH\r\ncjac3FUq6SN+h8sx/uVxG3PlD3VcMC7ehfg=\r\n=8vhw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/button":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/icon-button":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.cf4292778.0_1647304258682_0.2685763220069839","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/snackbar","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c08fbde4383b40f74504e10a6aff96902d7df536","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":39,"integrity":"sha512-fjPaKxHQkcbgcPITMCZmneCF3c0m3hb7yY5p76RKTuRPX3jt4CCVEPmaVXhYyHSPk1VjOmappscGZ47icmAXsQ==","signatures":[{"sig":"MEQCIQD69gAXej+aF2Yt/tHoei4J46llTWzCT+N+lm97tXBM4wIfaVYDwiOkwsY63Azf33+C1dn2uFvYcjDYlve1WTjLjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk3JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjsg/9F1IYkTsggLqnrqqBVyqQrlva10CG0HWDTnggKAdtX7LezR11\r\nCllaUy805/qvJzS6H3D/IV0+/3MjQ3qjsHiiTX34R1HTO8eZwovM7FSK4ho6\r\nMQNgrhdWGmHmEzFtz1vMQxn/oAbVyvEe24Gv+2AN6V6aoyXPaajZf1QzL/bZ\r\n8OOosvNQAv8pSPmiJELAsZCdwBuGENEzXfnQ5pS3rHNcrr2KIqfAqtw8/nrj\r\npDTEkPqzEH4mTHCMpxRSW7xbgLGjMXwNO5Sl8xZN4aV2LdhDE4Je3iOwdDxY\r\nGLRQjoI3W/eM+bVR9iCFqYWXGWSp73JMmT8k1W8pf9x+nc/hpnUCrhmNgqgG\r\nS/RtbgSFq+21E7c8En6BYCOcGDJ0qlexFyMiTVPZnUDjDPF6gVHs5ru8kK0V\r\nhD0GA1NvdiZeIRgJd9+HQzQ/M7n7+N8itixgnxkaG7Lz/k1+kU+iRfihTn5G\r\nTrP0NbvfY2T9CHfT1ji0B+l0/3N5YODoFeQgotub2TdkM1+s30BohIAMr6IJ\r\nDm2MljB27L3UbVGNILhjRCCbF4oP7Zj5OMEovkZ/LOZ1/kmUbIc/qKgRqgcN\r\nWSoEcO4PRSQDDfpRoruM7pCk4MFMCCFdPTO0PcZ/p8KdJMoh6EpsQ7JEP7aR\r\nBirYghV6xJucldAUAmdlzKKNoxUIQhw9au4=\r\n=39yT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/button":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/icon-button":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.bbd43e0e0.0_1647463881553_0.30108815976290093","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/snackbar","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d0eb3be84f67e0dcadb9ce4556d7f147135187d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.1b6afad86.0.tgz","fileCount":39,"integrity":"sha512-+GtMsYboTgIz+oLxw1JGCBxGsqoVJnfLgEeIYJCS/Zim2Yv6W/13SLYHPlETpULjvdpXQsgJ6ToqCz+Qhx4U0w==","signatures":[{"sig":"MEYCIQClwRRiEqPXf83m6kcZNccu4HKCg5bhKb6q0Tm8GeEMPwIhAJtJbVphxUkOHuINbiu5KtMjosn8OYGvr6hyaEsD4jg5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlD1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof7Q/+Pl7vuiPJW3lwWRDxJznaXD1TGDl1jo8yxHlePlBgTAPrpxk9\r\nTCSlKIxEe1kR5xU0AXYPv6jU6tu5oedIN9J+gBPnMwIxwA0trgA/l7Nc16T0\r\nJjKI19BdnTBUB53vEEJoJoVB5Y+h6KAyLGwbsfh/Pnse2+HCtTNIQLu73qOF\r\n4+qOVaOzZdGoCrBgAKx0/ldQsByz18b2QNHdJwmUbIbVB6stGHvOl0Nb9VP1\r\nbF664BH3ulZR+TPRfbBEXiDAjKbjJGEjFt1umOhWe1SXAqwVd4dflsTM+r9C\r\nJXgHZfRKIXLoH80JmH6cuM/W4VCGCWsGaqpshnxNqh8hRV2zD4HXF9CWzNdN\r\nX4BWIxk27FSEOKZ+UlNYu11w+9K/NGAAPB2m3FamX0LrVeyFfOlBCsh1YKCH\r\nDBWEiItMJGcCnrcUkCL1ietf+ntCpJuL7ffkoY9XrMwhbNX7g6lKF3mwDq74\r\nT2Bc08P6EVyHp22oCo4o+X/C+1mH/1I8pBChedB23oGi7mEKZMA7s18tKZcR\r\nReGu27H61IrOA2+rJtVbCbMkggfSywKjM4utCSnD9ymlETLQeIXDqprGsbqJ\r\newb0u8EGCBlsksR0lipOcu6Z0At2m7cLcrKThaYlA4j4bqNGxGnCdtg9EqkI\r\nNC3JWB+Yy+604u0rupkGclQodMpKVjR9z90=\r\n=+pZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/button":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/icon-button":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.1b6afad86.0_1647464693285_0.8752024804311531","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/snackbar","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76ecda761b53fb18a92b26ce647196bfc956d29c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":39,"integrity":"sha512-F3gEK7Gz4aWOkBJ2b/zOGZ/J5MpuNZm3NNSeW5OjWHKo9ej1qu6r7HMYBCwVUHFHHxODPL1NWwVjRK+4+gibWw==","signatures":[{"sig":"MEUCIGpVMTZtt+3v2EZQhMQuuB5L/7SJNLAYOdwF95guhUHIAiEAxPG+K54T8VLOke2nATK6g2cAMSHG/j+nWbkva2iC5d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlRQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDURAAkkCvxRgefuVdLaYhkHcQbKt6jFLhOQrEv7gWV5XJm8+rE6sr\r\noIT6SHZSXuzbutzfMG4xUBEaCnuuFU3wF73JqqEehiuT28Yu5fu02kPZH4FF\r\nibcwrW1W+QyUhI9o6ZttdTFNRG+0IIpI3cH6k+9kCM5bfcIFNuI4yS++C2gZ\r\nSsXNo4kA/yiP67NkZP5WgtxXeymW5ImbMaPidBfV0fXFyJXgZOnv4NuF0gmG\r\nuwfj37Rzk0q5cMcaTBsHMUfMcZZiXSuRKQs6pKC3oNKzCBFB8QcCt+xZqVuU\r\nDS+xd3NEdhN63LIyL7/LDdHpiSA8bFOyKRT3vOPMK+WMtHsfrNuBhg8GpnsA\r\n3rpvKN1BZM26W+ThRyX8FZ1MajvU2Xqccb1XxFKHyYvQqnwdVBH7nqai+Fcb\r\nTEr0TMNY6giYU/YypKO/sVA8wQXhXmhcU5UFfVu2JbHk1n4j/Yia13Owf8Rf\r\nhFuAZjP+OWphlTDzfCcLnNG1a4LgiwW9kME4yCzaE5AVuoS+EKSpkD+dsAbL\r\n/UDpjD++Gdtpzed4mvElcAGH5bJc+DvEjB1cbfCbVHAkQkFjsq77iacVolmv\r\nIIoW3SjqeZBaVXGpt3CkUI4F8x7qE3PKy39caXFX17nepc88x1XCwGOuTxv2\r\nI5YygSttLCyoI8jPE0T0LgvHCwCvtLWLnpQ=\r\n=bmW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/button":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/icon-button":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.bdf9d4af9.0_1647465552718_0.29690702282308323","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/snackbar","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.32b391398.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fe44caec799ecde327e8e0cbf0887a6b784a252","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.32b391398.0.tgz","fileCount":39,"integrity":"sha512-G4E9wD6sJ+2e+L/QTgKPpvBPQ47VjYi2TTSKhyJQXRW63eYEjbLHp9dD+naL/sd0duk4Y90H3Gmr0A7i/2YlDw==","signatures":[{"sig":"MEQCIDWrOXr0V3pFD1jtdxg13bMRJ6ReUC9TqlJLyE8XXahmAiA0vr/AEwsEOPQiWXCvPigU482XUGR1XdrfCx0hPP2Kmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3dPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbxQ/9G2Zn5I7MdGZuFZVkQAvmDHeodzBrCHNxJheJxY7Ujv8wK/td\r\nN5G+tSbJkF//KJJJst3UWozYZ50PsXUQRhZR8Ov12RBf81CJO3ScE/xCQqoM\r\nIHf/t2X4OnL/uKFnt/rogtMLUrpbHvsnShlO+iA+ojjniGhFcYl57cLJxi/g\r\njhEJZOOjYObAMjZI/j8X8rOen0MWoOQ4h/QEvKsN1uLlAL3rR/xL++NnWTyz\r\n21YyyCgjwWkCSk0AhK2TIeF+RPRGCc4gvbr8AWvVBvjWXegB/Ml6MIldDidC\r\nG7K+hYxYtIyhLtH5Tjc20TPcl6nsHkuvmknYZMm204yTDfa9NM8zT72m/cCB\r\ntmXvAH9k6xkQADdcOjA1L56z9CJvvhC7Kmzdf2dzSFQ7JcVe9SOFcF693XB7\r\nd0vb8QD4yFjGdXLh6W6hFT2XZSo4E8tjQ1TXYZx/F7hOaV52l5C+roIKY4LB\r\nVz+SkNaibg9DrBujxn7l8u/YK8OO8IraKe7qcfCPcbnZIvxohsUaEIG3myl1\r\njpN38N9fekzrAB7fyc86ZQhGgKXwiLwReltMhMZVYdcT5BFMtyYa6mHPSF9P\r\nnS3AqncZX3XBesfiL7G4uQCXR4yqlZ6QjMXBUvvnGjecu+6NeYTNVMxuZPfn\r\n7aqoPNmOT6sfVhRXyynoVnidaXWDnWhUACM=\r\n=6Z2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/button":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/icon-button":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.32b391398.0_1647540047792_0.6918115739183339","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/snackbar","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca569dec6fb358d02862d3253c3ad4f463eb96a3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":39,"integrity":"sha512-7deNF1Abm+DmbLNNEycFVMXDSFB0bnGg3phQC3c+iC8wQjQipkLn++SjYS86qGPS8nW3DC7SE3FnNkra4msJFg==","signatures":[{"sig":"MEUCICZtEMtY7xvFFG6BKJ1K+yBbqoLz8wp04xah6cxVfQsYAiEA1KDGxUiZ9jvHHV6oeM0e0NWPr+UDecYj2LpIKRh/7t8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLYBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRAQ/+MTl+QhyaNftB/uf2pMLzMkRf/BRKxWz+WYRwCI2DsupUO9ZS\r\nsw8XKLwCtJsm3jhugUis69A5EDIoc836WabXkc9HjQUDDnyOs0/L5YLRz8pe\r\nUy9xz9bsn4BsuWVkq0bEtACJXEPzLDR5gEJiwqAd0JzWFdOPLIiliaux7Xcz\r\nQUUHQ0nun4U4TXH/r99MqpVTWwZZfxNVmj+Yrh7s6wozE3CVQHueHxUy7sMH\r\nQt2Wrl+vBXD6x/4wOyXH6XLpgQS+1HFg5zyMFfh8POZEXBxdQiCRqkDzhuv/\r\ncTxoRlXt0ZYoQ8RQM36PLfLV4ojtRjw8V4vrvZojAxrJgGa3rZw1oSxQckx4\r\n7zQb62Qp9+tIo5P3gE10aYW5JxiAvfrahfqXMXkRgwYVBvl47ohdNfwcVvmL\r\nzMWQ+vZpF7TB9aUtzhzY69Km2dn8V7BVkNXamrDyZVa88WETOHD3DstG769p\r\n19G43405x6uCgeU0p/O0ACOjVroWeOsoEhvOqMo8fb1cFjan6CqK1jYmIcdT\r\nDLa2th2fB+gJCtlneY/HlW62yy4lhVgbVS5sqkSbzM7fa5NBfPXmS9k+S5io\r\naNyBqlWCUbWQaNnEvLrX9OT4T/xRGGiCtGp4p+vp0sfyoROvbgLY1DE6DXh2\r\nrcvBpYnfdTHoByxbkstZIfbR3y7siFy6ul4=\r\n=WVz9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/button":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/icon-button":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.ae8a6a3a3.0_1647621633467_0.7255770727667725","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/snackbar","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51c53468d7476e83796306c06ee0a6332ea13747","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.cbd9358a6.0.tgz","fileCount":39,"integrity":"sha512-b0SEzNd30GHsD+fLaefxpUzytOMy+VpYzsEl7b1w0yHhe934QuD1Y2uSOhvoj4qpiflWFSi+sKPCzk3hih0Ceg==","signatures":[{"sig":"MEQCIDrgTZBU5TDso5QdGHe6hPRJPVs52nW+HUDJwOg5dXVTAiBVKMbK98HcmxTJzDDsMMkgrhqtoXLwWbue95NTb6G/ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgzQ//YEwZE8GVw2doYlBpc4Ag6By1o6zuCpwWwLQPFdXbw+EZQq+Z\r\nOswI0QZy2T3D0WmMa1f2p6rYcWFOJIEdJpp2D7KIkv6LAO8DwxX9MD0GI2uO\r\nJhM7WVY0v2sfotzIJ7tzq3i/Ffjvu7Wam3cckFy0ddhc7gQWEVzdcibG9tqj\r\nV0ssnGafqq0ULo1mI9fjcVrww0mW0lTxriEPcYUIss1WB/RYDdoezkWjpwnN\r\n8zA8QJNVO95jlUCbREJjDm0jP+63Zgdx4KsQh2DGZUt/77+jGWLrYaGufgCf\r\nu1BhVdYsYCngy25jHZZB/Njjec+atmunnHM2hpwFiABe2Jnq3Hsrj4r4WyBx\r\nFYimphCePUpwg9rPqCL/6tpHVMaiA3noHI/ToV/kRtZ0JRoKhzLzTjr0lXXC\r\nHwnlMF/ThKd8CB64L9Ez1uMz2XfLNsP/pmJ8iwhDy6tAxj8ZKGhOr+oOP59B\r\njxyCdbk+scQpMxxsf6IVudds5iNJAwAvF2RxgeBilYOxnnQrIJW/wfcS6Vqd\r\nCUQaO07wWw76MBDJamFNj80XZTTPW/PzqmifU+MCMheY5gEc5dISzrpmKCR2\r\nq3I7JdxpQQjciFU2bY3kiRPAwknnlPOyu41D5rqhwOafr8+yq4bcDrJ2z9P6\r\nWXifkVjUVMmh7frgeWSpHq0683R7815AMrk=\r\n=oATo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/button":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/icon-button":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.cbd9358a6.0_1647644006931_0.2057926325515831","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/snackbar","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1046cf882f8d51a4c0e4c39f8506b8eaea18404","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.dcfe49c98.0.tgz","fileCount":39,"integrity":"sha512-hWnUiX3VpYkL5GoL64jznGTBXR5DvbIvj4UHuMf2mGZ2NP9GdA6JtiznripsJBP7S5LB0HI4Dui63mv0u/WKNQ==","signatures":[{"sig":"MEUCICH3wFTKTZVyOYo/bUzWVzPRh5wupfnfOe03xvM/D0VLAiEA3DXbG4vN82sunoIq6Ad6pSoBj8E/C9KjaHTOIPMP5vE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMfEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoaRAAnZEpzQ8H8JYMs2+GdjfngmYgErF1CCxHLQqCfK3sTzwlQ1jM\r\n05OFW7CDwlqb9JBnV0l3FGczAFlEuy3zyKDtsvrTSqjvqTk/jSCT4T2aW2hV\r\njRrujLiqAGkvEv4mRdrSLyiKsA7whLj9ey1+BuvrJwog2Dz3rf38VYVYgGHF\r\n0pUjqO5Hs1ndVHwrLjyNZ3CTK7f472AYW/sRV7TvRzRikH0ooWVrl/Lf6F5I\r\nPDRdglsnM/0m3tKAoXPs877YipwuwKAOfI2rpGMihrlCaV+ct6hxfv3ZrGud\r\n30vjh5eNIQfMKIT5uF2xUYliyL397EMdea7gUBE9EGrQXBIFjWISpQ3tqUHO\r\nbWmG0iXmep854y2XT3Fgvveb0a1uPzMVpIooyVyw5saK2RsWrMYB0935l8/P\r\nqoVxRhPvg61TTpXD83xsowGNBVAgHOoLEjP4w+Vo/VyN7d1pKrZRTHQrntAl\r\nWj90H5AS01kbOY/O66//aqszNntzpi2gVha88X43fWoLRu2ba40duzMCga19\r\nC197BmTkZCndfHK7/evshtDi7eozsX5p+BEiFWIHjOCfWjfMqX7kvYCAhaON\r\nEhSKzDJ9Gx3KM8dYHU2afpLw6ZzCduZyz7yPFQLPf6FMXZBlWg5MLTzr9uUO\r\nz5O0rrJ6BImOou49RjnuUYddl73ua8eBUz4=\r\n=U+Wl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/button":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/icon-button":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.dcfe49c98.0_1647888323895_0.8225536524745953","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/snackbar","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89ce85a5d58e835007a4ea35f2f868a0ce3dc63","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.f31a833fa.0.tgz","fileCount":39,"integrity":"sha512-8Qs2tF6bmc0MJSwFlX5ZcOpdsHyq2+OM0bWJlRxshZ7skup19uLRmIkFs2nv8vzhCUGIb9x1KAs8PkrPlnv5yQ==","signatures":[{"sig":"MEUCIQD5XpYQ1WnJPZfiQvfXlqWoEe19LOB3b7FAWFvi2758IQIgVyzJiWisyuJmgggDojGKKTkOs4bmxWJXZFiY9o0+qc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm81ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol/A//ShSNsauK3EGcMfEol/ezI4iS5iYFbY2lmwT6YDEmRBksCxcS\r\nw9b+xUEwKAMKp31IzRzr6AOOhLATvS1hqZkNhJwmHj7bvvRU3SWeokDPmquc\r\nER/gqNGPRK38fbPZQPszxLZX636e5nwc4F85sLPuKyxyU6Zy+BexDIK23dEt\r\nn8NXS6hz52enQr287rJlUJPIqECEafFR5NvGNi8R0JgULPKA0N3tD7fkHjHO\r\n0UpvnCITinwwoZDycQ5W8iHx7FNTDUT85Qi980Dehwak144czQ6X8iqSbPXM\r\nuDcAc3LMqTT+7rmxKjUWQX+r7pepbz6macgMnYYh95E89vRbcDZvRgPd8s0A\r\nFMu5LcQGwCfQuqNQfXlbSumsr6X8puvldGL+x5yfMESR5mhQzLvX/iqQjzvn\r\nELtEUr3nMATNKTTAUmBSHY8p/QCTl0vsmcvKluJ1xNFW6KWGb9VS7/02plkp\r\n/ZsURFPbm17FSlB44xeOLNR+zgXUsP9bnbLIvRWfPqyQViZ4ryH75AOe3K0H\r\nC8LWAjVkkbwHmSHemIpN5L0m69YxNu7pcvgP/irUHoxGXVbt3u9VGCbZd0u0\r\nUYrBPJ1l9mBCwvtEBhEUIHErisJS0qpQ9aVfkx90MpzXs/QzFrdL0kUdYqoO\r\nj8q0IXxkDVUugMDjpubwpjFMuzsm2++ntMg=\r\n=KT1F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/button":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/icon-button":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.f31a833fa.0_1647996724712_0.602143197074716","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/snackbar","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"568026935f21bb26001020c5fed12b4fff92416b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.4b92e210a.0.tgz","fileCount":39,"integrity":"sha512-64lL3O9ypNjNYrKlXh0IOLqxHGLPy/sJpNn5EeBwrPt3qBYp+La6ksUaDJ1+4bnVoucX0U9upA0C8COAu2rY6Q==","signatures":[{"sig":"MEYCIQDE3l0sdqarEY19Lbycr4uDKO/vI3A32hm8xJLjVg3AmgIhAKUP/ELrVSqI0niMA5kMTO+ocPc5Ce6whanibCtg2YZc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDig//Rrou7XoOgmDpFupXDOYjavwwqkj4n0aEhG+X972r8mG/YQKl\r\nKmozGTyM/h8ecMr2z1xaPkwcVYTYVFkaLO2IaH1hqlL/eXr+otgxpq0UmAen\r\n2CwN5UZfCpqu65U6/hrXc+F+JpKP/gBnY6xwQ5+XJB0cKZ04HQ6YSTa/0wK0\r\nsrs3JC3X9eoXCnt8BTdDfDs3TrkZPOA4maBcrth45Nvfwcr4gWkqrB679As0\r\n+zVVjWY/RmtYdrEsd+UdAQ2UeNJBPojDluktESVL1SiR1QKSHN8xNYdq+gCF\r\ndwJ2W9LuFkXUcW37lkFotByuX7Iq+Yt7HVlipzqZqaQzPIM46S4jun4hfmGx\r\nRD5kmDgbB6pRYSeUg0yibFAxEP0NS4ph+W4DG9pp8ESDplsNT5YqiwIvhGFc\r\n7cyYHORrQMpzb63ejO9fPX9yYEUpu9QKqdhGUsZ54EJ+BF1G45AsrIExin88\r\nODtWqvPSS52WLCsfip7zqczm6I7oh/l8B2IMjMUwgCpt5I6zTqjsNR0tc2m8\r\ns/Ogcx+Ue6EoHHBb2/YzJtdhAwS6KeLrZRWw6L0dfnmrdGxuZe+Pm/VMVHnL\r\nj3O9peah6Qd2VVSSPf/t7tixoCXj8KX7vaSwqMhaYypnN7OmJf+IrjUMmuaI\r\nN6sC/UFrY9NGArGwvph/Fc0aGUU6aAI7vq8=\r\n=9uGy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/button":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/icon-button":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.4b92e210a.0_1648153191539_0.7488073192193672","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/snackbar","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.a657abb61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d070a6f34414c9ae7af5141cfdb0384942c08241","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.a657abb61.0.tgz","fileCount":39,"integrity":"sha512-VIYJ1HkYuGu1MLqEE3GD8mxLhARnr+EfcYQwwWrhtSHuNFFBjyJN7hBhfCaDNEtit8ih5Ohee7HwMZz1qTy6tA==","signatures":[{"sig":"MEYCIQDqHGQfb6q46/zGLhEWFsv0BJ6qgj2ZLNY/SGBTk7N8gwIhAIbCHS5m53S8Q8A3IL8RFCk3GS11JluTkc205XY41pY7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHdw//UTSi4lMdhU4D3TKY+ALubFhbw6nufvbrxqiSO1TQ6WZ/RzYn\r\nHEm/rnm9Gtly6cruSB3Yj7GBa8ear+lOsUFv+fYUxxs+2lwCFVDtKpxtrtmX\r\nInHlV+kEgOlMX8qAVkEg/nNv340ngxryiTxY3WafGr0Iu2KCX1/E4YbL5EMj\r\nSvCeRBRwGXKZ4GD8re6FGV+WuO8UbopTDI1c/0AZ6b6AnsXlAboWRztTSobg\r\niE7Tlmzjfvv8MpwKukapBxY2zyyERWgiHYAEm1IkvqPbaM2mdOQyGQXN0+bq\r\n4N3V4wa5ma/DK58Kog6yWaQHB0rdIA7GXl9C1wS6yhiDxvCmz8lS4fL5x4Kg\r\nodKf+lQ7BD8x8Q8dWSIcoxWaf0grMlcDYenUTsCFsEe0WKfBcmOoV3wMyurx\r\n21IM/O3ZM5OP9fCiZ7NpBxdPjU287yufZUlzPvlcLpr+CcS4/r2fgqO2i0Vo\r\n26RAE+iGQ6OvGZyl6kimn3oA9dNP5YYGkHThTmDkQW3xh5hh0XxE45jGFAuA\r\n4SHaudeTVQ9imj6A4lhFBJdMNTZrczFB27tY/TB9UIp9h8EMoXCWXzwV4nkC\r\nxJs7o+xnHGNCyNCHwfWPUubsePK/+bueVhjI2c9GUCxbz9dS1O2qic82qnGB\r\nQcMmNAxVqu5ZqSbvp5XKyWV6xgC6g0YxB8A=\r\n=MENm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/button":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/icon-button":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.a657abb61.0_1648154479983_0.027800025542918494","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/snackbar","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.443f63f50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d063ec75c65e4bf5d920ee7dc36028afd68947a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.443f63f50.0.tgz","fileCount":39,"integrity":"sha512-bs9bDGwOFOIfCPJL0YIM44RhKRKTVg7oRuRdcXXYeOjMxiTtS03M1/n1VFZy0OHeBO/RQnXt8kB0il6WhUKZzA==","signatures":[{"sig":"MEUCIQDboGaFbZvUcFYLTCQHQfw1UMESOWGeSYFOpLk9PQSxEwIgK6UxJyMY578zdP5uxkcdgh16UQjJaVr282s4AUTHGHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkrRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf/hAAg5355jaX2jrm3cdfxcGzqmdBfnay7u1e+7ZCVmB0p/wjytxl\r\nVCNTs79DDKhaUbf0T/RCEyi0iha1CLPglgib37bIB8lm8z/dGcKxcmhOHSON\r\nBlzxEtt7FoterF2q3GThN6OxCjKL9d7pcvgAvDDYYjWawjzvOzzQR7MouaEw\r\nTLDf7THRPAYz5ykBGEP3PX9MYcNhq55IyDvWNkIiaefAfBGsj18mjaNkGQ0V\r\nacnR+G2ezzDhyMH7O+VF/birwWtqJ7vBlNl2rplXLuMuPXJF0JWw4vrQht7g\r\nGQLWWZrf7vRGmtJ5wQoHxjKnJFrsBKua5Fzksekv+MFMEBq6gcL5BQcgrlO6\r\nz+ZPY8IZdwnnnrB7lPXL/ZFd4opIpYTEhOn8MwCQhOzz/kumd9DsPoopVJq0\r\nl0bjr6cxSlX75a20YC8ssF8zeWt2iyDZf6O6pdRbIULBtljV/RYGk5HhR8+o\r\nVIWU5JuUApXvqYDwKIXHGniT3LYjVlniH7OOG7cu9niAwLo6MNSWjRn31RiH\r\nrudSyrq/YBtoKGKfEfeSlPawwcJo8upNOPpcdKctBHdlWUmCKFYwRrJR2kgw\r\nxu0ZEovbdKGnsLrZjO9PYv7UjtCLk5kQ1v1DOwaR4t3V9ukV6Y9/kiYwAX5l\r\nGL+nhVFARdeMlqeeb6WIZkhi5MJG0W8V5Iw=\r\n=cFCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/button":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/icon-button":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.443f63f50.0_1648249553041_0.3462119525300047","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/snackbar","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.eb382f318.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"080a485dbc7563af14b01d4e9908100bef8f9216","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.eb382f318.0.tgz","fileCount":39,"integrity":"sha512-P3AAgD42JlAJarYQeNjia7whP/3+GxfzwmqfNrIT/3KxFfCybl4SlsuJvEnmHFGilmbQgJ22kdFwBdCIwUUh2g==","signatures":[{"sig":"MEUCIQDwNXC0cLR0jtQPa6IeJ0pt+7z85Yyl4r9bcZ7V1rpGvwIgdNC7x0O7wle1k1w34mqeYrgga+Rnj15kl67j4AxuSPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0OSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqoxAAoL86HXbM5m08F8zTVwbXuRqn3v7v/DTJIZ57u0x/XUycZjxU\r\nsyMllOR6asPDwa30hsfYd9olWbbszVC2vnVi0ygdF4LuVQVE587xg45EEQpG\r\nlJPenKUXwFfqWYAH7bVOmesGgWNLJ8+Tn5EsLnL/WQvQ0t3Q0rskI4/c+7KQ\r\nO1BGfLqRFa203FzV66OhSC55cf9vRX+eU/4vWP6Bt8PZ9aAbpjKfPvBw64oy\r\nmFIKk/jnFw7ixxZ+RV9bHVd8F7cmtm8vYTQ8CNcO6ivnvtPnSCxicArUfcH8\r\n6FhfjTq2vJdwvKlZUhhMYRAggmzC6WNyxiM9r/qC8tiIRgX/ccjfX+BMR0QY\r\nNWxrLkUUNIjmeq+cGERSpzbSxv9cGDpVVXgptOdExvhYLAjmozb65+YhegAF\r\n5UFxUhotG8RNtBYKQm+uHIlVEfZh79p5yxorgC+1mBW11KE2BmZ8XWBFxb87\r\nhSUfXK58Tbln6tcVrxa8ynZ4xYDOLzJ81USYOEFfpZiEGVSKV2OvdjCfFHls\r\nblmf+H0RGkoQPgMPnECH82fm5a5B8jkIZSipvwkQYpMRneExfLtpZgF2dNYZ\r\n7/RL6XsjkbyrkKTN90Y1qcWne3wpaAOkok9uIcvbttsbmuwka6n8WOebzMIa\r\nW337eB0JqHw+VswQNkW0rqYYCFAGdAOaA2s=\r\n=mWyh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/button":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/icon-button":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.eb382f318.0_1648575378166_0.7974883998642188","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/snackbar","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.344d52823.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68fe5f7347ae2781cd0e626df6849ac4cdc8e391","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.344d52823.0.tgz","fileCount":39,"integrity":"sha512-1HnILQjX3wI/FmtoCe709y0raaYYsDTpEUDA+axojHEiFGVruVYKjZv4LxVxoyBN6BOZTiL1z+/5RdR9gvm5Kg==","signatures":[{"sig":"MEQCIDuD1X1dyaoAzyiLsmBsFSjtOqw+bUiaf0bI4dhO/GpuAiBuV58fEJtfPtfph73mfNF+vc6+FOygiZX1TfoG1BQzww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1OUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP2w/+PTcfi5ZNDqC2Q0JOlblzzHQH4zy3GlOtxYyVnvmt4VUSliGf\r\nw9RyM+wxePgKgGokJh4/jcuSQpS4FqPF9TXIHA79XFP1k7D1Muuo0htDhY+O\r\nRNoWndA+7yB5IMalOCCPhREXSfRicuywfzBV0+rrMmdFhQKFk3ytIkcdYpnE\r\nGPSaTerBCw0QUKXYhs8Sd6LtVUT+xEzkv8bgdvSywee+Y4TK4uVq5d+u+PRl\r\nFHIuLK97IUFP2WcRfH4ENlPXeX5axKk/OWSvXXR+/H6lF+Tp3nkr9WbSsm+N\r\nGRue69GrGrWztWAeq+1VuA1PjZXt6so+80HHfge1GAECyOVeRgPpAl1CJkzF\r\nDxp8d3p26qeQjXy5fSuCX/3fl/Sa59BXCRgsdv/mNTIsLwoValNhZakQoUuY\r\nXkj8aR0vX2YMl49EBZkPv9k14wB9eyrKKze8FT5uSuelqDQVw8zoo+HAa8U/\r\nJTEj6o2QiUGOAFq9kSZ0Ale5XrkbPgxVivLVa4zi6RztlurZvHDPNh7+YJuy\r\n+GsHPTz2x8qGpO+uLT7+dyQCP2mTE6n2wsoRvC+8UQyiMbhhhZSDAgRy0VzA\r\n6PNeABQ+HCqqaHy44qL7bhr9a7D2S8/PdEI/zItWGPudIP8KmNLuN6d/dRsp\r\ngEpP1qsCR6xz81hi/r6ee9lIbjsau1w5uqk=\r\n=Cbkf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/button":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/icon-button":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.344d52823.0_1648579476554_0.1329149885096046","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/snackbar","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11449e6b17465dd396d075d9af6de9638ddbdd08","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.4e372fb49.0.tgz","fileCount":39,"integrity":"sha512-nDRB14duHY0ZI5gmFgoycTVtlpj0KREBeCewyTRoqUop2GtHzMsWwficB3bOTxseGdsPbI59yTSOeunV2suXvw==","signatures":[{"sig":"MEUCIQCsiHpnRn8KfMuQQqP7XFdkeSNNcmSHy6YMxg5UwEbPBwIgJ4iA8Di8PG23Z0336Qj6yx4azBCAE4mPIo7cFRbvxEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0rJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU9g//XqAJbrbn8Z3ndi3BZbuxSM7tc6S81MvcF1D4nitHvrScBinj\r\nXzN2PmZlDA0926rwjfeJ4tWJ3aTRno8o79uPKSyZCP8MeB/VaSlf+ldIZNMl\r\nVXNsxusNwrFnLzQVFjctA1RbvDfhEc9MR2u+eO553rd02AHKvURSsrUdL72n\r\nIAClKh/eZldrFYaGbT9sDfpzbTSqwErh4A0Bxf2FXql2KJgZ/1tf0ufQo4Lp\r\nWtGLPE4MbJXzDp1pC/pIRzAjyVl354eRJGnWodgA59u6y/TCpka5yzuRdVQ2\r\nwB4z1Hbe9p9CNRkAe8PsAPmJRufFwVjKQPLDaONtJygX5YV1zhCxxsBWRzUm\r\n5hn/Iz1W9iCrS0VjCc7pUr/+GnOTGbnNrnO6Zcafl64HMlFQYx6c28577eym\r\nfJ9V3Y02VlXSliXeCCyRe53sp8Xqgjzf5htT5VpvMRvdBjfQhWsbnxTADWT1\r\nL3u8WeW+Vfi32luaOlbEVO6whAewG25XXktBOT8gs9boo5M7BI4FAdX6QrR9\r\n7tn8SIbbsv6T8+qpp2bIxyF2UXyk2K1OQm5Asr2MMt/GXGQVv4EbXzd8SqbN\r\nmvsTN8erBa39G8MhHga/dY0L2BDXGTOtk0MWNJ37PtiwQKsxWmjxvLUSMSpd\r\nvWOZ4fZlIyokZK/SB4olj5E6R8SgpmvGBYA=\r\n=5FYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/button":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/icon-button":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.4e372fb49.0_1649363656929_0.7025989259255481","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/snackbar","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3da2014593ae748338678d0e78619b3cacf82ebf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.3e30054fb.0.tgz","fileCount":39,"integrity":"sha512-4L+CkT7LI8uJi9pqtpQMg85QJ7Z/p6pMs/En4ZmP0naQ4P8Wd1YnzsX4NzEwXCf7+dueNO1vr9xboMYHITkYvw==","signatures":[{"sig":"MEQCIExeZDb1q9Cb5QBv9rH8pV2/9SF3XgO9qOe0f8qmA0BiAiAJzqQbNO7mPH1lxH62O2QCvJkEvStGxZ6mbuQet+1jeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0uKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpejw/8CwaimL0O1pAecI3uopCzOqw1OOQMQwlUIe6fouEwiP6RfZpW\r\nAUP+VCbWjmFZWmELOC/mHcrpNv5uaJt/71ls1V/L0WLujJ66utBORZSZBO1I\r\ngRVS8xesmiYwuBpG6eQkrV75g8Qa7qKhP+99/MYylcdvOaK0IPq1a6HW3/o3\r\nvIT4sIga4nd2sxk8qDS9LZKefrFqpuJaendn1/kMdJEvNiG05yaZAJ5GQmyy\r\nFSwzHbn9YPrtwXPZ5HsFB1HUxt0dQxfXiTegS/g/akbx8HQs1Y1ehLGeLH8b\r\n31MWGBfhUSPHhSz5AOZmoC9O8dGIbmDWAyGaR0mwygjOHas3wIwoiBuPLAqX\r\n4AwaPtgHkv3SlKndJSMwy2lCzb0mE/9IXeICpyDcsqlDG4hobZEgvc5aG6xY\r\nTP3aXFdAJ/kRL32FGPQ3I61oDP0v2wcf2bgTro+vMhWQlOuMd9WKIT+j105d\r\nd5buhEw7mJH4ZnPJC2t0rRpLEp2ztq9pRpUW2y5bxfzNFCxct48ncEwcD3+S\r\nRip1vVOsqnZ2THs3aDehRVWixpEBeBo1oHEhimxWth5pOXh8uKlOJvU5pYqJ\r\nbDDJXyxLrqAew067+JqfjEDl4afT9ELhf+baKE9Y93s9J3xuP888IsBUOHpW\r\nnvIpkjRGLiEQk9++/cqkpB4d9OosLaCiW7g=\r\n=DXul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/button":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/icon-button":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.3e30054fb.0_1649888138323_0.5839273888918899","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/snackbar","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c862c933ac9a47b6adde1cbf36468cf02c9af714","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.8c4da223a.0.tgz","fileCount":39,"integrity":"sha512-mLIA1x5WfFbAh0aVlkUR9YCCPGcXOvM8GxVeGiMRIb5Ia/ZL1y2pDfPyS+sHUTmUT27/sbhOwupWjqa9e6OmmQ==","signatures":[{"sig":"MEQCIGzgNIjRuNsqGFYIJspTm3/HWZF/jaZinkzM/453X4fVAiABwv7o1cJZGyGbNpNbIWkIwf/moz8W3TVrSwEndsMrDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrogBAAkld0k7uOsZhXAxC4g8Xzb0fw0lAEzKiliIzrWSHZKJle8yVS\r\n3jWcswRTMnMpdbHsMSTJvllwG/ontDE91Q39ejebfzewwmNV267kwfwu+j2g\r\nNikuFD1PAu/e+SXGEPeB0HmHaqAjhqz01qwRt2lvuJKVpmjC587xzzIrJ22s\r\nrq64AtDmRKb6jkZ6Y328yNiRjtWgx7U7D78r6ZHC5fCrlFhzt5MUY0Fd3ED/\r\nPEzq7XoUhQ+20dFVwJEmEWPjFlF0/wOr4MjdA4DP1DDh4p0qNloZhY0JM+rl\r\nHYMfhp3CHwpekf9d89RqydP5JWDin+xnKrv9QauzGsuSQYLEYBJIhdZczbPK\r\nEuxUAfP8um5ExmAp4l8Ynesak6wuRqW5/vCvWf4IyPUQl06qDlwJMiV508zT\r\njyJZ3RTLOq8jb3NoeNgus7+DYhA5/7UFou32O0cf6hXZUizkFL7giATke4xQ\r\nZEoKIX+IQOd/0uGGVnnQ/Z14O/uYhFARdlNFEKKwJzCXQ5H8TZjvw9lMDv7u\r\ngA+DjcjdkI7aYYR3RNTABNdyoUP4UrNEvUsqNhgssz2fqdJ9w4Vn10R1Ecb+\r\n8/R6epdXHk6EnDGjBnaWcxSeQy61HVt8N/Gbai2emLdmN23OWLg9tF3HGoMb\r\nwGBhrH/fh0HMGdz/ow56R2+/RwFnn7/t1hc=\r\n=O8bs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/button":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/icon-button":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.8c4da223a.0_1650381933975_0.9642568866377774","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/snackbar","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"008e353ef7196845d3c7a6dcf67250c45ceb82cf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.7de8965cc.0.tgz","fileCount":39,"integrity":"sha512-jpHF+zihLSPpj2Ej5p/PvUIh8/yHVTwtW8v8+2LNhXraWwWuZYK1WQXw0h3e5YyEif41XRl52YODRw1td5YrgA==","signatures":[{"sig":"MEQCIDYUCQ2THPkEVMJkp0365VAxMyYLkvcv4Q3xP+FuiY/sAiAHvhEhlvpNcDVi23L22twTqoR1iXY5fTjByW+RxbMTyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxqRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoydg/8DiyB7MzjvdIXdI7VmsMcxZx71Ten06iesrMRaw7ZvjRxijul\r\n2n7OkbpVeCan+2SgvJVNP3VyTpJO0bLT0aonhB6SefTpmtKgOV79CmS6cKAY\r\na8HUcfNaQDNK8MB69zDZe5ab73+8TWTLXcg95r4hYrDnRyD6h1OXY87NBcXJ\r\n7YnDtgKJ2m9jna/VvXTmBDODLefMAYgFJinBYNzFFZTMlMKiMDemtRlDy/ZU\r\n/0zvsX1vwnxudWWEuy7hh7ZUNJR2/OIk1cSpPLuuR0OvDp0D1aYFN30XhufW\r\nZAr+2PznjO14/NdA0efAS+pFzfTunY//+qdEIu2oKDO5UHeOM53mx66MVTco\r\nALCgxTOnrReeoxIa3x8VNL9p0cg0WmJCiGxMKJn9Se24iYAI/fe2BL975sWj\r\nN6vG1yZjxI8VTuOdbios/AGennrMGA6wWvBvJI1AsZ5CHkiQLAL/6u4bqg68\r\nmXqphFo2EgKsRFcG3oTM2g1DjKebmAniskw6vvQY/JGPYYvh9uVKu96vL7iS\r\n7HV/vlf/0TF3yIBe+xAesX11ZKX16cSYMwySnLCBcQgbU9dAJ8R215d2pK15\r\neKh75mv2OV6YwkNAI91+ZMXmbrmFUaMGqO1AmVVeWTo9KcQfbgozL7M8icSq\r\nCtH046YVHPEvvyvS4YTTfFDR0cvf530JYhI=\r\n=zLCK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/button":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/icon-button":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.7de8965cc.0_1650399889326_0.3116534829054032","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/snackbar","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.641ed0851.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d6fc4335b3ebcec9489b909553a2264ea3faff3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.641ed0851.0.tgz","fileCount":39,"integrity":"sha512-qdMKhhPMUSULvyvVmUCrzdUREbyMm3hiKcyZoqTq6/cuB9SzD4AcHbedzPV2d+ib1i6/VP4Z6B0AMPZkiKJB5w==","signatures":[{"sig":"MEUCIQD1f4IQ6xJ+r0LvBKhsA0+9DrSdZNE3PinZPdINSx5SQAIgZjbl/WYyxMZiwaZ+Og/+YTCjRkyzAAvAALvEk16ik/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH2A/+NIeD7mp76guA+ZAKgFwaYtkYLgLCxMyZwq/mZ/goEGzOqnFH\r\nXJQhEobd/Mwc86AEtiJuDcm45nHtLdAyDYUbMz0TW4mVlfyBXXvyaceb2HSM\r\ncZNNUHbjH6f2JyXL1Alzo2UxoRLaJHLMGDaYYcV6eglD4g9hkF+J9EdCY3sr\r\ntJFh06Fib9YXNHj5Czj0bLatqY4YlNQ50PaN+GsMgfUabj7rtE6R+zLgM1yX\r\n70N5jsKAuBsufuljoy9S7793Tces7fb7rltANG2s+3r3JRyBUJruBeSsQCzV\r\ngf/YOmkNvYJZH+a1h5GMT8SHW1mJVd9OP5YtuTEboVvN4UaRAyqIxuoi3Bfx\r\newYL/D7xDNb1RHeplu85oIHslw2wd6v7CRdTB5f1qnirXq+Dw0z6p8KjObAH\r\nnEQymFgVsLxfVZxmYU59ZHLa9AC7e5v/G1+kxVr8y7v/gs2sjsW+TS41vku+\r\nCnNBsqlqVbxSNqMM0/4OmJMhaO4Zn4UpMAb1cBuuHTSnDGNl6Bv/DdEAJnlk\r\ne8fqptwq1kqh5bZVtHeYK870zDJiNhvbNHMOPjSI+5eUUfHdoaOZStuKxlFG\r\nPteyjJrlQCwXNX7OS2fNamuj16IVIk1LWmp/mummNEsxiUWnNImibrz8kZ13\r\ndHYGTkIQAwguN8wMw7m8eQ79hwvJ6HT8L2I=\r\n=go0k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/button":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/icon-button":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.641ed0851.0_1650470825887_0.10207627058831292","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/snackbar","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.e88f83024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31be8ad8e47c6f9df3e09229d77204f7f6fbc764","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.e88f83024.0.tgz","fileCount":39,"integrity":"sha512-GXQ45UlwB1vas2Ry7l3//JucoW/RNBS481IHlG9EZNmEIjfDShjwn/u1QKDAFnT/akLdRV79a7TNiMFpWLedfQ==","signatures":[{"sig":"MEUCIFykgwuB2ePeaJ5rMxzwCi1mKYjrOfTtcJ5i81+/ibOrAiEAjSQ7F/1wjAKiuv5yTvGKVDrJD6XD6ItKOXRDkyglTrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEeRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt2RAAlTn0ww3pJRO4aAkNWWqliAhNfcbXrDM76CF8JY/cvHXKvjLW\r\ne5CFp+1D5ZYBfkcp1nUZhA5tBxGgnQjl8bk8Thra+anYrpWIuOGH+goavhjl\r\neljVmfaciF8fnH3OaAfW/Xp6g0t52C7deXw3cwcgcYt18gqKkX2PW5VJ8cIX\r\nUSUGfdQH1JddMqs0ED4t8FUDeZMojiJz6vv+w2jaSeCH+kWwZNzNj6yRfGRn\r\nkDeyZuGLsh91TFHC+169LOPyvuh4F1zXc021j8GD32cX0MRqq09hbdxPDpWk\r\nXdL6cA8gQTJWenrIiOrO6PDwgRaDUuRyv0lPNKvyiKFEbIO8AfGoetb77MDx\r\n2MIsNmF/1MUTeJTYVmBcVeMY8unI4Lh7QgqvImuAjn5QbRYZsQCpSETOpMyq\r\nUS05sBdnw8MB0uYgVvjy8mbxYEOXUtl3IC/Z5D5DwpPxlg9sIwr3TPYkGkWc\r\nONmuHu1Dt4sbVUWO1uvqu0dOQ3llfpS7XK6ejHESn22xX7CsudK1o2QYtJzX\r\nX8N4fe7bhebscPqd1BdnWYxcIA2rv1H+PikiRLAwfdFpnUbmvcQaG1MDYVZp\r\nTCQmvNF5Z0DMmQSlXqWoQiQsQb2eZ+kIglWM4aa2e0nZ9aZuZs8UNgCZUVUX\r\nLq39wFu1C8CzN0NStsNuQcIOf4pqgMJ4FvY=\r\n=cg2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/button":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/icon-button":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.e88f83024.0_1650476945431_0.4524653098889748","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/snackbar","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.7321d6254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f40b71114d5556c088d84565202dbb7efb341407","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.7321d6254.0.tgz","fileCount":39,"integrity":"sha512-qhY+Uw4BWrZeCz8/k+Tv+3Go4aFThw2leBxHGtF4zYcTZ7GtU/89Oi8aIipJOmv+rp3neZEV/8bgV7qssYkK1w==","signatures":[{"sig":"MEQCIBRFklLEr7tdiRzDDh2qUIuAV8cu+L/xD1k0GJFf/jAiAiAwjwpGta+/OMLcY82gX7wfYPhztpFKEDLF1etefsMs6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGk5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3qQ//cgp9yYUtK80kaDaFJGrroc8Hq3GcobqiZ1jyzYOKRGQHvBhf\r\nznVE26Eu+7YIGgHnL0QzYipBOJ8tUrJx0mnptIdnmFuI4TaC2ZTowENdw6MS\r\nC+yO99pDuqv5NnelvDg3/Kejco+B8yX+555xQMs4HfyyXl+Fz6J8O1eis447\r\nAHwcOm6vMoIPLAMVkMpNoAST3bnc3LEtS1e9fUu8C3k9JkX/ycn7MNHrL+8p\r\nXrhJeVEkrZzisVQAofaBT1kjWJU9JX9Phj82wLqNt8yfbhAJHuFIO5nDs1Qc\r\nUafzNFCawQQfLUxQN3M02EjzVm7Gs2MTMZ3xAyeVEeFyeEP87yUfY0m2zpoe\r\nLGN39cxal4XEvzWkAkk1gkYODYlwgYzyNFkHe3omaAxvt5T2Q1oD33nIpkIQ\r\n1iQ9NZiVb4EqZyzucukwAGMcz6mG8u03ghcfw0CkzF59ECC7yUZq4KYBEt08\r\nLAPcas72JOfcWAcUOOwJxG/hMjcqxB2fyj+N6VFwdxtqaUhKHmgRnu44pTvZ\r\nW/qZPokkbxJbVdh/YOsc4mD3FCwURVihE+dioOsOe9vOFUgG0kHD06byn4MU\r\nWTYa9qk/5ql1dEgT2nRwABVu0a9DdjnDAobZpxcLHDxEfEukhmoehuECF7nq\r\nWv5L09bULdL9ViMw8U8scJRp+tjxPEOOoZQ=\r\n=neCS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/button":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/icon-button":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.7321d6254.0_1650485561408_0.7512067001602456","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/snackbar","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.3ab956515.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac7dbe0b44ebfcdcea4b5132f02faa219cce579","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.3ab956515.0.tgz","fileCount":39,"integrity":"sha512-GbonsdYIiY0ZhQ59yZQ/LprDqJC3KkSzl1FB5P6CdihjkYE8Q4o2OGqm+PDYZsXRJV9ub/ovQEKdmY/zolnnvQ==","signatures":[{"sig":"MEQCIAcVfyop/kw0xXxrT5JluJD50cnzGx7iv1cfmNiB+oG/AiB9+HV5Syav44lSCTDs2HglWYFm9lcsk5KP5oS2KcM2yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrg2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKRg/8D94AbpPL+dS7o77n+7OcbExAhGYCNRRvHo71gwp0v+4YoFmp\r\nXnLMRw9AWs/nQagBT1/I18871XUDba+sacd3CjITNv+nCuR9wTnHh8CK004k\r\ncr1KOzPC8sHGO4Ly8I3pmbJ+wLQ5nSK/f4o7NymTI8HkGb5XtZF79Kg593Jz\r\nvbVIxIFhkmXQRfY37HmHVoLO5c/FQk3JlaCOq65FpkD8J+EK5K5bnH2IJPL0\r\n06jnAJRZiRx9TYcioIeh+4076xs0ueHWLNcnl5fSMRrNee7mwJVDJmhxs+t1\r\ntZoI/vqHT+8+1ZbtQNwfV9O7jNrpyFai8m6oGdfVCXWuQA/Ly9U1z3TnJC8O\r\nnJnwzT2/1INvICEDPNheu3vkzpVrg4IVICe5fsKDeuQVwythf3cqJNrslnC5\r\n3GI9Nzz81n1g5B0GB8GGv62/RgvdK3gFSuUrG7AqqvlYBqjULu/NYp8LuSqG\r\n8oBIPZgS3y94lSBqbMECiKG2dhFFzEJcNyRepnZdYLxLCaK4JPtwTunTg/kx\r\nCKPJyYVV5nBNzYS/xngeZVszug3TVXkP8/tEqvijRL2iwQ/xsZTMPjvEHgDc\r\nFe4NWROF4HTzGmGRFjBU10Kc7kFXupBnlUiOwV7QxuZQEcnQeMr/IWzU/ul+\r\nHsk0PIZBOwN6SJspTPK1A6Z9XdSVAkQvkm8=\r\n=TZVQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/button":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/icon-button":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.3ab956515.0_1650898998767_0.1810523427216808","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/snackbar","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"185826ea68fa9729c5254d2bf360683a6e3cd7a8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0-canary.53b3cad2f.0.tgz","fileCount":39,"integrity":"sha512-E/i+o7Q8Jp4UW7UBTslqlFeSxgyU7XE86CoYuq2g+ySSWTt8b16ug8EJTQvuk4DRdDO3tjQN1sN0R77Av6txSw==","signatures":[{"sig":"MEYCIQDJhP0Qwahwdzuo1U+JBGNHRvvLWDRpmwRtjUEW67ti0gIhAO6toERkOhlJfPZGJ3PqKDtJuDe8CuyWCWcrhububQty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTs6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnuxAAlMao9br1EY+IHiNI2M9pRUZtoBtUTwEHTsJ6y75Z0eg/khBj\r\nM/OXqyoB4d6wwjOvXxUmT4mghmqxSzo+oDeGD17VvPPi8OHj4n9srQMcsOas\r\nwnzyuYo7TUyK4oiDtvclCCmxOZ/wFp2Bd4vcYECunWHGsah+539sP0Ggd0x0\r\nR2B81+kbT1UrCv8DvqtdcgenmuVpCV9+j8GSuHCgbt0LkaMui5S/u9rpF6Kf\r\nw8TB8WErvHCASpwckXnByxy1vQstvazqqohmUMSc8s3OWOndn1gkdKjKKPFl\r\nIFClv/y/kBnBGR7VU2zH5Bmfp5r3B48QQgRwfmxFdmQCmUcQ+BseY2Nv8A5P\r\nsFBwWHb2WrFJnt1SLK/gYnZLeGO/t7Gy+oqa2OosW1UPZ6jJQtrirzWl78Fo\r\nPOdkupexuxkCc/iE98jDEKyeFmJirZbrqv9RsErJn8nOhCgqeBAgIFuODeNO\r\nz4ik02M0PVXx8Lr9zg8hFBuI2+zD6fM+3fx4cLpWAnSLlABjw9M6XhBRrg29\r\n+lpMKJwPUQdjFGrOPMPJpRcWzsu7HZGJroTC0Phc7efH6NrLPWj9br3rDwmL\r\nRpqP4i/3V6/aNGnw6igWUXaK/u4nXtF2LnExpHpjvDWvtGUTf32wHFAAhTEM\r\nkZv9pT/VK25W8gWLDgEriPrkINImdqeCdsQ=\r\n=AZlp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/button":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/icon-button":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0-canary.53b3cad2f.0_1651063610390_0.7497957166926901","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/snackbar","version":"14.0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@14.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eebea965d2090d27e290c3a1497d9fcd89ddc968","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0.tgz","fileCount":38,"integrity":"sha512-28uQBj9bw7BalNarK9j8/aVW4Ys5aRaGHoWH+CeYvAjqQUJkrYoqM52aiKhBwqrjBPMJHk1aXthe3YbzMBm6vA==","signatures":[{"sig":"MEUCIQCbFEI+ey9221RntbD2vJaTff6sp63/HFaM5Ym9RP0zZAIgO+moE6MYWVspplK0noKY0O2frAhzNQ0RpQR/jajMRCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0JA//dvWogEkCrqTW2r/dpnqKUoOmQf6f5EXjHidHIiwdR+R9FPT/\r\nXXLwTWqe8m147ySeqFPc0pC0pNvdIWhgVrTJUez8hc9B1EmWph2ega9lOIcz\r\n0TQQJx3oOnQ402ThsSc+46gcNbbHzJez/G8BuHu9fUYiKJk2vMZrw2v4c4US\r\nVbyrv9lJRieZdbzY5tIqouAcoPdDVczhVj4DYOljFOZ0daM/Vzs4BbTE2rqz\r\nLCu7V3CxKbqiHzuuXJ9vZF89ohbILyTiG1mzOmrJsURqz3bjqqCtYgHnBJDo\r\nW9f5NFvv90g1HhbYdAjr63WxlSqXQCHIuXQAI1MziShjGXw/uBmTd9UhrT+y\r\nXKzB4Gejw+X5U5Jkxr+Q3H0h3NhlCS1d/iV2nY97K7gg9F1yUy+WnAzMBA8a\r\nQ/BZ+HMVOemfOKxy+Fyhe2ZmjzCBQzo4W3HMihrqsOtfkzV+aCzGIrM6EZ4C\r\n7SVnQU9hrHq1pRmjFEdRmky49V0CVi+aZEuTmJ38s1C38AkUWtj/ag+PnpQq\r\n9OW9LkPn1+fYAn6/kl/wCwORTKiqSr4ykaZKRE8E2DXyU0hdqumGOx6aGfxQ\r\nbi4vz471Dp+F8vvFg1KEgbxdDMp6Olrqz0Vbs2w7kB/igRMUtZ45xSqJhdm5\r\n8SCHxdlMEoRv9RUTDLXL+aBAG4TSaZ4rkHM=\r\n=XUm0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/button":"^14.0.0","@material/ripple":"^14.0.0","@material/animation":"^14.0.0","@material/elevation":"^14.0.0","@material/typography":"^14.0.0","@material/icon-button":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/snackbar_14.0.0_1651165043623_0.02573425423626019","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/snackbar","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.432c815e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a68096294a0a7f220766ef3974087f886484758","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.432c815e5.0.tgz","fileCount":39,"integrity":"sha512-LBzO2lzxryeX77l8HWRoLZjpU56tJouQqNKCs23b166FaSw54cLl8/1jzhpEZ4bQeL2UPjyW6geTXxyKd1o83A==","signatures":[{"sig":"MEUCIQDl/8WBDN3eeDIUHaHQgYPxpQtcbsuIpVOk4TsSpBUXvgIgcKlt+HNzdQSraw5F0cA9uYbVSIqvEOJmIHlv5S6Hzgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasewACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlzQ/7Bu+whwD9/IQ/qfbNBGk36MHoiOA8m3ph6Q4jOxuWF4YCK8K+\r\nwTJbnP2MkwabQ61XrrCgm3uQC8NkdHomX9m4/3l3l4Xojs5w1rC2/vk4yzfb\r\nStzMv8owM129WmKOl+TNgwFF+Wi7JKOJixJzvKPZqegb+87PYbnMko2tiwpA\r\n94WeT3cRNIL9Zil/xIjzaJgq/STEmumKrlx/oWDwsurdmeB6KEmeTEViYTQI\r\nYpU2bP+/H6TEqekz7btU3CtoYJSlpOhTQTd3+2ySlRBarjeDCMzv4gYydhJJ\r\njmFrZsrHyb1UBsqXCmPcWYUkxfwgVbinTt9Y2gqijrN7gyrd/95GNv1Hr2Ro\r\ngrdV+8/HWkvbJEJMR3U60sDPUXpWc746N5+FdfTlRN/cib3PQfK197CSjmNk\r\ngPNWakXDnJ1Tj00kKEOAvXBeqly7yYtHb0+22S++fNG4MjiF0C+gJuucLECs\r\n+riEEUDqJkiueOQ2xvdc77c5IspBKZLhhdJEtDj7ofpC8Z6Q/ZzPYg/bKWRZ\r\n4l5wqoIlyLTc2ux4g7l+uW2O2ZxFHSFFbuyEbtPSA4ctn2WhZLj+MOMAHNcI\r\nbTX06xudrORkPeYlnYr0wnKRjxflYwsqS7QENvPoWRHD7YrdYS8u76g/7NM4\r\n6seUL2lYmPfEw3VAXoI0TpKBAkjc5s6MALg=\r\n=1G9X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/button":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/icon-button":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.432c815e5.0_1651165103921_0.7456374131011185","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/snackbar","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8014f283081337d67aa1964c7f0dc911bf058afe","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a0f01f669.0.tgz","fileCount":39,"integrity":"sha512-SSC/PuMfYqPIlCZ2FDr8Wjn0jeJnG0wJvk3+0sQAP0pga2j6OQaHv8isyOZhxe5vg/UZtFCgdqbiZknYThXiLA==","signatures":[{"sig":"MEQCIH4YnJitfrF0IC12NMpUjZ60qeOsLbY5zOqI2Sxfz9rZAiAGdmU5K73szL+okl8iqKyuxkVSzoaLhKEWi59ojuBo0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYIDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmdA//U4K1klNScSLjgRmdl6b9N+CtJUzCQmz6jcGcjjgy4tKBBBzF\r\nlEQEb1C50fiuhwn+oOfiH65EZDIfrB2FBcwPdk9xrRaNNVCjLXi8SXf3+QHy\r\nFChxN6GTKqjzAzdhO1lzEmTnD6F/nmr//oqs+UKB2PXfpC6S5CR1vCefXMWg\r\nIW9xwXx3rkVMvBzEZlxdtTrDxtocX7sczV5nJIlJyP6G6I4w+wnRE/XY/jj9\r\n/TRCtVg76Q2fTikBRSMZ7Ra70Kc/V1rG6ZcyjaV+L6bJlxTKKPdbJ/C7oHAg\r\n/McHm7wZ/RS4YFKBWTf+CQy2YNMVNZWvD7RdHPgDQj+bDriHRvERnrFehbNb\r\nWZ+DNYVyZ3FR9Js3AGBf1ZiT0Eg8P7BzY5fxocUrOwNyaJq6YoroOPZSGHaz\r\nxaTmHLsIzQQ09GvFBAsenWnN5aqUQv9LkGudHYfHd2UMXU8DqrCZgqbMhCmi\r\nbJtKUboBfBOzeEKOnrfLXWQ/4ZP/+c6S0oNRTA5j5ZKjq+uxMlrxTPSy44dF\r\nBVj6UY16b2GZwMQdSpCSCvTp9Y43y/kPfZCFtfL7PiVFPORTNW5Lyzg2zbGv\r\nkbpGvzBzE6EakKbQHyVNHkEoOWxIZsIrpIyH4aZMWbGUXTdytYvdUBPMVFLa\r\nkZvBGqnY8sYCs3QjLQN/m5rw6q7gHyRbxro=\r\n=OUeL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/button":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/icon-button":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a0f01f669.0_1651868162994_0.4959095979652277","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/snackbar","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dd5911991b4cf2f1d9552df1ec6191f66adfda8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.276cb39a4.0.tgz","fileCount":39,"integrity":"sha512-fnxnvcd3hx1nf51D18Kiy4RncZsCO/Zkdzh1EE+ofR3P3vPM80Rr11B4m5Kh5fiVWKIzVOM4kSSECGmOYzajYw==","signatures":[{"sig":"MEUCIGrpnNuP1gy7w2nJMM21cq6cYYiPD0z4Foe9hGDV0JomAiEAwioSxSoC7tYW9q7yk4qkaqn7UHu1+x6lxipk3K08WmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZQIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTmQ//ePVW87ZmiQg6FwBB8LbLIo4ZH3q2zT7NhTpQG/lBkubQevDZ\r\nnq8xuk43TwHSAcyZiD++krNLkEPtFjxvX4QSaQzEujDyGfOLN/SD++A+7FtJ\r\nf/vHRzlWkNpwT+QNygi/tQ+nITbzILvWptwv7ubI47giGMzqb7AUvd/TCsYT\r\nrAKPCcGsPjcnorEIXnaZL+zeD1yNxxuohlJOFpNiYCt40J3ep6gVPNfqM717\r\nzuSkshgqbLiS1AgBJKYHmNoj70MtdC6s0cHHM+ETxiTIuNHeT3F8F1nm7eXi\r\nKik3bgeivH0pEFlfcVQWhwuCR5nZNDvq23LR5ASaM6mlT9Iss83/Urq92YA8\r\nTnysmqT2kV9Z/C92l3VUTUkmEAHg4NSbA9h7hydRTKmlGO/mobBVhE5VaWkr\r\neLCP3j53WECaVGVWy+I3uHOoLHB374x28lut9cS5w/frg8qMzitqM32pPUuu\r\nVdA9qqTFDjGrRATeqAaMJxY03Ns0IUnc7xV4wlBI31RFbxtCfryqE6V1T01b\r\nvwCv7iwt9H3qbzj6vEr4+NzE8zxoBkXrnK7vM7bdnXV5OwQC6XR/7h5rHrzb\r\n+J5mI0VZpwo64vIw14S7dM1CNwCy5125rLJxj66rvZ7wWcckHFr8WpDVnNKX\r\nbbKV0Fr6hVF9MkJc6a43kNGx3EHLMHhVXZg=\r\n=j2oZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/button":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/icon-button":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.276cb39a4.0_1651872775948_0.6382513328539581","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/snackbar","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90850e9227827f61d6ebf6079161f308654f0fc1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4fe98ed70.0.tgz","fileCount":39,"integrity":"sha512-Ue9tmnMaNEa7K9kypq0zRpiiXhFUErsXjII1Yrieb5M/OGb922lKjjtA0zZtfmiTs5cyriR2CEuU0R0UQ7fvRw==","signatures":[{"sig":"MEUCIEYAThoPtiMPQSInMDO/nsm7Yx/tiSeHQzBsMei5i+crAiEAvNT4M7+ABx2ouhH7PI3d9Fhx+YnHLLWnaXqZREnL/jM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZnEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdCg//bUw71FQf2nIWEkKZ+venUoiurx7YOaV4Y6e+BMw5CTB1D6t/\r\nAJdWInKSLX6OcCcTrSdho8nhTwvDdrFXTbNJUuenCKK/Q6/uXegNTQj5FQr7\r\nnEN0P9tzqC0wz5O7vpW5qLXPX52IexEiviR8ulOZb3+t+o7UgnIJKQgGjZoc\r\nHQD+YgnHMfBvUfG+Q+3zOUp8IgdL1jnuqsALuzfHA26Ojp1DFxlm3Ap42QXE\r\nmL/BdkU3fYcWQxYrY3M29ryi/w0TYEPp6tkkSnf/DtGN4Jzn8tnelE+x7ast\r\ncdFt6qiVIxYhovx0JQaOTTHA71jX9ry+Ntm1NG6bWYwgCROl1FrqXwco/hLC\r\n/Gh5BL1sfDDP/Hah/t5Ozni5mPfzdnctW5dhUhXGCcjO2kG10pNVXrc8biRV\r\nNnK+Fws2e9bi5pmOM1H3T4AAyWu6wd2KDcTdGwsH4YdKlpXAYMXUO92bELn6\r\nobWvBe4FFXH0576YdbMQy5T6jtkZsQ0ZwOQBj/00ozd+KLTiVspyICFw03lY\r\nmGrv48Yvr8NpdUpqNJZ5EW1TN/C4vPrPmGP/zEnCyyNfIEpTqVgJ0Anl0FDO\r\n1Az8Vv0jUZvWpxYY8tor14hxj1sOJYUH3nu6D6kvGUmr2Dgtstxi/OajaFAr\r\nlS3mKYoebxZuSJpMIDIK22IUSakNH9uMBeE=\r\n=o4cm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/button":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/icon-button":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4fe98ed70.0_1651874243887_0.5741744402715259","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/snackbar","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a125301ee3223cdd607c3aeb62b39e4c990d68c7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.58b130a3d.0.tgz","fileCount":39,"integrity":"sha512-YvcuLNbyrggTukh2qxW9RwrMum+xRGCD+95QveuLPT2+towUK5Ps1cD5QIMdVK8QTl3Af+2zoiwRKktL3fsUhg==","signatures":[{"sig":"MEUCIG0aIvCv1HzqXh5TJxoj84logsI3VOOxBn3v97qmfSoRAiEAo+jOPn1Cdgd75KDJo8YYbiw/FPvAvcUZOnUQdrVlhdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2nw//SD9QFWCgNng9KlCR4tNmxjfGElXgx9zz1zrY2qEHRqJy4p/k\r\n7V1YPAHgTBv2gU6IoFVhzDy5+pREPrsj/o0V7ezbqIid3mMfMVxqwBYTIlrw\r\ndorA2NlOLrBVdjIHazwoIkthec7T2fpLvCcEosHjjixGjS9okdUWO/j9ES70\r\nfAX367Z9iZs764GUHVQwK3LkycLRnvhlWHfJtYGcZY5PnrTZOFg8ciX8nAZl\r\n4OjKSGXQxEMBJUiVmgHiIYvHJuUhjx1ltd8j9Jm5IZ5zwe8YPA6lqcoNQdmM\r\nVC12I7TQyWelvjDJ/gudpHEb+1uD3l4G3r+vjrJXdUbJIz+TZFC0o53H92u3\r\nxvTQYR6PC4ZpH9xxMi+WSDfrG/lEHkXhd5ozIFq212+qJHoyCIHBe41SMi09\r\n7ctK3GW/tlWWRZkHvTRdPBsSbPZRPq5EuvvRYsF3P8e7bxtbMfS6/aVXnQ0I\r\nUEj2FBpFvtK0jteDfjWsPDM3x1N2QFYwjlfieoPiIiVWlQNng8i06bLMFWLJ\r\nX+XSfblkzmydR7Dj2Q7Inwx6OlQJfAQZa0YapYSXKZPrLXNEdlXaEvPightR\r\nzNqI/UVdC3KNiSWRUQNMnT6LzPHgtLyxFayA2gU41pEwRUyzzEuf1eDeO2Sa\r\nfKub+18BONQehvk5JXBOBUKaQkFVlU0qem8=\r\n=xmhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/button":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/icon-button":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.58b130a3d.0_1651874381549_0.6382849055487207","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/snackbar","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0ec4b42a555fee9ab228a807095918bcc6706ed","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ae278a2fe.0.tgz","fileCount":39,"integrity":"sha512-7gJVtOWseojwsywW5Z38r8cg388A3r06lQvK4jnNLnpm5muPblaPGNXoDDrGlFosxuuxYgHULNzOIMb/I9LUKA==","signatures":[{"sig":"MEQCIED6uGA1Gl4/hL9ZZpYjrWZmmgXH3hEFXQfq56zV96uIAiBGEGjWaniI7qDYZ7iwCi05mtZ+Mh0svHl4uAF0BAIjbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTKjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4ARAAm0SH3uGj1sZkowVQ4UV35sdXybENJ6DDptNdwxtvpi35CLW7\r\n2iDq2O66P8sFXdZSpZ4tugsaKaN+q/mPT+s7Zducz43W7Yrhsgp3V1BeM+xK\r\nq6zZdmWAu87flb2yOzPaFE/WhuRv6p8VzratmMufOnuPj/3DpUOsTKb9/b+l\r\nYsb5Ub76iHKcF+3FeD1nK4RyjINfk0vOCCAC72mOviF63GExW/ohvI0jTA4n\r\nS41hqgti6cA50KH3vk6zxI5Mh299QkE2+K849DvsESZrZ5mJ5SLKxZ6Mqy9A\r\nrGLJspCvLZDY3cLTG3WIQFsX1gHv4CcZ3EVbKbefUEPgT0iWaxEBQAOcLnH+\r\nOIzlC/JGqFjQfbDL9+zF/nz6nQlk+xV70O721VBstwpPwGLjB2XWBo0SYaeD\r\nkt1q0kLdI9HQOFGYwOiHLNuEZ0ZC/D33MFoRrDfYOlI6fAX0sTVsuX5SAbZd\r\nlaUdCW78gsNbbnsFkCbAHJW745NZBUgv5Xjuswz65+i+TgbnEVCoA9VOAbFP\r\nbjmpDrERAXCZui8XkLTKtEAg2JYTnL+DoEZLZaDuWD9NZaZLJp9odasPSz6C\r\nA2FL7xtPhhKTii08y5+aUClKGq3+mzt8CQNU49+gJFF6IiQQu2fvvyShWjzh\r\nmMtGV0VKVfh8DR6NhVhJQYpxt1/We69gvsQ=\r\n=20HW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/button":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/icon-button":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ae278a2fe.0_1652109987606_0.3157548957026268","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/snackbar","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4349076ba7e891b02fc8f163cb13aed7ce572b84","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":39,"integrity":"sha512-u1JVAPT6+6VI3q2EQ45SKmbn2krGmZDX1ovmG0GLqTxeoM1jzx6vMMNakObiWyOa5enXhagyhqmiBmSQgksTow==","signatures":[{"sig":"MEUCIQDrckM2GuzS4wjQluy9YVM5He0TgPN9OQRr+m1l5z9i4AIgToBENJJYQs8943tBsR6lDqsclW3n1aZI3lK1k6IbpBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVuw/+KVr9PwvehHFmExwFs56D4H6Lh/xy1am0y9SncIMzwSRWJ74p\r\nzR8dd6fO3+PHMxoRIt1pBmfACRz98ywallAGcpuZuK3U1vvySFUQ2UdWSj8S\r\nsPj5PJjv6yFcn13GDKTV7Xi0bpWab+dP/5RXRLjtT04aCVdhpsHUPD1Vnh2w\r\nx4pCGIZtzswyC1Cy4WzNyMQgYhYhoxm5XPLosmRxoquE+/99nCvaLyfDc31y\r\nfxCLuChLliLgeFzKcPl6wUg3753OpdQpWe1YHUeh6YldMHmh1ywzUBqoSX8q\r\n8DErPi7eRRP/YGxgyTACNQ0ZgTKSrXcz+cVHwBG+04ER6I1xZ55tLlY+/QHn\r\nMKH7pOb5F0sWbOjiNlFa/vSUypoVJjSvHHO1JCNTkXRmkgXtfNTmzceW2JIs\r\nKvrgfcVxtfMJDSKcYOpPIcPVwkP3bbj9ml+PD5PxUwycxth//5N0kcuKxQ1r\r\nPVQWprazQeVHYhBr7EpV/YAn+6U1ie44H1z8c4sDiGGp+Vyqn0Kd2lkYko4C\r\ng3bkz4X05bOmjBAEj6YLKkM9KBSILk1Agkx5U8Ve/+kE+JgG91GZoipjWids\r\n05DFLipqQUGUONcF0VpQGX7mUtPjMHWmwvul81yb7ASLoEMUNJVtiQrnczBs\r\nk0IPUkm0C4MrVFU88sRhWM0CCqy+7zHkY4U=\r\n=/RcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/button":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/icon-button":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.bebf5bfdf.0_1652236904756_0.49263939404263435","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/snackbar","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"870fd2168278c3d24c93c0242024344a5d70176a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e6072cd6a.0.tgz","fileCount":39,"integrity":"sha512-uCQfUPcYOYbl0kZ82Fe42vJ/KYu7ZbfZaTC6/Qxz8fvLN4zXVXVZv1A7nfoTWNu0XBatdWR7ii94nb3BZWp46g==","signatures":[{"sig":"MEYCIQC7S39Db+C9NF0+AKMMvpFyurvAv3ny8MuxGjLv8kfvCQIhALaJ69G6A+1dbUIf3cI8FSlbEfYJMaOEOmIcdLEl8uJs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppQw/9HdNcRqBykTqsWecn34L8ErWddFrMXHuYQkE/EuxrctlMq4Gh\r\nOlwQ2sODloDKulgRDbgqHghIxg9sP3Jb/4bfqPlIN2MshiqixFLpg8gesiyY\r\nu8/RIaK/6LVRg1hJcfUXpzGJUjRiAMkQ7IndRayCBrRIi2C9Eke4mXMwOeZm\r\nArXLR8MJnzaDUL+QvUrZq7EbrXugPpzzqJtmTWzJXunuIRKr2y9vE/6DeBfj\r\naeJaMlhlcxomWq4chVAedF6vb/i4u/R8DVVBd7DiFc70wQlhmFNbSGz8b2dV\r\nQZ+mU8vYwyEvl++HNonCIOLg+5kErxL492xdpERzXnHkyehEDHkKvIIMtQ2p\r\n/06Kkh5Wgk3PqIX9E5e1kaXN88qmVKyrHonS8Ea3O6cNQDiof5iTk7rAm4tv\r\naabVYLqzNb19855ZUR6h48n7Q+sv5kq06zwrm+p52KCu/cOPYX348vzAUFWc\r\n/Dms2NY3gWlOqiUTxvXJjb+5WEmsyDKR6lb4IB3UyO1wb7CmgvcDeBdRXBVx\r\n4yXVZwYd2Jpayj+t/tiHjjjDVpqncuk0gVckglEQmtlGQ7IC/d0qA426pkri\r\n4bk5VmGTQRhBrbGUHD+FQ2GKJN52XshXLzuar7K//9nqffC+IV0D/etKj2P8\r\nBDSqiMwNg+aXfhKM2Yq3ZNfA3zic59eXpYU=\r\n=IRHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/button":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/icon-button":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e6072cd6a.0_1652300398618_0.34572703750914124","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/snackbar","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78ee8894ced5c292f5c5ffff7cebcdf1b772e51c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5b40eb988.0.tgz","fileCount":39,"integrity":"sha512-RY7Mc6Ts2palrB44KWPtyZEYTdo8eZ2i0cOpRTEyHXjA7KT6DVkoJfNg4zjg65/NO9xyfTUz7auxuIFvi9/sVA==","signatures":[{"sig":"MEUCIDPmVKc57/4kGHRsDxP3yvJk9rwjIUVIwT2w3Oy3UOWuAiEA+Pu7GvQJlvsrtyUssPpEDn2A7eGx3ysv1IXGPmrrycw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHTVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5JA//Sv0SdhxJ7dIMDAlKxWCMmYY2IC5ek/X8RqTvwkyCpQiL7kNc\r\nlufgkJmSUXgIpXaHPigveZRyY7Eda5Z8QBvzbKvMhJ8jGeaXRTiyeATveTGi\r\n3xxbNXksJE2lGbflGulD3mVIEMn/uFziEHV9FhInqenR7S6qHOIvUPHiZ7ML\r\nd7eTuJ0pxq1NBdThJJHd/oY4U+Kjok8t7F/QO+4Tyn0yrYWJ5PiMqQ0h8ERV\r\nR78iQPEW6rUhPd1coLZ6QfcyFf7XhU3x4T0QQSdgGxXG36pG8haMc3poJnuJ\r\nBLG1kIypKDAmzwTW8sSSfLj7HJXUQRWXigST8UvZ8BM/oLOd8f1ZgylOonKS\r\nwvgkrjeMWcra9g9NGN3P+7yscluEDKH6n+U30ow3oNM0TjQmQO1H1I68MH5+\r\ndyh3mYsIpP/sX3QUIspVOG2dQ0A+30SYF3y/xKTlKKmBRqCTXXKD1Lw8LJdT\r\nltmcv5rkjXybFF+T1vZp+PGpRq/B2SCm6WX6iWco6J/qqqQHpmoLKZykn8qA\r\n7DuuWjcDuVp6RGnAT9zEd8P4yRVRdOzsTh19znkWRQATlyf5lYqnyRcNs/2g\r\n+hSSD4BYC+JWWvTdKJ2kGq6FbuJFh/jxSsM7u+Uua3P3friuDxTJmijs5ULy\r\nfkks/ZDIGmcMj8QGun8G23daMFu1zLxKUiQ=\r\n=WrcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/button":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/icon-button":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5b40eb988.0_1652323541078_0.11760020042991703","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/snackbar","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a9df2365683b855bb2bf8fca0231f4b66156105","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6a61d62f6.0.tgz","fileCount":39,"integrity":"sha512-vyUTcPR6glAV73/6QAxbHc7jBWPhGvUcYNUPGiXngbXuGiT24P74RQkrE7VArv1xfTYSqn8cMEMz1g3lZk22mQ==","signatures":[{"sig":"MEUCIAekmYmzBkX8qKFzyhrVPUT+7UFr535I+h0UeokT76LfAiEA4ZwlEM1YqUrobcuYxsVIaIp93N4Pj5ebeYYEeUqS4nA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYZQ/7B/wMIRtK+V12jNfA1FK2eURS57NYsV0+aKjNhl1VSu1bluLC\r\nudubo+qBKq5v2IcQ5g5OJobpxNAXt1cHRLuc3u+uQ3ARVscQqzaNQwGi4C0o\r\nCUJ0/XjsINd9RDUsCrzZAe1OdnSlAVkXBYba+yzHvyE6pZJ4VWFUySD+ew2l\r\nJsx8mYQWlW85koePh1+XQKOduVOvejNZaZ5QlC4pvg1FxG/JLFnvg/HF3Zka\r\nGsSOW1wLZtReACKbGFlTpip4MfBZrDbz8UJzgz++tHI45I1LeWZe/rJIdION\r\n81ahD2J9Ju/fOe3VGAPpfllI3WoMXNcY19t2vSiVJdq7+Of2d+ZCAmVnL8xt\r\nWKXwhhgyJLbbus7Kzr2tRrPMtU5T/6hznOIqZ9d53o2tClzE5cQi0H9i7D7P\r\nhxZCtzCvlBJi9IyBXZG3Quk6PjpQ/Eajj53n2ei/3U1TFaVCYX2a1OoFeVdg\r\nlCjMf0qpkq/bJ6CgjYv9EjOed21kEu2bLgpLane6CjIChUFHfya6rE5hve3G\r\ndWTd/MC+oQ0lPyLtU8Jyek1yf2RBdNJCcgJBfmpHL9QdzHZ4Kjz++UTcNPXX\r\nktot2PRCcbsGYJAKd/GKWcncU5EHU8MchJZBC4RaegDHnip2zA7U6b6dhe7I\r\n6Iw0ZY1kX8fDRYBFtHUz9IXpppmBZfXVyPA=\r\n=ceL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/button":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/icon-button":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6a61d62f6.0_1652387306436_0.019702240295993212","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/snackbar","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.05930a453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"715d72c7b08895f1114cc7688cff5fea9923e67e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.05930a453.0.tgz","fileCount":39,"integrity":"sha512-Nkx0D/ZUbixa5jpp4nWfzRw70K7g5tjzhHdBdx6yitoJLqcGyf8l642QOv6FrU0B5ktN71tmAHfCE7gI03vobA==","signatures":[{"sig":"MEUCIQDAPoHlsDEtl5FwEBjtQ3cLJBiQDCMkMvj2tn80Fn/i4wIgLmRiz2ePZ8JNR1NXn0EiN4OzAjzrGxqWUNISWB+aHKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqgUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVPxAAhbuAmZJ1N+FLJpfuLmqyRRIoQg81hCnlsfu8HouuLzdJoFd8\r\n6vhPCPsmyaqsPeK4b/d8YybfC9yqU5oBbMCZfw8v7vBHxjl/5rrpB0UywzvT\r\nTGYU4p2KnykilQkCRAC7i+Rz6m51hLLIUQWSxZD0PDjkQhKuDrrG6IqeTB6L\r\nwl7Qe3OGeAbxFXrv6f2TvDc+jOo3qvWNDWfNa2yW0hgFriAA/F9/BFWR8wzk\r\nO+CIk3Cd/rhfQ1yUA58skVZk2KNqLqov9+A4weOqWKtqH16PmVdiQXSoDnzf\r\n0VAIlFCflJOpxiESix5kKhXV7pyDUfO3Fv4zzO7+HKGMNtt0AFsNCvXQyn9z\r\n3tnjBpn0gl9BMvmdAwoB17JATgnlCZp/g0dkEjF3jUj8u/NCUu8QiAZFNA8J\r\nU1NXcwyv9Q1Jli1/c8fgUPkHBhnUnR/7Cb5/NZn3JfsEkU0H6PkYiAd7tlxL\r\nPw2V8pMelGT3b7OWe6Do0q5407GiJY0QRvMeVuMjh2kOUstLg1MFRblYq1mL\r\nRWTzVgRzp2JFvJH+T20lc96sDAMEb9rRbmq6/0mvVz5h9NEITUjrHeX0MCD7\r\n3md2lellXU+p8JfmhBUbfv4KxbdNadAJavoMOAAWLh5yXt1qcmjjBYxlBwdD\r\n39U5KPEeq37IKRueooQkBYc8EHDIiW7wZu0=\r\n=NXxB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/button":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/icon-button":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.05930a453.0_1652467732071_0.4052577818073908","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/snackbar","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35152e79c1b6d1580ca8722192b212b66605acc9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":39,"integrity":"sha512-8sBVPSNqWQ48A2Jx6zcVqwfJPxp6XnB/oVqQvQGk0qNM8qw2r/wVKDULSrnTlLMoK+Lm3yQoCH20l1c1nG25nA==","signatures":[{"sig":"MEUCIQD24qTjfOjL0FFvwLIaE/UtXTTXRvGaGdHc2cJR5u54MAIgWzYaxgzo8OJ39qRwpALkFFtBu/F2fLi222Xo9zR8uwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH5g//XL+a1Pr50Rkpiwr3EHsDq/BbRf6fFsTmBAcTQC4XSnIA+vK5\r\n1rexdVMxSikVJxNWOYTZwaVBJ8QOG5OxrQry2bFUnolYosb2nCRj5hiF9sOP\r\nsXh9Mr1Vwc2LmhTq1ZWzIjzUE5Ip51BChbAU+wdv5YBDVi4P8QwXs4h0+v6P\r\n2LKpAPiBThWotKMgKJoygDpXjYNniQ8VSFLwR3dLNyzXFBSJQgfNyV9YwlVq\r\nOSlSNUJUReK8xbaDFDpv6XVwq7RFcG44li70fTbcn/vguMkv7BdCUitiBKGV\r\nz6SDME1IF28ox57TXi26pBY8QqRbhrwG0b2jwDFYlVrwT62HlEwwHiHkMH8H\r\nqPgmMWkOx9hRIvwuPhfIIOChu4tR0SZAykFJUuJwtWIg+Wn8v1S3vSbUHaMy\r\nirIe5+0TigzzyN9Idp9Li1vJ/u/J16aZXEVh0RkcwMRXw58ITh3tV2EQUpbu\r\nULb3PPMWJ+HzJ2NwaSP/l+7GbbreX7Qv9A++tFRY19sawt13OY1wcyDgiCAg\r\nuRx1EaUkMTbxDj58/Nvg5GVDKiCesKq7RWip5fRlAc2jaUMiNy6TGl3OHc+q\r\nnoYVYiW01TJ3lXM9SfQRgEsauCi/BUumdd5ZHxEVWTARfqswutO2UQb78N5P\r\naitvw1q8bZx0/BjkON16LDM3CcvL1HA7rIA=\r\n=2Vix\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/button":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/icon-button":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c0a11ef0d.0_1652911342992_0.4785820823201883","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/snackbar","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4057e6e1648fd130e1095d650a9e05c70e1297e2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2f9b268c0.0.tgz","fileCount":39,"integrity":"sha512-C3AAye+9oHQsNmGHID2gfwYy3BlOwIh2YbglNuaba71Q2gP311qxNiW53WeK2bi4H7KIpHOpXOSo0fMuBjXTog==","signatures":[{"sig":"MEUCIHF68Skvww+CyLn0acM5u7nJbwdroiNdprlmgRf5kljjAiEA3BvuQ/DPmYerbJJUSGe3/T4a6YHyN0y9d/7hiShGulM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9bA/8CgDFb8T83JFLl/gOP6kV8aOGhLqgsQ/BUeN8SjFIGthhbqWO\r\nNO5wilBvydDnFxMaGo30BqSEEG6k9J5jmHXbYZmHofHpR1m1if3/I7wHV4g1\r\n126yHREZdaAD/itTvlHhqoWZjPeRNt1ijIFMgaKg9RzU70uG+kcC/iBwSLLd\r\nJrYwKfLD6tmBTAItsKk2FZS57AwD4r2ocoeWKBHewghKy3mxfmFLrr93CIZh\r\nyxm5J4wZNuQNyQodDdnKQmXNTJvUh6M8Kp33XVkhjL4lzRLgYEnVIhIJdYu4\r\nnYTwg8uhozmbElQxH7Vo1VoGouDBxohcquaoolusVNp291LaWCR9id3xuDI0\r\nGL+UfYukdRydtVDJE9ldPktXNe36JPTpa5D9WTqg49G3C5fxQtoutJCHWeUE\r\nVAtYkgImhArw+u6mheWRbQtOoLvf79inDYcoLcN5IXcuBXzV1ebtVJ8ZooYf\r\nZfgk6FS3E+CUsIqBF8mutzYrBCWeYXOXOZMEHsZnvaCfiWxQG6TDL7g2E8+C\r\ne2cDSrWM9Z6iHaS8LoVutfRlGNdk+o/wLZruzYx/gHWjkapN83+Y4qMRJELZ\r\nIdLvc9oA6xjLGllpV6lbVSlkWP74QHHJldGeHJy46qrdJkLqMpC0UjLtQ9Qn\r\nZ9gU47z2IXgNe365OLKfJNA9l61BOf1/xBc=\r\n=an1r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/button":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/icon-button":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2f9b268c0.0_1653075244368_0.2503766970307544","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/snackbar","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7741345b8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7b630bd19962bc1a69ba60403b541c1b11655c3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7741345b8.0.tgz","fileCount":39,"integrity":"sha512-aV2xNJSdA9ETvwr24AzcOfwCRvqZmmy5nm2g7FEF/A1WWCW2l1N/skiVwlKMxzvcvpc4LV4oxm5XbgatqdJPEw==","signatures":[{"sig":"MEUCIBnOFZPxAk60BcNPIDifs1Bw01vrIIMhED2YZdTBDylAAiEA1U3Mo2yOk56hrdO7AfDv322odnAQy9lmcbeazPUG9cM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/Q5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv1xAAhoVi9WgkHP5DNoC853BlRP706uQxiO3cen6rmh8DAL5k8ivT\r\nINdUtS9SRzbdxNMEc2CjwH2FnhVhxvPZ2lF86lGHXncivnl3XcIjhnO4Udi0\r\nwfcJX1xCYh7T9j6jwRwCaCCgd7OanaYsTV8e8Kl8ooF0U+4RAEmn/w1d47VE\r\nFBbRy0YC4/fD1Cl06UGIKt/cqGFwFaQQZoPrXYTGl7pO763wsWsjdf5EZTwD\r\nKclpu8Zr8fYCiYUDa0pfRkvKnC45GkGc4DgCn5gbBYEXwu7lRjH6NLBP3P1H\r\n0pPwoDxJt9huKfDR0D2/0ITpyqJtPhHuIXNvSMAfRgDSS1lTnL2z3hpGVakP\r\n1MMqcsheGEgOEkoYReXbth5hTJ5ecSlhW1pEb4AZhRwnf0NFfMDbLfLfQ8vc\r\nFHKnp1XL9dUB8cfmtWjyAmxwZ2eSEgdRTunaUJINlH2DY0vn1lj8MshbFFHy\r\ntdJZ+dVI2dcxIiAsjvBTDHlz6AhPbRrPcFeml5LtOimcpDz43/d7vbGHkzWh\r\nSIH1BUp8MUuL2b0yGQkKq8/EHs3nuX8RjO+htVVirjELPBpi5clAPDIBEi2Q\r\nGeBRTQDWvtqxGSpoACGM0hniagdtDsKgMDnm+AbVvFtuPpXTH7gVs59s4ZfP\r\nH8a4xw4vjwAy8lW1tJvjikFzfXRN1eb1cbU=\r\n=Pm2Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/button":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/icon-button":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7741345b8.0_1653077049280_0.036792611970039024","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/snackbar","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f807e793f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"881e45b285e890c74754a80edc9cae74047a506f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f807e793f.0.tgz","fileCount":39,"integrity":"sha512-F4NttlXgQMAfMqUN4XMSPMrIF6Tkf6UUBcsTEKW6Jdw4xlL7YyZqUKh0Sw5lro5WVQprjNMFkk9Ee+OwseKm7g==","signatures":[{"sig":"MEQCIC5iC3Wh0cPTEFX1yUay8WUJA6s0U1sJyKnxQ+FwAp7iAiB7GjR3w1aF6/QIZRyhXJm5V6HGwM7btL9W2Fdw/VqcEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBTVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq96w//Xqzcr7f/LtLYp6O9ToY83zi/+X/+Y+dUz6UID5M1SWoAm6Md\r\n95HPHNNFoLfuIxGA2vv2Xvi/nhTg/3jjSi1Ox7mUajyN1uUQSeoUsf+92snK\r\nYmSN95/BOKW6Z9Uwn2qgxZLVLiJb0QFZgcMMduc70pakm4Q+oKhP8iFvpwRX\r\niK4n1thWFY80qoYehutAGIfzIS2akf8tGXFBZtpxw1G5GyZE+gRRyePAl2Dg\r\nqDxDazggXyQWQbEoujQotzeRAQxEb8zo5BDjevM/up0kBJDqS/DumlOaXq/O\r\nmFabVbzEfcau7HPibSXDGR+av8tPu24fV375ztEPWcZpAF78YF4buqOEELJd\r\n1BVXJsbWKCNgxAIVySQmMg2BIsbXztizeakq0KxYNmVrZjFlP4muQ0Eq282Q\r\nZld2oFsqn1UXHHXQtHQrERikBocS3RqZ/jnIn/8oCKws3c6pWUyrhYUKgXLv\r\n3qdLQJK6Djv5haZ2GBIBGQRoy5gmpfjT+/vdZxdlL1UZd6qfSY1Z2FkXwQNJ\r\nA+cDdYxl+RVEPHFlsWZTCkSnOVbEHmhhnWDlu+zY24VERL6oOwdjaRR0UN71\r\nfAUB9B9MvQNIQcAEzjbh9yJPY5IFiyLcxZfg737uZ1pdlwflDdhGIw1WakS1\r\nNbqpkqrUV5wUkil50ZcmibIxDREmMpHm1gc=\r\n=zK5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/button":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/icon-button":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f807e793f.0_1653085397245_0.5142345647777822","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/snackbar","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5546cf5e88545145abe89c2b9b404fa2d09bafb4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":39,"integrity":"sha512-lEs+KjE75c+CVGdN35ZfWpUud/xGh/QNjZkg15VHIcraCs2miTrOqjPZ7ZRyjyO9wJHWq+CrutKfZO8lcwBbaw==","signatures":[{"sig":"MEUCIQCdAvni6W1mjHWmKAI9ld6W0nNopQwGXyOQ4TmCjUtbsQIgfiRRac4C/qWZhoXRD8kGN477pEBVPeheSVHf421GmMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6FDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqubA//SwJMQ8OTt8QvjD83cb2l+ByI+QKLroejCTSTrvA5s6s8Lh8q\r\nNkTP6Lq/nEA60cptU1ztYdwx8R75o3WbiE3SFwzfz0Gz45OIE8MY/9yI14cG\r\npAKOmc9JXSNnV0YrR2fG+vk/rbPoNkQT1uyggVTmOhT2msB+G1s0Q5eobSCN\r\noBQwMdk4aAEu+a7PIRi9hr5LwbpdUeI0mkOZNddvjAZKKBc0eXgG7gsTf6lA\r\nTfIu0hssqOzVC7GPKbcRF06MWd6mY0jO5paSMxJblznagUwdIlAawWrrHXW0\r\njk2yo5E6La7lSgT3ov7I8YhhCFIsxSqIzEjyJA3/aXXq5K0kgPZhczd/SfbR\r\nsrJ0b570a3lt1f9PWBFb73NoqS7/CQ6TiROXabhVXsUC6FMCqiNLHwkN0pp6\r\nomo5Jy1CMKLeePka/dR2TH+ivAZBw8m4+vtehyuaurqjZvGSdlGkXepPzGJa\r\nGy3bJcfsVaO8htKjepJVNqAR2lEp8FQNOZPqL31nt32Y4BS3irxOnW5YWa90\r\nbSaHbvtT/kuEWh9gZXy8yemqwNDF1PZx4XgcXeu6d4RkmOcWntsdJ65wUTRQ\r\n7HWNSCXrx2wTOKCdOobrFOkd0p+fBFTvwElPlRY1IGY0MB62kYzMpsybaIrd\r\nmOHCW4wPRGM+xYBy6dJxXd2ZV3IQ4NP3Xr0=\r\n=aRPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/button":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/icon-button":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.9f53d4a8a.0_1653317955602_0.4045991359984775","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/snackbar","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfc7efc02f1f84cd4ad25e214569b234d2a2da0f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.77cf00e37.0.tgz","fileCount":39,"integrity":"sha512-6FFw9IydTvvx99+Ts64lfdIjt7am0/Oih2zUj2ZBsjukXTEVy6ywxlNREGA83r4ajMYVRkjv5t93F+Sr6BBAqw==","signatures":[{"sig":"MEUCIQCjH+VA/2IgVTGnSgfih97A68F8/hwQU1G7P1md5olfuAIgEd8G0Foz6JkRJgSkzE0/YriQSGcyAaIj+qVmjBjkmGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillNSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0eg/+MRiC0ypohzsbaHOjSvOkwGC8YF7Jcht0C/KpgScdPmQLXnyx\r\nM3lYQWgFgpRnPJyI1BcV4YH6aHQR4kq5KaEqTkLUDO5iHF2Jesh4EQZ2UH7U\r\nxvh9lFTMfpPhfv3CUMZ9CzWPlAe7E96ZQ04GKZ6U2xPuaTJNFdMADhOtMOwf\r\n2iABj1eAazZOHgfM42UFSngisE78sSxL9XGMmYwyUMNakRkhcSQ5EqHYs9sB\r\nKed2c8C0zJ5PW6T4SGnoEfjb+Tfw0kv+/j9WS+PfFf1Un63OPAEjH1SOflK0\r\nAKYHx3ctf6D0fQeAoEGGUXmR1TcLKoU9/Gms2bs4asMih6KkLU42GhJMIcZ7\r\nRgGQ/TRY6O+OkA7CdDrt21d0Dd7wn6FU9vYs49Y2Ju0eK0g9vh0Y455VhEnp\r\n1BQe7vsoaj/ua7BLhpPFqnFYC3iZs/zRKXUf3TF4egoRVNAAy+1QY6p3Vg55\r\nDj4m3xM6WvhZptMsFN8/sgv6k38s1NaImCmu22dKPcCga+taz35T2B5dyrq6\r\naq68Apje3QqSNXsMU3USKe8bWnAbf51KnDLbH0ZPTnq8tPaDtf+AVNYitHmt\r\neatxEGivWFW8+ql7lVw0liOGk6YDI/KAk/fpEgbU2SPpSitnI6+PENfYwGAX\r\nFX+RV922abnbrBw4je9Nfv7N910yDSPPKEw=\r\n=Peo9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/button":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/icon-button":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.77cf00e37.0_1654018897977_0.07432023956240985","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/snackbar","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"904594a584d63b50b4b36a6463085c99dfbf4530","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3c7b844c2.0.tgz","fileCount":39,"integrity":"sha512-SUsrRxoEYPu+h+L+5u4T8iH7x/Lxjfi6pSo95+vE1tH4/qfIVNzzIMtioZefrssaRgHVNXgfJvZYFC7vTT2Q0w==","signatures":[{"sig":"MEUCIQDBcXwNzDDVLQ5JTJT4DtGF41waGbyeJf7bFf68u9fWCgIgZz+stpZ0uS24jzTEVEflycuJmZmM72+DsmHgDgShpSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFmhAAoI051ctkKn0n3LFMJgfFG0+kxfMBnzBhpFI1THiyMup7ogwx\r\nCVDVcXIPebY46pUN8G/AigCfJcLAeWqcYCvEofclcIh45+6vWF0YpJ4kYznN\r\n/nrfaXIeiYfWma3CB2NKaf8UyrOdZEJUXho17gHjLN8uhAqtjymfpb7mca/N\r\nxDbMwAjAd99BKU2ZVOvu004ctpUEvXbxVz95+3xmUGNYywXf9VgK96uFX2Ke\r\ndmsYBou5Jry1arJepn5C4D1jmhAAuCdm4VLbtQmGS6XWcoY1fftSSM0KuD7s\r\nrIGiw7wMLhlXJ74W6iPxh4q6I9NxeBDLny4M8yoXIqFHRfpDmMZmTYaEed+W\r\n4n6SuMi6Axjt/Ki2rCKmTtJx8WIhp3Dabm4qkpbB965Nlf/3Tl2FxFbB818B\r\nYt6FGcKMaVQJndcn4ViAtYufyW3Yc/jobfWoCTkLVHzZ0XLw9kOfXaqtUHGU\r\nTLDdE+Kn5JdliUp3h99qvZ9ETm2y/UfqRTzyZ5gX9vk4WUgj+LXYjeJP0F0a\r\nfjS7yC8bb1uT1pbpTVM6DPkm2OzrhpOem0VvWZ/mdSYF7fNC8prozI7uqkYQ\r\nBYAt93ipeG3zVchI/a1+2PBuwvby9Te9kCmil4GwVLeexuRH3hkxC0FT2GbY\r\np4PLpU/r6Amv+KxWJItvRS8gXkYnlQWB+Pg=\r\n=g79o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/button":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/icon-button":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3c7b844c2.0_1654640567878_0.5923448138025238","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/snackbar","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.df47894db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bd11a91e65ab14d5b6824135e4a4efc310aa95e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.df47894db.0.tgz","fileCount":39,"integrity":"sha512-YORbwd+eBD3R+9uV1WKW6Qqd9x3SvZT3Mp9iiGsM+jJEhcYt4+ek1aDVgBtqy7TxuEV+1ZxcZPIcQWl/yw9fgw==","signatures":[{"sig":"MEYCIQCCpM4vrpOc0roVU4xkvTusm58yAOgwLMo5r25N+0LryQIhAKv/kaivEmhS1tO/fNOP5exbbEzznWbEI6iVekqDKJlV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJAg//dj0HO0gsAYnSc3aHWRAKmpH6tiJY4gkmZtNnAdtqjWdUSgIw\r\npyUXCumq2W+cn/2hap+0RO6FNt8k0GUH8mJ22QpHyyrMPUPK7r1i2IGO7f5Y\r\npju9GkU3ps2LZUXRxMTLBMMFnB4PFsC1E5LQcifWXXlyPUaHkodW1tjXpF0e\r\nwIKIpQf6RK8anpuOFQvvt6ZnxZzEjciaMvblp87kd44H0fQU1Txy83X/zmsc\r\nC0fUPvOBIZMEm9ax0YZyCUjMZDIsU0wj7VE+JSATYvYOJm5NCK3omAwuNMRy\r\n6nQUKOh7mD4LD6oTf957yjdlgQAHiY+iok34R7CL+s+po4LtzzWB1tTAuYhj\r\nEhcF5BkHUg8uyb4qcvjnaqS2744pHLGlyz1fZYcKNyHNVBIxQq3g65pWcqIW\r\n7QgoKvKusHz9qqbKE5LNu00KY9LQavGxlOtU9FV8NkK9w9LK3CiVIAELdhtw\r\nJmy13CM39NbYpxhQwbtexIeJkxlkOO/FhKpZ5ASmSd989MSuGR3ZPgyQxS0g\r\nEDC4foQw8ENzjCkSqOg/UZNSj/7NeG2VAyVlesnc6k3sNm5Z1QksShLLNEKK\r\nKOX8yrzB2t0T+TRV9+E2jDMVHQNB5Rj/nq7FSGq50HQrjKBvjDlGC5hShaIx\r\nBHq9h5m/jbTCGZujtiDbGVxdjrRR0SxGvsE=\r\n=F8uE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/button":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/icon-button":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.df47894db.0_1655140201452_0.7806413298143358","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/snackbar","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30884505a0c6023dad8f37b954e6d663fa61a43f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b18a873dc.0.tgz","fileCount":39,"integrity":"sha512-0W8jzVMuvzE0FWi0t46W10ktRnGwxHoNMq+nDCp0ZQQvpeiMR5jfRisX8ynUAbi8eUQFmf2N58wJNDZ+kk7EXw==","signatures":[{"sig":"MEQCICZCpL3xsQ+du04Kqe49+60ecto4fE0TaiJ6sc46yXvXAiAR0CrPKxToCDCaSRqRIuu407S08UOJk8EODLkUnd/RFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo8Q//YkrQPhP09IafYwUcsZVOXw/Xw+7h1d1kt7UXXxSxsUa2slR8\r\nbTYrdXBH91nBkm/IzuKe3qq3gfO7AZk7UY187tMc0GYT3gIxUaMrrqIXoo2t\r\nPERs+O274MSrl2vYHltpIEFYQQe/rp9icwDAXch1A9Rh3BWGybxm/M98pP5i\r\nIRAxfotwvSmUV3altbi9JtqnhcUlvAyYogEXFBaMsahIzf8q3VOaJBD8xZFD\r\n6h3xuBOQm5x1y+WNG9rQmEpiGwQcPvABVFat20fVQbjhkk5+q+MrN6CZaAUa\r\nUdJXCWtgi9/uCxyDAhUku/DYjHV74eubywlfy/w0Ek4MnkwOgEfmlwqvreX4\r\nsgA+yNf438whvSogsatutHJ16j33TBy6Dy2s+5HK8JrrIIE7nYA9zhPENMo6\r\nLYlIeU8lF/hcFYag3AGQ5/JWCLjZLe4DN/kh3e5m+mUqikm4tXNOGM5VMYr+\r\n2I+i6t0MZ6wL78EzebqtIoKeIjDMnOFBI1uH0w5rs0ordu0YFAEBnlUwUq9X\r\nKWkE+ePm2IMMbQflP9a+RHtPY9CD6DrfumLiFCTNSOeoszMeQ/SOu1FVcUtb\r\nkbLqb2yzGv4lvCaV2CbCFDB0SjHdvAicZTjBryUqrBKwf4TdOTjbSRO3TAy7\r\nbMmS+njjV3D9hQXIlTWrJCofKEhlRk6oVxE=\r\n=g5Hp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/button":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/icon-button":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b18a873dc.0_1655188271789_0.051723329417384445","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/snackbar","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1805b0b50c9e99cd3c9ae8afc262d72027f243e1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ba9c29637.0.tgz","fileCount":39,"integrity":"sha512-HUNLe6sqZQg07T8GROota3LayGp+Fo49CENKD4M4Cu8VEIIlxSC3rCHzqdV9ReY344aYqRVRbqMIGGUSAdWRhw==","signatures":[{"sig":"MEQCIBrVwFrkWEwTzqxzEdW7fHCxwxlXxRXdQn513xsKlfgBAiBlz/Gb5Gjz/X46movQEtVmiI2ZlXHfab4MGPq6dOtvIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNpfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr91g//akdEN+wCxJ6AymhgnzTSBVeRygmJ9K00ZUB44/9WlavZU8fK\r\nO7MiEe5szthVm+G2AcTVHxNgygxT943bi9m0kwlt6dZ+SOtRyZVfvT0P6mfE\r\nWbv5xqXBwn8OyNOdTqsUCr+cf9T2alFJ+jOo0do4Ge1UpDjkrL+jiEFr3JYV\r\nWBBkLSYav0TUAZGj5v+E1fkfLdf7SyAo5Jge6/dn/cMDevmUvVOCUiGs7Uk3\r\nfvpmZV8rY3CzcTA3KU8dlwKPTi5xBG0aYEsJeF78muDsQxqHiSaGe81D3+7c\r\no3z+jSSmSRjgUxgIJvzKlb0ixM9FzmO1DSNoxji6KZSt2eZO4+CM4N28D0ob\r\nz6wsSwVSRa6P4orDTpAYNczLzMEFP6saAfzDOzCt5zdBwm3tPcQWzbMpy6Tr\r\nzC/IZJxiTNZ79P6zO+OPmfrewO2jZ6KxBqxJTANgxWm5ojMO9Ju0GWcB+MuN\r\nBU9Dt4/rRWv17cr02wEl8NQIYCaEssZUeIrT8W9+ScF0OGlYSvm7DT+Tds3p\r\nRK3c5cMlCBsYiFz4o3BIebS/7YuWtCNlR6TZSW7Hsm+1eAOkSE4z+z+ooRZD\r\ncB14eqL01ckfP63AyZLYGWQ+ndFxgFWVGo10UhtVvGokvd5ruO0IolatKado\r\niiokSFnmivqpVjuiCMNWmn3O5GWb/2+A/YA=\r\n=T1Ix\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/button":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/icon-button":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ba9c29637.0_1655233119672_0.02659760108061726","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/snackbar","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89f928b0dcb28c8b9b3960927b17c7ebbb0e44c0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.9bfd12f01.0.tgz","fileCount":39,"integrity":"sha512-cG59QD1vu1M6mwlThVLhbLOQGckoatRHaKr/hwqAdzqdAQkbxjjIih+usSYaetqol4rW5VRUdRqNKz9BwxSzOA==","signatures":[{"sig":"MEYCIQC2vfMEEcQXtwPY3T7x6U1vLhe221pv8EnlVN+WSw4/7wIhAOVXsPo9FjQ4GVM9eshnVKwDnWpZQ0/ypwilBlEvDWx1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2xHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6/A/+JFFQSiKBGptVB0g3OU8hcXpfl1MFw/nXX2Ja5pRy0lSaAIJh\r\ndbE6c4Gj6+YepeXpl9urgFzUqTBM4wvqwVIyz5uo717mR8BQh4NtrJ9C168D\r\nDOHOw5pKKT2ZbrEzgYd/a9iKnZ2XRaHBK+c6thS8EbZ2UYmBeFdbPad+nok0\r\nyll5HHvU1zSTvNwXO1ZvxNITLn/cPUo5wHyPFkBvSPJVByk4aT8aInq7u8gI\r\ntXX2V2Ux+L9eYAXyCJ7CWPZSuTCTK/eOGGMbGHMl2Dp4ST3LrjkNFXjRnnbZ\r\nFg/KC4mkhd1VgM1MgnA4u+uNBuG5msaACiTYcafyYvrNREnd7wRLW1HdfDTp\r\nea5nXN3xVI/9S5kDG2gfC8i5ofZ+D/m0H1kjPwH8VpdUcfjDPf5mUSqhAPU0\r\ndwcQlmi43mbJfWsmeV4uxry8pf9i9d8WmNZxvjCrVJIuga6PFrFCwvEYPRA+\r\nvxbuR5OSPrUIrBr/7gPjrH26gkYEjAvmwAVqrKZIAnOPZL7+qduw4J2flNWs\r\nrxS6RaDRVZd86GU6kdFK2k+hBVdtMHe+uMTMMDAzrjof9IAZILAekCBTzf/n\r\nEZIie35ZZzNzu9/v6V4Mpt6EyzkX2AH7WohOkTsKQRc6iXBv+e2RyjooTnvu\r\nzY1lN5W4CV1FEd2W0/WS1TWaE73vSOwm7sg=\r\n=21zA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/button":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/icon-button":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.9bfd12f01.0_1655925831142_0.14939272847869378","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/snackbar","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.764de225d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4259ab212838ef313cb9212b9cde33aa4bb4d275","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.764de225d.0.tgz","fileCount":39,"integrity":"sha512-TfddgHDwA/TCaxCXuTItNGj2qtgrOqziCTFA42MgHYqcj5mKKhT1W0OJRgI98coLVK4XgGDXMG05azV3PtMkJg==","signatures":[{"sig":"MEQCICOJh4of8K15nzDvn/diB5Y8GtaJXKawgP6EBdYqGxfHAiBdkh46MAMdzsBdzhSNyzao11YDK2Fl0F+hNKg2nG7cyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4qQ//Za8UsHNtgG/ilOPhSoyV4WJPgj773o/2EdpEBmX2QquqSHkn\r\nPo77pNIgWBdenLr+xe+tEs7HH2WvlquYGGtH4qNcNlURPp/9QzHA08b17ciN\r\nN2nk8czADA/KlY8S/e8y4De6kt0SVzAqVD9VGDVJXmr9CZiNkGCaJgVKIVGD\r\n9jnrt04t4VFnuTcsNBiez+dE8B2lzFv3L9MY+E4+BExkekFIru2ODFzsNDMu\r\nVVA7rbz4UT94eB17ngTODDoaeL9Pg2I/PY1AsCGFOZlRtESXaepip7+GHLTp\r\nlnemYNVNqW6XTnrkxepg1lwG62wMrei8wwtV+LRSGyLteodmpUMPb3tWZBfX\r\nZF5911rOiAz4TVNZo0j/ygBrTpomRgfOxOIoDw01i9rGCXwEiH2gTxjCECBU\r\nzPrUYZMFJWEHv0dDG/Lie4bgBhu6e8pJPLmTa3ikpFdbUtXFYtbhX3SBjCTg\r\n2t/J77qVTVQqVeBLlSJjwXqWMHqovb+URgVy3yPeznwMdoNdSxvc9le+tVTi\r\nzLTWG44uN1mCzs0jqj6CVtbcbWP9VdU88py6AuEGw0A6RbmINTuUnE44/rcV\r\nihkmrqSDAiU4kxqiDiMAeh3zpQEknnp3EvaCRhbJDYAgcRO4RdGqHH1dG3DO\r\nofm9H6LExa7EaNE1yHomG2lkWlDv4RwC4tM=\r\n=gLti\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/button":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/icon-button":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.764de225d.0_1656520100569_0.04350584797364787","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/snackbar","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.31e517cea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faf910e8b35504f4fe70e6659ce47c893a3fa4dc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.31e517cea.0.tgz","fileCount":39,"integrity":"sha512-3wBzRb+Vg37eszHt+E1HkubBEE7e4rBXMnr9A6CVzCYuluCJgdvPl0ZCB6df2OY3cPKWGRNJNEAxZ0gwfwV1OA==","signatures":[{"sig":"MEUCIGXKFTJvfGbcf3Rf6GuqE3+/FSzDpMlKXmFURk38zCVRAiEA+VCLJnzpYnv7UX0bKuAjl2gUgChL6ZuE3IsqHSvXPKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoitw/8CZZwDZBwWout3W4JKC+aTRZ6hztx8bIVbiT0ND694m1bJCp4\r\njuLHgmdCP1DG3OsFnppkC/owumya+oeVKuYCu8lLdyDJDNwz2BJHVEZbS81v\r\nfsVXX5TZoXO15VQfJBzt4jbR9NktossX8XNm1VM939xjKqNnG1bbMwZLmcyg\r\nWs+RZdNiceukZIj4BRyeWvg+lWIwxWoMOEugs+LlSEoxOVlSQXdL6hVTYCr8\r\nUAusNUskja0saUBTJPtlobJWm6S9yC7ePwbnouVO4NveigCQymh22xP+3+Id\r\n9YnV+8DrdsZUHI54jSZRYF6hUxK8re7JUcX0bPcNhA1LVg1IUjaQXYw0K1ke\r\nRs9klXpvx2jkY4cSh9yt58SXHCk1HU4umvaQByD2rE6rBMc3D+kkIoDvmgpb\r\nWp9fVTQbVx+3h3ufwymCAJGweWUTR9PjKQSEvSvPrdx52/fB+VKRs/DxnzJZ\r\nDUCvYthsluaU2zNECOk0IS/jJKNfniUDgHjVSWtcJ5aOSiuWmaoWSBFNZNqI\r\nBHic7Metu+Z4Z6SIb2VtTtC/wqOwmw5h5xPqI+zQcVRzTNsTeTbxFflOxJBk\r\nn++7XjY/KNfYZ77G90Km1OYVInJaIzg97m78VpWm0I6qzr6HlD7kP0ORGPA6\r\nJ9+IyPaSQBNAJpe9HeAN9I44ks7MQ4WZovI=\r\n=zSfX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/button":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/icon-button":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.31e517cea.0_1656700179425_0.8349010665175016","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/snackbar","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab743b56fd33c9cc16e42e244cf49eea47331745","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":39,"integrity":"sha512-2MjtcVd/aMn8kc8jdQlptXLMPGgGEKTlFs1zEwXmhk3B92D+0TEfVvxEHz73Jcm/CaGDhaG63Ckug9fcBhjFAA==","signatures":[{"sig":"MEYCIQCQcRVoT6eOBJU+XEWZsk1Jj84jZupU2kfroSwME12YtwIhAK+TqnblQP1MaIW9T3dkj+Vi/P/OSyV4cANzkeBL7ue4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3uVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplBg/9GOWjtGYVxq+azDFNehSYFKrPUMk50F/WTZ00UJcMZQ5gx9jf\r\npWw0Gr1GiVxgyMpO+Z6AGLnBUyDKPwqrlOk2M6R1bedm6nxSf8t8MV8+48Xn\r\nvOrj88cx5REvZxxOZhr+ZH5Lk8w3J+F9aYo5vlAHJc65G2nNRKsal28Xb6hG\r\nnqnOP9ibfCoAe1WMP7K1JZbtn3h9WZfaZVlnimeZt1tbXKe4cSF/rqHbVlp8\r\nLbkk49leCWwOG9Qd0lmz9UcUZT8Vr/aWtHzQ0DOIbo8u6qISC2c9K502mwWW\r\nUqS5pMZf4d+fY5oL3AvaunT5oeWHSu5aTrJMoRWMfAE/lLp38I8MepNDHxZj\r\nesC04whFA3nC03w+/24rCIT5+WYpRVuwMWI/g2mNvnae+Nord9+DN9Pq4uuU\r\n0qereMEq8XR1oDt61ElIgGUiNd/ug+v9HRpB/NASI/pDRb5WXy9ipL0TRAnp\r\nsIUFhzz+SoVuDjWIKIGSJtZA6sIW2y4FW13cwaeHsLOVR6kDQFfO9AT/JQuy\r\n0OawahOlqgyrPEYOoUG0935UvoeT2dG1OPzIODiBQEz4jDFxlMRd2fRQWu2Q\r\nc5SGs74FyyWtrN5aSM/alP/kazuz1K04U5hOIhnlHPSv0/pCT7FbqIpSf8hF\r\nM/2bYeh92dBJH1FuF91N+7UaW5kV6o/Te7E=\r\n=YoOS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/button":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/icon-button":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.9ea4e8e9c.0_1656716181400_0.012243315372802765","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/snackbar","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f28ebddcdd5244962ceb5831c65a688d75d6b5e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cd5bafabb.0.tgz","fileCount":39,"integrity":"sha512-Ah0AQT2p77TwZ7FHS2nAKIypkj9TNQsiDtqOSF8UA5oznEnpiwhYIuSsT++O9M6CU/sVWLS528khjp/V8xYp0g==","signatures":[{"sig":"MEQCIEZVM0QOXr5biwP7iWlCkIqXlfxSuaXtqe+Q6fNZzptSAiA0UEVIzb4awkFyYgYqv0lT0341coTAwS6UhKcOqNDqSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa7xAAi9j5NTCt4h3NsWvJ9AYLoZV1zqEBd2lb+oP6nYXZbqcQYOxh\r\nTdK56LgbpFjx8coe8VauPigqvDkn4kZfC48JXDo1vhTV6qf4uqwAYqB0p9/w\r\nvFFze0X2Ckpx2oPoCxFS9Yxy3o1IV1VhWJey45dQ4OZDPvLf1VDRPzaMb9r0\r\n8K1ZPzviwONgdbKozgMv3nO6H+sBD8L/gozNQPw3CxJRIXQcigj8EU1rWuUr\r\nfIvEkD/fveP1GxaV2k4d4eXBjnshQSZf8tGnmNPAm6UFnOy0xZLtClsm0dVO\r\nXg1kQ/SgcqOqe+fq97TRkOahw7JAvmMVFst0gDqEMDrA09/MczwwVvRQ9w7R\r\n+jEIFdt188R3EozodfX6wIu+YD42dpnRoPfjKWZ3aBASQXAr7K3DtEpJNN6P\r\ngypiA9TU1Ja6rKtzOkRyBnUTF0/VHBmrf+gPeEuT7MBD/Dh0EtT3VeqUyGjE\r\nmwgKIs8tYlhQf1egyOHffdBmPDi+dr5LYO7Ok+uub9XRoRgKN6koBA/ZWVJJ\r\n4jtHt5l4kdKdqfgajm0qzwvDNUkko1yxxFsvs5ea+fsAy30Ojk+dbUwfCGFN\r\nri7SA91kknUfD2h/5qz1mj5dCTRXywtK91RRtaMwHA1IuyWDrhTyQ1Rh7ZT3\r\nIkzrrU0j+kfDz2BIU+KAY3iV5C2iG6ozdsA=\r\n=JXzl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/button":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/icon-button":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cd5bafabb.0_1657130152626_0.8371701498186892","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/snackbar","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0841733e264b8fe18bbdb4026a605b40c96b9187","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a02fe49d3.0.tgz","fileCount":39,"integrity":"sha512-2o24tfhiDRy6i7S5j5GNjeGQm6n4eMWVIXbovnOIb2il8LrfXCPSsJMc1EPDbFjFhzzpuorDVBNuQxLYg0RUHw==","signatures":[{"sig":"MEQCIC7sOI7+4eaPvsg/2cmPiuV0OZp2kQYwdTdnBh/7xQc0AiBuHunOWaiKEkqDju8rm+IAibVLptwbMLjxPHgQE0ZKjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmompA/+NZHSoXqJtjUVT1pVX+EBaL0oYNebO0K8Q7+WYlJDz+rB8GbR\r\ndiIdx03ytpWjgkbLMIxCxK8cKCM/316zCnr01XhTqdfqAQVLA0htkfXaTblw\r\nmpXcltKgYqQ751/mHv7wUp2uiqIjrc98uNSxT71H8pVjp8yTpm9ekBsash5B\r\nFruEPZfLEMGnBqvoqu2pAyWvBGKrV8PSTxVBxvD7nPSWfBvHmn9/mtVSUTS7\r\nJdEHYtrQgdpu+J20dbjZ1rSZbMBuctGC8ccnDu9okDGcnRJ6hbWmA6aWLT64\r\nfgEACL7DOpwNtw2T0MWNu4gcIPgRkXb4Jv0DufEYVKyg2mtUSDqnaKrN6acZ\r\nUtq3JVe44w8/XFs+CGLw16FkJyiJEsyI2JMdAf2gep1XK1Q8cnXGGagdM3rr\r\nYAPOmLhK6MOVOPDmPn737jMIce6ldDWHrjaLHNl7DkMn+o3B+SQ1hmysw/oP\r\nT6lx4y+un8n9yH+zhzlcMchCgsCD6ITvFL6MbHZt9VajHeVDklkdlD6kpOeD\r\nYerpRMTs0GWEyGkC/hpc79CPbZyZPgFsrQl0dee2Q31SbZdIa+q7OFl1ZmFl\r\nsy/xnoJRuY3tTHDBncRrzfi+OUj7O8YCn+z51jQZbk4plbNQBzWDoiau1DFJ\r\nqZXhfZL1b0WzTEQBjJsNs22ldIBA+UgB7BI=\r\n=st/S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/button":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/icon-button":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a02fe49d3.0_1657133546089_0.6097540076591883","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/snackbar","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58e30061ed8db7d8bacdbbc0a5e0a7ae471b4456","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.826a3d8be.0.tgz","fileCount":39,"integrity":"sha512-r8UTXIhrIyOPdg1CjRnMKs4cA671y7yomT5GcMmD8+vDUb5wdYa5RgLqem4Fb6iJy9U9Yq9QexJsKBzQVabdqg==","signatures":[{"sig":"MEQCIDK/66E4HI0/+Jat7O4fVCaxXgSwBmrH298RrVke9foqAiAaGnURI1YO64T8pGFyfhrWdPQ+vpzuLbVkdFaarGvz0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeNBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkGhAAlcCZ0Q+qnDDdw1oT6oZSI+7YpGDokwElBUr69htd1A6zZfDD\r\nrXedj6msAYTUqCTgIGvmqyWBU3zInxYxjwA3yLHonPjKrft+W8cbWtO7Zga1\r\nklzpi3hNRP0shJ5qo0GrHbSULqOC9JNsM2lpkYzSdTONxsoZRyAZhB8nnW4/\r\nTkHQOmLf3L/jdcRMX2zKyC9cQRXnLp0K/9KNipTtlfPts2EwuR6fll3DXgXC\r\nqyWYaJHYaaGZR1Ve4buhH9dagh2Jwt9jexACWb1MqpwBhiMNmCMoJtQI9CxG\r\nCn2G9njLOux1Ohz9mwzdM3GhAYkVA/itU+0Jsc1g1zOli67lJbptiUOEGbgl\r\nin7gzVl7kqjRmiDyqITzAJlcVhh4DViU+CMr3CS+0HfsUWYQGTlVdT+ZFPqm\r\nyDh3cZaZCXe2KPhRRZhwzU8SGZR1scL98eQGaLIiDyEDibNl+dTbiqzisku1\r\nXNl+0y3mw3t8KtKY9powVyHWcYCQ5NDmKKeuq+0sbw7wwz4O0zcJYRf514BB\r\nFElcf7xCTNs1TdNKdxkNIkBBZ0RPXYYS+4cbfOYrSbv9DnRVy8DBbo+4/Ijw\r\ndaqOiJFozNCmPSGe15Y6lp9WlCU43QnQ0tSybhiYFecdFJ0p6o2m+Z0UfhJl\r\nJHrDglPUgjVUEKjZTtaWayq0iWYIah9vZPY=\r\n=NOlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/button":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/icon-button":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.826a3d8be.0_1657135937718_0.3301610654397378","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/snackbar","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68278d6225ba18a96da6859adb95faedb2357f3d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ef276aa93.0.tgz","fileCount":42,"integrity":"sha512-c4Tlb0fsfp3IlsalGBbcMnqdNzWhJ7HdSuSXAmT0hg3BqcuK5X12hAKaR6d6ubuWhwPnVMETR1G6wkzC7+2pfw==","signatures":[{"sig":"MEUCIQCy/sH0JRl4fLL59rzsIRC2bYCLNPXBHrb/dB481WLfIgIgdsdbRUrZqeM6YvokSUfvBh9b9+zVoLCrEcQQQ1i0nPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxIDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDfA//RbEL/P5RTKgdVNsoiTz4ZBw7HUdWHhnzcnNDhm/h+roOU/LK\r\nN/t+q/8jiStk7LI2FzBFbo6IDBCps0vxST87g0Zdfx8t9D1xWaG6gKPz+FOo\r\nDmfGSZ8AOKZuRzzHrGMffWt7CXsi/c6vSLmWI3dmfmSuXEs3G1L0ojd1dFFQ\r\nvVn3AlB5URCNSqclaZ3ins1V1N3Bpul6F18W+B0vFqnJqdXQ3hAqAv0owFJh\r\nRDVZvVfw9wL86tTsyJ3savWVtLat+vQEcefTOXZ0Hr1hmj9AFP/8hUMBWi/g\r\nClVu+cWk8bvpxk1pTzkw2C0CIl7oP2xVu9U38zHalBtmarbwqIxUMKdws9QW\r\noAdhSHLH67vZqBAA21pWfppRX3Szx+dCyEpgPhaTPbm3LkaSlP1mKEickilK\r\nY0Ijz3U4EctWgXJb/Ul/J+9zLludc9DHLrxY1D1/392Vhd7TgVeasLWEi/Ch\r\nGskVs5oIauRv6lQgo7aeNaV35Lz74ASVxI+0KQVDqeVX0yGeHG/9Dq3CdNJJ\r\nhFpH/wh4cbQxSi4iVGfQfYEbKJUmRy0hO9nAT7lpwjlO6t0VD/SoFjtYG3R/\r\noRVxEoyVxj4zTNRU/+RJ6Bbp63mce67wLLqCI+5xs21+IpzhNezwFboQenQh\r\nrXjscVqFlcFfAucai132L7VHx+y68rslngQ=\r\n=to6W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/button":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/icon-button":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ef276aa93.0_1657213443169_0.7692118536321113","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/snackbar","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b42fbd52d80469adf9ffe9814d2d71b7098798b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.59cf61d6b.0.tgz","fileCount":42,"integrity":"sha512-lKH5E+nBl+Ixi03uFp5lvPAePIzeAt1wHmZkEzTFruVrYer1JryuuoAAqu5OVdxnoyxy0ENFqUntrs/AdxDK8Q==","signatures":[{"sig":"MEYCIQDHSYoOI8psutKKXE422nsfg5YoU0bGzpirxQRQiaZ2AwIhAJXhexEXxBJ3+gqUh1/51urR8l9tHBwXm+b7vnrve8Uw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxi8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptphAAi7si5/OTtQIkuZ0Ni4QHqB3P+Q6jWHqH8e1R940L2j1FlHEV\r\nIhocZUeVnFoGJ5MmD/RzkK68bllUs9BjgkcLQIdF5YTgAbJU/d+HWS42aeMC\r\nU+7GntSw/wdKbG9pG+nuNowO/7Vm+rd+nykKflSG6Ma2Y9Q+XizQrGlkWFH+\r\nnngbzbklfmBNtaX9F4CUhNwqzykTqL7xiWDZ2CsiiVcki6oWEvSR5ZCGg3Sy\r\na14RdNW7aA1jwAZA28WM5HJOmSqPiaetmsSnv90TwiwxExCnNbW+THz7KUeY\r\n6+GR174I0i8XMzQcTPKcPsSqZ0C1a7UJ4i5FxViVM5TiCBZZZZP7HCSgndZS\r\ngZyz9AvMJQZKXnyOiBqv9frj5qrKpUYQN8WdUIWzPkKHeHOCJE2OcJKqq+Z9\r\nbL/O7jWa0XJIa9UWdOlRdCkcZoxkXvTpKhs6ot59SVl0qNaEN+fvoksDJDUn\r\nXIpp8zA1fq91mrnbNs5aMRGuHU5ptX6UYhBaGEpeL3er/mt111WamcBLqlQH\r\n4jnaHKX+iFbF5gaXwDL2cOObonbyZg9uthatS+WdMS/WIx2LSa+Hw2wTA78N\r\nlHLhWZViTrx8Gq8msEWOpsqmAEn+vZPQFXu7uKKJEoEuX/bAnw43fF+SzAkR\r\ng544zO5D69e8BmIlg2SFIVY6oTeO7xHulfc=\r\n=WRch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/button":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/tokens":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/icon-button":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.59cf61d6b.0_1657215164151_0.8520351612776005","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/snackbar","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8647092f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f90d6aa5c36690eccb27a685409914126e1c54","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8647092f7.0.tgz","fileCount":42,"integrity":"sha512-tcm8NFclySlRzDy8Ab3sKEwTENOTAf50YswHUxilxpAChinfdxAYqC8l6LKu0gx2pYobBLmKU8C9G7UQKurp0w==","signatures":[{"sig":"MEQCIHpOZg0ztZz67ps9XMzgZIdyHEZcH4cY5cqUo8Mv3gXqAiAPqU1Sr0deL10gGqOQduDicXeVI4NlFIpqeNY8xlnNzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHxA//f7+43p7KrMMGo+6qhHKJFa7nf4wu3AdQMKhFWK81PzTEdHkm\r\n2jrXvcpU4f8nfQBwU+y1P7xvHpSgwc9N0PYzyrOnvl/cht9Af2ptV4ofAq2n\r\neyZ8pGldkACYDsXJNym1Ebi5JAVYDTDNaqCa2AZMpwnYFpVLdqOtlusV1p/t\r\nzjNvQjAHVA4wOQApMEt21xjaZ9mPbzlkBCE93NbYBZi6xPlussGecXWgmajB\r\nhqWMkkUE17jbrlvmX1iagzRcI2S5JZemO0Vn7x/jiiwFpGbAeYCmSPuootrm\r\np4RKHSbhOi5vPTo6D9lM2TjbMmlKDMbVC8LuA1lhxDbpr62dARbrNNkS/b1Q\r\nK/TqndlZP990UB1rKoqL8BA3z10NCjzL8l44pRhNk9XNeRhuKCC6XgxAVjvK\r\nyvPz8VJvpDu4ZHdqGGn0/yc61aCWDXHhP2gFuVnNQzqhW3f4ws/ACZzuFUzF\r\nwhcZ63o3DbB3FPup9HIzb0mw5YS7G+AnCtBriJ8CUUsiSwRFYEQYkROCapIW\r\nf1b6IzfXcBr3KLBXg0jAuC2s40goIRWkfI5AHf5OuIzI942fQYHXbwYfdT9i\r\nlTVWIBAewzoYlhnqvKCs0wL7Sbz4OoUfJDTrNE/D4guQPa9WPGzYRh0XIQX7\r\nu7RZHP+yJ55+q/MyOd5WZCkASRw41B/6Gr8=\r\n=z+34\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/button":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/tokens":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/icon-button":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8647092f7.0_1657226398195_0.26531000589368503","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/snackbar","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f64abdb99c9291c599865c87519e408b66aab08","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.02ecd4d85.0.tgz","fileCount":42,"integrity":"sha512-hyIkCcfLQ760qOcXFOoORYVjsHSEDAPFfFL+ZHfZlRYiRhIOgrNYM/flv4+2HPgBn7CWK6KQVp4sua54ScuHBA==","signatures":[{"sig":"MEQCIDIX2MCd9I6uWOdqyPqj+VdmD3lyOMWhFhZiCndVSd9/AiAx/Pg5kMCvxuVsYkUwJrh/WeLn7IhXmJRtkYZ/qEBJqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFKFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNUA/+ND66qo4vIc+FfJfjDIe/Eodujev5tLCfe8XoZTMRidNNHKaQ\r\nlkzn09qy2aDjfxFZlDlVybPoSdn2Yr/8T7ZWkrn3H57Z7hjMvs1lYHgCOWmz\r\nZ3dCu9QHxUSbHM5/h8y0KQ10OqRJPRYGtLW6CgDt6zMpeCjhDfC5diIy+ig9\r\nDxif77ol3iyOPCCp+gT/Fg+Skp9bC46mGDtk2Xzr6uegCIMgzZskMjl8zg+j\r\n6lsrR10oajKTfpQ8qdj92oc6V2xi9FcBI+vmJy5ZZv6uSIkkYO5xquOxcvbF\r\nQc1R3HOnvSrWTj5kihfJUv3ngoyIzulHTu8PuSl/Vjk+mP160CatfTRyukpX\r\nYSfKAYirGCl4jwXEOH+Uj3A5VFLpBL1rrwpBQJN/n+pGZABuW3eKNRUcUbJJ\r\ntaMOXh6hdOjBWBovYy8GxvGcNtheNxXVdhGVtiHdJMlhyDWg6K9SdZ95COVW\r\nhjZNglOLy0rZkYU3ZwZ+5+D0QeXJopuNVe2qIWGD2y+19oeYxOiNrPsF+cmp\r\nByHz3iaK0/an+RMFaT9II114STtttwcmf/i0eDNMkV++V7MFaJK/EPWApJRB\r\nCRAYmUx85S+2OEzC1PPGGz1I3qUx2OS4RnFgNVfZCWMjxPX5vxxQufeoVrKp\r\nSet1KuYV3fQvjZZRtk2l4w+t1JQPFwGIPaU=\r\n=NtF2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/button":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/tokens":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/icon-button":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.02ecd4d85.0_1657557636954_0.2611313801005053","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/snackbar","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c57699d27aee94be4dd37b42f26e76c6bf4ce46b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.63d3a146e.0.tgz","fileCount":42,"integrity":"sha512-wZCZlCLNmXiPr8nWDfOYpwMwmoEW0HI6YJdYr1mYmO/v6EslvwSsYjMjrJ93ie9mZQ0RWQXte0YTG9v0+SwqAA==","signatures":[{"sig":"MEUCIQCVVow6gWcqTgU3uEGIdbGauD/kroYDrv2say05ReGyoQIgDhYhZ5e2qj50meYzqaJEqq7MzpNMORZipReIqq/w7HE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV01ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+ig/9H4VYl/SMY+44ogSWyWMnfsj7ZRdufGEJxMY3RUYSQI5qvM+/\r\neQztN5iMHqM3LyK3K3Pt3ucd/onLfMpnXFrSLl0v5jmbY/OJ6manNo8Gutid\r\nmydDe7R/pu2082tnOkvzb40buYjaMWTkqS64/Hjd7iw24+1Tnv4BDX8FYAzV\r\ngx4aeiyZZgE4HmQGjnDwkK5UP9/Re8R93AtbkdLonb4oIGB1HFTvWU/1jNmP\r\nCsfMzPhQw0RTi3oEpNYqLllTWHbIYakjgNG/tWGYgh0MxSA+OaefiGS6c6s5\r\nbng98PxeQdfUflfUG2da6bOIblMcH5axIebkXJ+PlLFVydIl5fQt/0498MLU\r\nQ34C5X9qdzOSmFnGxwtN7NAMebAuK+SncLDpWh64b6e7wd9Rvt38o9IkwjAj\r\nLb3kfLH6hi/pUXrLu14x2XI9B9EFrxvRmuNj5yoL0j7c3D26NVu283AhYV4y\r\nyo3C+ETe25xsu7Xl7+lygDzkOCSMkRI8tUn+YS+He+7AETb8zNWXuG5wRsGT\r\n0r3rea2nKOhQUvvK5vFuCE4xtnwHJSlqxdTXDCL+2HHlPQyFx2Yd/jCR8L6v\r\nwH+kRmeMtqEiyAEHfGkGfQxOHE0Yl/Cejzyu/hID48q9vLOzTx02SqTB2oS7\r\nz0WO61C+xHwPrXf6/BYO2K7EJWfQcRC6a+g=\r\n=0RTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/button":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/tokens":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/icon-button":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.63d3a146e.0_1657625909138_0.8822634148938633","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/snackbar","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.88db01990.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"752b6e1aebf6ebb95c31c1372c16ead2ecbf2525","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.88db01990.0.tgz","fileCount":42,"integrity":"sha512-nT3yCdgvEJ3t2TUmvWmaaRbwJR1mv20cV5PdAU255/iLOTDHjNVwuwWE0LvBRA7tSFzkzN2hD41jDooBjUke2A==","signatures":[{"sig":"MEUCIEP4BHJOCyxE6VZJL7zjrZXXuEeeEQ7VtqCrVcYpdgtkAiEAhhZiEg5fX6sSeveXhT5yJkE0dfbInVgiTokBRvnxyO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr27w/8DoWzfJHuhufXgWQ0jbP9YimUtRKKU7V3lpz939VPP5jiyHPX\r\nj0seQm0s/72yTE6vvlS81DnnZbb51RteETn4G3ZN6YWyFuxSonR2AzhfeMGG\r\nXrW6Z9wPweyVczCajNM9GjL1TXeVmK4ewT8ByV4u0RngQRnc/udIJfXcELsd\r\nul7kt1XjYhPLY2ct7gJuwhMk9kC8belO/E7YiwAkbrBceI6u+/Dh3N0e1LEO\r\ncmBwOuZBDSqzgbT0RdAowzZN+WU9JZU53rwVJuNngFCY9tEmBGwZUpRI6Ob3\r\nIcSTYukIl4nIUEyXYTtpF6kCi98thFVvuwngZAT1E9pv75Meb64zMnCqVWAt\r\nZJWxfP05vHChoPBQsGFEzna/2D7FnrBrsjivziDCQVULcM2PI0Rl6RYM2bg6\r\nd4+w5V68IgJouq7HC2vNZ+5YmyY3YzjIx56sREUThxj+IoToDJLXnlUlnRpb\r\nxv7aMDY/ElmlI6pqWydMzB1QN0prWuSI8rB/FRcawoyXeWHmzAEC48MKXwaD\r\n+uZ5iTbc8rUfTyRSXKr/RzqfzSdFwyXcKjB0LwXzdvi44YLOHkAV/BLseUNk\r\nOwRriN8QnQk5EWnDKQeEgYhgc7Oq1qKkTfxLNhIa6crbI2+Kw7zSMTBWaydm\r\nBwXgr3uni0gYFsTYz27puOWdtnjPWlKs72I=\r\n=k4n+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/button":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/tokens":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/icon-button":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.88db01990.0_1657626091343_0.14224899888715736","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/snackbar","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfef872151093bb4bf6372cdc1017e24d2637c4f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6432d8fd7.0.tgz","fileCount":42,"integrity":"sha512-8ZR5RHyFk/Thbzq16UU28mBPlzNiv8fzD4ZGxLp/t7ybxYs/pj9ZlUomPGDlZMX/i49sNDQZCqfzmR5nar6ZPA==","signatures":[{"sig":"MEQCIBgQr7mFnCAkm1+xCmb6Tq0zp/LWOYDSJp0vneKEBWoNAiAYLtn2BZbfYkrs69hutB0y9+QYjnzTKojvZaJ+6KFQ6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8YFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj0RAAkklbV57KrgoyTIpcxzq9Ydy+D7BurPC87Wb6nJ3hibuoDhD0\r\npgREPKni0uq1bCjdb0VBj4RBGAQCbWLulhg/brrNjDPlypBbO2/ez8Sf+XEU\r\nSE7q6QLlihHxfBGyj+S/VadgpVL/v1etgY6zcfWBnHzQexvAjJ4M8wkWjhfc\r\n4QKH1oMUx3w8BRl5SmLfsLu8N+mSDEc/FuL9faqsr7+3oroBS+rDdmMsK+3s\r\nIT9yD+R+3d02kYMuUOg6AQYrS+gjgMepMrytsujdmotn4KhSz3vg4BfdKOzz\r\nAzSXHBNyXLQZ/WndM9KnkiOC1ipS00Ty53ODpATSh2CJmJKXU1Uh+NkP1M/2\r\nrYORt5u+EQJc0B8BZRAUgFEn5sPP4x8TJ7c9Fk+XTHVxpPqyU+sDPz7pmhkv\r\ncQb1GHNhqntfKR6N0nQ3MLWtSsuGDUNYAYI6yVyutE9XLSvt8/2TBYKoI0jv\r\nhAdwwD43OiwP9/50yn1XjTjmkmqBFVPgdZQwIGj+yKx2aouApDEFzc5tGjYZ\r\nLDwjjd0KCaAZD2znhlgvhCYNijJBZJ8HGIIuNHQ79MuFq3PBNU26mWAhmK8g\r\nTV7vEfwPUaBQozdngLikOIGNPG3KzyE8lTcaC6PWVXNaTExOG3ilfc5znYsw\r\n+5bcrD+8cFJUdhwLwICGZxvkSbseQ3pT87M=\r\n=BVym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/button":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/tokens":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/icon-button":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6432d8fd7.0_1657783813248_0.44236481653104853","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/snackbar","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f6ac5cb9bdf9d6416cb13a57b040f334970d279","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.085f9b25c.0.tgz","fileCount":42,"integrity":"sha512-eIcJj+SAZtxc9LuukdtU+5hlW8DYO1CyYa0XYV3cIf3vLW96+edhVLAfhKjWzr2wzpNOmhPjHtp5P0AjbrLjjQ==","signatures":[{"sig":"MEQCIBowkPnVbFtY9VcV7yxSDf792V+VArb6V6S0ulOrWrXGAiBEgKGTX3lPFXlrMetQ/nawJehGSLUivZblKPeQ3faLTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EYBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8sBAAnJNYL3FvukU+nQOlOSisiZfUSjtqhsZ2tGA0Ze1UlxSoq7yf\r\ne2Qn7w/V/05xUeLuqdgO09P1wLPsQ8W1a7IKr+NX8MgHqlKkDQ/+NrX6xJ9X\r\nC/wDxuYJdQbTC5oBdeiFTe5MEIdR68YxFiLwUpNUyxvLxBidZn2+sbL+2Dw4\r\nL9YmnATuGieXPogrj+Ecyx2xEUC2Pz3pU0vFKSp9qVwv2iOayRND/wz4UJvv\r\n1ZWQvOb1619KrfL3jJF8whhzNc5hgQArjPLG6/73dvMtoZhbZTirAbdZ76Gw\r\nGF8RdoqyOSe3BeOpI5HM/ecytemlSWyAsvPaXLyL9VW3gvL8wOCm0cIC6UKq\r\ndqdlvtLA2cujWY3LTVBiJTjKOaTkiO7nWNWkPILpHCkKPsHaSMpG1pnCRJcb\r\nKLRdbs5A0x+qL3GKHHim5oRL+Q2LZAjMb9ug+CTSruiKTVYl7CYKSGyWduZC\r\nWwCUP2OUIQ+pAM3ea9ZjaIqHB3hD9lZ1oykZxMgNjP6MANQ86VN4U6FytRF9\r\nT25wARQ7hW9eifobrkGfnN3z/r7vMCwoTgjnzQIYANYButzifntH9MKJlskA\r\nRmQEnjN4BE6yzFonqGxKOzMffj56VyJGC16LaXGmOcOyHhsfdupJsZL0tdHB\r\ndkZ6g3sqzKt2xok0EgorrhUBw6fJH/km6Nc=\r\n=BacJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/button":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/tokens":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/icon-button":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.085f9b25c.0_1657816577301_0.6107205406531537","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/snackbar","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0856e6709f1d631d4a84349e1e49affa4f011abc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.39f9424b3.0.tgz","fileCount":42,"integrity":"sha512-p/W62lXwp3BsYPUsbn4i7bnGy22egJ2mHIOu49dCiX8fqRsWj9bJVQSuT0Q7WJTAWJE1s4a+cabL3SvH7vySzQ==","signatures":[{"sig":"MEQCIAHAV0/wvpQoRRbvqBq4OQQFgX++Q5bS7nBu7wTOjOvJAiAh3gGFgB9xwO6/Iz85EHQWMCffaGBMoKqvNS/IZDfDxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBKw/9FpotYcs9MBm/CrREXEHV0Yoj29tI5DnLxJ4agazQHl/L4g7T\r\n1V0ydhydZbZXsSf6DXeZdsdwBEZsznANQR/j7l00tN1PRl7xwAWpQA4FQmHg\r\nqGk2q9kbkBz3KblcjIvw87Fv0Z+8LzXxdCv0xZpREFe1hXVXg35L0Jc6pEh5\r\n34oX0LDcxXnT9kZads1uErTTT+/ZALxAyWfBUdtOzgySoqClMr8unLlkYGL/\r\nqt3+oQN1uXGqcjgtEBq001TIOu0MS3Ld/zKTdmp70GJgywKhTD4QABaYlQqH\r\n8/MGNckxYUIGuTwrditDNPjqCh5tLG/hgbDy+/WPnfzQYmq1ah8bbSCA9b78\r\nUnegvx+eyYZYCydfrF9vF6dsXIbJvaxRKQJVLiNVULTN8WMokf1cJ9DpQl+c\r\n0i1sJ0Z1g4zuX9OHUh7KRRorlzBE48/P8PD5aHBgmrWrApoTTJVZS4gcMDEw\r\nKYwV6sEJnaDHxTQ7IEpGenM/zu3vbx6HfoQicp+w7HkVb4HnZVb0WE3jc2aT\r\nJN/ddXw7u3UPyJFS2Ph48fj8+NGd5E3V6ZcxFXc6gQ3vgSL+I1c4DvHTik+S\r\nTCJ6sef85Ypr+bWgnkjDCE4bG/dA969R2ZgLghqVkm0Sluch/24Yhyiu6gVd\r\n4eOQU5/CdRl8Yveuc2zdqmeRyK6l2XmG58g=\r\n=Nypl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/button":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/tokens":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/icon-button":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.39f9424b3.0_1657818399800_0.3365696138430385","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/snackbar","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddff6944bf9e2c291c0d8f7f203427fc118a473b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ae9fce587.0.tgz","fileCount":42,"integrity":"sha512-e44UqoQST93GjGyrZFH9vDfdE8dqgzhkh6mM/I3SLsVC9YY8RSwTWFBy3U6VMhsHfFTzyf1zwCDutLAKwVD+5w==","signatures":[{"sig":"MEUCIAXsXZZ833g+bwxsnbZaVsZrUpioS0IN/h145KQo9WaXAiEA+OH1Mcp/8MnS6yDj7atQw+g494CRzIRakfTgDedQRlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjQA//T6d9mNZ3uua9qCG2SMy5EAby+eKQQTJ6SzveW9w9jYmMeWWD\r\nppg+3pAR39CUMCQhotxiiLROOTx/ptORXN2dp6qbdzfhZ4Jk3kCscE3JJJVU\r\nxTTVj385a+rYG/Y8BoYWu7RHxuR5Tcwji6HnJXIriMSDfwrwT2zbAzRLNBEB\r\nPD347KppJ6xDW1xxHEdBlpla8549ako5nlZdqjK6Q1TL2LCSeECuWXHPw88i\r\nJ0Y9OjgBthMHSaHgXSx6WXxbz7wubpB2rJ8u9gCLM8axdlVVFyLzN8B5pQum\r\nGScbYQ/sVmOwKPI6obmkxf/k1RU8Dlw7SfndvXd0NzjCM+Sg+wD2vsT9tu3J\r\nQKiJGLFhdrkfNwk8gDY3aQISDZTqbBXceN7alaLcsD+1WjzZqHuJFVP9ohew\r\nhrs31+7b6FPXtXWvnoVKHOh+tPmG+IZjKorprLyKDmYpAo3YZzAFNfxvTaF5\r\nupiYdjuwvKbMb0z96JhYtsTQ6lV3Rvf4Bj0+75MLvedUOYJt49LBOLEy5WVX\r\nLUBVumh0uCjojYsniq5dTsXMavslv+yA62SnDrzFx/WWxrp+rzyk3ebl0K8e\r\nJx4ZSsGWkXqJDZyv7HgasmyLMMMUejaQpSPHJhewnPr2G+rp1w/7R0ggD4q4\r\ntfauaEA/k3WT4Y+U5rElVMrEBPt8wXQkZqM=\r\n=MIFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/button":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/tokens":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/icon-button":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ae9fce587.0_1657822169010_0.6051509644982216","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/snackbar","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea64c228a106f6ff26bd3e719e1e101977ba09f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1ebddc343.0.tgz","fileCount":42,"integrity":"sha512-b+s/4iFL8cA7OjiWLwZLyV+rNGgBB/ibQko7LLMtfeHh0O1GoPexFbDAuHc0inzqITZc32QWH0khPQmHo6rRrw==","signatures":[{"sig":"MEUCIEI5rnq+IOp+PPQqyOLfTSwX5ZOe6LmGp3WaDBhu3syBAiEArYpV198+r/ZVW60rOfed5DIkX045ltCoEkXpd6IDW8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog0xAAkA0LFm6N74jIGSbF14XwuzTOi3bcfqx2lhutVk3Gli9QThBo\r\nJyGo9o335FQWczZKdjzcr/K3BLRtdSqkRiJoUH8QY9oIkvif/tr9OcS1TONk\r\nlypZ82oaekvqslzt6YbRczz3DqDXb8u3/lPHU5zvh/eNNpRTkVmisdF7B2pc\r\n0phre/JKceyxKApDXmNp1wGxRb5gKr2PKIRfWFe1th3Nj2o8ni9H/TdyIWu/\r\nC7g4OPD4hdYpEPeZlhJaXPvzIN6n0aEVOYicXLh0wV7c+2mqTFUA4PUIr+3l\r\n87gOgZWTRHcAqpbBDlKhxOwI65hLa9UmAcas8/j+ejc/dEAc/h4rN7SKqf3G\r\n385YLXMWSOby50Hx0Lll60mLv8/AqnD3uXm5x+3tV8sjYgVn9JqSspczlg/f\r\nsV630NdkmTFwpIQRyGCVHkDcS+VhyCGLEfW/nbCcypXxmXN7FTCBZHDibFmj\r\neUw4QgQHalNw9C+T/7Cry4wz08/eufzuf4xIXptGteu0M8aB8y/vTaC8SHSy\r\nbbPemCSAxaBuSx/jaqwzzZgPlTCertmVo3UjZf7FmASA0BLF0g9x0VqBy1nX\r\n5H4c4OvXMC7wtXhRAjy6ODPEJBqEP9BmgeUrjYNVmwpjEUyTL/uTlXcRFt0u\r\nnsu9S2mrp26oLVv3w1gMGKw+FdHgZrGRrZU=\r\n=nsOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/button":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/tokens":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/icon-button":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1ebddc343.0_1657875043029_0.15650297537085978","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/snackbar","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c5018840c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f71665c90ada8294abace2391a023d8cecc0d4a4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c5018840c.0.tgz","fileCount":42,"integrity":"sha512-KeifhJ9/19xkw0sv84Fz+/GSMJAwb8+pW0afI3vg6hDil5zPMFe1P1O1daQ7dETwbFZfDewjzbzYgPpolzCIig==","signatures":[{"sig":"MEYCIQCrMkEftq2D3ECIci0mnpEzuELNCtXkkv07KMc8BC9O/gIhAPiM2h/4f285pizCuIQ6jgm29vxIp6SIiGz1qwA4DPrc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SuAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo54g//TJud1KmHuBHCcLQ4uQ8q34MlekjR3rusbXZD+4N8Wp++PgOQ\r\nmAMYb/ppzs+6F1OT1An2Z4A5DI8eYS/40ihEe5sQLx/4NXnaudm0tZv1kJkL\r\nB12RGcGTPw+4RBdpEwsr8NJl1ykMDSQrofY6+4bDWhluwYKMCdfl2x7sG3Y0\r\na+oh0bFsxOn18EmPKgCaw1GLXMNzuu83id7/qr2EXyeF7wHWUod2WCj6KtHa\r\nJ/UYuSE8pMOmYWo3QfpaGGTfPFzzd6T0/HC5aYFu2OKVLDb6kUQqBVWRPi1v\r\nPgzK+jFf+PYi8Gt8B3nG7rNBK+exfy5PZNoL3N6a18v4the1bHwgo9gusnCT\r\nnJ/UCBIIbNm+roEOHpt2hlUmDTSBrwk01mQBEcSu9NiMxs7UTNuockEiY+J3\r\nVxOf++h32XtOgbsFF/2EWuguyGTcdfUeATvogp//H7NyTH3vPKbjIcTaM4ZO\r\nwEk1ATzwI8IZjq0i5TgcSAWrWwhTsshsa0td+c21rE33CBjBWVArNwYJlfOA\r\nFOMhvqiwePO9DS44B6Wioc0bECsDfggKBavBFtoQukzUBv4iQS/LCAUUp4jZ\r\nkROggLM3FR9J1+sZPSbEwhYIvXzHjvQOcLJ5dpVELoFh5WLxEVhhVs7oteBN\r\nwTtp42bF2XUdM+VWgaSe2F88D2zoFaQaYNc=\r\n=jmcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/button":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/tokens":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/icon-button":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c5018840c.0_1658137471823_0.6219368328348132","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/snackbar","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.551b40d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a510e3973b4f5365446924957de22701a7ff8153","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.551b40d18.0.tgz","fileCount":42,"integrity":"sha512-nscT7ppkY9Ho/npDQfSlz2tfG6MK+LWoGk9oxu6n8hL4vTSlCpyRjoqRJqXGETjkWnwJmSc5t3Wx5TLWiMcbwA==","signatures":[{"sig":"MEQCIHYFUUSDLo3lOFqYbMyc7Cj0VR19ZfFkx+zdkiHJg7oyAiB7t/6Cs6SEh31b7BAmbCd4bTKjZu4qgmtGr4AVMWUFwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAbg/6A1KHqc/k3fiDOyc2NyMOW3rLeC2PbWV6nruULq+JZSoKbdzh\r\nxnUnK2EelluuFzrn4Kg8GZLxR7HBsYzehtDPz4vknwkcXYLTyGGlDUCbBHJ2\r\nsmmbT0vTS1etgVX4s4DyEoKui+sMYNomxXL/TYCcs+gOAeZ8/u1JqqV6yoeY\r\nd426o+E2cai/1NjVx8hl+E9iNt+Y9eoFMGX5vhEZi1QsnZpqnWn27ynUrIr6\r\nsKPsFqciZiQbvcbi1FaO4hYhkqDB2SwQJZz/Cvg+In59Mg2HwQLZj2vnZ8RT\r\nzcCwPvZqkfMyEXdezR2n8Odx5GeeqnuXeFVYEy2RIaG0QKPtF3YULDNbBHZd\r\nE5S9P2GSmAxnyjZCngessVy2RtYuP60jJPVJmUrRJEYNwkOtGlE6+BVWzNsH\r\nPwYmy7IIr5CUls07VXaVRT09NLBfmTvAujLdykMgb6agAN2Q6WxZjBzca4Oh\r\nwVYrRQOcMJ8BhZipXQAO9Q0dxJFfrbuPb3hY9Ou0eBne9ZjiKFW+/70t3t44\r\nKubze2um1SVioUBQYV4MqvrFBkQ9HQAarn1XOmGh+RoifvDDF4V91CXY4W/n\r\nTUUkfgGOakL6GW0BAB+vm+IWn4FWfClzvLfL/w+hZGIxgu6eVYracmjn+TpP\r\nuFO6h5DCNXF9AxgrKHRofIdWb+Ci3z3j8dY=\r\n=+B8z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/button":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/tokens":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/icon-button":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.551b40d18.0_1658138554969_0.6584127500825727","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/snackbar","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2b622536f0e6da1745264971d19f715c8feba54","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cf9f12371.0.tgz","fileCount":42,"integrity":"sha512-ymT5ykFqeUlEvOFf24GyoQF+hMKSN+Bl6Hos7uMzYQ/rJ7Z5TmLFmpPLQH/0fQG3EUhy2zYysOsqvXKZV85zfQ==","signatures":[{"sig":"MEUCIQCeNXXJZY8+rantSSUqPVbODNXRS5dtL3dRyBwmCE83sQIgR8iWSbzQNP3MxYb1Duyxo2fOzGLhJCeEAMSuTzyzQLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHvRAAiMoxIj3xE38OrwEmmxPVER3t8k+4xmV0MflL9F9jxXrLLYjP\r\nL0UC+kNvD7Uw0AupO0zNZEjyIlyLRSE7+iwybqFaOOJPMyQ9EsS0uGEr5D4y\r\npdrKbNh6rDCQxwTGuXh3ig6xAn8z1qgOoLCK07dY+OUpmQ/1u63q06dPL7Y1\r\n8PKIEFuRAPJ35Yb6mWZbU4vzF2vDhkCtCuA7lUZ2KuNh+JUB2QrdFnL66pug\r\npYMlA3ufDu6EX1vPQe0s+P+0R5nwYntBis8+48y6Jvhu2sa2tjP76RaWG2oK\r\n+xk/GM4GQBahtQW8wZlmKxyDey70e74Kr+aQY4NzjA1J7KZ8ci1t/vUXVgc2\r\npGCCjsOF0lo7GR49ZdA49RQ8Ff08EUjALlAH6JYookVQU8j6ddX30HmDuF5g\r\nFqMxg1m4fg2/HJUMgoZprWc4fYPxyjAgt6VMBty1LnYeuuTRnJhcW26R/IU6\r\na314lMggm1tugt7/gk6vbvbHrgAh0cI1YrTWgHz6iBQGRYl6uPpcWYz79Hb/\r\nQXKxWnVwx7tEvBY8eJ/xOoavzXSNgssIN8FlEsdRKoSLiOSuBtuY0C3YBrio\r\nNdknptWHa9xcAfVmlv3WLTvhlrVOmMLMsvEjfUl7cB+JqlANfm4+RtoDkaOV\r\nuhSV8YEP2Wo1IhfsPsyxZnzga+sDlLpgUK8=\r\n=+z1W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/button":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/tokens":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/icon-button":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cf9f12371.0_1658138791331_0.5461811812233826","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/snackbar","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46e3d33613a568082168b643cb386e5535ed0889","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2797ff8b6.0.tgz","fileCount":42,"integrity":"sha512-aIDq9dYgsCxM7t4eZu04pbWNg88YIDO9IPzg2Pmu+E/P5HJwTJGXHs9IdD+oSnQEOvzZuY1T4My0Jo/FgwXq1A==","signatures":[{"sig":"MEUCIBETSahkPRIGBIvv1pc45gRm4Z4Jjt5fjTWL00XsfyZMAiEA/2kfOXclK+UYoRKgGwrzJboIaiEeViN1FmnPZDU5si8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1foCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt8xAAnAijJo4/GojED+iOtFXzP7NJLzDnAaWt82KbU2vjtG+6hyqb\r\nsUU9ZHZwLNi+AhZkpWEzft3ey8v5N/+q1ptCkal0GEnMcs57dCnS29r3RZj3\r\nF1EpDkxV+NW2UPTe2xTIQZ6aKnCmrMjyK0ZH6YS+I+KtQrHiFQneQGpk/KRE\r\nrEKXCsgW51EcgYAcxiIAusm1XejQyguG0pvI+rsqg/0Kr6KdmEQ/3U+D8EqZ\r\ncdgVwuYIYEw4RND/4aOUsbscvk+bIHyRvYbUUwtQANjaQa81uK6cenLpQRWr\r\nmLhJ3q1+XD6z+BTqmum5OOntsblR7sCgOczfwHKSc3UVyfQrrewL5hEz3jlu\r\nuWp+DrQKeqE0swLZFLgff++YC3WkRqHvS4pF4hlEkZEfKXsNkxrH31ZPhxu5\r\nuptKAbnSce9NNz9bKdgscGQ2dAws04DgQQvl0s6OCT6FjgpIrmrd67OLVjCF\r\nsXqKgfEeZf578AB4Gagra25/VBlZMEhUSeSn0KGOC9K1ObQNzw2GPaoQF4h3\r\nRLFeuW3eaDyk5MPKSKgGph5JlYjT5vbU/uyD6JSnRwZrimcmeL4tj8MVakWB\r\njC36jAzGQbUmJER8xhpj18xMgDcGAe5dYk59TYV1miAud2Nf+4FME9oohCdg\r\n16RITU3BVEH2nCmrzx4JHi2Y4p9KrzWlJEA=\r\n=XOth\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/button":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/tokens":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/icon-button":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2797ff8b6.0_1658190338620_0.8031066641768829","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/snackbar","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.110fafa17.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"045d5f69d22a5e8ba7cb2d746b3f4f906e8c523f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.110fafa17.0.tgz","fileCount":42,"integrity":"sha512-cDnnh0OBBG5yKQ+tsNe1sSkQJLPYDF1FCZuKKY4HCXiq1ySEkXkpjEz+meONns7EFr+29/v+oGJHAlOgkDC5QA==","signatures":[{"sig":"MEYCIQDmCqEIxBXU+59Ff0imvgiyzwdBHQkS/pq9VIR9Bnt5TAIhAPNZ12RfGIarlCDru1M0L3D1JZL7lslbAqwURafs2wOu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17M8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTTw//XmYFsX8S1JN1JKXfWfqnP96efhdcUheBIM3j3ZVey0kfDbI4\r\nd0QAosmrEsP5bzKUX8WfoUOQoLlA3HfpoXEnPZNykMYMot5gK/YS5EgGvbUz\r\nSc4yjihdw46OIKxj+FeuFvLI8womUwfi2nvJggj5BhOeP6951X5YhAzAy8bG\r\ndo3WPZ18WtCIhb713iYMi28m8vYVk8ZBFBawRDQyqVl53OQgZBjhFPbQdnUn\r\nEJjl2KzSAmfXmWGP9weFZJnqFZ8H+pR//Bz4bjKFQRvag+OAU07Mfsus0UWO\r\nJWiNP0Mhhk0xLhQcSfisRZGRdGpmTOXbAgCIhCx51pKVSVE/O5mX9L08AR6L\r\nruc+mo5JHa6UQ8/O6ry5M/PvSaioUY0UdNZJaFuRq2fb7j3NLFvEwDL8wQ6J\r\nuE6zFm2MOnW1BFBnRjYtDve+AZWd+rkMeJFFh9o1QO4TcludTGmNaJgP2Jia\r\n+0zS9o7KZJsc0f/MjNq8mMM9cOmfq4TP+h2lSdIcJjZSwsLGwYccDR+AuGM0\r\nfaA+oCH4U0vEelO7RcOPNtbq3W2j4zYfDW9k0VeWoqDL5pOojgKoHL1undFN\r\nhAGNlhlcuZFep8uN6ciwlfcRqueG4+beXodo+sIldT/UcHVTK9a42bMo7g6D\r\nUW5lT5DgrYSMkDeWQrdD5HaG4WjLOH23wao=\r\n=Iz4J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/button":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/tokens":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/icon-button":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.110fafa17.0_1658303292432_0.7121706646641257","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/snackbar","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3341d4da2e8d2c293c039367548a6d92e12d3932","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.386ef1d2f.0.tgz","fileCount":42,"integrity":"sha512-VqAvyPc54tUkXCWpWh8iHHojJADqgGbY6r4bYyBYfZvunT23nSm1jKZj9qMilrbf17FaOsy3wVRBxnCSTksWlg==","signatures":[{"sig":"MEQCIDdlLnjAf3t9PoD88IY6ECOlGXtRqVBbbgfDP4n1kVUuAiA7gVg3tZrRjyMtEJOHo0FDx00aI0WB55YMUgVuVo08ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EemACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbGw/+L/l6SIwbPnyUJxNmjeCm9rJmyXIVdKLido+xC9zs4teOpCkz\r\nv+mOO5oewpkQJ6lLNf+6blKR5CiSy73gFoW5tRxUeERKKIO1unDLdZbn1oeJ\r\n8UJKfnUb9c0lDGCuOC/ABVU/wF5r2iz0HhdfgoEvSbyNmaJnYK4Wc1cKpPRQ\r\n5VoY1L+iemBNZ4ExIn3X7c1r2UjIcPLw8BFopkCfn31/JDBMP2kac7u7FBwp\r\n5RQy9lH6T34kHzMLLDAFqnnQVfAs9VSPwhyGr5ng4wAUrk5/f1vMK9hgUsg8\r\nQGVYLO5Z1alV2/ZEGerS0NZjem5zVZGkEXRNRQ3bfZQTQzYl/Kef7hVljXQc\r\ndAetzM30pCj916chSX87927imyyidH8Atr4oOQR2bvaa6JSYGLSpmcDDuZ9j\r\nTIOAcTkmIkMuZiwXTl3Tv3j7xnly7742xitcG/KLmXkDZvljb8Tt6FOYjy+r\r\nvGIYt7uvzKcn/07TSlDPRyAEdsE8IgX6+0l+WIRJP7TjXRwM/BE67aMiIrcW\r\nh027L4p6HroeuQWVzzSZ81iEc5iKtJlIPechBsKT3YwmOrZGgKtt5yw91iLB\r\n9J1bUIAsNAc8p/zUVPLfLZ7uh1c6SrYlSQGfUx/+q1DPVjdO/X9e0tvm1UQs\r\nbqTAGRM9Lp4/rnHt4/lzjold83x3Tu1nAJM=\r\n=nEP4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/button":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/tokens":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/icon-button":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.386ef1d2f.0_1658341286338_0.15725032482291446","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/snackbar","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c3924efef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea163f459700f669f386a139d2b735b98044cf4f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c3924efef.0.tgz","fileCount":42,"integrity":"sha512-L3bnpaYl3eIDd42Bjwd1ZvpZ8gQlamUhgDeJXi4UGEJczCQ/ffxBDjnpq+CdGelTJu/NYE++7+GiHG3IM3qHiw==","signatures":[{"sig":"MEUCIQDNnN5sHzsGcJuGmdizFS027WSAtzIyOQw/L/gQgCymzgIgXJThbakfUmEe+cPV1jKezmQsIKt7GPvKZjJNM8rb2Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOMw/9GCncwJC3HLpWYsKxBaJ45P5g2cYY2SWCBrhd5ZkKHQyPot32\r\nMk4TLnge6qfKGTHl7fw6wnphwazuS5wsADt/nScvnX420tDTMZyOlMnfADXE\r\nRmRMvIEdd7J+G/vxMWku1KCHZER2Y3zcnwnm/NH7PYEiLbl1DvTs/KHu+3q0\r\n/diOf6J5oIKr+9/RXv1/yxT88b0ALVOygPFLdD/HES5/foFh9TMTUNfyUTN1\r\nKXpgVDdulpJ1/g/DUQJzqixxhpSCRGRPs1j48TNhvAhYpWCj5MIvF6ESVDEJ\r\nTPy/9q5p6/ImcZz7+1jedJvwpGwq2HUaoBqhDCuZ7Ul6y/dTv95zjV90cGyN\r\nP4DfDxIuNFmU0P7i57SdXXVqC6hkXWHsIgU4KR5sUOf3oJwi/SZJtqLv//ZD\r\nAyDSv9V0CN0P/dXlpdl1+61U9XkGkpErg+esPku94Wry4QYlO/JeMv8gh37E\r\nXj4WecA+uieNchIjf8dCj8OAe2D5x4XL/xd1YMdQBiGa1iI0hrR+ApYpZp1s\r\nYTfFmbHJuRRhuAnTQeS5n5JgtYy8Iv+o76N+RZS02Qt8sLTHdmsHqt9vJYA8\r\n6LLNfzIsM08vopukxjyyzFRVF2kvxvkc34eOZdSHK/iZbxlgzUbdrPEkAgE+\r\n+7n0ySncVj5ONmXGJJ0a2WAzM52PTCPg+4U=\r\n=LIpB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/button":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/tokens":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/icon-button":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c3924efef.0_1658341865413_0.8026755619987502","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/snackbar","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c34b81cd79dabda3c61f81c71fee6a79e2635a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cf5c5907c.0.tgz","fileCount":42,"integrity":"sha512-DwipFNZlyEDPgGT9ZSQuhDiw8B6gsJ0Yt5acIjB2m2eGWhW/5CZ2PWmbDsgmy2lVBpb1bEAu9nhX/YFM+51SjA==","signatures":[{"sig":"MEQCICcbodHAK/OLZ8lKbw7+YO9T072+GLyCIKflEjfBY4rUAiACIp8Qwsb5mYRdn6xGy2Xu/FJnugW3iWDASbENRfRvpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HI+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouZRAAo8AWlTKBIYnox+WZrTa3wbBUfSsH7UWrnRvsGanXtdKthWDA\r\nK/pvS2e9GZaj4nH5gxidyBkotgxNz4T/1SwkK+E84cnKPYgvO/us3p4N8mxL\r\nstIygKGjDqvJdHZNJmyBpK8cmIxp3XZdcHoQNWewdpOB8qt/5vtal++1ni9Z\r\nlYZVbNdIceP319aBdFzSWqohNVswdy5Y3iGIiDJ+zhpeVb1VsEr9ft+WOh7p\r\nNymY525s99NYn9BMpIjNeGyPMnIt2SwZEbIXUxmTKFgUJJr5UGY1mAbti9Px\r\nhrvaTOgsx5cjJW016eKjc7AcHMNo4fOISgKx7E0eBRgGiaqnWK8dTw71b7h8\r\nntq5M+ZdzHnyzYsz9+lBwckblmPLEg1A4SVnVouaDhkBGUxbYCF1V7WVFAYW\r\n2pJUu1ffBEw8Bl05EmRcae+MYMMV3DzYmZXoBpNjSglEmSIGi3PTdBy1uH8D\r\nUMQ6c74//BqKU0q+wHEF0+1t3zGT53aN1RAyOJs/qO3LprawINSQHCyPk6lK\r\nWj07foGS1f3PVYCjHJZHKPczh6nIr99OBGpCR2xnp5WgIl1//oaujHESk2Yj\r\nDRzY2am6UW+7siCbW/67x/GyMrNYHeX+vkrFktcL6SvGMTDo5VpjZAMlAVwA\r\ngrKKWvs31aI2jX1eVOZijNm5jdHdzjaZMtk=\r\n=LP5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/button":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/tokens":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/icon-button":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cf5c5907c.0_1658352190435_0.5509920954926326","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/snackbar","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0617e2319.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f2f2bfde6050235941930fc62b388103a057ee2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0617e2319.0.tgz","fileCount":42,"integrity":"sha512-70soUac0tGv2anmOKQUmdB0B/touDbmZuAZRitbeKS42TP6QOwYLTC0xGh+PQ3xEhi1t8jJn3OFFFIkBxQ+rqg==","signatures":[{"sig":"MEUCIB5qbRUCHOE7K//naoZTMhxaDZ47SHa805wgBdoAdnj9AiEAnTvZBFCU/V1KTpJzwj8SLpVsuDiHcXhW8w0O6qofGJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HaNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7ZA//bb+m7EUgTdYYH2OhbwCNujEv5BgmzqMxOFxlolLI0wnednfZ\r\nHzZP9Gh2ikcXveKtWTz0l+0HXxzUG30SwB8N4TliSwAZGoD0e9xAI4ZP4ycs\r\n6fjGLZ56Rl8zUYUh4BPXWKv6KgOefWgKBEAZz8kX43kKLhCIMfCW3XkQjHW2\r\n5nm9PTbmRcWlhx0lyQWYoUS+lINtGvStMRrfyqnZa9Xo2Ydw/XiiPp+wroFO\r\nQcF4mpIaWN46LWYY1PihThBhn0M9VjOo7vup/nAXHY1KKpknaVDfrleG2l6n\r\noT1l1J3oAPHXYSiDK2FrVU2uDKPAmzBZQUFz0HI7rO9TWCPjv3NuaKPiS9eW\r\nPwaVxpLgyaoJGNaP9iSykQbW2LJNsn7Y+bzfcntZDOgUVZorFigEZEqbbJRJ\r\nLfL6CRBFZcJUmlkLiOBp2+xK7wvQtXIFnumXeiKkaIg0Nd6PO88wLPxRzTim\r\nu+2ud/FT9XNA8DOpqVmxhTnVK9RjV5z9zztH7l+vX19t+mmc4Pc36TfWVJLP\r\nWLDlbbn4/PPf5V94QHPfpTmJ8PG6Y5rK27Pyud/WtxcTDTgdXInzF4wX4VTG\r\n35guUvirEZboAcwYUD1X1mf/rJa/dvW6SpHHJmVAvuc8wVvkxKKg5LwAG75W\r\nCS6suwUUEBmESxmEk4Dke9FfInRcClzHvzs=\r\n=V/4U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/button":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/tokens":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/icon-button":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0617e2319.0_1658353293246_0.3697888583497486","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/snackbar","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a743b7967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dee64f708333cf24634cd212e237c0826f31d070","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a743b7967.0.tgz","fileCount":42,"integrity":"sha512-4MKtRpMRA1Es5Ii5+PTaDAQdmoWBT9ude7WLHUYS2YE+zXUgqwjCgk/kq4brbIPQWSHNO63BvaCkUJqc3WX4mw==","signatures":[{"sig":"MEQCIDHqWwOvTzKIwjY9Midk/AwZM5WFgq6guEKJR8/gD+njAiAWUY3YeKbPHhiaM5o4PGct23q78vdasaiwZhLGFBLHLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HqCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+hg//VSq4ybZ9ormogRCHlwvdrRoF4xMHGVbuOANHAJI2YZ8KDa6e\r\n8FRymEo0EkOx+WAuvLC0rU/9BS4bfYSllxvlI88zXk3GQ96dImqujP8xWcHg\r\n+uJEk4M+rmRlOW8xMkRrUtQ6gk614Tn1qgUCCTQF4U3xNo9TL+HodS4t4+fl\r\nN5sKCtOh3WcHO5fAJjPNtUkA/layXCkh3C/CpYalfmuwacHFzQaM+FK2pw/E\r\nTa6rY6t/9SVoI2VC/XDhTr++kegDjIKljdvY9PC6E8NueK2IaaGr1Jf9p+fQ\r\nORJ/ewObx0sIZQINIch/9eQjv9ZYSPbCE4UEiRZx7FoFrA9Rrm0meu270zDq\r\npKsK5O8fnE6o9duoNwItpgab1gNPyHFIVU1bHfO8U3mL13zpOHUcYz4X5RcJ\r\nSxk3YdfN0ZfwODrXY/K2hlRkLYl7lBwBKSMhU67YXl19AaF6s5MsLLAaEg2l\r\nYU/fiyQSaoaAtwcFUqXJjHqHrWLF1o13MJ4AKyMztEKLADssMSKwgQEm1pl0\r\nOmv3D61DCDDroPOd1Q5GX3aQu1JbuzcoCQywEDPtGSGZf+MZmJLMrTQ5Aj+k\r\nwrqQb6Pi3QJbult/z7ch+sOYAFVs/TLzYWpJatIjrdKGErNgrCeIQLL0wp+E\r\nAhtnxYv8WMALZDccl/a6CTAVV/IKhPHEaoI=\r\n=ujpb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/button":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/tokens":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/icon-button":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a743b7967.0_1658354306071_0.0524143840440332","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/snackbar","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a89b83ec9e3e1d0195866d85695d62326026fe42","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.69fd619d0.0.tgz","fileCount":42,"integrity":"sha512-noGxDAkTrXs/6OWgxzs8JqoNJrFLzsoS+xVZSWY8Xh11tOI3lbLxNT9qLVwRdVoqWhvmmw5dabrSDcHBafC6ig==","signatures":[{"sig":"MEUCIQDR9D+cXuQ/hBy9biYIY7SsJDhlq9U56QufDHrNwiuBSwIgTLBqobvAaduUROb3pjrlYenyPxI2J9J95KQlopWQzTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H1cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgEQ//YryEdYC2R3pSbk7MD1/vrwucHSoz5lIVexqJdgsxUUr/OUsX\r\nISb3OxRI/KOB/uaqEbBLp9KNILsDBLi990HJcNNLBrazKeOIr+NO5E55un3v\r\nEXUa3GboyXJPEW2NfxmBJMgU8Fv7SOcWSdrDd0OfmZpvJSviRH5k/1zdkPTn\r\nzA4jzsulc3YBQ9PTYwkPvZJnR09BXN8hXFMgByDApFg87LSU7P4l2U7IbRwX\r\n0QM35y7HzlLBbTMqdtYn2hQTDNXhkS/is3ljNggYMwf5whlZLZVHV95r0KUp\r\n6fSECDriek+1RL/+/L8fE6OGBUNPGdfK1aW3PHqjZNpy3698ozuXlQHgP39c\r\nq7vcUjRosmjaCq+igihk915JQq/l7luoKDoP+30sjOzmzkBGKFP7w//YZqHc\r\nlnmpXh8AexofhlPR+DhhQ04HCH1Z8098jnEk07/UFKNKO3080akJh6A5G+OW\r\n42VET+81ksc6KB9SJiWDRxcKhcjF4KNRfM/ktGToG4EcSg8QvZnCzK73dQm9\r\ndyp7hhGp504Tv5b+YKCl/ygfAqcjcTHW3GPnt+ymlDDHypC+oItNp0drSf0I\r\njmFLORMip7ks8nMt4nbXUD1zA/vHENOqBgn4/aBFJSuG4vkQJ3woZZnO9Qz6\r\nykVo9EEvZlliQoR2Fc8B/eEHpejEPii8wfY=\r\n=Bceq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/button":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/tokens":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/icon-button":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.69fd619d0.0_1658355036531_0.8051883116186354","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/snackbar","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"427de7d455a738f06f4b1323eda26682d1211b8e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":42,"integrity":"sha512-nVzRfGtALb81w42iQIom0ltPnJEORnte9w7TgDvP6VkeDJT96EG/GHk4V6TYHy6ggADXdb+m9UCIwvcbw2ZPlQ==","signatures":[{"sig":"MEYCIQCWPuRby8T5cxR2UbxJffSj5K0Mh1JQenmFnSfklPVKpAIhAN4+CQr66f6qQ4G9Et2dLVfaAb1Jwu3ziA6nnhyYie5N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AVtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKsQ/7Bq2m3a8GtY7MVT2ndUw0pLMLMWScZrPYI3wrwynT0NOR4656\r\nUEhDauwBiYOMfr+JDydcp9Di6LcbjA2Mt/oBbeZ/KmAF5Jej/o+kAAWCNJAN\r\nrhZrUT5vywViUWjxCQyYPUlZqYqF11g536yxdubdwUzYb1ztNOoKw5teg/iA\r\nzneX6+d5zudmoCc7wF9B1cjXmpWJcLuSevFTplp/FCh8cSu5jYyp6QlB3jDF\r\nAuEcUvpQOoyny6vmpRpLiRJPr4+mo/YM6C3SfhvE2KX7JH0lHMSaMVYjB16Z\r\nQKqdDkuHsHMFp7FYXkLtZC+ENQntNfTrYN2sb2mrAnhitK/8Hki+Jrj3eWGx\r\nzp8auf8RMByteUcdMMZDjJ04mVK5Di0Z/MfqtsRCFdHlgpaB+1Zno+sJLrs/\r\nmoQjNz+dng/RIalazDfhxOCT01u5+emCqkuie5SHNxTv6XA5NliKSIfSu9Rz\r\n/7HA2i7SXsJpgQl7RxTJbvWmAkLl1ftPHtV+XClIN7U/45ieP3J8CIRoIUpt\r\n9oa39GatnxixQxesoD4k9L4FRvxMUIxWkstiovt74Zm0MdzuuKe6LaWLvPZg\r\nJbnPgugI2jkwNwriCTXCpyFFAw/y3XNLGc3pl8BCi58r/gCXr5V6ceeJONFy\r\ny6h/a+EFjzT9qg0nfWqPGEwtq5v4pBx/v0s=\r\n=rxc0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/button":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/tokens":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/icon-button":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2a6ddc1cf.0_1659110764846_0.704615490337895","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/snackbar","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2188e73aba0902267e2e52a7b4aaed83cdd587d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.86efd56f6.0.tgz","fileCount":42,"integrity":"sha512-dwhubu1tCVgRKWWmajO5v36HS+N+xCUhQ0SxfEb11X15ITDVxm7GLzGCMHpKGD1wqbvcjFV9lgUlFtgKYrLafQ==","signatures":[{"sig":"MEQCIDlmRbW7orxIxz2poPo/5c1SxC85MtrkIGpwbawXMPIyAiB8ClZKDlQEGzSuYF6DuYBNbBRsW/nJrmsd+NZYQkpFOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TjtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJ6RAAg5cqXnFwbbTJAK2EWE5tuDbHfvTcwarS1eoeEQOFo/XkSbqi\r\nZt6675a/rZyIZdfQC0XLOIgxri9KwsCPo9GNbK9cgNU2DIBAOcHAP/czIeQX\r\nMkkSDFZK6WyF9waAxoUyTp19wVD0mg4en/YH8nKfzfh2y6D71AJAmE+Eg8Ji\r\nForI/cD5/jj95N63KFIgqyioFSvYyWPKi0Wagh4us8gUmJi0b+oAno9X0TQl\r\nG8GMG5ekAVHFbm5C7c9E9yX8k+yWodCbw2w0cAYG0/koDdg2oHpRSt6kQv8v\r\ni0q2WyQmTzDu24I5rXDtfjCzxyzgZzclcaUexpp/3kBLQBIrVdMvU75JGYis\r\n9tTnqt7cCUyQbiDYJJtOTZciJkbxCBBTAnSDz7KbMosAsrQny/B5aqsbwBgy\r\nnn18+RmYfqbwZ0Yd+/jJ99zjxBxe9vr35YWE8ZgXejLwfT3TtupUoWbWdrQL\r\n5E27PGjm2C4GcUWusydawPMYc4j9MdR6YmMF1UlByZ50FYJQ7byLEyqb+rRD\r\n0zHUsbZ4zkMNz5uPXy9rE0LcRq378MfFXlWUYcP9yfdC/5MLq49FzMDgaYtX\r\nnIPIuOJKjeLNXgmwEP6bp/72+mjFgAb28oOwhODWq/nhTXfzj1KTRNs5FBhg\r\n52GdoTpjgETZK1CmRbUDRoLNF1eUDupOd1w=\r\n=D2nO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/button":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/tokens":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/icon-button":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.86efd56f6.0_1659451629366_0.1988658132380383","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/snackbar","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379ba2f46e2d7d7375bce990fda8e3fa8aa9b9f9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ccfc24d19.0.tgz","fileCount":42,"integrity":"sha512-Q1D2yb+aYiS/J6bkpRvPdQ1cOjNO5SNDgiu2WvhfEhMDhzjbf8OV5HWzsWe9a/K0AzZiCcJ7XeKQMsOjkmCvTg==","signatures":[{"sig":"MEUCIH87pOKbcbsnSBg9nByff60x2nKUxh0RjdKXFl55gMzlAiEApDICCYk0pnBweIbv7AsdyEPImSnYACF3q5F/5jwOO7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rseACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqS5A//YbP5QvhIcT50iVgWirJo9rAX/hYQGQcgxQPsEwR3Vvq5Psed\r\ntm7QBYNhnWSsXFoqzM/hDwqKP/qhlGebzpYArnLyV93N6ARFRLWje8H9xsV9\r\n9flSHsilgw+Nb6DwKrDtRR7OzUOHxhAj+rO09pBnKlYV0/BlUNp5Ba2FovRN\r\nnlm8W6MVwzhTUgoPkfbeqfJAhqnGou/iJgWY8xpkHPCNUXNzEyEnhi8r3OJQ\r\nHF/s/lgb+m0RRkTs3NwGabNDXdJUtPBPoE7qbPNF5RdI82CHlS6Lc/raQzTz\r\nxVep9FYgeu1qpxxkkMG2ir4xYms2yekxZ/Sg3VqMgIZfZ24I8ZZlVSkxXwZr\r\nTZ9RRdjdH4Tkrghb6E1KFuNT87NS1HHEXdNGDff4AghvRiGaB3YrxBmXi/ZL\r\nKgNUEvYHsAmc8tn5ie+YHwCzE8zHXCi4lzCc1MfZpzC6Gt7H/ci6//hf6biu\r\n4jy+4kzaogdnx/r+uRV3xSI4XGEI+vOAJ90LVjc61C0q7MYZf9buGTLnctm6\r\nvCZBhvtpyWDpXB4tJbdBbPYh09ysX5MbeiXS8D94cfT2AJkX33YygfFZPxQF\r\noXMjGdnxCnN+Q+K+qLSsyCyoYKUMXY4Mfc3nmp3rCSsAFG5jJ+vvmthz4ICR\r\nRPi1taAk03REFSOE4a1PldlRGiyqv9/KP+A=\r\n=xaby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/button":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/tokens":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/icon-button":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ccfc24d19.0_1659550493912_0.7568588247927996","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/snackbar","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e4570146f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87a913770cc8fc4665f44776f96a75ab45a514b9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e4570146f.0.tgz","fileCount":42,"integrity":"sha512-nCg2G0XrYHPOWKO/2wgM9Dzh6pLRZIEx/f8OKcsd9IBHFEIGRuo1BCjEpxHKW3vaLxO566pbbuqOnz7peEKGqg==","signatures":[{"sig":"MEQCIHB8EezYTthFM3Fqw/xtgG70iylojdoZ4J3OaD6jwloiAiBGOibErXV1a2YHn5St4A+rgBI4KMvLtwBv28BaQ6Gylw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sGFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIKRAAlzzAN+0PsTMjB/kBkbLMGORIHD4oYI0IqoM27vv0oLMX6ONO\r\nDYY0GJlFcDj3I/lIWsx7+OZSD7LbjxqrUZcH6SXaiXcfzFt659Wl+kfGQBVG\r\n9QCOwmVDHNO/ewy/Qv3D+tvcRIHTa7oczbJyRRwGLKR0Th8uzwFATCFVBFN6\r\nS13EuZJ3VjxQQ5cokU+63TiH302yoaNZDyfBSQoz4z0NDmzB2H4mqWyxl0Ts\r\n1skIgcsG+xXgYfFleZBId56ugKCQ3dnzVuj0yrPKEnPtyWyTWNSkGzeKYy/U\r\nl9QCHqey+yFoadR5gfaiACBZmJ7aSCUauWcrln1798G9/P03yJY4n4dSjwKn\r\ns393H0d9hlkOChAGeDcPBDrpaPO6kzncsvi8eQpztUkf4jUf9WcINN7ky3T7\r\nKs9yyzQJsPl4SLoX0jNRsHaRe4q84cEmYq2kE1IEATQTcGpjeffaTa+vIkw+\r\nUskI7byDhNVLn9PESQJqd2wMq772Tjrp/bx+aAKPPMcdSnr84Kxol/dbapkj\r\nEqN2oaMzC4Px0I60eQ6/Y71Flbb1j0gXtalxvuLkRcw7Q+IW3Cl85ZCdp/Xu\r\nFkvxqqw6E8ja6el/979CslPvG/o8zpsA2DIiQU2QtGiAcdzzQVI39BtnFj2D\r\n0YaX8HxGiya8HwFsbGoWRxH9EcBuMRREdmA=\r\n=HzPq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/button":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/tokens":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/icon-button":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e4570146f.0_1659552133434_0.873643950161799","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/snackbar","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc173832ece8ed080843125f6d17b439d1c1dac6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6683a36cb.0.tgz","fileCount":42,"integrity":"sha512-NEWSUf+e8pEAobj6qEgK45K8qtYW0xNy1XowXZS3GuzrWFMFzSY+RjJUCn5LBkxz/hwrPcIhZNbJQGrvhMIrtA==","signatures":[{"sig":"MEYCIQC6yVZokQ55mlX0SbfCxcW1UND/1kSzKmOAxz9s+Obq0gIhAPEMeC7xr7gEDUwVhQemGlcUP12b7/OMSfhXtRoUJzMH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6srmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYqA//QVesG3tXMDCaIfUJJaUnvniW9B02cGqhKbDUmekJUHWlS+mc\r\nityjY6mGO5mLxy52hX2xkqQr3TR/qQ4V7OQbXt3rtbtIWmbN3Cea49JCFJ24\r\nPdt1tNME+jtvx3EVa95o6A41NiAEzSfB3h056mpwMS8/DeVAo984wHZ/JY/I\r\nd5X1sbbYQ0QcFLNhIGQYe+j+ngdIf8W7IWCOema5TuieSukgyLD6kBGDdaM8\r\n9tWdd0qnE/7wAtHTdHQiJV1+aN9c3lcg9zXce0p+fxO/127kdmi0SAwgZGto\r\ni59DzsV+Uo2L/d8QQKuMtuewhROndYzSg+CT2SnsSnEdfKHpXQS46lC/bgLV\r\n/dHFbPhXa+6NYvIQhmRybX/P2DCaz1G9hUcOwJIaDpxSTsCPNZdP5vYC/3la\r\n6EwKQC5x4iKBXuqfGv5A8ak8aENsrmVl9bgsdZFt8MPVNVN+mjjjY2JyqqbR\r\n1q4ja7gCMbPSb+6R2J+mTJoceHBizXlNjluCHDwTqp0zUghlnraQoVu40Ixh\r\ngxTVl4bD74Ewj0olQA8TAnL+Q0XTvcQW6ribl8inLFDRV2aKsO0TgGLos0GX\r\nkh65b4A29NGrzzn3nEU5FostKjjxyGTsfkV2W1AQWZGl/U7pGbNoQD516NrZ\r\n5sRpg0IK+JsUA6/vhDOAqsm6hYePtBhqq5o=\r\n=F6dy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/button":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/tokens":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/icon-button":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6683a36cb.0_1659554533701_0.5971875709879062","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/snackbar","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.10196647d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f0ebcb574a30ddb3f186688b6a6c1f67aa58847","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.10196647d.0.tgz","fileCount":42,"integrity":"sha512-JGMdLTgS3UjZb7h/X0bvbo4+G8dGNqDiO4ssVda0eZF6FO5sVkuDjtuPi6r0nrlnBxtWvVA1xM4KliBSaltEWg==","signatures":[{"sig":"MEUCIQDjr4IvlMcWq4kWjPKl+DC7KtHbszxvJqJgSncvXvxLUgIgXrwm6YLksgYNysPJlMIzB5vK065IaG6RiNpynhv3Z10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u69ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Cw//S7tqCU7ZnBU3Iyq5m/N6+K3+X4zZ0P3h4xSVZ1frbW8B/0Tt\r\nQqyjhPGB+ZyKWCH1wWXKPv7V0+tpiYlVSsnyInXur8nhHw+vd09L7AOo1VDA\r\nHCUEcOaYxOEFn1qVCmlZX87vg8rjTbH9Lx0Q4GTjWtpeuuZl6MpePVS9TW27\r\nIb/3q/+uXlv68nNPs5a/y1lnZb7y6vgCSBdaIMjcSFoWFqza6HUhrwpz/oxn\r\n20ohWbMCFxJ/8NKO9wGj18P2iiieyZ688uLYXsFNKBXNXUiqncamkY9A7dbU\r\n7WtU3oX/8jsveuGoOknnlzMp4EqN2RGmoAsSWupSrGYkl3gkOAPND2OiDmEZ\r\nIw9GvGjC78fvDdXXPE/0C4bimwpUT8MKv/K/zHrB6zdQC10/o/S0rSem2Zfz\r\nAOHrfkigZ8Ucb9b3RiXgZ8DaaRHPWeIqCJCc2k/b974LrEAXb+EyyTHqZUVM\r\nqLkWkQVEeU3eUpZEHYJokH4u/GKKUsACcOITHhRLa77diR97UtD3sevMOg5v\r\n/R3NB87DCyfnPLMRXKjikbC3i15VcDMd3wQqx5UjnJVdYvAI91EWIKeukr3+\r\nFL7bM2/mXUdFH3E4lzt52Fcflspyxjsd0pyRmSrny7TE4yGraFQP9isf0gQ9\r\nE7vnvqIUdTG6Zy18ZgIwnVUeNkF7jWVQOfg=\r\n=K1GY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/button":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/tokens":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/icon-button":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.10196647d.0_1659563709749_0.7899858258553882","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/snackbar","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fc4e90739f1defecdff99cd6f99c5d6f788050e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b20d3d73c.0.tgz","fileCount":42,"integrity":"sha512-zRqf2Sr0Z5+7P+Px7mz3SZmo9W/j9zAN5uW34EgxHyRI09zglNwUVJ5grO37LjeupqMSoCi7fUau/gGMclTwIA==","signatures":[{"sig":"MEYCIQCa96QKrf6TbVk/+WxW3p1/VeNHmlcyooYYuk5e8UCfvAIhAMU1lHP0Kmoj+JcdCQi5PE4GjKcc5j9OJ93CDwOyD1zP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7Eu+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp28g//WspJt4Sp8DpiA0QWLb4y4qtn3cwesTEBL2PNARrnzfftQoi+\r\nZQTcPU3lEPreTOUgq5wczv3c7K6ze73Ai3Rn5jXF92WcxHl91ZrStNCtEUoH\r\nbdmiSUHNxArihNoMjbJkM900XzbQK5F/lQItdW1DrTvU/tiIWgJJ3nX2EmDO\r\naFX1yxP2/xnE8FUDzGCMOz6zcH9zXuStTlGWtk9IC70CbKlusOT4DYKZfnLq\r\nHSRmCYHRnRUbUaGiMoCANoFyk5Y1+baQp0Ku/Pvoe8TdQLfIXPTKsptp3CH1\r\njGxfi+5qf/0aZFoquZHAARPCqYIXjcxL5MsLcSyQlZ1S8F1d2Ed9hle61X8A\r\nadC9ZED+UyBRGimqBp6EhUga354VAB3m3+qv1Z+FAlfaN8KHuJici0kdZnU6\r\noQgaKgStlbM/V34z1ClLkvmM9MKYb7JtwykDT3mLI9gXfMhOWbYiNMywKdEy\r\nG0By0RSthFuekpBDae4K6uyiR6eoCt7H9x3Mnzpf+/QR5Fhjh531wkpPmA7N\r\nVRRxd4tN5bbXhz/ezc1ScI5iAyWmakGacmG6w/9X8CzxzQ2QCc1k2sDgnF6z\r\nQyyo4FrRfJbQyxs/4m4EBgh2pld/VgrxROpZFLfh1BOpLUSUavXmDzhATpST\r\nCPyABva+IsBrSv7YQUNcbWvPmEC/7pXLzPc=\r\n=aPuc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/button":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/tokens":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/icon-button":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b20d3d73c.0_1659653054525_0.34728629558092705","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/snackbar","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"905e31fed0f066754dc4eeed73f77c7ec14eb3c4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":42,"integrity":"sha512-tKDB018d89ItT/qlghvtAIFIPa8Uq+52Cl+cumeqKHOtBvEI7DBaPU8mS7OY0j+dw/5c1uAEicgzaYI0bPV3FQ==","signatures":[{"sig":"MEUCIBM9rbAOP8Hden04TzgxrNiLP+OmZ7zPxZIB4b+O1iXQAiEA1oDs+huO4GaF++Hq9FWGW3p5pQQXJQfDw0tHNnBKJAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nuqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6iQ/5ATo7yqoyJi5K0ihieyLtW1eC96V3qmbhhearZj8IfAZbJcj+\r\nz/vfyNonWfWjVE8s+GiwY5T36oUVH1UUNYHyOER3bf+M62jD7X560uAeamsU\r\nEP+bztVR2TJ3uqDEbGI1PZPxEW/xT/zcw7iCaSyg7ext4sIbMF9tqlhBtkd/\r\nV9CTObWXsIUx7xNLaSHng3tv6FKIsWs4Xsi2So4xNhvE4m4Ir8NieDGNnSrG\r\nNIi0u1CDbDJIFb+lBbE/wNstqqPlx0mVDc4Vl7hgrsr0X6LstV1DsQdIknFU\r\nlnb28o3noSkSSZl2zMI4BN0LedFLzekh+eX2z/lNzIgS4dTgheDOWM9kUcsL\r\nHK5toVPC7GB1BkxPzvPyvGpWUKnMz4/HPtja4waQoma7dNQOeb464lfkopcU\r\nHFbdEwbdhEZ4HQCgNZ6r5EZjImp9QneihI+dbRRKL9P63fyi4jE/bRlEN5nq\r\nEGE+eP4tJ8N2pF0sRW6H4/xnYFKggh77GyI3i2eSng4+hCZYAETENUAbqe5E\r\n0nmWEZcIaL+FuadSFkygH4FLsyHsPTkfmgDbwb5zIm3Hm6fNEwocb1+HPRvl\r\n2oCCbdz85zB5r3DZNnYpMG7N3ygUDUrn1oy/AdpDNLe49EWUF6kN6xDFJnFg\r\n5p/rWiYe982PsomepCNP3A6jLs9k0G5dw/A=\r\n=OROL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/button":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/tokens":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/icon-button":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.47c0c6b1e.0_1660058538332_0.48603229997582975","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/snackbar","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b4ce1fc9366f545fedc48897c6dfc418cfe7aa3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":42,"integrity":"sha512-s7CbB/NA3yYBlCh2xHUDLtEr/czcgmD5YqHtVeodEL1rb51EeoHRfqbLqeJKquHg36YFhHNT5m4kG+kC4ap0pA==","signatures":[{"sig":"MEUCIQC1eff5PTI3QU9/ONuw7vb9tNf4J9ylCbDFrN5IzJvAPwIgNYv6YwAghLYxeHwV6mKpdQ0pW+mNrKl0XBvKr0QWjD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U60ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhGg//eGVx4OyK6WoMIOjNOtcDeJ8w8mXkVpgvBU0KhpfFS2LaI+3Z\r\nwpESDCM5jzFFNuPtT2hd0OXu6saH/X5mxo2Tb1Syem2YSJ6x7MDQ/oignPGa\r\nJFcNcj+3dQZ7LvTfOY8I92bfD5GsYnUEmEsjtGHk0HQJP12eaAZQoIdlDJFO\r\nY2IvFAaIC0go+VWwKdw+qlyRiRTNmRe9LcSU0NBWxrPNY6a4sXz6aiXExkPb\r\nar91GX59JUUW+INI6xi8Up6uiJ0wjIFryPGAc8xzB0AzYVImowZx65U3yKNu\r\nE1ebLqfrsJ11ZQHcnUsjNAVFEMJY/61vR4q/Gn7MRJDvl7N3jEqV2wyZSbc4\r\nMJfrR5VFlu6ilbZyVkmuWsH3PnRZPDo6hhTzOm1XQ5GNETWY2A63zlQ9rUns\r\nIJr4hDldXSyfjnP0+f3c6clZNPzYr9RnOWgXTC6L3ZZUoaO5aLRzh+yIbWBV\r\ni3tWT7SA/kJTxJvGnFKHwFx1Ox+gUasGNXoZCpJ+vsSwAqUPSXKSKaH46Mtj\r\neN6OW4jspZyKiMRLboMo9JyWStKKzMb1ooxXLQzFAh1XO3SMxicu2FkokXXN\r\njtsXhC3kXCN/ilzi6l1wgqeYNJXgTNfSugNTQtOc0EIrJvuZwuInYjGKU02P\r\n6g3ZfxWgO2frnqylnpvIO1vCYtqanxzu6tI=\r\n=y+Dy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/button":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/tokens":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/icon-button":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0e3dc8e38.0_1660243635930_0.9477272076660936","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/snackbar","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23b3555b542114531975849f79fa3ccd68fea183","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":42,"integrity":"sha512-xrGVKtqUHArd6ntcHaVLjRKaGpLG5viHOcaS7bMFsd9CO5ETJNI+M5SwdKHZSun2LSn1aHcKTVLj0zPAhtSEFQ==","signatures":[{"sig":"MEQCIBkl7UUj5NNHsuVah/6Zie2SRKq3vv3ziwoSnBG2RFgAAiA0qlLycVkYDRFcaNBm3emuQMecuc7EC9x2zTlY7YQnbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpcOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo8A/+PXXQCggLiZs1n96Cnb7xvzoiUBkwnQjP0CMozqjte1gpjnsa\r\nxIZeQ2Qa3XXU9IoagLw6oeGFzysMSU6/2vS988YFNZOl9mztC6ErjSJRaJDp\r\ndvt2j8FAhQp2EAX7fUr/uly6GGkpypJfGEqhgTuSOOZGQSp1BCY9x4i94SdX\r\n6irLfEVzW4CfOt/u94+4HKv5OlzOk0g3LWDl7SW6c4+j7RxqgyWV+8EDrSLM\r\nEzYXrDCBaR12fUK/5u4w6MxuB0qkdjhMcYP8Rykiv+mN6SSrwUJrkdVXk+pi\r\nJlRG7i/Prpz9TBeVuphZEm72X0cq2frSfHITWSLZezhqoWoD7DEYIYH2LtHt\r\njVcruioWLGdq9JLUYaDVaf/O481f3JkKFanN/A9BnWpvB1mEMVhnGNHgquJg\r\nOJn1mVP8nfyN1dD2BhPDD1M2rjh1+WKMZnU5ECSueyMc7qZgxvujxZMIY1Ls\r\nMWDhdqJ94UdcKpWogRyzLMMUnUfGFuTT1ik56Jr5B63u+YzuSw0IQPbE1HTh\r\n0AMaveruzzm5vE1ckqFz084NJoVi5JmyTwQ2aKL61cjaK9uNXCorAtqHG3V9\r\nOn1oluYoDzFiuhhly03foW2lGrE/1UuujurlfVzvGwNTiLUeACrfZzlUfgt9\r\n6yRBw5ocTEaoHpmk7+MEzfB0j4o4QpJlHJQ=\r\n=2AS0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/button":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/tokens":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/icon-button":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d5a11f1c8.0_1661900558015_0.6163467915740009","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/snackbar","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.bac992a95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a63216867bc169283d67e250247b4832cd1644d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.bac992a95.0.tgz","fileCount":42,"integrity":"sha512-7ddf02+9krq9SgH76794y0QtHsoWbOY63jzKVVNm/PLnPKVVs/sossBnRY4YIaYlBhuH7qIun8QswXSi0cp2qA==","signatures":[{"sig":"MEUCIHTLQDSghJ9PTwmx0Ty6ueXH50RcrCt6wijElbqRhjXwAiEA9ZclFGKcsl2UByVJIwQWEzujNlo4SmAGwh8zlqa6/YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFofACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxBg/+O/ibE9DPjv5yeLD/sEQiCHi9yVyTAsd4WXlhyb2g2KkTG5ye\r\nKVRljNI4MXRKMWmsubRNsO/YBYRzzWFVgKcfKSBMACGA/2AvVE/0564fTqVO\r\nhceiO1q4x/mSNOzwQGKbA1i0UG1hVIMAwWBkbp/ehHwL79Z9oRQ7Ywq/TGab\r\nsUfbg5EQosqqmJ+aD1ALoj4HvMJ0QrCu8AsEUIDmffRL2FRaJuB9mMmb0vKe\r\n1fSvz6VHSMgoqL2jld09Gf80BBk4+H4kaUoLsymBLQk4u51B55vIvw1fBYdD\r\nmB2rqoSVbtlHUZ1FL1IivQjDhB65uj5/ec64728Jvi1xp5yQNhGOCnjJSsbH\r\na5nGOWSkK+izVp3Gkt3BDZtqWlYXa1O6D5Gjui7nyxpxK87tcVDZ8ASxxRgu\r\nKD/AbwG+qJKJxAucm4FrIM/dBtWXcMk9Jwh/6PPM/+99zDhC5PW5SNtNkan0\r\noc67658b0KCLSqxrXJx4oqErPVLlmQ/a1GWU9tYVsocH53HTftZaKzutsEDs\r\nrLgK1l53K5EOErZ2wKwL77bgzou2rImKM4huzeUam0+TPodoYcOuqPwrjumt\r\nJK3D6GN7s5m+7ercSXXaymPgdzFBc95XjJIjvzi3miHZPOg9tzO3CMaquizB\r\n1lwHcdT6LZmcSIdVkF9kPbYgNXUbe2te4hM=\r\n=uihO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/button":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/tokens":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/icon-button":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.bac992a95.0_1662016030876_0.6905848485311923","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/snackbar","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"060a52872178ea8270ed0b50ad60210db0f27306","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.920d8a79e.0.tgz","fileCount":42,"integrity":"sha512-ysy9LaOPT8SGgFJvDLmjaZr6HVckrwDC6beGOql2Qn1a+U+EAMNc8t8pXJxofok5yX3A/I/dNd4vx5Fc2OSz3Q==","signatures":[{"sig":"MEYCIQD6qJ3EKpyQGd36RGSGEjRe2cg4WYs2gtM8yA2eNnOFoAIhAIfhvtPDIJDIC1pkdZ+LvOV10/2g0KPiDY5QpdUXtvw0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERR7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4jQ/8D1XonWF4fp5OXwnA4CGIWUr+xQeZmdP90AOL29ie2a+pmCaP\r\n4QA1oRORQHbORLpFS2pas623x669NBfYonzXHzwaWCxUD01II0Fh+c3Ltzs0\r\nsWq5r1KW29D461RzT7zyrgaxvkzl+58wuGQp9lMW07LE2jDOjPhj5mrD9P8f\r\n0VAgwk5PczNDvJY6ujxUCOt/y/iGdgVmnG6oTL9qDuPnYl983ZDrHk/eF2uK\r\nmOMTzHydN9xxyFdzRgQcjvZ2HABG/nhfMWiokDGQdRxmn045DrINJn04rcQ/\r\nD2qj9DmKpkUytFCQG7TrYWyz0E81eBET9q+AV1kYU15v5hXpq7KIrUklnfdk\r\nMsHTHOkueIWZbBT/pOVoCaSwbmOqqk837dTulnLyNLCPPzpyyVnpe5eDD7j2\r\ntOYw0Od8VZLNziiemcMvyNF8lRddaIIi1byHd955QlZYtgWvXzzQDQKL+zTZ\r\n77CiqRSXjkrhK2qzs7DCYLuzrFHQcQdjFOw8EKff2IpxhAnrqBGweOLMyXXL\r\nib9nyAWtNUX+hE+DeVPaOrH5lrS4ka5rEHpwbJk7j6N3uiYJ0kPGsd+X3W08\r\n+fGnJVwpVVFN7jqKcVmUdUIq/BT7oYgDJyNnVSj6MMOpzey5qYh/ChmmGAa9\r\nkv1xyUr0pzZPXkLxRH8xIK60HSjbBqajj/4=\r\n=0HAg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/button":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/tokens":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/icon-button":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.920d8a79e.0_1662063739733_0.9670559093849289","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/snackbar","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c363f267b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c23aeb1429c37132e5dede715adb07af4c86ec44","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c363f267b.0.tgz","fileCount":42,"integrity":"sha512-bNjzfWCtQYrpPflPt1OD6kA9uyJ11f7fEcPFYYLvzdYh2kHD+OxzUbFGYlfeWAZyK4MIAkPxl9cx2EToJVxMuw==","signatures":[{"sig":"MEUCIAC4eEK36yE9FbX3Sv0E3q5Qekb5hh22bwXM3gWFOdi9AiEAyT2IDdAjSMryomSM95hiVoExv8iMiRUcLUZpk6ux4jU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofEw//al25RFY5guX2pR5VRMY1em7GfdmC2qafeic9e+I+PIgPhiM1\r\nTBfQ0dMbGI6Dk2YNbZsuanZIOw9jUqXaCrFfDa0+MfeuvqBFzxQ7PoxY9p4l\r\nWNF7OoLxsVr8PVoC4L4dTFoLhBUatLa2m6A8MnEuWmcjoYP0quxBC4OpuOxz\r\n4IRym1+L0JUhs11hf0J21V+GdiszbsJENek+9OHnO3M3rlAEY4sh6WSXwQVA\r\nqDpRDDgktWXpA+0qlqhcIPTyTAtemesU3deH9k6mea8MJsKKDIvpXwSpMG3P\r\n0WsBKMl+PnRDmrx9GYbC/ud4qxv4VJMERYgXpqKuTf9Sf6GHKVd09acyyQc7\r\nqSPfx+IUbdKg0mwUOSIj1obRUTKRnnbyNcCRP9r+44y0dJbxnUzsRPcuoyYZ\r\nxF+te8T8IM4j8w3GPvVx71Xe/dEVWgrPwScYqRtVcCPDzcRR9z6Ybg8ICD/c\r\n7vw59sNRBI8ImB6ySlgG+yCI2OGeZ+8sKK+Xs3JNEJeSLafMwyc9JT4W0o3/\r\nQ6LZxBHCVWEXhKt7g0IkEWNcBJHXOA9cT02X5KPiXv+6Jsj96IGqYTJ9p0QB\r\n3VfzCJAfWJe0HXSfLMoqg9/2JuDsdw9HlWdg6uI2E+HmYztG1FjYSGdEgA8y\r\nCXobuWKDwhR6Lz1m3iTe7sWAaQsiCBUfy8k=\r\n=4u23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/button":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/tokens":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/icon-button":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c363f267b.0_1662067177084_0.5943653396420703","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/snackbar","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e9f7000a4071e76abfbf3fb5576dca5c8e3eced","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a4eb4937a.0.tgz","fileCount":42,"integrity":"sha512-/nXfl9eVTyKKCIz7BOMvjprjmHdtpr5rR2nISlc2adjs693GpTHvKTZzSnINHyX6r0zQOLl2OtfzrpR5wvakDQ==","signatures":[{"sig":"MEQCIBN3W/3eTAXL//qO1VTmwDWi4x1RHK+ij2MkoaGUxv4iAiBi9WfJgg1IzAcnF8fQH+/uQyrIWqHzdtbNucJYGQ8eUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF4+aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri0Q/+O50rtlTAZroOyODJy8kFm5SZRc3RQ8X7oZbjnFu3Q8Q8lNfS\r\nvoOkC0lZdZl41thbZ3JxzNR7+PS8CAkkivWbdV7CQO2kBS0mpgUcYYk0LCmX\r\nPFAIEGTcul1qqvCIfY/skXhwSZRiLIKGOBsg9XIQfIKWGrRbgWFd1kQgwqdC\r\n2iZD7PTTdAIOx7bYXIjoliXAjJ2aNyLdDcOecjfHB+gsP9V4f+tA4cdeIAfA\r\nnoYKSbg24Bj0R+gOi9B3b7pyTh1e1fDS3PCE7Dn4wnehjVGT0QESfsIgW1iw\r\nfxHxStJ4TxHgdwVR/zxjmj5NcS9/W2l9mLWll/gceSaouKnvJ9wjKv4Vzyz2\r\nwATF5TSA+fAwgSZB2N1B5XOQzlCz9YPhwyGd0DkTpoxUCqQAvsRXvQ9fVxAG\r\nKJOpFb5k1g7PljndMGOaWjrDuoID7Yx0e3S+eQs17tYBx0KedMX3TQPHAV6c\r\njxJaTLtDrRIjurZXBviaNRPOg5ALQIvsOZ+qN58hiIH8mZnqH8IhDy5lmbtl\r\n/QmsQHGQx2M0Op9Pc1JEYTkOfhb5AqKnlwrqLxN3ZJQUBXCRmqbaPsUBWmC0\r\nBq1xMIOzNli2LgaVg9SqqEbVzDTDG+nFoSaimXtg54+vKxwjoujmbpy65e2f\r\nrITB4xfLlju1Svbn/B7IU2dREcx5aX65j88=\r\n=Hdiu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/button":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/tokens":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/icon-button":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a4eb4937a.0_1662488474589_0.9425570255114539","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/snackbar","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4299717da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fefa5404906b15231aec7089f01b53faaa60c9ba","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4299717da.0.tgz","fileCount":42,"integrity":"sha512-0uQTwetzZe3lVgJ9pSbSWVEVccQ2U8SHHeYc//M1kk33nhv6es9wqDdyUx/Yjz103VMnFN09XKTkQ3AAJC4q3Q==","signatures":[{"sig":"MEYCIQCz1vT5JVp8jRl4Jz5sCQ1svD0nm/5CJioHhJFO8xVmWQIhAOCIAz3E+1KPSyW2txURR+Q+6S1qKOSl/diXEEpdvIVB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMQFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDZA//e7OJXljHePhDSNaSifwZ9LD46YJduOOTUtSJRzN+4/2F4d13\r\noYstw7oPwVa7OQuIf6mP8utPSCwE11TuxyL6zShnp+5KhEXSEnuHCAmJy8W/\r\nZWaLp+Kz3FUSnzJ9AcyO/hVXMGWZv+vg/hPleHiGI7gvmPQVe5YYB+GZJSFf\r\n0MXCvO7JXr1FhYwvkm0cMMXpI2OXZ3+w3HGKIAtKNwUXxMTc0zU++VuWUUMr\r\ns/Pl5/P5hoHwgOUlmHoDtX5nEG2OB975XDR8PWFr0gf/aHNTXcITOppAJST0\r\n59KSilaDZ8/p7huqyZphwzKp8U3VNLUnJaw9BKeBqII4YPOmPip0qtEErxMe\r\n+rQcwJd/4KWVe7iSTY0Fj3XkNXvgqOci7oBQcCoSO9b59MWKOtu0rjSSN7MB\r\nWNSN/M0HIbEeh84Mf67HWpksZKl+6Qe8dmk6vwiB5QscV5xyJU9p/giN0rS8\r\nvRZ05AjWnOsN8XBziuYRhRbJtQSG1FBTZjo8Ep7pHqqWn29s7YaMJu2Kv6ol\r\nncmusn7OaSelYIYvbnw1S8YevImaQLx5xGWtl2yVP+T5jZRInQ81+J+X2nUr\r\nbEXmqv980SWzQKIDfC9tXDDkIq7gOFtjHpI34NdPCLE7eHlknB40bqcpoco/\r\nuE/XXLxqcer6OUcXQRym0LO7w/TgaHwUiVA=\r\n=rpcj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/button":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/tokens":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/icon-button":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4299717da.0_1662567429559_0.15677634700601417","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/snackbar","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6467c6f3f2d1c41cf52295fb23a8bb6bc64a7f4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":42,"integrity":"sha512-lcwwn9aOuE+U6p0vGwmTPYBLln6xjFw4CeX8rSZuFZVqGhK4vGE5v3h1JvZjPt7qjBunLg2VjsP9MPs89tQk7Q==","signatures":[{"sig":"MEQCIBeB+kHR9Atdr6+tp93sf/cweBmW6j81tV7x41RdvPZfAiA4HmORPSiTyBR+ncLR/G7VTJN1xj3k9teO6SD326TqNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO72ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN/A/8Dsjhl2AT0hxoOJREff046Smg65wFjPQsdVzX044X1xkomDug\r\nwwyxtURRFhOiXAVq98Vh2W1EGSkBTWGmsAa4Wh4q+MZ+R/ulaZjx46uvlIjA\r\n3XpocTAqH+oXvOgATVPcoJTie0TxKUe2QKV7njsmwBSgUC7JuYnNTr/fcMs/\r\n+uhsXMJsHN7EnqSU4ME1vxI+ceU2PxgbTnSv4o8bIlfBPQfhPwBxKK1QH+1u\r\nsTpbcnKWv+YonCJtCYEHcYHhffHPef2688XoPqcI4YHa8tffeU9u41g3KOWG\r\nzpe8RlwZJOjXh8dU+FmvJAcjZ7ozOHMtGUV99VjjoygROmptSG9elu8QD+xT\r\nBieiAnp2Y6SOVYiRkAQrNxoi+HE//JzFpKS7gtjXzaXcLc4qX1Xa8KZQsIRy\r\nypz3We4lddR/UYFoU8yY582DvjDpUi9I42kCrGRyZteqpdwyedgcol5ppA2k\r\niXYTfZBsqBJIbUffK7cS054/x56B9VvNEhrsAATy9zAOEiyADTg70t+8ET+d\r\ndaHE+feJHdlcSxu2gkpN6bVafzXuSkp/c8ughlFDhIFy1PT7YIABb4ogokxU\r\nqQT7QH4NeMq2x7L4ZIm2UH0BAjGF5dYafDewH1c6aZvW7cQI3GSMEMCJJjQz\r\nSF5sk953WLf4gzk7Ry5doYFBZPZnBy23NyY=\r\n=tC9J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/button":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/tokens":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/icon-button":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.fa7d8d44b.0_1662578422218_0.037624664937062846","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/snackbar","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a13e873faa7f07463540f4a15a39331246e5e31","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a40e3c768.0.tgz","fileCount":42,"integrity":"sha512-ik0kP6StJNT/oiAegSY6Z72LxdG+xIzBBZGmMfdz0HltM2h3GzJnlZ0sfz+hoW6F4oUwu108lt0rIoTPanzRiQ==","signatures":[{"sig":"MEYCIQDfeZkxICgdPnkYcm/wUC8xnBjTYSku2mMraYvKKHXOAAIhANvTrIdeW2opllX7VbiCDrOPONme5ITrNZylitfuQPBg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5x6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+iRAAhbveSAO9tHEYtevegmdOQQz2alflVvE81X4NoS9fh2lNBTYI\r\nJ5BE6WTtxITfRMsbkxGixcYRrFHeanHWA1RDgRl84PlW7FFG6HRbvi5FcQNv\r\nTsnHEULlkdOQeKFrbPwka7PkuwqAmBZ0lpiuGit+D14SbVFfrzg6mCek+3c1\r\nbCRhoYIYfSF5JlR/oH3F2x0lqCCtR8gpI4acgPchUMchCqmpnxCMACRpf0Gf\r\nG1jle29CSsHzoX49C+qcvE7YP8C53g0EUEpMxAGqeBR6V0kzuKVPkNlJijZO\r\n64h1kJGLXYq8n+HaiK8TQDA+JowMTrwoVKVAgWEYd4EM48LWg0Z9qYw0DLu2\r\nc1aHqhxvTp9KyMRcxMgSxiJ8lNc4XzhyBQULAg6a9pIX16/E1NRfqZ88pt6A\r\ny7Jrro/FTN4vKDrUuOrM063M6G/s7k/kzbtewUXUfuJkTngIbxzJGRBSaIoL\r\n/oQJZL4i3P9pTaDRoiICjkJudjp4WFuQ1Aa9ePm1P4sfRuQX2joYZ75xE8Id\r\nmwUZk9VK/iGxV648HsWpX8Wl8NYCAmLJeEt2gkWT4+4q1pO2SvJk3kpw0Eoo\r\nBoIMJS8IkZyCZkFAAB05X/DOT8jy0ig1x1ciFyhoORFrfzMyKjVuvsm7OYzO\r\nU8vRlMydWborf1C0RtlNvWQjRW8Dj7t2sT0=\r\n=THXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/button":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/tokens":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/icon-button":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a40e3c768.0_1662753914691_0.7616904017889252","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/snackbar","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ab5b64b234817a206188a3bfe798075e2e8383b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":42,"integrity":"sha512-sEZGxKSSceLjXUqwLj9Hnhlq62oNZBG0L38WbbvPol5ML6nLhYTRqPFwScq4o2AdSShi/yHCGShxbEvZKcKemQ==","signatures":[{"sig":"MEYCIQD7BP+74k1vjT7xIolg3/Qw1jO1GkNxEeve0Uzsb6sFNQIhAPs8v/wWYopuklOerjWTmTMGQZFqxa8bdwsk02XzzYNo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc5A//T8GxIZaCDmC4uvXkh0Y4UgkPQnvcsgDK6S9mOC8nH5ErWr/c\r\n6Jw1RGxHsRAZVGx0hXwu1Q3tOeWbSoSzZ5SCwrSlHqSplmWCKN8QVES3EQw9\r\nkO2dv2qkO5JR0KII9v/ku9YYaUKGhBToS8ilXDlToU0S3f7SCOswo5IJVOKM\r\nzfwkvG7tdesuJmMipWA1F4qGGQjMdZIGmAR/Z18WmEm0WdGrsn6Em9c2BVOl\r\nXIqEC+9jmV6AtNmZ2asFSbHYMf0mpFCqtTqKgo7UcoE5isJy2PZL9N2C7kzq\r\noNrFaEVAfBW08DLOXLgQLdTl0UUZEeaL5mxtkFl6cbhCyZ/d7YRcwtV4DJfK\r\n+B+eseT8R3qSniVIiX5/nfYKWKvsnNiG0WslRtYv2N0rny+bDibXbOgpKeMc\r\nRpuZNiR+ixbtwJxqZH9Sed1Qtczdxw6sfRLSAq75GFGwzmpL49j6E0oawJpF\r\n4667sCHBgq7IL5tA9eJNSejSaX4ouRnPF646Ok/FmXvGo0yojc5ZHbFuG+aA\r\n6opviuKkP54123ophF4qKt3LgXg/qsoUpxfKYorEiqnNTELDoidLYeUGqVXK\r\nEdvj1+l9Z2+e1zzPD0/rD6NpEEG6gmED1yCkLFRff1LDqjeJbterlNuyegqh\r\ni++WuHwQNJbAx7rhKspjybIOlsJPVCM7SCA=\r\n=PtG/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/button":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/tokens":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/icon-button":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7ab3cd3c8.0_1663108832386_0.5623518280087965","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/snackbar","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2860d244d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6326291196972ecb3a8267229d752b546308b0bd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2860d244d.0.tgz","fileCount":42,"integrity":"sha512-2LI9RnFoSgKsZRDndYVj45vP9HvCVeMZN3vjgDYzpJ1DuZGhfIOsE/fSwTryQ7Mm4waPYyIP9hr1sj6+OsgVPA==","signatures":[{"sig":"MEUCIQCiGnxJAP6laEAFr2ysnDqs4RMHaFqhF7bIkjOh4MtI2gIgYXeIkxRh6O6jc0GVjCnr+RwXJaH69Yh3XLo0h7dh+1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP8KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZkw//aFadzc6ujqRhHoN3Y77m0lG2uayGNBWr4/B8l40giudIEIWl\r\n8EQZ/ZqMduVnEuICTjbI7gkpv9xb1UmXGopWOXl/SgbaxYj8j7ycdaKff0PW\r\n6plP4pnPRvb+fJwG/nypQ6DcaY/2kecIiaJDCRX3RowL4+bAnJK/hO1F8yiZ\r\ncSarqiuiUP4Nff+iLCgt0V2nS9Z+oUKW4j1QFO5rnw0wt5MWLcheWTxWIe6V\r\nw5ivRtbea/olX4XRF6wS1+oro3KRJ4B4gXMPAP0UI9+iRY+7c/8HSuJM9PY4\r\nlgEZTWEZgVr7JW1tsH6vEtArrBxDBtq1AczygdS3vDw3TyP7WAnpdqmeHmV4\r\nTqoFiO6SdnPLnqXuPWtqGdFk2rMurG8SwiVFQcH/MLg4XIKBEjdDJymHBbiG\r\nEhkgWHSwpJilIn6MPtKgLPXeZAqbQG9ubncDo1koOEazTImqtWpA5NsRXM3x\r\nPE3A+xzWK3A7KcOI9adq3K1oCFymtGMSlAxVmNyTxwjpTI9Dhy2iaNk7QNe3\r\nAYb+OoeiUYEdqbKlESANdicTNGHjRnGAPvqsS0fhDbniCJZyZZD9Kymhh2RN\r\nZTwflObyZqRf0MdgqilYxaKbS0vbsgr1xCULthAd1PWeGupuHO/yaqN++1pB\r\ntJpxGR5ASE1G8me+QowXouWApKPv/VQy5Pg=\r\n=+xHV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/button":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/tokens":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/icon-button":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2860d244d.0_1663368970133_0.4969462979637016","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/snackbar","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e8726533c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5381392064f5a8f006041152822c6c58dea79805","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e8726533c.0.tgz","fileCount":42,"integrity":"sha512-yJYrRqI2mjmTmea8/cj0vMyrmH5eLFZuU+zWZootIx8+zU8O3F5CqRctfaU/fj8MHavbkYxqDNww0iurzuyEPw==","signatures":[{"sig":"MEYCIQCQKVuY+jdy9rt3ZLb8lBz3OMr+iwJzIHzM3d0GGgOR+gIhAPauChiwZuzkyX7cBRklnLap+V9MA3X57Lbt8bdwoTDD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiA1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM9g//YDR9/J1rXcdiKidevbL8D+ql1WZVNfIXo0qH6m2PD6lVnTLo\r\nOmgLGY43+q05QF9oFJLznoKEctKzpZuGOCE2z8GEKR1wb+MRPtYbZXjGczbk\r\n03zXxRnVnoXBeWfoML/up736dmgqNJxyiEPy73dKofNaEEWYTOORE3CGlDFW\r\nLX2+wiqSIaWUM90Yz4lz0T7xGrtvtzH0+z1uzyvcL+1qZI9a1ZlPNPXYIOiL\r\nhbKywguPU3wf5XLosCEEgF1h5ylSpBOTY9Vs7lg0HsFHUiEgMJJCRbmgO4wv\r\nYYStQvP1T0ySByeQo0AipSEXl4WwuPgRZS3AdLclw+6Wlw5uG1kSe8SrVucX\r\nN5PzUT9BwWBE1+vX7AtGFGD/KgerktaMPL6xdxwW5onzkJRnxPngmEKRyJV0\r\nkfjaWkQkgsIF/Ih3kK9/BHL8viTrH3XDvH/OmdIrk6/6Y4v5n0lfp3t6Yu5M\r\nezWhnrqkfbf7fVoDebv1j96ynuTb2PoEYzzIv3upqcKWuOtvHDXNWVRhjs4v\r\nbzRoyAzcZMCre8KqIawulWySl4gCB71rVLbGzTrnCCw57AoShfL9MnC4hcw+\r\nZlwUQ1jn0PZjb1DmfudOVStqjkHAVsFMkklTJN2wOSqliORbGfjBKoiUOp4o\r\n2M9hQkQ3Mgc8epGj6GlZePFGIC2ILnljp6Q=\r\n=6sKA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/button":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/tokens":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/icon-button":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e8726533c.0_1663705141496_0.8803156582338982","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/snackbar","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"666710c0a4720f5a0cc282e08fe07a50fa116d6f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.00d8de0aa.0.tgz","fileCount":42,"integrity":"sha512-HslODQOW64vIuGkQXC8hrW1HJkUOfkbrbDZoj2NiOvZ4tvzS3ONfOs8t4sFSZugtFn7euSRevOd7UaPDDbPh7w==","signatures":[{"sig":"MEQCHwbStcmNiKAuX+NErmBhMI/2eDRKf/looBsU/E27T8cCIQDsppHU40SrLh282XCQ3ekaCDze8fyM920D7zM+lQUyDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKywNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTiQ/+KFst75QG/0Jj32FImx91deCM5srD92GFcN6NTNz5D7Fg5b7a\r\nLSwwkEv+CPISQENBWoGCaqLVq8ctcUV6Yg2AG6wwfQDg7r0DgRm6gki263Px\r\nS7bBRntgx3j2wLVRnNkGZhMuehIzUwHMedhHm7lZ/qs4/ak4bduKKKUOw7BD\r\ntiiyxB3xmhJanRp4EQR3K5mzxWTPmUfe/ibaGOWVn2V+tFFc2iE5Wia/CTaY\r\nSkIf4ClcskYks8B5WrCIg9XGuA47qrB1owclZgs0DIgIrkHsQb8QQM9O84J3\r\nCOD8Ukn2sQJ98GaGjF2aBDg1pKxkVoTkJ9ecbtV8fZ+Jj4lo4s77/UfdWEQF\r\n8Dr1ff+bFwPmPtidQ/TvaI6ORlMoRlW+7OcZGMoQ+lEWbpPiKh6d1mMMTDIL\r\n085upsLXnHsM6EdjDr1yLe7ApFcauHboxBiFl3Tve53g0CyA8nJaIJQfWW7p\r\n6futKIsFxHQgZFE0VhrYvz3bs0Dt/pKvWZZtjOmLsnRCZB0q58tbH3xiZ0Dw\r\nzkwphxmU8z/iZslxNin+E4Aq3twm5Z3QHH6PXrZAyXuP79e8G+/pQwklVL2o\r\n2MHNxGFnkfTIwxVzkujCWt3LDrL+mVs4zAlhcUfbF8vmxSMi6D00FFoGG75D\r\nGgtMIGYkdLoHMNqUHjIBMTkpWj0IDLL3NgY=\r\n=H3aJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/button":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/tokens":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/icon-button":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.00d8de0aa.0_1663773709633_0.769974099685744","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/snackbar","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.271aedc30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efeb48e2d4cb7f5cb5bbcddfeebca38e0195b757","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.271aedc30.0.tgz","fileCount":42,"integrity":"sha512-Lp+TaIBROZTNhEdbTIRPVnxJHfeKao+3dQ9YYjVsBpIArY5s3tmKr6mPGCzg42uLNpEhGi11U9iCYdg/rLnQVQ==","signatures":[{"sig":"MEYCIQDFkQsdkOQeB5lqejUpVMgGND4Q8uA7RbwyZlUubGZjaAIhAMW8zM83EfETmh1TnJTccsb29Qpc3SAZRUIGKUgg1dMw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9RA/+LXcdeFtIvn79oWWQCXADHLbj2X3mFWX2Z+F/QeHc2GNkIB0A\r\ncBwI3ozPbopwVc2fU1xMbmHDeDOYEEP1rLWgyYCuHWpSnXin+ko23Dvd5H9A\r\n4r/sVJ+qIiTDkDT2J3cOPW5Gh5Lv21SUQefkCdC3Q4s8nR+YRaqAAswWZzHK\r\npxmRNjLF/E2hCP+S6bX7RFSTT412eTLitZoLLCHyuvZxeqISjL6CRtZSvueX\r\nKJaJscaE/hh0wHWyYcb8RuxQDpB6bgg4OV0AeUhaNUgqfVpl8UyFw851wCew\r\neo9apxY2XcJeJnFF7pQ97dyVCsK31PmLPkZp6dIEnyZ2AKPx2YG56gRrytny\r\nSaG1Pryr1jcyzZ/6AH391zVGbowK0RasrGin2z8x4Xc0ny9P2joi5qNCLGFQ\r\nGpGzoQnwQ2jkUYQdH27lgpIZY3sn2Pu3936GYDlifmzLBGFlAl5iDZaGgl0C\r\nOW1nSrnPNxeN+Vye1YWfqDxN7k8YZ0VkC1fhf6Q7Cu6U/24Mz9NS6cGkTw5j\r\ntognNZMOx7XmMeJw5HLfL/0eWKE0etTqlj8TRY6mQIOAjKIFVAYAyGgUHBuo\r\n74+hM7v0hlVAaFvSXkkJp+C5nhJuGSTtPEtmWXm9806k66lik/H2xMrNL9WG\r\nKqRClYrJ+F2NKLrh6Kho8EbW+zCqLAutRPc=\r\n=D7g6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/button":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/tokens":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/icon-button":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.271aedc30.0_1663774650723_0.09985287170299229","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/snackbar","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c4c50b644e696f4a2d0f293e8eea75b4a5389e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d3344c16f.0.tgz","fileCount":42,"integrity":"sha512-t8KKuDnwmgJfWqHtOb/aXVueWMSjbtnovWAuCgAtgUFqcU0ICiEj4ZWHp8Ia+2Zad6HAB9scIZZGDNlQu9vbzw==","signatures":[{"sig":"MEYCIQD0UvUUpic3eh8fqvscnV7rLpQMPzuCzfBOU2TmbQkaJQIhAPAcAKiPhhrw+D9KTFRWwBxnx6ah2/4tg1kK0QrK1OQY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLColACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpaog/8C3fQu85Xyhfa8NEUJqa81G4u0hxKJpNdb27i3dcHFoTEraB/\r\nc4Qms82y0lMdkADG+fDtoKj0EMofLUm1mxnFdJ8z9p0lKM2cZIVmWcVoLUUJ\r\nqG/KbdYjOLnvI/400Ni7BljCWyK2njgKe9yTW+1xY1yhD6YaTLeLtoLkLKcj\r\nyYT9DWA7fvvwQkabwtALYlHq2GCgOqLUA8NbXwdkxSZDBDwIoBXpMPj3Ymhk\r\nW/yxf3dVbAhxqSVDmX5pbMH57Qkcvec6hDpbDsfGi4SdTWHPAweYGD26jmrV\r\nkDlWzZQFvGrvOuGw4qLf4s47FepASb/QmnrDNxL8UwDGUl6skrbbfb7MACW4\r\nTfuSmo1GpWmkegoWDGa1wbqDeZ0JokLJ//yI1Mb91+S91d/WtHKltFGAYYWO\r\nNJKinlLMcn5sbitO3TP714tnJ8PIFOxOipYtmmYKGgcd9Bpf4DTpzYyiYRt7\r\nK81IGJtgoyYGNLVrGaqyMBa3t/UITSeq6/LKm7yZENJvuRkOW1SiTHPQgepB\r\ncbENOf+b6D3tjRirw4t6i8iah35mpo+buT0Vg4nfVAffekFgnBS39cVG9RUB\r\nbQjUlzd4PcEXH3IEqD7PaAC0aEr7CauzPSVsRvgx1i22Ojb6QmatQmt60Wjs\r\nm0CxAgROkL8jSv1cXZEs8aepN34L/ed4Spc=\r\n=O0zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/button":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/tokens":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/icon-button":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d3344c16f.0_1663838757654_0.4784927442404576","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/snackbar","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8f6ed0defb8ba483d09aff22625a729e57c24cc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.94f20ccb8.0.tgz","fileCount":42,"integrity":"sha512-WZzOqewGevyGUJuqkbAEPnOw4Go4MQi9VCfc+uYa+ItnjNB6b5RgFmU066XFeEaK/KSdgk3+QDw3LtzZGdMDlg==","signatures":[{"sig":"MEQCIFDtzrAxI9hOzziGzWS5Qf8IyIeGF6KJ1L3YYmvp4bgOAiArbs9wF13vVj5TJCZPpvnydGDPsKsQ4LXiRrO266wA3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMpPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM4Q//dmxg2qDtWfomuPwxltkIx/NX2/JaVGUnr8j6jn/1SyR2lbgy\r\nudOlrb42VMs0YvjqQMyuWRscoognxY0KxE4aDgm5ur8NvWgAe9Q2PjRmsxjb\r\noe4PXBhMJXIWdzH3SuD35HgB31Rr7WvvoFMOT+HhoTXPlnShZqY0PRlGryuu\r\nWm7aLvH58Y2JhyaADdSaJZYIqjlGZTuYjXMvX7EnC03WFKopgtMqb1NHoRON\r\nSW5ndi707uhBl/INXBgsBPPTog0pQJgUDb65V1iAFoi/RKt6E8FCS7/saErQ\r\nF3nqnx0B+u4jR4udzDUhmdSCjGFcnqMTquj0oEaBf+YeJWaue2u8iV7YC7uV\r\nREMivmKXJu8W6T/wAF6POeRyPlXaHEVwuOlTCAGk3cc+eEU3T9qjcOur7M7G\r\nmsPa/zZcjVTLkB69CMSQx6pv4mW/X9DamX3rQ3xbwu3vkJhuEFxrDEA4oB9Z\r\nngIsy3ReT/viRVFseJAU9795L9eer+KZUUDJraUqX3l974d7+EFGpWOAp47h\r\nn4vKSscHPJobv88rxYj7PGtsb8004mI2i6xgfk/kNv64OmKuZNgaPTiwRrjW\r\namJkpstsuRkDBY45aaiEvn4/vtmA196p2DB51KC/1LjFSJ5mXO2diATCE/PO\r\nfk8g7XDVRVGO9aP38XPN7eBNUiGRX72HQMw=\r\n=jKLZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/button":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/tokens":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/icon-button":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.94f20ccb8.0_1663879759194_0.2979268251817897","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/snackbar","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"824c41695698cfd0af7c788b471443df2a7429fd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":42,"integrity":"sha512-MyYrBM7JiutaWJjJQbh3JVhvknqUUQXQxAXglLFPrQ3/9g+uEEbzavsA5qY3iQMZiGrWMqy1b7zO6Qb2enGGXA==","signatures":[{"sig":"MEQCIDxU2XVvEuBWXYp+/2OEjyJNGGn7kF364yGHF+sRA6rlAiA/xqo+UinJv3w3TitVnp1ib3Pju4temAlsktSMrUZ7Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcw2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoZQ/+JbFBz4VJJLiUAbXM/i5G6MpBUMgEyAuduil3c3jeP8fbPYmQ\r\nLW5H1VfgQpF32zvCgDkdHI+ciSxOZA5pwSaGZqqvv09THeqj7tqsaQJBjWeo\r\nJaqIcNQC4VDBS11r7Z04jgqgP0GrXYE8Mpvxpiskhv4yZFRWaVelPs0jkKK5\r\nYJ2qC9vdnEbIgL8SmT5c53VZZYjk6HuWKg6Fp3J6n4uwaprhsO+8r9Tk2b97\r\nHgYCtEON45k5NvLzEILX6YkA19WcLSnMvr28XpczBbTBs2S8DqP9WyBPwSWX\r\nxzj4CXPfNfzPFBhBdWVcBiVjTNbynjUxdOeS1X5qbqnfSyiZImx6EwisBV+T\r\nNCc2XfSG7Jo2PlFP0qON/1FOKb7xke+h9kV0qoMN16AwQrr43SgNdBPqEDWc\r\nN+0Y050svoISRyke79dfAmGWwSp76rPDnLCFHM9O2vv7U2BVeE+GykeoqxuP\r\n/F3uxsSFDSe5YXdKbuqqDzsn5JolKWcUuf5waOnNxKmF3QWyy4jg+EUh6doD\r\nN7QBrzGCnN57cQEI669oiRY5zAU4lfmoR/eYGJTPUPXPG0N9pXFhB6orY+j4\r\n6092fo2qJ211CmOELWVWuf/I3VrwYFMhcA/OOC7dbOBZ0965BNCrqFtHw2VD\r\ndVSKbpGkKTP6Mh7D9d6Mx/IPkLFGy1wM23w=\r\n=vLUS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/button":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/tokens":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/icon-button":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.81e4cb7b2.0_1663945782071_0.5980476383907001","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/snackbar","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2ad2217f3d6f08b7cd31d2c2b2c8c4eacb22235","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.aa85f9413.0.tgz","fileCount":42,"integrity":"sha512-mpdCzGOPi8SWElYUb9PaT6rNH3c7nFcQVFsBRybEPr4aiojcuysOvI66Kq1OmU4q8SSL78Lldxa/foVl/95jjQ==","signatures":[{"sig":"MEQCICml7g5Z3B+iqsSy7etP8u4g1gzzMqjOEw1xR8MMJ4PhAiBqt3a25gJi6kd1tReR/3SATKwnU1CsyVeRDyRL2YxG1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMegeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpgQ//YTqvSGyt2mIjaer4O+xMNkVuOOh+ltH+xahDd53QaOH0ihNx\r\n6eCuu824pM7+2JCIIyJ4aD0Bco/sHze6SzzBqT4mU9raWiAp5XhjvzsqaEV7\r\n8lYFOWFSp8NrABh5M5hVqLeYkgxfqsz7yG6SOxpA8PHTYV08We3NRwHCvWmX\r\nei9zcidBf+0mT+fk1k58CJcXqlDpamYm60JlqTWOE2MnqHltDmqi+/ydTPfQ\r\nRHY3IhKT1ZeW7Nekewzk2nApuFJjnvg0RbYej9gGadoVPQG/3FuROBvs++gE\r\nbjsRbf/PLAbEh+NZPTUawoOxJBVUo74ZdPt9Z2fDJ506OP2nkHK/IPLHqaAP\r\nPVa5FD+phxdB2ddUEq0xr1fZCODTHcltrKcEB9kd/YTGIy1cfUwlIDqxt+gq\r\nwOeGtn6v++fGlOp6DIiJZTbfM5VPz3riBLFrpn5cHwVwyjhxSqDo1/QDWHj2\r\n+7UTLf+BDfMw0LMi0SYRDlYSJi9S+bAX/3gv0KiSfLZ7ICeFIQHSyBwhQulP\r\nwGURwuO97swHy6XAx2hrjrYaofWHmNrIZP6I7DVjV0jZ5X4qyI2gPiq0LVSu\r\n0CtnCbDOZDbj+FHWTtfXEWDbiNxlHg93emD9M5g3KeXumhuD7ZC2/p40fZFF\r\n7JcSHP2/Dee1iKTY9/gPpzlERv31KNznuVQ=\r\n=Yp6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/button":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/tokens":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/icon-button":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.aa85f9413.0_1664215069751_0.27816426499672375","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/snackbar","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7134a7752.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31a4a50eedc85325af08214252e05a9768e8057d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7134a7752.0.tgz","fileCount":42,"integrity":"sha512-GBvW+EYeC1xYU/mzYY3XcDbksKISp3L2iZMi/8iL0XTMfmkOxg1KleGtRre5EwujQ49sR/kdvgmAEwwyxOiYMQ==","signatures":[{"sig":"MEQCIBu6V1QxxE3+pifq/dGXD1Wzzqzio1IwgpFhnq8ydMtmAiAwNvEmgom76o4zyDKYbO+4tXta5useiLVN/yzX9/Ia4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiChACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPdg//cBBnUg+GAGcrGJF9ok7rzI8LtgBy0Jac2F7Yw8YPylbPe9Ug\r\nXIWB9cYd3/wNFYVoc51/7QWd91S82QpWiZcsOFWdFAg4K0XwBNWopqBG4ap2\r\nZNel6lh+iQTO4BbV91kivxJS8ZV2i7SNayGZYg6hfaa8hhgQY8CgW7jItfTa\r\nS/8b930avToRPZcO/Hk17nIZRu+esKZedzvZt7nJzcuEzlFTlVVkulyOXEn7\r\ntNxEpPrN2PsZTlpsb058zwmU+9HxOLT9AfCzY3rkIgk5I+MWqO+Yw5MU9KZ3\r\nNpl6ePXNBo1l3YdFz3tNQm//5Owor770NkpccYvwLHjb06hAOFJwvrgY85Bi\r\nOBULiUGR6/pLpmioQJz2lB8j5+x1jrxQB1EmXiUxYKaDJdhGAVEVw1J1CQb1\r\nvHCYopNXECzPYlTJkHbdyDULmUE6T7B53i3U8HeiFSwA7gxYmMvI8APGsoEg\r\nD7SwvEEbpUM2qM+BLLm0O7tkMJJZ59vJte0TwQB+oguUgCmSr+yCVQhaPU/K\r\nhxR1IWfFa6MzoU0qmRQGejpY8Pvmsfo28LGZAEEYraZl0iITaTvTEKva0Rz8\r\n/lwAX8/sSF96eGrkudSeWspaIfw6x36zPb1nN3WMiUKyDOVQnKwMk8H6TNi8\r\n5HPmEwNnyOTDDevN77TqXEKrMavfsn+uxlo=\r\n=WCpv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/button":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/tokens":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/icon-button":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7134a7752.0_1664229536885_0.11029084989568672","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/snackbar","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae2af00365fc1e6d6ab3a02c9b9545c1e17d4d6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.70b8ac16e.0.tgz","fileCount":42,"integrity":"sha512-ZJAs7lMt3/XGUxGETvLRUnDpdlJXvgbLvSQaoegkWhsVOaNV0AnOd4UYoEHlMi68MPR0V3gCnyhVzpPJvLiUCA==","signatures":[{"sig":"MEUCIQCS+53vYOeowCWxBXDzJ2YNNi4o1LxgKsyCQ21woHDaWQIgU2rW2v3c8sZuYoJSknoF4GjqBNbn9Xt0rpMnXST7CH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLgw//S4KEw4+p3xByzKmRwxScbIheCVBp9O7+w9CLSMTpC3hanrR4\r\nUd6j3p4bMJ+Z6Y4mT6zjt+ESI6a8ZqM5kTODUm3NktrnUwh0xBraYpoelaFj\r\nEWVuEu5/hQplQFlhc9bGjgVdWrudeYiJf/HsPoBZlcZn5x8cXzrLDsh7DEaQ\r\nkJ6dxrIphjFILbsMSf0Z/cMH7Fya1s2COg8G0dvYiRFN9DginLm61oKnNK7S\r\nxuEYESdKeUIB/hvzJJJtK8fwU9AgRmA9XSlPRK4XXMYPiymG8JILGLQGuSQe\r\njwdauq3S56VDwFjKLmkRXedPIp7MkIFIizh/RnVFflDN3C9F5c9Vcp9+2aPA\r\nsDPxO8lf5xBF2k7tZbRl6lQZEOnQ44jecPhsZPKtkiQCh8bFMdcih/6OQMsZ\r\n8jvD6bSeIHVW9WkB8Sr6jUkc94YJ1hEjeiO3mKATMrPf3gZmJ4ni0Txve3sb\r\nzyY8deZajWnkGt4LyQezBssHUVeNPXnysexn3CWl223tQmBO9qzJTYXvDH4s\r\nJqO6DkJebLFkE8l+26Wa0ysDBUelCGo3gJFH2o4R4gkxTHYzfEHNfYBGBcDR\r\nHHoiUNDZeyxUR7skG4WD6kzCH/qRTB2weKpmaJypkJ1T5IU4aRhpPLthZkKO\r\nhlLcmX1Vc4M0gHlZ3KEUK4yMc304NKLALWc=\r\n=TZas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/button":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/tokens":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/icon-button":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.70b8ac16e.0_1664318769962_0.3032825003974362","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/snackbar","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c20d74405.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44f09140c5dbb34845603c86ae6b1a71da542a94","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c20d74405.0.tgz","fileCount":42,"integrity":"sha512-WkYgjiRXhAmV73hLOEOzBK0Ettr+gxqZz6RWH+CdgfDh46JixMjbDzTJWhTSfOO2oi7uc5ntd5plxlkNDyI6mA==","signatures":[{"sig":"MEUCICrRnsTY+jQjrCLEvO0fvsNpK/OgdO+18jm3KaRSqZiFAiEA4juy/up93B2r36CNQr9be20f3UHm/JMu5nctJvQp3q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4gOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG+w//RRSv7ypfLolnhtpqSmU5yUfYG83toLpqMHVydkSk86aHq/aK\r\nL3bcXWAO+JBq/OLmRdX0lhj2OluK5eazqhYuQJaM2hri6sipdiR+tqZnBU8S\r\nl6IaEBvcpnIDQ0hHx38hnPJrr27x58IxFKkO+eQT5cQ7QhoFfw5CJJt3ayuf\r\nvmZ4U4kM7K+BznyHc4f95iYdmcKu/HP26unbXrj11P9Xjuyrq/z8MzfvbE7z\r\nUb67rwr8iFsuN+g+DnK+MLeiKWjM6tI2YFXv7aWoCRbDqKJINAOz52oIznwK\r\noNROXGrJZsWX3+LZPnbwQ+k1DijIO4x1SMjD6bkjqzZwd6XP5ZGZvR9tbPkM\r\n1tZ2ukrmN3ayEMiRA3opFWCL6E3EfPcDUPtonVlCvrZDfJsueODcTpnR/8FA\r\naJx4PFqnxqmt9EpDxSJsF+nuLe16zYy95ljRv1YP2OMnEoytdRH5c8DfAr48\r\ndJwAaxZo633+PpolXLPmuyvaPxXm+3Jmna1LyOFv9J8vOw9f6CNezhYetIr7\r\nXplNIbGeVEK4OHxaf/QVLOBxYkRVk0Yx2czO8VbUrafW1G4myVbzm8l2tVjY\r\naGYgITqAMBoihWfxcObWCZ3aw2Rb4y/Y6u9fmyQR4CfcT1Idy0PQrf0kl4vE\r\nhYp9+RwU+AaMcCATjfUrHHJfZzEPaLvqkxQ=\r\n=i3ej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/button":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/tokens":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/icon-button":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c20d74405.0_1664321550458_0.00943033709066432","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/snackbar","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94c3463d5c5fee44f34b7fd6d59a07aab0368e91","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f033fc8d1.0.tgz","fileCount":42,"integrity":"sha512-ZhtuE7EkDx0fMrNG6dezUb7/j6Gc8gYSzRdomrb1DEfINuPfjJgFaCpAytEPCzTfeds9pBCKBhYKvTra4wtm0Q==","signatures":[{"sig":"MEYCIQDAktFJURN6g9xrfRgvVRKRRNmoTG/IHeHW6LuUUFYcNwIhAMIGAHXbQ0blBSIHQIK1pOLP7HxFsOd4So59BmVNEELX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM442ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZMxAAiRGtDTdRQkyOWEPtyEujXRH3djBcn4iLUv8Ntxm//OnQQxF2\r\nEHoHQtrcFEqAz7hziDoo3R82QNpJNbqDlUERJWR4lKc3J8lZkrlKoSIjnkPb\r\nI7YSl0fid5tNxKu6ifiKvT2Y67zHawZHrgfVNt6Zs9sNToN0PlJGddOIzSEd\r\nZhqgdZlvAvaEH1khpXS/UtZAL1ACZzi74c8ytrvZCmKpv7Lv84DZwvnj3GBC\r\ngA1Y35Sl440MfY1/UEyjKhKRt/NeIO3OOWhpkQ45x1+11SqrhdDaLQ1hd/Aj\r\nkAi1JoMaqZaaKR9LFIC1EQLrGsA5cdU0bgDMZp+Wmj6NADQCYwV7uB5+7MAU\r\n26HRuMtZxeNgVVFCl6Few9AOz1HWHhl524jhRpKaMbNfI6B/zReXp2rw8Hso\r\n3Rd+xS4hHoV2Tf2qiX0rlyDZVSvrIeuB/Zy7jYSXCxJbwzwXTlvvYWJcqhqR\r\nXq10WVnvwpLrGBWh0KLjryMpcDEiqUkA6PnVgNniyx4TMpJblFsA8r6GwyhG\r\nNioWVgxuhjodTKRwzt5vR93HKMTr5KOJb+g4kWthzsiqOITDnEOQf++4K8Qk\r\njgRxLdvLyi/7++kDjQrcfGPCkr9Kf4/xja3nimGslHysHrNbGadjOitksiTI\r\ncBnjz5l+Z3cGcYQCEsd0qA2xCBj+1Te5wj4=\r\n=xfXm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/button":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/tokens":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/icon-button":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f033fc8d1.0_1664323125645_0.5505189418904728","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/snackbar","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"230a74d7219327499f79737ca7dd08aa8edd89e7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8d7ae912a.0.tgz","fileCount":42,"integrity":"sha512-8yW+ciUm2RWdpc/zV63S4OjaASYNMBi6xUBS4wmn22LzlQFy8T4+ieK3/Tup3Kmq24BB4OB0G7U96+TDN9HFtA==","signatures":[{"sig":"MEUCIQD6AgR7H5MYEO72c+p9nnQecdJLxyOIyf9UPcifbRZNiAIgWQ73ebILvPv/g3PPmiB3be8Tg8cjlFHwJDpp0rKs+sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol9w/9F4HjwJr3t0j2MCJjHB6204xI9Wlx+xXpYIGJRo8YAd8lnJHp\r\nTRVtnhA0QfEPaN8/lrEQDgsYwGlRuTK/lzcQ41q2V646mkdYTbWRZ92lvzJ5\r\nl+xA9e+KqoSudnaf22kS49Kc9OVzFsd3zLeGUAyUtlTM2231PaFX7TX1IeTJ\r\n5w2mQO14N5ohH/bJ+P1Ps3p5SvV4OegwRnINMBwjOlWrG8TwDiK03pcj90B+\r\nu+iVpv0hNfTTQlferqYLYPrp02nXhRy1GPctThz7vqR40BZVFqgn/nd4nIoR\r\nZqAVjKXTawr18B0EGg1UhlY3G8/fWBXwlgB83gSPnqX7Pb6ZQuxcSrDpNZM9\r\nnDP2NKp9hNFeYkUU0f3zbCUUof1BrylVOHjdtR5LDdQm4xYFtyZQ2Eb42YDP\r\ncuQwq4I3DTQo4HUOHaps2QbkJiCoibgwx0tv3sGjFYlhV0TKINywjtFlrsKf\r\nzkdhQGZ334xftI6D/XuXZEwx5fRkeWcRO8QGCLoxw399QSvSxtSH1XiX9Nut\r\nC/7JyqczTgWHAAE4Zj0KbjMSQTpFi7lZNoyVufidJg+9Q3PFUXNxXvHurjiU\r\nAiZ6SrgYmssXsYjTiqm4EPKfTkwlIX85c9STjIVhdRN0B11KIG8rcYDaKYJM\r\nGC3fYKphtKLuBLdoP9aAu2B5lht80X+Ly7o=\r\n=2WN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/button":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/tokens":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/icon-button":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8d7ae912a.0_1664351842386_0.09401270848723042","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/snackbar","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.db414b864.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f5d9c4428ce5de7055fbac306125886f8354fe2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.db414b864.0.tgz","fileCount":42,"integrity":"sha512-qgK26t0jDwdU3wRsmZCFza7WJOWvUbEvC0fnFRnlSjWlb9HTrNcOKBJRw7GkhblTt7I/wDTi021qKMsfKMQeNw==","signatures":[{"sig":"MEQCICwK4DdFNQlIxNK4uSde1I+UgHdpOm92cEXfrzHz82DnAiAsm+23t5oZyU7cAvxsYUvSgAbupBKr1q6xwlK8hakVLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNGAMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxBw/9GVqCSBnURX/PNQc7uxpp1jOPQVAkJj+OzA2ytz23+IrrhehD\r\n4jPvjJKQEav0pSy15vx0HchrjJ68MhuQEHQwq3/60zC4XBd0cHpwnD/+a4fp\r\nfyXsSu3oHp3W+oMBpodlHw37E+I8N8pQs8JzBQbpMZeE/eayKs2EQmc3a/zY\r\niwzwUzqPpmMSvRzWmVNqqOJC0Y2VagxZfu+PKR/OH7Bbnq8+61EVrhm4zLUV\r\nfjKEb38hUdGEBaQTlzr55hgrxumk5lxDT4v6Yr9a1C41Cre3BGoVABAPNdvY\r\n8vJAhjb4/oMzwlAtNxgrehMmW0aMnrFeICXZRI31GsU/Zl3BBm1AhNG/x0lN\r\nu4N5CSJuWwj6+ZrZ4mBkn8kxY+XwXZihKbYQYTLq/1NI/8HzHHhhigh9W7zX\r\nwVr+wmZLLRZiFt2rWZb0eYOrUaZUD9XjW34emJnq6+03oMLIJECVDimJvFMQ\r\nR6foCTdGS5ebg0RNAXoCdZC8vKtGCQq4AjhuxmmjtriMTJjASKdMjZKY4MoE\r\n3WlJRbgdeoPb8nfE5I/jtCYGkPCyO6zIjmqOY9vW/F2Cv64Rr2p4vIzjxFQu\r\nfOSe8yGmile/pibHc5AN8YwJMRdW08Dp14o4zD8l773l6TP2tDJexdcwcP3G\r\nzFOs1lC2YNLvFOosMjv98bBu/K51yN2XyMA=\r\n=LxT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/button":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/tokens":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/icon-button":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.db414b864.0_1664376843935_0.7391125669637921","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/snackbar","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b00c6e54d461a121a924abd0914e5c4119449d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.28cc6791f.0.tgz","fileCount":42,"integrity":"sha512-Lj4pra0iFh7ccPWnehYs3C4dTAQEZUkU9EhHLpswMZUvda4IcxFYO2Uqx+Qi/7XpZsz9RNc3vyPU7dOjDTo4KQ==","signatures":[{"sig":"MEQCIDz0zxwhNV6wnRgpj96Pm5bhcuARpiLPUMoaZYqpRmifAiB9VG47dz03q9JjgWvpT4VYB0AJ5MvVg1FO/VHRo1Q8Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI2gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi2Q//X77o6iw6+jbkFxjVYUxkf938LzAcjEfkSC2L7d1eJCqEJJG4\r\ncrFFdUXtJK1WI0/XjELNTp4mH8sdRsX6s5la9IQzU/0/kRyPgoo8/uPcJKLP\r\nFolve4yTAIw1GvZ7HzdE4OVB0shKC/htgytazxB3qy/2HtdC04Xb+UBoGbRt\r\nHqemd6+ZB1aNr5K249iUTAYDW8r8brrvb0r+kkXSJ+SCjtgsTCBGjbky+Mir\r\ndjvLKJxilVkUPiE+odSt7SSy9vEAWF1T8+Jd1CZ4eFxNjf1MMItDMkfhdrfC\r\n5bCOhPH92dgp/JyQxwbOofPIggtB7byxB1FRvlGpw0O8D1fkRH+SksGez2Su\r\nfHQ/JcwLN9QvHViHM2xSRZo2P/gLZ/hzf/JDaBj7xTaRtDB1p+hzLTEHe8TE\r\nEANfa9KRcoCqcIJcONIX9LTLH/NQBOvUXdv2aWFagjBfqY6G37swvnDs6ba8\r\nO/xq3dHZGxeoRswnaCWgYpZnD1f8QMQV7IttD/8tBsJeUKPtH4TEfGon2CRp\r\nAfaLvIrTabGZGVaP9/sNexMz1bKryMY3G7OAv37xnbVvlAo0Gnt8z2dRw/Ms\r\nR/FWCyus1FPC4HQqpEB80WuOVjBtoeOgI1kcNYidB+Kjl42FCgXA6Kn2KqKK\r\nl3SsxbFlrCWUbPoG8Z2+H2KqkENUB7xeEJs=\r\n=6rIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/button":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/tokens":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/icon-button":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.28cc6791f.0_1664388512221_0.5487306369056317","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/snackbar","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e46b3fbfb53a3b581d3916564d01c716bb7eea2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a515a2d18.0.tgz","fileCount":42,"integrity":"sha512-tRj8Jtqg4uxsfe7jqvvPL6UUrIrFxVyFOpIExOhc/XliuD++tJohZte8yLO2aWFAx5HHkFgPfa7PIw14pKFOsQ==","signatures":[{"sig":"MEUCIQCVWJy2s+hulEU0ewWiDoIjM/P/4ReW70SckVcpiRn49AIgdpcnocZdZG4rK2K6ACizc+Lj9YY8xsVP3jML8IFEHCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJkDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNEw//TRDz5j2Dgq3FkAV8/QfMLJGplnGaDxkZ3djn/kkIaEfljU66\r\nTKKfsFnZK2xU7MXZD+8rsdJo1S3n38HEjgbX6zVvu5R7PIaTNhBrFXLLGexO\r\n7UMH83bK9f8zPmdW4CowzKMntCchA+IFFIHXqb0iA5/7xqc18TEbvdogzvFT\r\nXEKCnjcY9xFFJhejWRpTeoTEHgSBys1wrTGJwaZOZ9F95nQpXkiL4RwjE7b6\r\n65Ql760+HOSs06TA8dihvQo3efyA4jWINZ3pEUPW0kav4ZkoXWh/h4kVP2Mr\r\nrbBRPyAW5kTElEcF8CQ/FgH3ldLnYxwHHgYqjefeTQNE6TbxUgY050L4utfl\r\nzBxT27nbI3wOq2EoyR8+HzrVe/HAZ+miuQ/yLVx/AD/cjK54uktglzWBNqTt\r\nWguaJUyV7Ud/jcvfcC39/JzyhHm+shx+FABGt4JstJMyK5X0k/AGXJWe+vor\r\nFuZ0RAcjgLw57FKaXeQWIo/TfgxA6EtyVRjtWqm1GRiH5qFRg70bm3S3pivS\r\nwWV9gR+6fOGxalL1K58NsYU/q2pgVdcblR8yxMvNvxc7emvHDfbF8HQa/gG9\r\nbjzqPfbNNnES8yAVnzr4/0dZP26dF7z4BpumIwMCuWLJAgS7K6/53oB3arDZ\r\n7RbyejA0oP9vsVJ4YL/Gd17ivCvirajy60s=\r\n=Qlr4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/button":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/tokens":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/icon-button":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a515a2d18.0_1664391426994_0.46689936878650773","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/snackbar","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ce9523167.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9b54bf05291cb40a10c86c4e91dd2414362284a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ce9523167.0.tgz","fileCount":42,"integrity":"sha512-hxJ3aivujfgUz67IYvaMtTdO/+xKN4Q/jKqNJ8UpUcvRXw500f1BbcH+WNKv91h4bSZo9iDbiF8xYMj5XCIB4g==","signatures":[{"sig":"MEQCIB1hfVn61FbFGebQr1E6nAemVZbB57GDPNjp2JTyFZabAiB5WxMxnmw0K8H6dp7uxocuiuw9b+Gy4f116FAYQH5s7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgDlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg5Q/9Hc1Mx1IX6UgXu0p6g+LWs+2XcVVZFvbGwItGnBJg6wnoHMQd\r\n1xQ+/VdkAikhdZxH5CyPa55Goc4J77ZyosdFIyuzOjDaMb1VCI2+DmUoDM3F\r\naQ+BXtqZt7gBvxRvZ4XUKcr81rHd4eWG3GEpeiIKUSAzSo4e0+hYEo/iHNO7\r\ntiyBnIvISgwDY45wbAnUhNiWcSMxZMr5IG62EDZzPxOlJQ8b2HRLTpZoSo2V\r\nUKhX2v/clWdWT6Eex4i0AxBpCVRFL2xg9BEHNlm3yGpPEUuBICe+Ytp9lSkT\r\nwgZLyfrdddVxiRL7MGlmyx96dLc1xO4RE+JmGpGzCv/vbbxqa4zi/XVHHX/s\r\noguMhkaSi4ZYMO0Q6LiNzy6BiJIbT9AGX4/BBunWXRhfwGElT0QB2HucDX6B\r\nSb5pjMslMk17qVAkvdvlsAciQvgckLUM3NXrXEdpHaNPJOvzjb61if+w0Dc1\r\npS5NNn35aaazjqb9JXQUCmB1cfDaPamYwI2vAdI4obe4QduRy7SEgue9Pjji\r\nPanPcS6PrTOLeW97emlH0J24Jg3jFvufXfsnn8n29F9ppv+u+kSRM8M1H9Ue\r\nVmV+lm8mz9zRRFNq/kVs+PUOBL2xrvpUJ7bvN/bfU+08yMPuU/Zz5dhbR8ZU\r\nyj2h6c4yjq/XaXN4KvaiHTJms72d3ffqONU=\r\n=mlAv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/button":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/tokens":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/icon-button":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ce9523167.0_1664483556823_0.031256572733641574","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/snackbar","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dff8a84f63fbfbe862e025a9af2f0486df50de18","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b2310f7dc.0.tgz","fileCount":42,"integrity":"sha512-6re4JGmqO42gSvzFRjztNf76jt33VeBG1G+I0Dbu8/Z4oC3yS/5bnLP2w6Q7pPL8sCZfm6ctkOtAeIC3hmBy9Q==","signatures":[{"sig":"MEQCICv6C45jk8OXNB/pfpt4+ZC2pzzOUF4QT/niXgxGLm3oAiApw4gIp9DbSZo5dNwBN8AL1PWw5djKQn5YzascPITciQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjUIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjJw/+JhkjoYl7w/5I5p8Uii/QXOxVyWbI1vaMrpUNUOUwbFXVnIrO\r\nyC4/za0HJsJ1fJADWw/qf0K0h3ID8CkT/LuyzYaO6Upc9NzJFoexaZ9K1UKs\r\nqy0dDbIr6OqrxDQTsSxMdBhPK3FH/IwSGfLV85of8wTM+nvnrTq+nnAoJGpj\r\n9qvffRTImwreY/zyKQrxEoUQnp56n4UfrFmsrotRYfXzayyAqqiDoFzgS9ZL\r\nS/4pdLuzTdLFAZgulA4QiCiyAIoUKTlVUiCq+vnmvCztxNvrOcWx43zj8iZU\r\nR3FMfIz6lsSuxQgBjbD3TX2PXk5f8TrT6EW4Rs52stxsYlnlBdTPmMZnQcCe\r\njxXctgl/7alNIsRwIiStlBtb9+ZJqS1FGRmlm/fY0Mc2s/skihAYHWdlrPB4\r\nJAPVjUK1zUuEd6wWqaTGIbPFeAEgy8zhHm75ecu8w8GiPAiiLZJ5BH8jTTLV\r\nL94ge9bwAT3es2LS8g7fpcRHk9kBiiMmKwLjT/ddQ3hntr99O9aw4ioa84RS\r\nlzSrG+Os7LekrgnYJLHonQocQdRdNQKfGNvQUnm09eekJ9Z4tsrgn4cxlF0S\r\n1RzFKQkNnhJRiuie1OOIBUPiokMDdJEGAHt5E2WzC1tRSmD13X6Yh/KzvOim\r\nr+kOzfa7D9P2YUyUTZw1BYPMyJjzdLPOT5c=\r\n=t+64\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/button":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/tokens":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/icon-button":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b2310f7dc.0_1664496904641_0.12015422261583364","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/snackbar","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a44241e54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1783e324e6fbb5a571f98802eb1036029f85d5a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a44241e54.0.tgz","fileCount":42,"integrity":"sha512-tusd7t9dMZ7mqmoxw7icaxa8KkLCdGDtrJ6+uBSFC4u6WjOW7Wgk4AB/oXbE4UPVwK/2UB+bDUKnz2RO9QXGzg==","signatures":[{"sig":"MEYCIQCWekYwZHzbA38pi32iBY2wu9HMZ3PcanMAX5u01tEg/QIhAOsom8/yTy05a75H+EfmteXGqDOaALYHOIei73LfoIWG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqc9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqBA//TkV6JZQzmK3fJVKnlrTZEpOlAgs3HFEj1RsT1o4QjCa2uPJr\r\nK2b5c+WIYvmKBgIZQWLzj3Ic6avvScgSHKTtkGq05Ng9GsC9NYk7IA3/f3yS\r\ngePO46pcvf6v3Y8KWcrEsD2gXLKysaXb/HZfOnbUMhqdZblWajL13h6WJBUU\r\nC02MSoftC3ilLEM8fJ87fn6rcqpXs0tqH20jsi/IFACnMkuGtrmpojMdPeya\r\nhIYYLjst9VRiM+TDFjrQfuH6TVeYOUv3Yd05X4DMvIT/lT+YyeXwOS/GmVAj\r\nIghnI1pVwfBb8v3ctqCahZZkFhcFgR0HKs1i/Eu/J+Ck3sKOXTD1ISSgMNEL\r\nsJT8uo3+hDJE6Y1TF7b3URureQ5RbKSoPemik6cQ5zy/MckEHEcxBJ/srx63\r\nAhvEksjn81/OVnTW/hJYIZ5QYSnfcKitqRdbsl60wg3KEPJQUyW0Ntda9f5a\r\nahOuKqiFsLc0I7AxppULbsn/3b3JLdSIfhO37GJG9jgQzX5ELPXPoid2XK/y\r\nQBUn3A1vsXuI2MrTCd3pX0pbEgKbUYcxrtH65UE0JqtBUgLEP4XVDJuXJIRQ\r\n2BAWGtq7G/4fsddDeJRL9+MUpK42y0a4yB6f/iocrx2CrCwGOGCSaqK+s6mv\r\ngHuckPJc0GTslW+6JaDKswbsTPAcoerE0lg=\r\n=NIqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/button":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/tokens":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/icon-button":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a44241e54.0_1664526141298_0.8263072808365282","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/snackbar","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d47cc51b2dd9a0e0bb90d9bc104ae1882babdcf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0ce81e115.0.tgz","fileCount":42,"integrity":"sha512-JqnUdWUAJ6nLXXw9ju7qXacebCT7XDWFp4hNmabP5XHImNjLuhNtXWfreHgPIdzmr08rThKt5R07gWrC3Hsniw==","signatures":[{"sig":"MEQCIFhrXms97AD7lWwI8/PW0DLf0PYyJNvK00IRdOzbi2ZVAiB17QDrr37QvS148K29SiWsO8MzTLJPGcsR+6JB6bTJpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzM6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkIA/7BCHXqKw88TOW9XNjnxKt2ZnAcGPP1Wo09QnTOQNbB0kfTZJ+\r\ny8uf4VOvvTEFPk1FhQBQ7FI7lM5E/NFVOKohXdl+5b3F/vt5YiefKxyprbkP\r\nA0mMz8L26dn0PeLmlTXzFVbjKllnVmSvUFi7ZN1y5iLB6JwkdhftWhhYLNs5\r\n+tw8rjHWpkAgiGYoeg1jDaN3oiMqHyBCrTEikzdbCeA0Muk0IMG0/b4vtkra\r\nFIFhH3Iz08rxEB807P4nI1RA4EMfY15q4BoFYusagV1XHIPEj/RbMcoX7dWK\r\nTTtzDO5SWI8uAbRtIRrm7puNtN9Yfg3GlOPP07sfbRm4FNMCGS9aH9xkb6qS\r\nOtVlZPpD+rmJJZ6eB47BC/TtRDIu6C0vCV4nhYKfb0E+TvwAS0IrQfC4fZvP\r\n00TWXeoKJd482Yc08FDky4UpvTbkvzxkVeNpgPowBAcrUP9d0Nu95v+0H+jH\r\n2vA1JpJ60wKagDKkO8/+V2Bdzx5iA2GCEo3SOvfl3CnyjNqpyeXeiJ5L/TyN\r\nUor42u1yyBZgnLSXa8158gFmktxApp3OZzVqQy+bnrt5xVDJ0FmLEBfGL0FB\r\nBsy2a2qJp7rdPYRMACtlbbO8cg9Svkb2m8TNPCrsgn02CMfrTsAnVqYtOhQA\r\nFBjKLFbU7O39BUcNYq/OtvgAEY57lyr4t9s=\r\n=iiN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/button":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/tokens":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/icon-button":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0ce81e115.0_1664561978236_0.5055566284143569","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/snackbar","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34606ae7b16a8e44f4f8b485cef4790c7e5f26a1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":42,"integrity":"sha512-LOVkgC2+W7ko5poV8+WA+B80XJw/ypoNF6SNVEXUa5/GW46XGUvYfRmQMiONtUQNNAgMnh28yQGr+H4wi3SwvQ==","signatures":[{"sig":"MEUCIQCU7GrSnVROrfPYlPcqjQxKEngGPE9wM0gMiw+x02CkfwIgLA++6X6Dcju7Y3op44/Ra1JDzDJWufkkflLELcg0ukY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGt2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIzhAAnOFcOLp9ZRcx56URdLDkitBjL1DITaxaFbQUbrEG2/tmspMs\r\nJ0hQu65Ols0xlNsjxYbFNTugz/VE5FrbtEk0T0tfo04xiJ02j78BELEAz3zo\r\nw5u6CDXkIXKsVEWFy9xQo1+dqbZZkeouSpIW3WtTuY6dfhLdtena9/AD1N42\r\nfFiu3uym2vRW/acgdQLzwA5ZVe8CApht1hjsL11YYI+zaQWXSADBH37xcJec\r\n42DFP2Fsi6PSnb5wO2p+DWCaoZdtJe41FeQzY6PONqoBOAwt/+2MyWUKR+2W\r\nQs7yR33Fn0JhE9sfB885znVJSt4cmm+SC9RhWosWWMDcU4xSxyMR4jfZMxjT\r\nT+M8C9lcUF1V7GP0ipVFuQ0WtDOb0T7TkM/iuhfEJ/QpNHQ+6dBY1OZNYIEl\r\neGmZvyVY/PZpH1RmkzgtD2Vuz8vBcIMUUvHA+o1xWyUsI83a8obqv0D0+S3m\r\n434IfDL2bhCMpXJhx/69DXlgcmAGXqPYKb/fo0ICy2m2cXYGvmvAh7XH8V+0\r\nriF6vhhC40siqkU6BFbV1e0SU48IR+rctXO3JeS7gEoR5hFho7RA4m8VSfT4\r\nLZ5qtFs/f/Y7+ldCZ9GRoDkISCDqfSIl2l7UNOIPnFgbAN7YfAqmV82XzOE9\r\n1n0EU+9Cilnve6bBkgV23NRYcmvAf7CFwiA=\r\n=zVdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/button":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/tokens":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/icon-button":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3cc30f6ad.0_1664904054252_0.4270085492703066","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/snackbar","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4229c85e91cec076cd92c561e36cc5e0fcf37c2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d9cf98e60.0.tgz","fileCount":42,"integrity":"sha512-+DJOe/Yg39gLa/HbYHAPcLD9K0WWL8UfKe1y/UmzaYmKbKsdI3EkKs7Xiql4pPDwyrmCdFK2j0Xq9yo0BAdOoA==","signatures":[{"sig":"MEQCIEjjHoTQXvKLNC81uMM7qipdqxsVG+akfuD2tRwvecGJAiBNjVyFNS4y1hwnydDWujnk0M2CE/Qf4w/mgbziwzLSHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraIQ/9FGPyAt3aksin/iyvXFp0bOE0XR3Cv3RTa1lF5RcA6vfQqsVN\r\nzfnVZztoG3bYKlgSHt0RtcO2erYYBs3Wz7YzYsjWW+YazSjTEHCzM3XDOCE1\r\n1AWdNpaEaWfyo15Pa2G6Ybrl6IZbdXoD9KvWXdPyqCmaprKux/ZCDEF6l21J\r\n7mBz2tmgcnIjeWdkUPu9Fc+sOSA0tnRxmmebeSnAie/N04wzMFVaoOiPD7Lm\r\nyKwapyWC2jhq+N6IyE4NAjBkGhnNE7T+aMhT4hzupd83famWlgytXlpYy8ov\r\nbprotdLO7ww1QzU9mWj16UjbqnVXfoHhYlOGnoC1cvj73unaMz1xTozyE9IG\r\ntpIS4bGavAS1zc9Tf3p1MvQzqZshZiki3AumO0ocgguCViluLtX8TpXU11Ey\r\nEnG1dHTZeP4UmzXqP6n58EoJ69OEQlHq3BDfkm7nh68zuZqNa8HkxI+q+X6n\r\npGvx7gQE5kJAhoPOuL1dU6RyDiCj+eHIFRHs6NTp9QROJGon2r2GMhSGf4zG\r\nngdFUt+ObVxOAVc8P3LChbv+85jj4AJBZPXgRjRlDI19bxn25riyavWeQ52S\r\n0SaDqPU94uAUfqrqnCTCUlRSKJh6mtureC2wXpAc3Z1PcPc9ZHWU5LM8VM8w\r\nJL6rpVe52cV483BHYafBqUyYDsV7qo62Tts=\r\n=35QA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/button":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/tokens":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/icon-button":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d9cf98e60.0_1664910302525_0.846290599897682","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/snackbar","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"650fdc796b91b7a520cbe724130540698e24c8be","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d71935c8b.0.tgz","fileCount":42,"integrity":"sha512-l++oRkzbvxCjIhoVivjJ5UcuzDTkve3/I+z3JRxN86cUbZAwRh/lNroYA5S4NWhgI/+yCzDnGBjt6sP0eeuyOQ==","signatures":[{"sig":"MEUCIQDQh0Ogqsghmw44DN0gfOHDKoLwzQSKJ0y9OYS8jUgDrgIgd8oghrL56gB/c6UPJD3w/0BeID5f9UbbPipxgDbSZtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouxA/+NMYZzhqy9esk+83zh7LufdNmAQ7c0y38/l26PvakXgbibwS2\r\nGyLDxa1D5CfHOg6uFkb/p/EGRbBO97VsaW8dGVidI/HVuAuJErhcW1URBmLq\r\n6fDUUS0Fzxg79PVTjG+K3N5yL/mgP8vhJy3VkaVaNH0in22hipW4JtCNmD7o\r\nf4dBrC+FVLdUzhTH8dCYoub3gMYWvft77bNI7nI+vkDxXoaUwya51s31JKNc\r\nwPPxLHi39HswhMMyQTd3DXBp+pF3//NMyeUiCeIFRnaG0qmZHpLL9tQDBKb0\r\n2E0+bM4eckZTnqtFnrQlcqQkD+F0HdkagabnhcfIZ/PFzAioyyxFxW47A6KU\r\nSbMPkJfR5+je7EyIZvX/24+9dLp9XvFlsgVCsYn2MW2B6Wmhb4eVPb7knGGb\r\nT6+Ib1Y4L9hTJPla55wu+g9UQeoRyabZon4swJ+HVa3fe5Hadla20ionKZTx\r\nUVBAgXtuEOYhz1Zw1blp+Hsev9clNDhVPdwUD5rDDaJCmxIxCe+8Y+fBSVCG\r\nVKh/hVeV9FFd/gJtQaJrU44QAvfoUGbARashpvhbWTT4CWpzi+muCmQGByx7\r\nTTRz1/6SJuSYKQO9HO9N1cWRh+F7dvWz2j8+piL3yYvIv4pND7DZMvhFI07j\r\n1SsAZC5WkWncQsQzcIFZgR1GnQOBexbDl2o=\r\n=z3pD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/button":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/tokens":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/icon-button":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d71935c8b.0_1665044170882_0.5496370816782272","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/snackbar","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7f2f585d363d4024ce0018a85d2aa801c5358d6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.49c56a25d.0.tgz","fileCount":42,"integrity":"sha512-wETW/TwznrwaeoCOseHR2XQvSj9H3izUUWoMSsd2e6WpH3LPVpaahQhBtotGnjgDFrnoBZ4nKpQntnQwx8vH/A==","signatures":[{"sig":"MEYCIQDxqf5yecXRcITEG91NoytGDOATa9vc12G1XNm39c1I4gIhALRheH9/ZyG/J5N0E6Iu+vc7RW6lvxbq/A4iXSaHeSh8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdIg/+Mk6GUUlI5frOXxTLxmrdx5do/VOJY/zoNMuRP4AApJ3FoPSv\r\nCNBFXeck4i63dKtIkFmJPFzpu5mtQ8GMvvx9PQwow3XskNwoHUC3lUA6Js4w\r\nczE2agPv+1XaOfgMoHthIoVPIA/rQLiTrClraF0IHXLuiGwXMxpMqhJfZjtp\r\n0Q9BOo30UDrzUAfgmV1EoMKNzCosWSZcSnx18tZ/+zmiuCSalh857X6gAAZv\r\nhaHVvyj/o+2xTRU4/Z1tyDvnlc2UMqDHX7P3KP7a+aHav8pVexLzz2mjDWWV\r\nqVMZ+zLBVBenc/3v3z1+Vl9JiX4tHYhewItbDGiibIesjhc+MW97wfoqOHXn\r\nwq2jCLRTP1RnVaF0Ak4kMNJzCeFIZTvk/5N9a+aX7rr/w/m42luQIBtwZ6+B\r\n49Zj0YbzRfYbum7CtcfXc5lkJHnNHMXijNhvRbG0Hg8jP4z4LMz4AN+XxlTq\r\neU0/qsE/4n12P32q/ise6RZ/XrhLqQolkIboEe/LNkeoTmSFC0llKBfEH6GV\r\n2N668z9VSkBr38q+HGl52vc3gCaJzknvbjM9LyXeAbrszVCt6GZL4lEIlE0B\r\nVtiPAZEqNDgmJwpaoTZQbCi+gtFVVhcC/D0njfe09MttLm4AGxKhmXd3Unod\r\njSHiSh4HM4fHxFcAaVu9Nrkvo7QPPQpEZy0=\r\n=kVxI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/button":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/tokens":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/icon-button":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.49c56a25d.0_1665082330584_0.4179424711384676","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/snackbar","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.07acddef3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bff3bd7174f022627ed31be9a2ccf730f59f1c9a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.07acddef3.0.tgz","fileCount":42,"integrity":"sha512-fMsMug0whS3DTkV7Ux6F7X6cVh923ppX3U2nVjbPutTowT/v8Lo7tItiYc7PzNbU0Fc1TUXZnQESWjSWALdNYw==","signatures":[{"sig":"MEYCIQD4k02DPr+RuHV/EucpDKz78pcjfn4GUaj55FmuRg17lAIhAMDobgol0B/YYlvBlMWBP7culAm2xjGB9g4OUJZeK+i2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJx6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmom2w/+OaPWNq8mIsBAuiZkFHCzc2ouJJcl1Sf/q6LF1ItaQ4y5FXmn\r\nPJAr5kTzo/6plVcL3AidR9Ymi/eQcoKM8aQnpqTx7eD2lgG0QT912fZ6g3xN\r\nHcEr9TgCo4n8dQkLI7/4g4KcRLlnyjo2OlG8Xqg47bjd7rUfIES9OVHvC0sk\r\nk9XNI/gXBpANZ+MVvy7pA+QIFkHec7DHXsavlJcYf30P3o9+cPmD7pc5nJFw\r\nfaQ4oIb4UjW0Sc8ujXFFZMPOrUqu8whoTW+rWl2tgRTtFvf7QuKZiOrUIoqF\r\nPrQ4uHDkm6PJ/yImRTygA+gzCVNfHqhZ9NQYxmro9AGaAgAoGkWIJRiHcD5B\r\n6qZTRNyeLxiubwkZyDn4dkvfBbkefIThryYAQvRTK4JusH/sMZ0zAdlpSLzC\r\nRhfBF02SZR9L7DCt4VUO3CXKwj9FaW3k6toj/AqffQRn+UyEtaOvSxJPKeFB\r\nG4HTJVc9PgmZjZVSYrrrjwxHdZn6Vjy2yaLXn3JTrriSOptJyJSZ+8/OoLVx\r\ngt4pzSIRd+y56krT9Gm0tkCfPeSb6m/RppARdqQrobJnhBe/kaYIWRlibiaL\r\nHCJUnA3inOuI85IpabaVMeljczAWSxtt+qHf3NTFm7bHAvBihoyvRToVV5Jd\r\nOiS+THB5WGiVksGwYg/b+GuVAPLnFFhhwro=\r\n=UMJe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/button":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/tokens":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/icon-button":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.07acddef3.0_1665178746343_0.46859319517343967","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/snackbar","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cda792740ed8677b76181ebb32b5fbb762d9cd4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":42,"integrity":"sha512-YvRkKJEhCNQTjKwYJ1nQnFeDvb36V42K6F+h+eVQXKWdRLpksod63FLcB1Ci1cXmU3mjSvtE1yGPu/UgnHgB7A==","signatures":[{"sig":"MEQCIAfPFgSnZkVmWZjTeLusac8yMsCPTCUZQ6/LU+VZFtjMAiBL3b3ZhjzSlwpjcg2I+Ncjfjb40K0DTfRP1PL5eFwCrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKCjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCPA/+In6yh8gPSiJV9VPmIyvCcf3jtWsxIxuOonxfb5IyR2WuHCID\r\nQHDyM3JGW5+5ofRoaNNz+tuo4himIFnLx1q5EcTHesRECeXpilEUxje0npNV\r\n+QEmQSv2E7ummwbE/y5253UHwooJPbozBUkj343y6P1Szbz3j1rw/8pZH9aG\r\n7siKw98Jzn+Qc9o2U0K/H47kiseXQ8fRTqETmQzHu5g/9+bczEzE1jyBRTM2\r\nfHw1PZkNQF3AR9HcPCO2fnmlDfwtKgpPQTMlabo9tlwu8AkI1WjL/PoHWVjH\r\ngUciJyG3pRRG/3ACfKesh+iJO2URRfa5X15XJtWsZi+E7dUjwXXzhkBf7B/y\r\nE3bMoM69cqdpWyd3ikHNWPoG3N71LeRkoVH7uaGgEgAqQmqMjN/caMTgK7XD\r\nSyNDvfliozwA0aFZWf6SKRDucyNdeF7mBaFVjSVbxUASX2t28DRT5YCCC+/G\r\nHQLaWArSYiWECzngSq695TIhMX+ykBc069NAQNf4Uf17yhxRFEQyeexgf7B9\r\n/ZigLUKTMI15uLwU8ptHBz1bu0xOBJhimi5Qr2QQL+5hXCBxo54K/Ie8ZtPR\r\nxNS5V+sB++g+d+alyNqg9uXNT0LOJ2oBnHFNC6flZOxmBItaLFkxcY+mxjQp\r\nOHbnfpvySdAN7CAh8sAYrp99cjb+XG2XBvY=\r\n=ztrF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/button":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/tokens":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/icon-button":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1c74eb2c0.0_1665179810692_0.11136419007544296","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/snackbar","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35ce7274f0fcd47799e8d78601db505f202a3b8e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.dadfb713e.0.tgz","fileCount":42,"integrity":"sha512-H3YKWY2V7I3/D2bNmknL0iHrjmCaHJEq5w7y6ZtJBe0OmX1h765xTIVWi3hXu5Byxgig+axzcxeKgUG65gSA2g==","signatures":[{"sig":"MEYCIQDsTS579uTHzOi52Ji0wsJ5tiQdGkhhqiRDVCe0hYB42QIhAN3otEwnjt0af05W3LCHLi9xoZpAug2oTmseLFdXrW92","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmormhAAntP1EVxJosdlA8kxnLzfyVW7O/sAlCt1oCyFDyqayNilrL96\r\nWkVY2k4aYmR7CgeiRUWveUfMg81zxW/beD7ADLl+ZQsjyMIQdWGdxQwL4yGs\r\nsk4+kFdqS4VbdKcBR9UzE2DsWH+9e/5ntaTu5qeCai82wBIKfPRVvJWl5/z+\r\nzkn294u0bwqwVi3dI0ltUh9NxVP089qeoXQY6O3hx+EZ8+hJn5B8wk7bdG8I\r\n+py5D2cImTLuNkxLU7y+aC6iLc7TnK816u0t6PZFErDIQbdv72l7UJVrJ6ba\r\nJ0KGFlK4HxCLkqZfDN9B8vqeRe/mAi1n+bWbO1Q42agl2q1QuJd1ZcRi1bls\r\n5ErJF3BpqX1cj9vn6ml02MJ4f1MC4yWPu7gwd5rDlsI5QEume0sQeCfZZRRC\r\nyNjoNOu8fLhyLFse2CAq3yroWxH/xjQ7u/uD2tLHhceHWlru0/87fwYBhzkI\r\n2+vaUum/GTU03QuO+TGt5B4h/ILSugVQMNwEMf40Xhr8xynfizpfJ/54j4eI\r\nMUIc3jiavviM6qjHPlLGfQtj3hgmmaZNVnO48K06hS0MfoEbKd/avDnHOK0z\r\nB3sVhpIno3kO7MnCBGQSL1N3+wIsqXK6yBCVFUc2ghDeZ9CgOa8hVRJCVkgg\r\noeH0/wAWbWHFwxsB58rAgqp1zb5xLxz13HI=\r\n=COs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/button":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/tokens":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/icon-button":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.dadfb713e.0_1665205635864_0.4142060188889989","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/snackbar","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfd57b8c07e6fbb489fac4c2e9ca828e5f8d0713","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.395f1ce61.0.tgz","fileCount":42,"integrity":"sha512-LfuPV3s0tS7P/UtuH3pwOpQDE8j9vnVfdRPcgy7lwixbhk9lMT5++Y5P5TQs07Kr0vYK5dtU5uBpjjj/JVPzgA==","signatures":[{"sig":"MEYCIQCJCQiBokLasKxiboAqKr1eLkqpjCPOD5ThNBJ/W0G0cAIhAJGqgx/05ltLvO1zrxsRrnSI6qoayu8F6rJSN7a/3yrp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQX5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI6xAAmxSdWTOhmNsuNhOReoDFjaTd8U9BqEnVp7iLVeJfwn6k7GWJ\r\n9/ZGrR9bMBxztLSH4T0DM47AYNmYVNtRbFGkXnYubd67DTUUzZTob1zGz8b4\r\nqpamtMUGR+9aMW9sv0H/R02F8MujqgN5D5sVFOiY5CqgyN0vM+NzzN5gqXhe\r\nDYU+A4SQ51Q7Hx2Q6RmG0wTZv35Q4v5/9Eq4BC4CKNsu6iPthzyxTnkiOlY/\r\nw7/yiT9X+HW3UP4xktXFPUC4NxJAKv7Q/anv51q4xgIIX+qtir2yUnHRcHdS\r\nCDL0gxbmLClHssesPB/Na+JS8I4KQ1r6ujWd1//KmtNGhq6J4K6aDairUMXj\r\nCUx0kc39yYz29zTWSTXcCifzjSj0BQcnRmHQkM1B2O4OKqKQ0tsipg14IzBL\r\nmBY+UFavVKrGsCYKD+ouKwpsL5jxRcMcMsq8oJADurJBGS6odresEtBB2Dz8\r\nhkFBtPm2AinWGf9sVjc46EcKTAeD/snFWNjqAYc5xqGm3US8XvlqpENuwYcZ\r\nRwSeq4NqQYrHtrHEy7qDyQ5eI7q1bQX9e5wA7OE+2AijHzoalJZMnkEA72qJ\r\n2AtvBh7AUzU/dF2L2Q2IG5h9Nh9PEDkzMVjqmfx86ZiFhe+J6WUqOCNiFFGK\r\nn+P0nnTtN7fN9G7WP/jhz+yQXDsSQlWwK5g=\r\n=XlRP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/button":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/tokens":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/icon-button":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.395f1ce61.0_1665205753103_0.5545475824930084","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/snackbar","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd02734db71ceb1ce112ad1752655f4a45224db7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e741b5c82.0.tgz","fileCount":42,"integrity":"sha512-oK4ZCmdXu0UmlJOVSkZw2G2VK16QkH12oLynK49ewm293UOlId569aaWWhCOL9ZxaprlAqIjbFzYi9pBETWNVg==","signatures":[{"sig":"MEYCIQCMnBOlUJKFtlsyA2+H0x5iXCc6FUTgjmoJ0My4fjd79QIhAMYfGRKt1nFeryGi38Ji4wPVNV2YpPZxeOwukEsejTZs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFjiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj6Q//RCKsLyeaxA34+k/VtEHBinbh2EP3HHaoWiI3ZFln92zIJgBr\r\ns8i6dhu2q21Lhb1me7stqyWZhRDKhOi0N2tiKmApjZqmIkNjuEoD+KxCxRy0\r\n9OdPb1k9uRjgBbU5Y/jKwADddgwLWWJCOer/l8S/1fncbdwWkp30rS2DM7Mk\r\n6cCYCOQjbLoQZ0T3wqzTINEo/Y9qJkI3Y4JQzKcPbg5t/gF5WWYatJfMN1TV\r\nPsN7luqglNiuPvwhbLcdQZThAP/OahrzTo2qxj9nLlTyjkQiJhml/op7J1IT\r\nqFQp5+DjfAzRd6/FRhCZQ6YAHMja/Pc6UKlKoAdoT/yghV4uVrFWIdxR6ayh\r\nvoplaqCOnDeuso1D+zB0aaFaZWE8jL0t1cdK1aVfOHW2ZliSgURfzzg1kVW7\r\n1bQNat8S7/IH4/kUv32+fM0iOexnTSFDx3NerX8iwtM5sNnNYGr+DRR9MFF+\r\n7+AM/NqFpcLdL57FqS0/RVftyV/f2NhgHShjdPnBoYQtOwV8TfLweqFyjumA\r\nK/70a306JXt1AkkfV7JGu1Et48bWgaMa5GsW+nAeGrHK+wX+L+/0FHSyse+1\r\nKIZacL3ds6Q6YOvveZyWh9ISbLRjY7G4YBVIk9kAWSYnffGkpcn9v95orbjV\r\ntFq/am7xYnnQoT9k7WbQpm4zTLL3jks90N8=\r\n=sPvd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/button":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/tokens":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/icon-button":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e741b5c82.0_1665423586096_0.23369516190907658","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/snackbar","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e44f67aac8cfea7b99874fa4995fcb0f0cf0122c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.582f3cc1c.0.tgz","fileCount":42,"integrity":"sha512-dRBfhtr861aHqdy+cORiAvYK+vPr7D9vitC3Fw4kTvEDn/75L6pXtig8/mfnh2jiMmvyxr2luab3YsjoeghRWA==","signatures":[{"sig":"MEQCIF/k+kH2CaZ8TkI4M+Yw61VDfxGvJnJAeyfBse9jasXdAiB/YBDKVc0YuRR7m5mdUyQEFWI1i9Tsrn8842GjZgBiaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPYbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt3Q//fOuuM1loro//25IzcdaimPym6Hb0mXXfCL8l/wcvPWieatnh\r\nhSV3pAaoJ8u5dUnDK4dKW7BBlYBJoYym3aCfM5CVCASOpJbmxGpdk6ttR/38\r\ndmRG9qKybSOwB0R5aipH2FkIXVtYaBHZ8IrltDjk/2mJGc6TW6Y5LtVfcl4b\r\ny6Pxb+y+buYfZcQ7QRPO4bPj9LfrfFWqSEo3DguN/trGHO/SVUZADm7DLSCu\r\nBiKWgzHedqaB+p7A/AqCiPXwnX1j1Gd6J3bltYc3/iNGbUphTbNikPaMyatV\r\nce5suNAf+Rq+gFFdrb9byW8UkybCq9UaXoxifgq047y4ljnTGDFMHMYdecZR\r\n8v0jgbD2ziyuENn2TqHg/0qbidklOXnTldfOTZ3uXdZ3iXFHpYWiLmNl5K0t\r\nShI9r4ZMaFZ8FL+UBnf0jnjG4xjyhIesHJ9DqGr8ElTkPjFu4Xf9sOXLYfh4\r\nEnC8puo2cfiwghniFmUonLigmppR3o/e3SvlCHRt+u+mFeAkpNb71Pzg5QoI\r\nxrhA/MLwxbds7pvIfXbMmQX7Q8lg14W105zIWZnj7MjfHKvNGXLcpXjrNxf5\r\n59nyD5I/UTbH+PvI+7/khYLslSRIqGC9xNEpmL2tW0Qj3rsSNOziyl2PlN7l\r\nS63Ny83eMpkiZIHaaPi/IB01J5e9k6wIJDo=\r\n=B7CE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/button":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/tokens":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/icon-button":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.582f3cc1c.0_1665463834758_0.8017582240579977","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/snackbar","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2859d4f3a23cff7d939493e9bb106daac64bd377","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":42,"integrity":"sha512-ESiauWrBUX/ZD565urjXoiX0SwaNHRWaNUeykyxqGBqNFx2riobgK+5QAlox+HhnQxushsVThlF452pPxL24xA==","signatures":[{"sig":"MEQCIE6wpah4qVWKiXMCohS5/l1gAJZt/5MaCppMMflDfbUNAiArqvPSMoVl//crF8oeFHaepjvZdk9lakheW0C4vH+I5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRq0mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9DRAAkqP0GOVWjHvoh3ESU4gFpgGjHWj046Lw7GNGnGI0kZriXJwZ\r\noyizEHgDs7G+y5E3VOPg3SWv23HVqeu8wuFTVaI5//sdQPrWohX8oKSscs1H\r\nEiqtm6HZ7RVgLtFMCPr/zoDAiQRKzZlmIRXnG7HPfdJpnrJJ3eBWko44eTPc\r\nN7f3P4BYHreZ3/yMzXke0QDOIJHuPpfl7NY0C7ecGHS4sWdED3sM5ANqPFuv\r\nLKWn+Vyw3nSq6TtQG172B79ti6Hs+dLdsnTB50PvI+94x+HKl+CDo6C8Z6Fl\r\no560fy5H8nD/J1nYG1DMxc9q1dJ3kiImFBytaw9yQ1kPARmCtNshpVAT53TR\r\njQKVPxwQdJF3Web0mKqZK3oNKBe1tbVk0hjAMSeTymKNH+r8TrkRvl3B8KB7\r\nEj3Hw2PtjoMoaqDwtJfLWGaChF2Wtz2ETlozJtjmzsNJYTccJMCmT0+mnSNx\r\naZQmCBZV85FhWTNNQfodA480Au6cQl2iRbDTVopkEH5CPViT2JFS4IwyuKoM\r\nlXb7EzPoZ7RfTvnnsl7i9yJLsEP0pw9zgsWCPzwPiJFqAHG76lqY9sB+P/M1\r\naAmg9xJMs9n2o/lxPDv1qrAn/OGGLLeERhv4rgGs79XIiRAtflBQYYRlGuUM\r\nzqYk2bN/FnGZ1uGQ9ff18nhu8t7gb6v2/Zs=\r\n=bNl5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/button":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/tokens":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/icon-button":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b1a6e3e88.0_1665576229928_0.36837188664535736","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/snackbar","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d41d51f99664091413b84ade8fc41684d38c0b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":42,"integrity":"sha512-++XwZ/jf2v/8TgTwvB7Yq95VAjUA35XPbwWR4o+HzCOVGXetgKbij4ikbJE1TJJfTYTsfi8EqT4ylA1vA4JUbg==","signatures":[{"sig":"MEQCIGy4w68FuvzBLEbqtmoQJUhRBC4m4PzOUoGCnFzl4T9EAiAWDfd+FMSFeSfdoE4/0DFzceFnFGcxJ7dNW8Okd1zZ3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvKTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoC4Q//eI1Z/g4MaD9njOoogZ3ChWcRRMw0iqm22yFN82AThkra1D4v\r\n9y6+CBTylEDfCmw6fBj3tCd8vyfhuOz9TYrFS8lSV0hZXLePWoHjNcQAkjWU\r\nAXtRx08X0hKmWT7xsoBSNSJGzntMI7u9c2sOS3iT8Oknf1U7SuIVMmmsEdPi\r\n2g76OchUOXKKf9xQ+IdsS+G/lvsMnoHiVW0IV/grixWqs3x3h4/k1v+SxMRU\r\nJEozL9SRGahSl1sidbvmCjRFBihpobE2lVOjVeLGM4QILpJcWZ0qXnTXVhJC\r\n2hrGuq2SFvN6r3OFCuCypE1tsomYY6ethz31ScIeVzCx9I8zIzUWcSRoKc43\r\nZdjaHa0jqVDcuV9JmSG4y4bWJkzGYyVFQoMLCQ3zn2acKspuSgSGPXIKLNeD\r\nFmgvDvyLw0GBmW6uzZVVZyLa4nrnzlUJSjjcUGGvTi+/wgsNSCGJ8OxpvqCv\r\nuTQV1WRXXB/GFt+DuYpMAyQsVTalQNn+poAMq4YrQ/ao1O9D92Hx6g3/L1LU\r\n306CfHg6OqeikwLVA+fLONPuI2Cq4DizB54KpheDgcmvFZ2m+GAOOsr8Iq16\r\nmofW0YEdVgYaas7LZDUQSZ5IDdCiCO5A+WKwfjvzSQWt8TGcFD96o0oVPaME\r\nF/6fE7GjZY5knOA0FxwOglLERvTSoTzvOEo=\r\n=hqAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/button":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/tokens":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/icon-button":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c9b1a31e4.0_1665594003172_0.7769677806445039","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/snackbar","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ced295dc0ab4910f43638eeeb691172f24d3081","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":42,"integrity":"sha512-iWZInmMjpqB2E2myYJbOLPU8UTouxdwZyo2Y9CqLJ/AUywc9P233mIRH5sJdTrlH/O0fguqGndLsRe8L45/Ktw==","signatures":[{"sig":"MEYCIQDOvfwTkeDkZHoxVQvzzl3yuHSUxF7UC3Y4o/kOb5eIiAIhAK41wHCrnMrmb/6cTMA2wW72isieXLRuW2EYqKxhesp8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxQDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojRQ//c4458xU6AdSbui+61FYVyhJUsXH4SMil9ni2PJdZeQABFwzf\r\nrUPlIRcO4mFg71Matv54V/3EzPR7olriY3F3812Ebi0WMvDzIiEt/3vHZD4N\r\nSKORxFlMxCNHxgb16xJuWUOdtr24sF/GEV3jMZHlx+5JwrCfd4Idu92xCcOZ\r\nN9UAIAs6b1zOtODHWDowjBoyXY7Zq479GQzrrcub4Kyd7wZ2g5iZWRWcW1nZ\r\nYzSN0hCHVzbQQ+RGQj0d/dPrTg/DA+iSkeL7h4p6MMelKGxC16YLhD4kAgZe\r\nVhyvk0bgiaDq3lZ6+h04g3U1Kgt70Cg0nl7h3ZNaiPFxNoTrI9VV6wY+C+At\r\nllW+lTl5pIdatz5nzQ9z/2LoUEfYHYPqBMQMfBCw5j6TEe/0jK5sSGoPAuep\r\nVAWKjPC6CPN6Hk6RqzzWiw2wzyck6g6a5O3sMJpwcSIeaEj4btlml8/5Vm6x\r\nFVaoaF6XEvWWV6eVJkoa7xSybFl+VvghLBYkxeJGGIEqrdg4KoaVpKR8Q0g7\r\ncsXMrD8Zc1dkY0wlZRviy5f8zNeLgwxxYNPFwoSEwVzr7M2Hds9rU1S0YRs4\r\nIV2MMuRL8hh1dAbpJzRDCm4+Ji4jzNv2HvXjPjiPg5FXq5M6FPxhN6CXOoFx\r\nKdDJ9ly983NEsbps8K+eC08lPabhaFNHZ+k=\r\n=vF1o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/button":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/tokens":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/icon-button":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.13e9b0d1f.0_1665602563534_0.8543781929607739","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/snackbar","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a2403b3b02ba99b43d0aef168997e23675e6c30","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1dc797e7f.0.tgz","fileCount":42,"integrity":"sha512-XK5cUBbABdSBBFIKOqTsHgIPv49ak56/geVsMtr1nLwSp6Y37gere/IUM5j94Rxos/NWpM3FnxlY5/c7nFb4Fg==","signatures":[{"sig":"MEUCIQD1ILn/8BrFOGzXjKj/rltxDH7pDJp9qmvHl29J54rgAwIgfR5j90GW+xu811D+Nqe5TjDF2UBRYe4A5stcziE9KNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5PA//Qvo3bNhBQXcQxqSRFYEhXSDuHYSZUt2CaLy1RhZqlB5I/j8j\r\nOh848F+kjLNwlaXMAIR5X5i8ofBi6HJFwXAgtlD+3m5ywJ3/StE+/+5xvFIF\r\nlrXTEOyyXpnPbnNdkwipD1PwN7/8v/JwYkls+ykqJlXK3R21NV9czwGrkNCI\r\n9MW7T5psKfCRmUL5SObfynh09ZdF1xBSnq56Ox14ZlDiKPI5beDihNcPPtY+\r\nMIfMBmP+DTzCDY4RQTYdVfPBPP4SaOTB378B1ZzVg6a5ymrtzj4JmqGU0KQL\r\nLvuwiYyFA/d/FF8x30cwCojXxngMB+BETKE+sPu2yeyJDrkADWCqXu3f/rYN\r\nOtDoBROA1SUCx51U8hkOUSoNaPQ1sapHAIf76//r/Jm+xeQf+ttLrL5lY6tB\r\nNJ1YTs98jnjeBWznmTytNhMhhL0I+DWNIJsswd7T9tFBEtfzTjFB8TqU5s0p\r\narmYRH9CzDw4x51Xuf2kONbFt6NYwy02PDU1roN/5CnLzIV5XJ6nDbgb1sVi\r\nv3tuM86mh/OIYukszmY0/HvTegBz66NMrgg1UEWsg8yCrEpfJJdvqPS+ENpa\r\nXzssaW+IYs7T8MFuUFC6xVCbcRH8skgQJuypX1Etp63VsOuEenI4jFZUDC85\r\nf2uhnAEH9PvEAQWclA6mNMClbD5gNbAhXyY=\r\n=AfSv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/button":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/tokens":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/icon-button":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1dc797e7f.0_1665740596721_0.6078445616929342","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/snackbar","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ed4009397.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce234fcbc42764bf81841a0d075013affb798a00","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ed4009397.0.tgz","fileCount":42,"integrity":"sha512-jigBDxAuAxiZjad3xToY+86fVzCRrghyEOeCq+YBMl3yrWIIog8GU4iiiTunP0+UMwcceyJENa7PasL9AVz7ug==","signatures":[{"sig":"MEQCIEjAw27h5yZdtu9YCqjzQLYKNh2EjGYKKMLTaASMgN72AiAje0jWyG0qAwOJAqGvbfN8JIhzGlCf8dzANaWNa3qetA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZPXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBsQ//ZEfTemyimChOZjCsb8am+KkezGMKm90WMb93tyO+mbv/YmYc\r\nU7+OyjHQtNVKmmBn1aDP4T0TQg3zyDJyeO0Gt9pIZT9yvCNJq+Febv3d9Cdb\r\nuQw76xmzPYKl3czes7ZfzsrBb5sx0qpvZfgy+pRo6c/yXXWPkLc/SiR14Nrf\r\n4Lut5h5oqnZv8bMWWDb938MX+lRPG3cfhWaBHKeUstnNeg1eCUuPc98P03lD\r\n3LrRv1ddxbuOck2KWOAgoApCSpDv6960LBJq5Z8JZ7Vr9ArsXcOOW4X5iF7+\r\np5k+6q8T5Sx+smKySIDBDcd+DxgVcWScGTyW4XVl5NOnOM4WIHxxgL5haZbU\r\nCLDTclv2tR0swSV8lKT3DYgPZGpeXWQG6oKrgSbmR/Q3Wij5c0T+uK2t9j3O\r\neJ1rV36onlVZPhLCE2FGHcy+12m5UaO8JJZBiFdG7KcUMXDlb3gjNfTKHF2C\r\nKvjBIOJft0K3L3LmyzAfwzbVqW/liazJ4n5yoay/cp/slpFU4Dw5A7N84yH7\r\nfJvZmH5Fe23lrLrL8uzYTtyHZ6ENzm1W+CIUcbBdhqivbLW4IiQBsjnWJEf7\r\n1hvT5KQOEktunQK1Pshx+/SSgO7QTFsSWoSatXh2jAkmZvZouUb8OCiXeB+5\r\nETBbKIVnrmdZFgJ6sTa2kgrJ/TMTc9WOJvU=\r\n=irYg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/button":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/tokens":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/icon-button":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ed4009397.0_1665766359665_0.347227946807781","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/snackbar","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b2f97794d2e8b8dbee47e806f818bfdd8b921e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.95ef196bc.0.tgz","fileCount":42,"integrity":"sha512-3vQaF2Ty43688/z1R+NH6JXhZ7EwGf2y/3ldvG4mTnmgvHr8A5JhzivGGxk907sCJJC+/74Ewfkde4URHzSnMQ==","signatures":[{"sig":"MEQCIFh3rhFTwZ/83dDcGDjaA35nBYQwnoAGOMuq1K7Q8OsbAiBA4Mezj5Z6nBPUUpALBK2YXMNk1e1iGEcF6ZNw3TLXRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe2KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3qg/7BGtvEi1p+L75Y29QJuQVGlu5R4PX7mXgy3aNrhnZXHqs0VWP\r\n2byOL+8R0s2Sq5pEsUz1d95yo1BaV03fYry56zsIs51MHvGDjlclA6EpRHY8\r\neHCL+33e1qGIqR7tMuxW7snZUt2pwB8YGtFMmrwn6b9JKy6zW+h3uwZCYQqT\r\n66COiitYgvaeyt0mD6FsBGaCyV0JMeKHiPj7rhTOSFBgjwivX6wSt/csz5JC\r\ndpMvVOSA5YOfywqZFCUDoiSGoqUE4W132hoiP5yQ6MICiO6Qxhb8OECpesIo\r\naLfT8O2+PZ45YeB+YBgpEnH3lh3aNemqPyADPMZXIZ0BXOXHLYG7HiUg2c8n\r\neoPvn3gkybBJPQjSdxX6sm4m1/5KO99lXqKEQcIY+m/cSDKYFM2ftnR/Ycz2\r\nP+8kkWx4S9KKKZo8M/nyj37NV6GXfPypgIu103lIhHiQAXBdF4W2aqylVFzX\r\n1GbXX2QAoCVcgnr2LwTmupip3v1/kVErQLZo13HrsFvws+5nLAzmUHutBpyV\r\nnPLViyHd3L3vmJtlbQHcbzW3nJnol35UECAZHwK6jzUpZtuJQ9FazmDjq+Qh\r\nDBP1CF6h7qzKhaRTI+x2z782Yh5LjkTtuFJjPrZ1PXX37deQ4QQYAmXiJom2\r\n/InmFns2FS8CynrjYla2O+tV6CBfqV9cGj0=\r\n=dszs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/button":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/tokens":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/icon-button":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.95ef196bc.0_1665789322351_0.0849997658091759","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/snackbar","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82c2a02c68a0585740aa2705f44eb3df8f90f7f8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.13eea1b2d.0.tgz","fileCount":42,"integrity":"sha512-OQvLnFg2OHXyQoq8ipwrMNIamZMgIsSmIn4gN0OzlmC/PsvKzcjCOHhdfOQmudwb/t+vKia03KIs8Lvs9yc5dA==","signatures":[{"sig":"MEUCIQCh/oe4EkD/GtC1tuk2VjEPKCDQa5J2URHBHcxNmpd5OwIgP9OeaKkjEjV/Jk77Sd6fUsJ5mSg81r629RKJWdTE62A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNGcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYxw/+KT/c26cedwMh3eyhiWfINwGQDW9ELynltuKT4CzDCGDFPRNB\r\nEthERsllX3AyvAe/2KqrHwGoWKF97fPM6v6+ibkhQlDNhU6dI67qqt2tSPus\r\nfGXgd2sI+56+OO1kvDFLswaJCnRJdY0SQLHgN4AvgH824eYP1AyW5LC2bpJF\r\nl31fCWeNg9uP6A5NIzTsSuk86KYjmUXuEpub9HStdYfuY/gPCRDE060uXtkB\r\nfc9JRa74oq/ITKpqMNyemE5aMLZYIyQKGS2RFNvaS/YakeXs9iC9l1Ym1p69\r\nZYIlT4WKmWgemzQO01jTYD42oJ2gNcsBWkgoevkxYyqKwuWetNYxFd6kZrmU\r\nmOkQoz/r3OTGOD/6J1/PR8ZCceszbRNq3CEpOo9Yl8/Lase0nIxXX4plj18Z\r\nlI0p6iokdbbuqlfSzjtZw1msxdNj+9j4tVR36qVirjlpaTs62VfiF6vLXP/O\r\nF7v8ef4PmQNNDytQ43sOJLP+i0qx/eQXL8h4V5mINniJGq1leyRttZ0lm5Lu\r\n7UT+LJZw4p8za4HB0f45blKgoBermjzaGO6kgft4uDqeUSfqA30k3FrOW4yz\r\nuGzJdneDyLiwJ2WjCpAy6J5XXYndcdTZb9NrFgljpdWrTiXx5MqWHA7PXqno\r\nTJyojzzdZK7+PyTi8auI7iaSgIrXoMpK5GE=\r\n=b673\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/button":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/tokens":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/icon-button":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.13eea1b2d.0_1665978780739_0.6584816422694331","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/snackbar","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9333adb66cc9ea65b2bef90672788b8246bd8a2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ef9b2babb.0.tgz","fileCount":42,"integrity":"sha512-RHm86xHcZ9BdM6NsOvyXwCnycBzLIIVs3/grisg6fC1ZoIgfPnZjH1kKqPuaTDDwcHfop6gnKyTe51ZxOv5Fcw==","signatures":[{"sig":"MEUCIQDc4mNhTnNnSzQeDOBvcoymPa3jQOYTPo20nbtkuCkIjwIgEkM7ytB8D8jqu58jHfRpvDj9QrmSCe1KfoLFh5aXXvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrP9BAAiV8BCAohrY9jV+0RUUxHhZAjPlk0qt1ziA5i2PdMSg45cKQO\r\nL4WyZHzPeAAr5LaSq9X7X9T2yO3R5/bZ8liaIaIM6agfEQzreoKjykGbaFkF\r\nxCMRp/8g6mUYbe9CCXN0t4odlUTOX2pGLR43MRHcomxoYZ43mGn1IDPfYWYG\r\nJIGiO3GakLbVaMG/GVTG6E77PwK6hxmk6JWVNDqD+3E0/cgPAW2AxAURxk6/\r\nd9CUAZ3qFloGHl2yQ4iz8d+YLrOIgiMX/qdFmbso7MzdkdGCmdFG3355H9TF\r\nfBIfY/X10qlh4pqGpmn+zdJ0aGQbqzUTPYG/di4AI0+eNvni81YVK7LrMgQi\r\nn6nNhX9WnQcyH0IGF1k9GHO3Ldu6b30zy5cXM3k6uKs1w2aJ0V1Y8zpzYZrC\r\nWF4ULsThwwPFxvZMZBvaASZsBAIQ0usdgKwlAxI94d4AiUoKiHPVccV9Y7b9\r\n7dL4fno0kV+9ZT9MTAluuCJ4QYcoB3iVnlt9Y6mm/c7vD9yB0MeG2cE1CLVm\r\nvUGiopIzfCYwmF0ivjZQQFhr/uTD3kn67j7Ff1+bcg7Nz3nIqhCwDy1lSrU9\r\nIpHHYWkySFN2qrfzXc9pTS3I9qsabXGHDT/Qb5PRxXrHEzKUxt9ZoonSS+mF\r\nFgvVXwJ3E4kXMkcbjmVbOH4biuP222MlNHk=\r\n=505w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/button":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/tokens":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/icon-button":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ef9b2babb.0_1665998373765_0.5067312447704053","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/snackbar","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15c7465b79d836bbc4e72154fc1d44f1c56ffa24","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cec7fb987.0.tgz","fileCount":42,"integrity":"sha512-7XHlpOBf4MFNOVMsQ58MvLaT3x4F2I4AIVMyrL+L2GObe7x1h7arZcJpHd8Y3lrJbJ17+CY90pKWD9wIK/r9QA==","signatures":[{"sig":"MEUCIGuo06eG1JlofqYX2LoELEBxe+3/jFfNC+vZXLBzwsCuAiEAgKEPiK/8tUzaglFCvDFsHWR5sXMTmw249AFmCHzs6YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTUoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHoA/+MMSe7N6Zm9Cg+miccmDdQuqzTLQEwK3IRCwDbuPma/ut89xN\r\n5SwmkHsCD4WqL8YuH8LFIsx7mamZ4Hckg2cTvOGrxGNdUGxaG0wgX73pLTVm\r\nXHTRWHYFtR7CGkSarCJSWxb2p5NsWBeLL1CLsZ9o5bFNBJF46Ush8iywc/Ve\r\neVMtZL5AeObTziX1hTRXmaHtQkWuOyjpjCiS+/GD5fR0pzoEP4RQSsH3iQCa\r\nSlKht35eNFrBmABCec+kNvXRC+IMmC35pGdg/wcH8XI3mLW6Tzg3s1zZ/Hxe\r\nZzqTftW5kU+Axnnw/qnyny2XfShMdzsq/y9dj29iNa+LGQv8CXCe8bR4kh6q\r\nGFxWguyeq2etCuuIyPEHGUBaCW6DiWfZirQiSbKpVkBChIcy1N8+/cuiEQsm\r\nf5IY8Q5PlgTyKwWoStu356AUiLCH/OxtAydTyCS/LrxSQORAE2om2nUVHBg3\r\nQTgVslPLv1u7iMwY1W1QEDYE7jpS/nf6CVLiT9eLrK8eQf0wOi/DSy/HR137\r\nfMghnyPO+h31nwPZMCTutSBrT3OOqdXa7FcO1uJ/ftCSTPc5AURnRN6rwJ3Y\r\n77rVuvLVGfNE04Vkx2CeN45J/QIVKJk2ffGcUk8K+UD981NVXtYpTTbzuPRz\r\nlAGt/uvXGGNEQrvropRPMSCzL1pc9JKz09I=\r\n=eFOL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/button":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/tokens":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/icon-button":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cec7fb987.0_1666004264449_0.8911558122208965","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/snackbar","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d00bd878b0143507b7c76dbf0c399f850136b73","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4fff58b08.0.tgz","fileCount":42,"integrity":"sha512-KjkxEN3np/IvuEOG2YmR4EYye2RIa71YmnD1se/rc6W+SrTfgroBLHu9Li6SouH+1pDREwD53Og5oCohzDf9hg==","signatures":[{"sig":"MEYCIQCGbsKueDfixtmifDF85G4klylVEMOkuaK7Bg/xt3BtbwIhAN0VM8r9BCI+yZD+qujviYgHhjChBTNqYgtfEmeFyNz+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXOZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/ew//Tr80GwQ3H3P64qzUpZTOwhphPbBh6Pbre8snvQCDzGAH24Wp\r\nIl0vSr8nbBpBLiENqw7yXseACXU7SQa6D+A8jKT1eq2HrG0AE9fZsK5Wi4GI\r\nHg7nIpyo5w1Am+pRrvg4wRVm0FbdWI9/7MFSOkpA9Syj2mmkESlXx2Grae4W\r\nzGD/ITx77Hv+UyfR8qMMdWgmXTu/8qUdv97zlgBT1sDT3yrcOwHGuim5Ip1h\r\noAlMye+ZRbPtlUrxBCZ2aD+s58zmADOZQ+oYInMbVO4FlH5Pt3d8i/DRwg2r\r\nb7J4aYtAD9tlGfjmeDQViyP0BvFz2OAMNnJZLnfP8pNLbbH6BjW6jB0vvPuq\r\n3O7jp+IoCJjuQXDDsY1Lx410EsM7l9tWlwpHs1N94pM0bIuW+RVW6S1osOeq\r\nddfZfgvXaP94kXlqRkkcC8FAS1WuBpo2xZ3rueHCfxyaD4yigYJM5aynrYp0\r\ndwxIVJSOeD672iVSnuNyAerNrmC253hj8eYwCPBM6R6cP1s7WlHgZ9pW0g1e\r\nZhOJbqzNx89fqSa2rvwh5cQVZO4NZDrDhdYcIz58XkKjYE4ZYGij5cZhU4N7\r\ns5/fbU9MiJoPbalH8lgLVlb+6cbDMNUR+P/bHux0/Lbt4T/ofyqpMRCLy9dO\r\nWUr511/+wryurlW4+wkb+NbIWvB6kEkauj4=\r\n=JOJY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/button":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/tokens":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/icon-button":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4fff58b08.0_1666020249398_0.010717145758780688","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/snackbar","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.587d8f871.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"481571983b2cfa969e28c8fe28cff5ac8a094245","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.587d8f871.0.tgz","fileCount":42,"integrity":"sha512-t3+dsrxyzY2nCGZNfto4H4k2RAANPt7QrW8AGIvwLYZ99ooMMX01LkKWe6FyRXhIlZiExnfwhHzR2Z2oQ/6hxQ==","signatures":[{"sig":"MEUCICTH3WDyHtg8onbAA0cuq/OrNB4lGFiKuMRQCb3Ho1ucAiEA/rU3j8o/Bz6v/zgnd9TioYiBeirOGd9PULIVMuwrwyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq6A/+KiS2SOm48MKub2hYtm/YK/lfk3NIuzk4GOuKR1U9wJ34YwoV\r\nBp+TQR6LU2K+DKqPt+orYn5i1SkP5A9fb79V+LRKftzYDoeshdjvCaCRwv3/\r\nanfXEvG80tHmcK9pnVDbR6Tg7JgOvrFNfYk5NS3Prm8oA/zOqzQb29AXBvGm\r\nulqkMOC4PC3aufu3gJDRGFvtNO4m9hWbsfwIv5D44OUlQurrMJXHmPIHozMR\r\nPcuErhM2vyFtcKmySCzm6oMhScJ9zFj7vTwfMEiX3HDVHrBslwTDM8E9rIRU\r\nCeSYqt1rzMY6tt7TqvUYPkZi5QYm1MKguULw09TaDgdZBn5ttGNJVpz1pQXp\r\ng+8EtnbprPJ53Yh3OfVlCUogWvVxx9xFeCT6E+EhbtwRL83G5TUhpyBg+adm\r\nTAPspGsZkgslJG6JnlY6eqz8njp91fqF8iMVE2pHnFyQHqL1L/i+To7IuMpn\r\nN8e8kGVjRUeMNW6NIv8Zck2xnqqd/CfLtlA0j0vvnDhV+Xw01QxLEK6FEidh\r\neOia/DwpsJRMWp0uaCNYhU3oOEV9sKhwBBjRd8tHDN+jRp9sb7qRY2gxfY6g\r\nyWJNzM5OLV6/evNsh1THf8/+ChRRm06ZEN5wxGbHZW9cVoUmPM4CeAPl9cgp\r\nSswY5qa4oOHx5X4/kSAhI7Iv0evdCz3/R5Y=\r\n=UFbi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/button":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/tokens":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/icon-button":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.587d8f871.0_1666022309465_0.5732233074555761","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/snackbar","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96a58eb8b1a35b8fa60d51f0ef3d6f5a132f7252","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.edf4b98d0.0.tgz","fileCount":42,"integrity":"sha512-SDcc7bgVGd8nYRzHtB3YAodemPl7Rh3atnDKvwWXEuw/sHngYIkLLjtia8r9uqu8Wht/fAwX1RiqR2y54HMaNg==","signatures":[{"sig":"MEYCIQCanz7lxhTE/TzfR+n4Bz0WBfNByidjQKS4V8NhYbdbXQIhAPmCuaOe1QLrp3JoGhhDJSGGIlQB6cd8opFQ7xYeucyk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYXSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAtw/8CxI6ZBqYdPi6WfxpRhNmyHtHzKh9Ghrg2meOUMQzIo20aK32\r\nEtRd4FqB0jSPiDfO3u/DXfd2J0QFOsbSYZXK+/6Q1fJvvSEEYqt6MMAlTlyg\r\nzH6Ej1uCx9jr/kFpBz6HNcvRyUfJLudW6O65ydqvTdutqGFqjB6ayD3nYv7R\r\ng5fImbXZ8YZY9Ie1CMYlccKXJj2S5ZZGIdsdJJJS6GMQDePqSHmvvt+TQ884\r\nqLV6HplZEwzP1mSedInj61qUzhCyty8xEoCFQ1tq1g8ZvceHc3pUFhLAopVC\r\nOhhHi9Rvj808o0BGRVCUaNmQ/83Dr9VJqnJxU0ZxS0JP47x4j/KnyEPUTr7/\r\nk1udTJ0vMRqhH4JQMgFt+drKZu2bJgkJcMt80rou8gu974C56zwgjqku0aei\r\nZuLKKm/Z+1FMZt6uz+QrauePs+mxsUWUC/KbOkXYcd4r26sdAPIuu0VbD0zd\r\n4bPWG1VcRoQr1rlFcrd9abpOwXyRs0vGB8ZEYT0rJP74nALzBBtiJ3Qoz0hP\r\nsN/zA6LGSBgazUjrcGkqGEUt4fWYJTymCZAQzEOjwaEho4cIYeBeZGGWZfUr\r\nM18d5riqBm5J9PMESKvwqS3go836QqyU6WlI8D230oPRXgB1DHG2WzgDPu+A\r\nLUVxSTux+gsjLCl8Ti6fYC/RIGBAA1Ijg9s=\r\n=uzXr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/button":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/tokens":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/icon-button":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.edf4b98d0.0_1666024914321_0.04499186335759142","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/snackbar","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14d846d64f1c9214d009782e0e9bfc082e4e9809","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.024ac5f16.0.tgz","fileCount":42,"integrity":"sha512-ozMV+HHkBuWixPgNnZXGwwBrS3goj3Y3LRvdb3UvMD92z6tYmq/y24fOCElLXFwZCmLMAi2GReQgEjIbUO2qxQ==","signatures":[{"sig":"MEUCIQCocDN6oLghD/wDmm8pyffBG/BWFLCRyVTPq4eyg1nl/wIgbk4M1ZR+nZfoEAzbSYT6eQ8To2+0tQbblDyOqrjG1lE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdqjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQKA/9E6Di9pBOtVc0NQONpQxjfsktTbi+i/0zZFRjg/Vt2XKE9PPt\r\nj6fufcYEkTzHvpx4UHXcF5wIO7yPqm9Ec4IMjErNrhW2EMAvTyHJiS/QsVGf\r\n1ihwXRBzv/GOCr+70pxFVR58VbwoiYbcp2dU3OYIiBpkLqzOqsyP+YJFkhzo\r\nToIj0xIZxnA+6TdJKJ+CjzJ5UsKNaAIvqv8SmpuJJPfktrwbq5IJbLNfP2Y3\r\nct0+iPWI6mpCrHcAbVImSkRgtXUdrAkl+hFSIqF8YgaM1yy2w0PbVKsLJh4B\r\n2ZC3QMKqG1EkcGV7mQoiIv9LJxS+qzxwx2WakJBDuFuq93BCyD/LmQrfhV/R\r\nN42Uq0fWxYe6kK7yBnxfFuRbCdo5QfORUYLesG5NV2fc8rdQPBVOyYKb/b3V\r\nI20WHmBchpgyVdotYwKbqlrYL09qIQ1VUQtDHmpmViW57kdfRDfakOGCnz8A\r\nYNwb3hnsMfzxgqguT+aysVpzxIqfkiU7lndBdxm+5Og9Ov51a6smabphnclo\r\n4DTnepdWyZc0xfiYYIVaOsaMI1t+GCJFO6L4EBwc/Rw3AKUgOxbTS0KTXktm\r\nbCnhnccJzYstFUWzqA1Zc1UvrZ6mASvAraxEwQ9/5z5Nx6GVcOfgolEmE/IR\r\n1aB5hQRkQZEShdvqjs1A2EipaKJ1+4xDXqM=\r\n=j15v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/button":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/tokens":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/icon-button":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.024ac5f16.0_1666046627227_0.484591385912007","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/snackbar","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8e978dc1ceac1a149db3ae1be065d31977114c1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c8bdf6144.0.tgz","fileCount":42,"integrity":"sha512-PKqY6VOiJRwm2IOfTnah/h8GRpQH1dwvaTB06rIPlmOIhwtXYy9NA5q6lzGb6tlsxuuLfd4e3eZZePvG0KlsVQ==","signatures":[{"sig":"MEQCIApE7f9G4RuLhbiogVARUPOXEVWOJZNOPFAXYdzgs4NXAiBjkTQZNiayltFaMBmoMceZmXWjbhhRAtGgH/Vybq0eqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu9zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHMQ/+IF0W7DB98R5tlWcuJE+nudcWtH5Arqo/OeLARCVcWbic5hcy\r\noBo16lriDOH7AQ5hKrS/S76cF7hcF156QktCDfZjUbgGmDymB1DuertF57hw\r\nIXoRgIvT/BnmlcTWpbypEBaWeJYeT20iLWxvbIAO/BSIkmOBUjRQGdj2FNVn\r\niI4DjP+sMl4X5a5HiTGo/m11JzBjHHZaSnhspBjEap9TjLXX3jJyHX2TbM2k\r\n3k+yLkd8veSG89S79IIQmZlERgdKG7KokxFZ8mhFaGBl52hpLN1TyKpZsnDY\r\nDiWQXTkH6B0xKbNvzB+h2C+J4GDslRjZ4Zvpfaid0HoqZW7eNuuZ4m+756PW\r\nWGXIvudFxa7oKw7HDxd4JnVzFBeZ1n9g88ZD0UU4fquDSb2WQ9gY78cBYy5i\r\nox8rMyYAyhtlvcIi2vaE7F3tx4p19coJszYSuXizKzfMsB7VwuvEQ8pk/scs\r\npNrRWV7u+FwCOfrKXihEtehD2Ml0TNswXDijv18CMFwTndc04kZQ0ZGlR0Ea\r\neF4hAI5iGLHNF2ciziw5xboWQjs1btMOMeSUXdwa3s/wYJ48BxiTKh4cOQPU\r\nghu9dm2W8QyRf0hIZh95uIJwqKhvoMN7s44U43eRUzwz/jgNbej4UiTHdz/8\r\nX39USAG8F+gVaQcxuqJ+97F+O17hKngpULg=\r\n=S3Ru\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/button":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/tokens":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/icon-button":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c8bdf6144.0_1666117490804_0.04596180449862808","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/snackbar","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.bacda4885.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05796cfa33d04b2ddd5ea6acd1becb1053e15a2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.bacda4885.0.tgz","fileCount":42,"integrity":"sha512-BWQjzVOiQQflxMkRGNea+Dg6mXsykK1iow0x6W0lHO2Lx0hOiJphnGwCVvKAKuX1CVdG/vT3Zgwm71Udi14A0A==","signatures":[{"sig":"MEYCIQCXL2Cz/3p/iKVO+CpoPnqXBkjugDrXsepTAYWeb//gSAIhAKNd2aNDCG0/6iMU6akI00tiwuQ68LllxEn+kIdZtVvr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvP9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Xg/+NiF0dsefCOv3ASMEob0hgnd8+F1ZPTrLn5+E2pxU0kFnsM7t\r\ntH7qv9PuvVZROW0CKFb+HZZNQJybxDFUY+6hrfPeUiBNIdCRVHPgT1uN1SEE\r\ns428HVV+xciU6zzB59iQZLdOPrH8n5XI7RFOfMTtxzI6Ll9VtSqZHYmerlin\r\njRQEllTKWZp6e5iK7t/6nU5WNAZkR+c32ouRG5nlUWTS82YGItbG+Mk+6hmn\r\nb8R69p/SLz8OMbdZ/c5PRM3VpkztKfa4Dch6C/vGAn0nGLTDetfDgq8rJxYY\r\nv8j/c8ipmpZCJAWzzZo5MxWdxidn8O78mVcBxJOPzAH9iUakxJpmZcnUMiU1\r\nOHN4eXnoafFum8xVy+Jt3OHDW1Vw8oPXhMBcSGiDFGp+DkNb6S13iK4e3Aep\r\ntJF8+i1FYYjmGZN/D0R5+lhV4jdTb8yJPvwcVxyq+2famCuHGdqNugYYhRPL\r\np9OzA2n8mD4sS1C9JeI3kuR7+W6Gxl9ob2TZQSoA/05lWPPo7T+ZFPCRubeP\r\nLx+tTNaUqkfzP74eD2QxjEz3H2LRAPeWf7hDScSi3vf28geLuZ18HrqL+52U\r\niUbDIYuTF/t7Ymu/EEPD/3ry1DeNdd4JwD194Ddx7YH0OO4Q+k0GFq4K/xdt\r\nm4Gtcz60dXdUck7wBY8Vx50DihNYPKQ5kGY=\r\n=OHt0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/button":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/tokens":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/icon-button":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.bacda4885.0_1666118653276_0.10456163641602001","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/snackbar","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f69b905c2bb580e44e87ddcf0e4c017ca7e8499b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.92b2556cf.0.tgz","fileCount":42,"integrity":"sha512-bPspxF0odtR2+fK5+iK32Sve/uhoFU3cfHo0ATzLXEEajF2w5BwNPIoG0lB3Z/AFQY7j59CJZOpfwqoTRcMY3A==","signatures":[{"sig":"MEYCIQC3XoAyDLJ8DPvE29q4M95lYGhhnwQj6DH6bMaCNZPJdQIhAKmajPlVPAl2BMfAtCjxnqlgiAlGUXEQxUv/LqwwnJTS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0+JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNBBAAm+C/A2TpP7RIfJS1OEEvo29uuehJIy7IDs+cCHLuFKw3hcV9\r\nWgfwQgDW17405irJEiKCe31HB/KSao54SwI3EmVv683KkgUitebUAArWYh16\r\ncCc7jI6ghSSnDZcL8nupQNkoh6BSzqTnftcY829s9CaTyyzxRkUOr9gB7fIm\r\nw8W8OzxqsmgkV43X53KZBzIujChtEUeh77gz20HXKQGLfkyKP9eLQ56TiM3Z\r\nZL7BQGI4886rLFuPRlEYEMYEU4cn2ueipcgF38Defg1d4HepI9tCth9+Z2Jl\r\nJDCd+V2dBrX42ZaNhYXsmbr/kYED7sMZN0vXQWXb4TP7TVSBoOsmGbFIG/pp\r\nsK/r1uBFIUpWBH1751fcH0QunBoF+pvnkyB6UO5wFV5Fp3VP2f4pf+jCUcWy\r\n0Vbw/I//G2/bugZgObkMkhvk1mkR9XoyzfIP6EdSTuceAaHW9csWGe/cH3XM\r\nMvx+Mq9HKz29411kLE3AoTcOUNsC3E5xN+OKPBB/VzboG95V9gfaRmvbUaC3\r\nTAvSFEOEbPewR69CVC6lUb4pqomrNL0vFpQU/f/xUt50zBWrLo4ThNge6t8A\r\n9vgTo4Lt6Y8ByPkFIQhQADT0ufraOH1XV8OyTqp86cWDGcScCBH3+6wx+J7t\r\nnjL2EUARh+gECGiyXTZdZ65me/KPWuj05uY=\r\n=3czr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/button":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/tokens":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/icon-button":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.92b2556cf.0_1666142088994_0.6170837927663921","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/snackbar","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cc804509a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc1b01927ed9acfecbd542e9ce8c0fd91e9abe46","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cc804509a.0.tgz","fileCount":42,"integrity":"sha512-7jwDvqxeGYmUWTVveW2LmmJTBTRqGjlQEbVKcvf8nbuR0ISas9/FuWQZtbFAGYY0VjgS8woCE9Pg9TFNZk0iVw==","signatures":[{"sig":"MEUCIDNS0GykQglVKz5i87f2wUJ6dRhDmVB6tSUCKnkJOpnSAiEAlWW87/JaU9MgfHGtBDJD9V/Y59FyqLFFhbG8eAofC9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1BpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcLA/+NpqB4fuYHQBWqebewFf1z8DCB8E5ViAHj2cnkWPmJzjaeUNw\r\nz1D7Wc1bUq1J0NbTN4UGThSlSL9eme51BTkjLWoSZhKmXgBZaU/kCbbG6UNX\r\nLWlNpWS0QClycUUkPWrGSoOujj2U98aOL4v3mzS6SLORUt0jvr2qs8Fqlk2z\r\nC/tOfo6rytt/XGBhcFBq+51d0Ac6XkR3Mvso4/s8XwgywLT/EufPhOHLNEEA\r\np7KuyKRfOXUmgYRQG6nfxDQPxCSOWHuvDf/E8iu/TtyX9Qkv5VDh5T4vXIM0\r\n8ZfFvi9n6MPmCgkkotRRlWf/DV7igzA+aD7yyQGSXyKhTyhZZc+u/IhBxJM6\r\nXDW49lUEM3yehfMDLa0cGGYN3oenJRPMHuo7ZMPfpdzBabRSsEDLPktLQchn\r\nNgW04XudzaD5YnS5Im62DzrnDISZ5SKHReev4a7QCOpf5/QdSuoxwl0gqQKH\r\nBJlyEvh5Q80rCLiY8ITkzHroaBPNumPsEPSxJP7QPn/qqeivyKUjYJ7OGzJP\r\nZd80KpmnaqKbq+bKoWyXI5jT+N3hUqK9eoidKvTg7gJXoQW+cL+pEuQ+lHoh\r\nt7sPG91Q2gAAH2lzKvi0Jfqna+9YEMTaL5RuMO8odfhxmHW9ms+mAXK/NC/i\r\nFJKHjfaICeGH/LbsdbL6JcuvT5O9shWr7uY=\r\n=gHCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/button":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/tokens":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/icon-button":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cc804509a.0_1666142313610_0.3607350846158497","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/snackbar","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.982bedae9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cccad2bbdb67af7a788fc3d46c039668145f442d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.982bedae9.0.tgz","fileCount":42,"integrity":"sha512-l7xNMOiPqNVmDLiAOYFcEFep87iC8yFt9nFgwZSiro3wHf/W583g4MVM63n7CgF4VFiHprBZWD4R3UvCClNDQA==","signatures":[{"sig":"MEYCIQDvO3n1DIF2kQq72y/rgeD9qR0S+GOa/8iLxIeeR7l+QAIhAJY2ardurBU0hUJNQyi4GZpBIKgTk2DHnemldtWzwXwP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1UeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpynA/7Bx5HdcHgyOAa1GEAHOhG/NvKCEXjJ31lO3/n/LWTUgsz1u/j\r\ndxki6lOUxEgDZ1t+LMxtMMBWU3cRDLXupl8fMfl2+4sDmzTUAZhHsT5pnvY0\r\nVACHuV6kRub4DelbSTrGlOKIO2XIk5vMgdNRhSy9I+RSriLvHNbsqIv4kxK1\r\n1hiMh1vrvUjGr/Sdk7btxz3QeXuX4MQsTzxBSBGVUnnxKB41LfjFVgp5xslP\r\nrtbxTFqpuy/PSi0BGN99E+F/7aKC4/v8/EjwhSfWoIrtSie7gbyFr8uKVKkW\r\nQ3afPxA65Q5afO5eSR9ELcXbVEM/bFJUlOzEgOLFT45q2kYlbUPfd9NqSOMJ\r\nUTSVTpy8f54WzfH6tMAokmuqYoL3rjkplcgWdSzQpUF0l23pZxCb1KH8buD3\r\nW7ikReIgrNtrxgdAqgiu5TSzEIlomqhUvHKku5o51wuFEMY7DNvxhSZnz9Zo\r\nQWQ2zvPYC8GncpuU6YCFrQC5pido9oOj5U1oNFia/ztdn/eMalUfeLKV1z6P\r\nwQPV/lyi0oWYq8Y4qF7L0+q5n5VLgV3ryj873jmpLnG8MukE0r6Jq+qcV1Tb\r\nuHEvH8/x55QQlw27RRm/WN2EAbpJo81mlGweLmoP+a/KqZlA1JKUnWSnwPnP\r\nYUuvmzgUY3x5zkdmXgzuypzgSwsRRVU8IRw=\r\n=8s1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/button":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/tokens":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/icon-button":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.982bedae9.0_1666143517888_0.606101346518362","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/snackbar","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71e5572f6f912795ddd74d191aa77e1e30c3a414","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ee40081f4.0.tgz","fileCount":42,"integrity":"sha512-Bx14DwerwM/CrzgTTvIEdyfSgGLR0YW0dmcgl2CY/3ETeNw2bz3oiVI1PFiR2BVf89NTMgWZzZsnKyHxTFtkVA==","signatures":[{"sig":"MEUCIQDktjSuiknSV6H96M8LbTsjgLx8M0Y6nrKNxjH7cabxDQIgJL2J+Zom50NxC2+45W8/VMWi1SwaK/GkhT5TaqSnbtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFpfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/EhAAjHqBZ4EO6SLxdn5X3/QArkrVxxWDSpWvr9nam2RrD36r0AbV\r\nALtHQ900f5bwzRI3xbgrXUK/mdTzb/7vmfwO2K6TO4XEDTqVcYVPYMIoX7Hi\r\nTHs9iSNssEQyI8MPACeiRguM7Ofm6quffdmZRs/sLqDoteWeOQOSU6+E0DHU\r\nBe0jSG6DaFe25Gv7Jr1qERaI+Ux4XaeGqwNHwhNXX6qlf+KxdWcfrGXIhv+L\r\nEcRBUdOqaY488CXZvrPiAoR5npsIlzdwGVOVZSBY+5l+D6Ey0xVpFpZ09U35\r\nlWz17GqtnU32A36HO/Ixw2h+VwvHucS+iO01Tkmbg4W7onobNFGWRJ30V4fd\r\nVEzKIb8eti6kHO4r0sWXWctzU89AANVtCtAVDQqmS6EjNZ4uql1mOVDA73oz\r\n/EcQSUNXgmLa00lhzccIH9I7Ddx+lCsk5vFPd9JSjYcdAuOVkLdKvlE8f7Rk\r\nk1zkesYRfBGjETGTkZ8IKwgD1bVaUHIlqyKO4st27EZ0LrSHbycGd3P4PEPV\r\nKz4wZ9lcY4RrW0SeIrLi/aDx7fThz2KJgUEWwH0fkvLIqTzE+8mqMyy48kMi\r\nMiJ9Jg7v8X4G2UmN2TyeF5U15cdl/t6QQRNm42/Oh+yzmDOSayhJXSqx34ge\r\nTwR7vHI7Xgy3pdTeQps7VbDPGLSO7G9z2vg=\r\n=z5EM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/button":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/tokens":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/icon-button":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ee40081f4.0_1666210399510_0.5137153521614708","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/snackbar","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff015737e291cc97dd853370f1ae1a067395613","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.98f1b54e2.0.tgz","fileCount":42,"integrity":"sha512-5FpkWTPF2prwKIkliUA0hx9fMw/Jn/XjbwOq1bXLriR2pzjAtIDEBYCoVuF7nDevoXYeXEHkqwsAW+dr7cZ2bw==","signatures":[{"sig":"MEQCIB2gMhjKz5O5JjYxkrLT5O3C+PvtW+4NcYLCdgSCD2YZAiAGD1lM3LLPF3L9b8tvBUJRmmgPcpEoFxw133DWFBE8LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdKBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIGw//QBpeOWsLTn/k92xdcyzWnBqgsGuq5ZN7eEhnlSAr4gx+PqDT\r\nGe6vn2SW6W/p76Xh2F+iirYrHENwbLE30iKlcnu5yFsBuKRsQdo5EfsvaaNR\r\nN26Mp2Udxsufu2QQVSRfzXOb6YwFr3reON7ez6B8Xam2mleITVtWcTco+WfV\r\nGCf39t8YNa6xpL9NecOP0k7q0Ro0ZmnuNRrtjo7Ahg2vn0DQkQSlMijLcFbh\r\nvxBzfq8T0sTBK/gjrVj9paW5LmgClfT+p7l2jggbpXTdoh7vD5gxRKepc0wn\r\ndTUc7RStkntcSNZqXmYysAEbL18lzB68UFggSQbf0Idl6Cj3tfaHh65zqNDV\r\nX73Ph3zH7uhhUvfWn+0PJaE7UZCezlM3uS0Xvq+JtXkjBqZXAs0vd+9WMWB6\r\njA6ElESSGEJem0kYdMSRgLyoNOxNLsrxjYBGQXcCW5Kr610VOdvzFA+0/NE7\r\nAFq8QpsgdsH+56kSbqZ0m4igya3Mu1O+cG6Z9N3DLKE2ifx1OKIAHIX4Tt6V\r\nF4e95T/SdoqE1QbovGCd22wYpyGG2+ZCeRHXZgubhLIJN4mDZ91DokKzTITC\r\nUTWSqaGI4/QRa+h/SYR5hS3rB1Zkq4X64IG3XUm3yTkeNNZALsQKg51mu9hd\r\nTuAyrPwDuOvhR3XyXnJB36MzZkktYgJ5NG4=\r\n=MbCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/button":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/tokens":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/icon-button":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.98f1b54e2.0_1666306689516_0.10834256839687284","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/snackbar","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e4c23f6c46180ff87fd9c296e932095d971cca","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":42,"integrity":"sha512-LYKozrf5PmtNbtZFKBSR82UwPQIQcWp/nu2aUpZcqK2Qxdrl5293suoJOG4v42mwssK0UbiEJo3hZDJJpB5diw==","signatures":[{"sig":"MEQCIHV7ul/Ja2Xo48iHaPXw9Ql+Uwd0spvAD+8VPnjVYHN+AiAw/kPKwbqGI/0dDtxUf/ybhxqNhM15CIVmoBr5kOYm1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtHAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos+A//baHvVS5iTb3NOlfWbjtu11eUYudVaSLFu1PpmPMx6zPUqSsr\r\noUbbaul/xf9UcCBb5Cqn1fZwlPJVlLdWXUKGt+f5TEPjB8R8dyWxQKDNqLmn\r\ny80R1CtqBiezlh7cFRhV/stvpHYBa0NwJLeqbfOKf7Ge9+NIgIZfBIWywV9B\r\nUmMFbvnaHudaOtk86MWz54fpjqCBh2LGr8M46LVWzfXntHnv6/Jx3oXQIW2p\r\nKldT3+MAB9xkjsyLSmP0NHY+5F1iNGBb/nITiYy+6WNzw3Ud/9Zj08D1QPRn\r\nQEiIQZZX/fJBEoVSBwCsnciUAq6ggjKTMJ1TWZk/3JtKkzBiC3ELN3eMUD06\r\nGAH960bZHBj9NjyW+AVzvk4tD3JD3xIhIa4amzyV1Cur/7VKRpEliq8ekPg9\r\nFiO/gLtcVkPzxNkd3Mt8L8KUCjbVOaOefcVPXs9a6ZiHh3aCBqft+Krp7eUv\r\njDVRsrxpQdMkTDYXdYAIH9A6fhwyiVHMQfGRzFk5sZDL5dlyDD4bdPr1bQdP\r\nqdaWzJnzkntKyB8pjyr32Sjqf8sKWezmzHgELv0xWrmvPdwwsSc+7ZX2Q61t\r\njVKq0MbrurdKkq08xwA+MgzxXAsbgiem2J6CKIhuJsBJpJDc3ZZjcLAois2p\r\nxqDmq6rC573ZOL1ZknYnxio0t4mOFKstL8s=\r\n=INyh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/button":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/tokens":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/icon-button":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e74b7ba7e.0_1666372032576_0.7654518468393503","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/snackbar","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72a58ffd56caad09c94dbbbbed4e5e80c89b760","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ab55c07d2.0.tgz","fileCount":42,"integrity":"sha512-VJNKASHlB01jYIjBkzhCl7xYvXypz5FLxceVHdStT+gy7AOCGSBlR8US+PWJC9IDz0JwEHvAjRzg8MRwOLAl1w==","signatures":[{"sig":"MEUCIQDx5qVOTBfyrkOL+zN1kxnu76NW/1yUHsAljRAP7whLbAIgDlRXrnwhvyBdGianaWzI8FB35WwwWyXlhAlYDmxORZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDRxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpboQ/+Jk1RaDRiQ06zZSZ5mGJhzQP8hOdyYlPAlsyfZAIiHspXRgXe\r\n/ZZPPjVH/JvwmjqGNt9XF9By2Vmryfh/p6dJTNUHQxoU6rK4KdNyLSXI9tGA\r\nlE6p+d/Bbd8rMp/nnCfIUMUbH0XLWKVGjVdw0n1vdKI7Sf4gFx8lFDQo0RGX\r\n18rhOSYcmQZWZpLzUC/V/A/fOoy5bx5siDjGhWRgsT4dfcMCbbdrbxPXD2Cg\r\nnRt7+lLJ0i89dzuHp6kVjK7FSE60hmIPxLasv67FDXVUgc4Z4UxQ7UWoc6T9\r\ntXNspJyKZOql25fdSTrFM1An/oOwZOiLL04TeLIVWDGNyqKn6EuqefEuyoMa\r\nMcZBNoHEQoNi52GB+6+TacBeqLR8A37buZbVLVPUoS/DLkK07gDFTY4nrmvH\r\n3afvYpBCl3A+tlzpDooFPel0u0qSr2gY8uK4/HJO05v5+/LDIAILQEP5cpJg\r\nFS8MwcLA72JlMJEV9qeg1FLOWqJza3Sri6pAGV4wmtw8kBq/bkBoEE3Zg3YT\r\nOOqX5/jX+u9hMKXDzDHK5VRvLJj8+J0TUOEK0MJfNESD5tXvcviDnmUK+8Jy\r\natFYNoMuc6cV2HbskDo4A80EAxRFIGt2NvJEyAdFowi+9hq17cATCxUO8YQf\r\n7DM7mFW7ec/DCCYIGW7B4FnF+3TFh8b4iGs=\r\n=zBxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/button":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/tokens":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/icon-button":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ab55c07d2.0_1666462833212_0.6167403592403793","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/snackbar","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.fc539db34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a3f585d45cc626483ce1f6d77a0aeb0d79bfbd4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.fc539db34.0.tgz","fileCount":42,"integrity":"sha512-9ZQ1OWkLJJ50b2IOSA6T6r44JR9xhfW9zqwt5VzrcmS4QBrMQBVBFkVP47wmMC1qqo3LpCIReBz5bFuHUse5hg==","signatures":[{"sig":"MEQCIHzr7ekswggTRWgiy6UGjAzH9p8towTHlcqkET/iD/lcAiARVbT6qwlwYy2isNUf+nBNssCnOMstozefkcb6V8KoMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuDWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/SA/8CF74SPaG9cd0y8I0qVcPXYoMjIf7aJdaKEVz+V3PUgPPYHsx\r\nzpdhOVPQzcleeJx67/KZT7Ty5X+1yWWFikx9LhSuClqiD07INKWElnBaAtJa\r\n2inQ6xg2Zj8FqMAXyheAwg6EbhtvwLqNWu9SFhNj5BXycg6M6F8jfCwt/zeE\r\nkIUC8Jwgkvrg/pXZ/9DQBE++01eR0proBVJ8jLBYI3e8U8D+mYS3OKAwNBmQ\r\nQsR+NLFBqglluQ+mFALKiL0Yu8XO/0sn72/XJiS4bVSBujWPTTh3un1Gd/sP\r\nFL0T9epWZruwnklZkBZgwoztQfGfpRB2QTxO/7S02j1bgmrxfAA7zyOsPkUk\r\n1mf7UxdbM8dHZG/Jn71pnCVi93hWECGd5dZH6pOoCaIHl5P67bg2SacYheBk\r\nMi8vnpo5/nKqazAugg7V+pk4GcZfky1Lq4m7z++txLq7qtVhTLSUZSUCjUq0\r\nLGcP0pfEvh2TJoRrtNaeWT/mfe5fOzGIrQ0Yqs1/CHVuAX90AvmParvcO+53\r\nITMxnyZIeVMCFbHyT2EKD2k+jhWrBlhOdQy7kG9TKM0bwrXlcnydH3mIyiT6\r\nkA76fUQBl8lan4ONlvYIR0oAXbAWoqHSciow51RFrdLoZjLzBfGbykriMaIx\r\ndlzeswOb0NvjQ6cmlAiAAidmQMvuI1xQXS8=\r\n=KRpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/button":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/tokens":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/icon-button":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.fc539db34.0_1666638038348_0.12461534910326688","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/snackbar","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b6305a7bc05bfec97294c524c2d1cd7ec8c6778","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e340b04c5.0.tgz","fileCount":42,"integrity":"sha512-Nti6cbVvOQlCg3DBM+TDLyly7zLsdvltsUc6Fwc5GUNi/IfCMAyuodTk9uNkB3hk5CwQcTpTP2mZdJfqf9IBwA==","signatures":[{"sig":"MEUCIQCCkCbrKB5NKZzHctF+a1CVb2RPzdqUB70sEBoSZEeWPwIgaQnTD6omhh72lKQOuEuMGKkBrGS+Oy2cWv4F3bugXrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHVUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3uw/8CYlcftFYcEnm1Zk7ErmQl04tu5IcJ0K+uqJA1w+XCeBDPbsY\r\n9eHlstSnh0RMkfyPJzHwt09cxd8Uz+44njQRI6Lpmkhit26v2u0vTmoE8WEw\r\njpKSny8ucoEXuP+jduZw5jdy3M2xUBzb8/GRGX4Tcml/yYak8egPoiXYJ9KQ\r\necTrnQGR5HqjTTjeF0PMbJn25uizUDjasXp2nwJVrZdOZBjH+72we5n9I7rZ\r\nLKQGHS3YxWENTTOB0jzBmM6QkZ+HwsGR6jZiSQYKHN8zoich4OhfH3nWOqcJ\r\nlKkM6j0m+QdqZRUXDVkL55jLRYw+OSR1WD/XNNCYL5NBdVtM42J6SpkOVY8H\r\nA3NF9bo71LH/XZwV8xa4ZeXA5NoUYCrWNJP4qpNuEvy01EwyjYoHraYbSfVV\r\n5os/UlfTbVaL2EwENb2d1s/x+Q2nT9/GJtzsPpE2jMk4velfUzNiAWuEQB0e\r\n9SirjGikqjXcTkWzoQAOsr4g+B7OmhD/+DNcfNtOOxQPaJx8U882sxs5ks1S\r\nPRSQ1R1yizcEWq8KmOSOg5u7Rp3rUPHh4+/Ze+WnZCtsXVoi3lBYr5V8JbI/\r\nHzENKD9NiQljqNXlQL8mHG4kHeVDx0+3UHdGB5y3kxnORRViQezniEB2UUma\r\nxclCHSN2LhaDaj164E5vc9sWOErEJkcqbgM=\r\n=FXnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/button":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/tokens":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/icon-button":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e340b04c5.0_1666741588435_0.9449579696091521","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/snackbar","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49fbe5dc3b41b5b29b25e6df803d817d4355c403","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":42,"integrity":"sha512-JzlFLBna2AqXZWvfEB2dKW+bdKmqfnbnOQPykXDeuYC6fY51sjOX05iXEXEsiMM89SGVK9+tjAFwU44dUIsbDA==","signatures":[{"sig":"MEYCIQDo+aobESxq3kptrn88vCdpErRtGrFFld52zg7e+8tI/wIhAOYjC4DXj6L3cVYFEhgkI/Q7AdYO5bjK1Zl2KOFK8r2I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW8WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwgBAAkTxUTqVCTd2I91vxaCefw0D0L5uuIhrw51HD7qcXBeEaYjT7\r\nlTEqONSZIYI7CVk0p60/OAfoMkW3EdDALWL0/886D5XIFOsk2kchf4CiLofi\r\n42sOlDg32rxNEbd+a+KC6C7mrJ5hsQUtCEzaBHGq9xZmEU0/BgD2meefeNIg\r\nRd3/VW3x8i0wIGRtRWqQ2RjDF4LsnPZ77ShIQuZBd8ts+xJjQX137qkNh85k\r\nwHqYJGiXT0NCuNEZwc5kjYJbOWov4n3lVRFNeLIjgb4Cqfv8f5DB2Uw8oqIX\r\nsYgsAp5zODODoIEGLjKTd9a0yazeoYnv8S5JkRCDJq6z6XwasqCcpFWrvY58\r\nbnikTG4vGaif0EvRtE2KB3T3azUT+LF9sTSY5BNvolo7ucicz/jCN7TZb4BH\r\ndhRWTtTK4aUVmoCmLRq7h/8Ts0G+HQz6i1/rVT3M7VvFIvlD8J/2eF1uVu4z\r\npZ77yS7HHDpZqy0+slT2p05Ldz1ZDkVrt6nC6TXwqzgN5o0IqI+5NiyTSd4S\r\nnT9rPil6sQqJQQAqPPqlOhNWTaLv0H93kFNQ7/ztXqYNmOCGGGXeMmyjnTNz\r\no1U53bPxMiAP0qsjr+q5N3apKGrE+xvTuTwqvn7kVkkv5ATKy4t1QCAF+rXM\r\nfOOSAp0nr76f5c8qB0S1xy97LRa7Df4QZ20=\r\n=YyFy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/button":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/tokens":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/icon-button":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2c1a8f8fd.0_1666805526046_0.26725242982386543","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/snackbar","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27ea1587db28ad5811963561f542bb9887613881","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ecfee946f.0.tgz","fileCount":42,"integrity":"sha512-AllQg4iAkoCryVW9NzTK5dgyftC6po/D3ZK08IqOXxCTjw/cGE7WpXoXRDleECer9DVqQ4IK7cGsTUQrT18trw==","signatures":[{"sig":"MEYCIQClYBt8CsJbfBbmvWnmNj/SpFhpQXvKnbe8u5rDLafOVgIhAI5VNNcP20u05wukL3R4MFt9TK1dqnP4+qCU5Dn7w94n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZWyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo/A//e+HgXT62Kh4wYih2B4N1viecRiJ6kacpkO/gfFuKt0NXNCjQ\r\n6c1M4XcmrM/l6iChLo7LPVFUsP2OEBIXfu23bd518GzPtO681/Lclw1jo9P3\r\nYhX77cgKocG4/j1Loinx36DYFZ5yWzpogE+1e5k8j0dFBYpuUW7EwsmYAr2t\r\nnmb6uAETQ3l7ScY2jqJWDJEESwPYafqDok+XBuXvGCRqLHuibe+0a729irNT\r\no+eBpmHxrYfllR3c4LbSsz4Kwf9AmybyzZRuOtaUCC0IiRlMVqvBstqXYEsN\r\nmZnhpcqxFA/FDh0xn4GTWtaxrMRyu31eurimvtV/eugAFlUzaOaFOZsx8m0D\r\noqTMZrSFIlJzosYT6RBXbujJzXkhzyvJJvPrKr+91p2ShK1uxAlCIvhZmldS\r\n+tsLTv3wQkqI58SYfuyz8hrf0Jqt5aCaLYIrLnaatBNOKVozG2SPe71TifGI\r\nsrVBW0hMTw5h7z5sfKprRXidmN4uNCKzKfQXJikZobi5Wiyvtq7/o3cgX0Aw\r\nTwdTI6FP10s1AG5hNWIpu4Ny3ebpPy8dUaOrrT41/v006b7GOzuD4Axehute\r\n4/gNMxukcaeQZq9/k2gr7Fueq4sYKOS2oe97fzts4BUyPxHl30+sITVWvT29\r\nJsDT/J51bKLfZKmMgYV4NYf7fhVGX/F+KhI=\r\n=o6Xs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/button":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/tokens":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/icon-button":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ecfee946f.0_1666815410180_0.7751012468767231","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/snackbar","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87519ebd89e34ae4ea08482a0b5dfed2ba35eb23","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":42,"integrity":"sha512-+80n3eDLUZVx61U2seny9+6OzqewOyqd333Dupchn3xe4jYsNnFK34ZpbR7O5DC6mzIpmnSHCz22sf6dN5UCcg==","signatures":[{"sig":"MEYCIQCbmopk4YtTkKHeAoWL9Im+uNnnprjl+I0AeGJ05UNRNgIhAJYXa0IbETNcHbzO4xWSbEzLtZIZbwuI2XBaSM49Fw1Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAcDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozWBAAkMrz2YncJoL6DzU6HKoQbjrmHJTF3KT2bo5btV2p2cF6sOVR\r\ns3X+/YxTyGDJwtFngroMewQve09mLbbqmHFR6oq7mucavCmtjnIetUjVwNEl\r\nH4G7u9cTaJZWi6fOLnznZXCWbFxG/tNrtlZfx7UuOJDhbB4oqTYaH+4uT9A3\r\nTK+Uzz5N8S1lZ+e0EVObA/h61lvtdVXvATlWSJH9+3nneKj/vTtm6uwAl16P\r\nK8Kq07z15WiCIREblhFzjSH6wa045ajag/0Bg4RsJKhxVXskEmLdsQ0vw0PK\r\nrcoYTZ6b+XzmjWxTe4ImwRBNTl9q3aN1qsPvI2uSEeknTdG35OBwJ8+/AUKg\r\np49HNVVZijDnfvmqu2wUM0z4C6INiR2h3AUbLWISLwxmfMX7V2PTukfXqKLV\r\nwnWWz56zQwL8AojvyDfPxIdGYpOfzbaPxgwRHuwiThtD9/OnuLeBiD7hjS9j\r\nsUOkdDFpCe8nkshO2+lp9vzGY04UGoK0Btf0HNTDUdb/SGtJ9Znfy+MQGtL0\r\n2fe2ccjXwtt/Jl9ekV1hUcAJ+6pU7eTiTL+OajvLNopFOYkIiBQ1G1BU/s8K\r\nh0TM1zAgb/08msquqDV6zwnvCY/CkVs2QaDazE1BEfov1KLPmtRc30SSXNn+\r\ngdHyWW58mWgl6HcAM04wxREMYKJB/JRX7WA=\r\n=msx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/button":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/tokens":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/icon-button":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.73ca9dbb0.0_1667237635607_0.16608807273627568","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/snackbar","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfcc4b7a876030e593ab42c0a87a19206c9b15fa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.357f2e5f1.0.tgz","fileCount":42,"integrity":"sha512-VHVfl3wZ0J0dkcnb2J8B21SosPThxma6KIayQTy/VkaIjzdVtcANT8dwKExEWeD0XSohx1kIW8pM0oDenSpH1Q==","signatures":[{"sig":"MEQCICYODF5tSmcOLlUN5U7iq8/7f/wnVtgX2fXaSlUmme+1AiA46adgdg9gyCuNiK4It0Kx+LaX1vO4sc+F/HurG48UNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBkVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw4A/8CJBUQBIEE+6/IPrwLZXVMyXpOcHDaCgM0F5k4V5sKrY3+yDF\r\nXQxgXUxp3laMt8F9SCsauGnoCZoS7ae2VKZ/m6Ystafm8k1oC/Nv8DoWXb6E\r\ncZRtBas2h6OTl9UJh7SC5PfdLPxS35qCkB/Yo8edFTrDrGxiY7B++HuiuCJe\r\n5ahgbhV/MeOiVW4aK7KBORKm0TalS2ld7atqUJwmyL2hFA3r6/MOvLUq6IzD\r\n+Ubx96vbq1MPuyOTMUAlM5wfilNvyG5mK5HK4wTt0mzB0iD7HCukBhO9E5vz\r\nl/FxC7iS1Y8s6uMoWHBFb1wV1Z3yZAuX6MAWklHsiHXPva2CzMTSW29x1jpT\r\n+cDgoXVIAT3dintqqhatvvG7br5XwCRNk3bHi98j48jhnneG0QJUetRKI2TI\r\nHfY5Wibmo2Zh9ykMC6k7ht6hVyslt+2bRjFtzpQw/quZQIHmvjUv+DVVWswG\r\ncSpqsIyxIeimfzP9xWI/Ia3G6O2NtqecyM187DizUtyhWfSDCWOMH63gPfvM\r\nj870ETlrhZtCNAXLY5FZz7sm/I83znckJzA4kyfpyku7Fly2eJYOvDPcqSaY\r\nT94cR8mdyNkcmGTi3KAQ4et43LNcqhYgG/xt0be1CLHw5bN/SHqIVDNj5Rvp\r\n2rGUtpz0p3tHynwR15x9S1Qs8n8rUoPyrBc=\r\n=wEv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/button":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/tokens":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/icon-button":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.357f2e5f1.0_1667242260733_0.5538912626361201","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/snackbar","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39d7ad1ec97380696e8cf80f45272ebfb7be330e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.eb103d4b5.0.tgz","fileCount":42,"integrity":"sha512-9ZgQ+EIaR8upeTt/q1zl+dIPsifcdlKYSuM8zkVhke0p6lNY8h2/TmEHx1SmaEyxbFpfURGJbDSOwqLa7tYVog==","signatures":[{"sig":"MEYCIQCdt99tbqziICq72nxf+SHHubPFUwkGk40BO4IqyENOyQIhAP/4zabGlt69iRWnyZf7TeL2QBQ7hWS//PLHEkBQ9ezv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCjCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmph+w//YkzEBOFW0eNzWFnfCZ5aWb8PNUj8sKdKB5vjUir7amoDTh61\r\nI78pJRYPKKPxH9TAO2U8nvarSBHBCTg9EnIj48Il4K3dJWgkFFiQAKRFL0j/\r\nn7rZJn0V0eAoQqm2Su8pCUHiEAqp9Z8YISrAo8r4OQQ85liWoeLorHNvXonw\r\n5rHvqEW/VqufuuBj9NYPHeE1rNuvOIQkviSXpoSxR0uBnIZvfV5AiCr4mQ3S\r\nKvq7cFvvSLZQkp/TTr0ApQ3hjqu8km3LI9DRGglBeNOhrkanRFaTgIMT/hT1\r\nzQJJbOt8GtRAjBC2C2HGxmsxhfMgbf+lJCSJh0I2/1EwZ0SCjc8ueeF15DjO\r\ngJ99fOY7y7Z8grcJJNLSmOngyWVPyAr0YpPRTkUVPlwFYE54mrCH296ysv7S\r\nv9D92uol1mkgAaoQIUIgHOCPm/3PjinhVgpkPrVbtJZJATUSwlZf8cLtatTL\r\nDidP7Bj9gCpSrn6w7+EU8MZCAXc0Kge3HewcD+ITVMxbZNvXdrjGSJCQJHuP\r\niyhT2avRtrPKPRPCDwYJG7aoA7anTMVWM1+tqnZXnFDjyzS57wrpvbnuwip8\r\nMJmP8lnKmerQ5+fPRadQ4dasXHL62Ap8olNY3NKj+I7XUVfwOhG8mSAljOe7\r\ntAMH0xyoJpP5H3Grz4ICzvVx0vHpfPTEimk=\r\n=DfOD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/button":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/tokens":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/icon-button":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.eb103d4b5.0_1667246274672_0.5766488454064185","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/snackbar","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.af5f01223.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b81a23cde89d342bf44d61408daa2ef97febd277","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.af5f01223.0.tgz","fileCount":42,"integrity":"sha512-vOqMJYTzuz1JUD0JSrG9Vl2UuZwNhsV8bcsgD2SNcoNmT9kgqAnZczEYMzx4gJwByanXGIZLTPKcNXOu2XZHfA==","signatures":[{"sig":"MEUCIGcyH/2mkaBixJ+HElkbyMaBpuOM9rHp6Ja1/RvmhpwIAiEAqvBa51ZB983375ZttbIA3Lu1iykK/mOnRDNyYgA7S1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWeaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8rRAAoJxM4IHVVSEDBwAtqlkw6F3A8APHzFXDjOmAiwTllwT3viYe\r\nm7ogf7bALHbXgwOU5vWtcOTltwsqf8ZbKhYPPJGs7O86B7K7e+nv6t4a7cbD\r\nAGAyyqEDk9Qjlt2iHpJRSYuOOJ0CGYD39sOhuyWgJnmIGsWFyvO9IIUwpW9X\r\nEz65mU8rYJVoXChoNX4SGJnVBbShKVrgPaisLBL/1tQg2YuGf0qfwyz8TieF\r\nslxL3nv9ANslKNBMOnBakaRh3rSCx7xOpa3tlCdQIr8oatP/b8P6UtHsLO4P\r\n1ADINPBYyZLh/0+sQcnQ726wjhTHHEIBQls1hRTz22x/7gjrGJ/gCJWotUYz\r\nX4TdNrPERRtQjhZkFW5MnDBftHZLMdNaygDaCBdciVQYPSiRqyq0bDJkdGMZ\r\nk/C9Xe0anI7y8t5dKUdeu1ZiSCyb7iV9b6Aja4EfNiKkPMynqtD4ITpX8Yrf\r\njn5ZWUvlw4tsSkHORnyLD77FmvvipLExMbXg+zbEylGU1qAV5xnXZjloN3Zj\r\nrLUCi30x7owXdndzb9RFl+YlyixpHb9LUbADZtdkSk/NgJ60uj0wTa6Sjtf4\r\nxB0bacE2TKuUk3SIhkQj7h2mPdqnS11BefBjwKcbPjhieXnEXYBYP2d8+HfS\r\n7KYGi4O4bIASukt2/8ueIke9JqqnSVLBxSg=\r\n=NYiQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/button":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/tokens":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/icon-button":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.af5f01223.0_1667327897877_0.9911828361028889","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/snackbar","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.58733ef41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b297032ebcbc74548e8763337c7c99bc2d76ac3b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.58733ef41.0.tgz","fileCount":42,"integrity":"sha512-5RWI8HclufzEhKpQF07evGa/UJRwhWzi40tTcoYYte9gAAVbep03pBEBRM93MtZ6q9O4UwdrSWBRQShf4likAQ==","signatures":[{"sig":"MEYCIQCH8DYwOGXOKeT1q3VL42FGsiFHmSLEBVQ1+2QtECzGvAIhAKRDcNLnXHyFvbuAg/t/xLNK8o6smcfZfREi16kAKUx6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrL7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/wA//cHhIVOaOIcWLtGij/y2vObWHn2wg0LXsJyqLe39IHNCcWZeJ\r\nREYlgPmL1qAVXE0PFzgjJfH39o07IzKNVwBS/Yt5Cgd1VgRXQtZq1oUWO/+D\r\nf8snMqG/ZdRy8xdEgtFGaFjLS4Zj0XHBMYiUnX4ELT+4mJ0lfKMqiUY1sEtm\r\ndo+PYKkAThykiH0bzlfaIuwapcQxqIe21R4OxTO9GkfaPUl5syiPlpk8ReNB\r\n47vHGcRKyDCQgHaNU6Sjz+M33L8EmiJnn7er+8VzQFI4ZVOZINSBD2iXKMFQ\r\n8z4WoPtFZNOn0kis3YNr3RR+N182KPduJ0fSm+xmPj1y+ERGbVHQCjQNQ8uT\r\nlCHLXj97VTmg15m5LN7RA0N1KzudAMq3QohwZyTE+82e0FCKNM5I9TyAyB2m\r\nXNL3bugjXhBW+wrIVNa+n51MpJm9qbDNHBdoz6FxlBWVNKqU6Of8jcrivgTP\r\nvCdJ0z0sFxPtiJ+MclhGAIsYRHmIza26DYGOmZFnnkY+IJU+7eKySuVIVKYf\r\nrTIgJlNd+wgvI47orbGQcNys46cv8nzHdwDq1zSISwWpyYtRwIVSiWi7b5/K\r\ne03igiHEpQ77wTboI7dGocS74Esiv2jNLiZfP11h+qYsIUWzGXs0WggXUc/j\r\n5BRCecQ/QW59I+iMN4EAfytLPYdUEw1Laak=\r\n=MZz8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/button":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/tokens":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/icon-button":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.58733ef41.0_1667412731619_0.7039028892773382","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/snackbar","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.909b48215.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0965957ca61d43b2b9aaa16283c1f0f79c75d6c7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.909b48215.0.tgz","fileCount":42,"integrity":"sha512-CKyJjbJyqP2tFP/PaxDwXraX0BpBSb8TeUgEgYbgn4U23W4Kw0G+fEZB7JuAKS3thBI448KqXPW1yf7URivPog==","signatures":[{"sig":"MEQCICJp6hX+RyhzdOtbWdyFwHsncmsoonbKhIy+SRJaecOqAiAEbQhXClH2mXlzw4LoZaW5ToaVlraxYCF2Iyv6yOBbiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz70ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmuBAAmMm+x1ig64JSoDUzBCd+5m+FWLQxZQ+0OjXIKSUAuVlABS2I\r\n2lQw7q7qi2Sx1jMA6P+WEnYIYZRjpYMo7zCO2r6qpEemGRn10spU7Omlsv0F\r\ns4kr5eNsZLIGKKAGzAx0lBWaRzI7YHUYCyfCZgwCm3ud/raYC6ppESTWqXI+\r\npDJJ3ylBP+AAQpxK+8kr3dN/dGMwLFuA8RH00rwVqULPaD1a6uKLpZXQVExr\r\nXD3EVtwCiIf5GlhZ6dCWyWSp5f/Gqg3dUEXDBD3QFGWrE21reTJZnVqEaoLo\r\n8VxA2rDfpY4i42yIt3wbbcoBeGGrZHGPwZF0SnWYsbg58w+F/YR61Myj5U6W\r\n/sXju8ZGYStkw0szM8ner0CjXDDcXYjy8KL+7oGP9HjqkEc1ZhuPnOcawkxM\r\nDwKNnZl6XpfSR2hwy/wUZ5iGK1tO4h5yJCjEOEMBjUMmCrCFoD8v6kM4PrGh\r\n/B4Eib4Zm5vDNY5+a5y+cUSBWyvA+Xxuc7DC1Ty5qAgfOgxPN4/wyqpq/S/2\r\nIWCCCwnSv+jI0Mtfht+kMULtOkp1t6tzyBUpXmyP74XmELCO741kq3mzDl6p\r\nmDVsN5s9I+v+zATK0xfyMOI9Enb9TtQxnuxi7ARZWJghR/8Wb17SmYevhRd7\r\nAVvftA8f6WtOm5y11CIaTJQkOZIMFiRU9vE=\r\n=wqU+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/button":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/tokens":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/icon-button":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.909b48215.0_1667448564158_0.06739970201802592","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/snackbar","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d06b2bebbca3f8a8890d0655af6584551a297a06","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7f17127d5.0.tgz","fileCount":42,"integrity":"sha512-/k5bJyNUqy7iy79CqCLEpwg/uyv2hc5SYTXlpXSwdRmGj1eFeA07Wbl9TMQyfuGJ6F5DOzHB3Q5ucA09nTMY+Q==","signatures":[{"sig":"MEYCIQDi9jQhnHW3z6CpPT8Z7eaX2ZBN7Bc8/DeDWzOL7q4JjgIhAPO0SMmoZpjzFsKGnlhHAxopx7ed/Ef3MuwyUHBZO7Qj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAZ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/lw//W9gKR8vGzEjq0YaYj5t72DL67xQ6QT3kzbtisdSHU78fJQV+\r\n5i6wdzLxFArAPByxGEjIH3vJTRC6+a1tU3RFO/WJI8MdYknch4If3Hx8JD2V\r\nMByVWeQCKuY031mtzS5k4WdwKbAIs9ZvBLOD8ySv49UMuD+08+zK79im/FPG\r\nPAUPphXc6wTyGOpulHx7/dLQmOIPpjb0diwfvpF9HtoaEFpjWzkJRGpfve0J\r\n/HdWvQ9ZdsWQ3SbbV41Jnac2MJyIfqamZRtzu1R9Da/TuI5M39xMjiqY1HgX\r\nLh7zzfzH6UnY9LeGVOGsHlGX4l+UQdTBFv6t51Cp+EpzUFTSsMzVqB95PQqJ\r\nU3kJ7n+88p+sA/YUAnf/HRdQKUCd/FGCBonWAIDHmQm2j4enUxZ7KDepNYul\r\nt3WpFZt7EH1Ra50RdPJ/kJwEU5THmnO7jElazYEXhtashvuLDyokYLGPjvu4\r\nCuaBAl4iz4AEEFH4QMZJR8l6/p/CX2g4R7Dulfwqz6rranpP9ZPSUC9QMDe2\r\nlU54ner5IXDBaNRYTGgcFD5oEDT4ZIR6TfiAn5FxG5aozY3l3h7oBrS07Sg0\r\nO46vUSkQgjOkv/Ir1kxuiwTxSN/V2/BryIIP8nrvA1106IX80V10EyvpHJ2p\r\n0gxZmeni2uR1ikUPq7IkNn2hNKq487AFTDI=\r\n=D1qR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/button":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/tokens":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/icon-button":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7f17127d5.0_1667499639382_0.8356381792836685","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/snackbar","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36ef633ab88e5abbfea93acf2f86ab152afc2c20","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.da95e2a05.0.tgz","fileCount":42,"integrity":"sha512-s1WEPRSvr2MLoZNOFYwfFu18NWlFE0LYxux9SAP0Jf9HF6m7FtmEvWO2x9IFrlB3ce7Q85cGezS0Z7nnZXDu9A==","signatures":[{"sig":"MEYCIQDR4wMgnXGdSQROzweYwEHRJrVWMcyVg8TlGb3Vx9GuxQIhANIoGoOc7Jqa/Tda0KuoP2Boe65V2qxnO40JW2D4yNAO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUUwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7dg//Q7WuDsaLAV7mJyT2743P8IQ7D3OrXMiE+BdqbEztLWY14rOj\r\n8UUEvBUBIShsHd/cU2RK1h+AjX4Fg2FInKkWkDI60vl5d1EArdd4tndoKl0H\r\nsMdRCkSyrX/HgxsegFkTupaS7nR7dUq6VHmRVQXWVAUK67/qbw/dJHA9DkvG\r\nNKFggzHiNy8epOVG11D3X22iu7734lRHbuwQZ+oh3dYZEhlyLtSDppPfS+I4\r\nE7+cMbMlzrpueiyReOcjkUlLSqXz/vX/x/qbtLj27sgTclTr4f1NGy4S+H1D\r\nfVfXZA9Y4YJjf+5IZBB1HQVbZ6nZp+w7dKgFV1SLf21mAUeKYBRZV+kW7kcD\r\nRYiaMVkrAOTDco7aygsuy6kluqmgFJwCDhKoZDTEc+Z7VPYydC1jemsU1Wzo\r\nqyU5gA2md/eY91tZH15b20Xod07QLpRwfP1dNTsNZ7HNAvLs+/UsjkEpwp+A\r\ner+iFfk9irCBAvxnLkfR44W1ZnzzmhfzVyxz/VhAANYEjBeacgKbydif5xol\r\ngIJeD0AAlJaoZZA9FYaAazdFXqz9cYQCItTTtYAYV6op8Sl41dXwHDXjn3vq\r\n0wBAfkWpbPGgYYvB3hSsWRwN5qslFTTVs2apjfeUZaORMXMWAaJ2ZwOCUG66\r\nwcLIEZcAuHgsQmoGDpCkO41Iks+t94lNcXA=\r\n=Bf5z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/button":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/tokens":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/icon-button":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.da95e2a05.0_1667581232176_0.4979832928958974","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/snackbar","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4832e2750.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19dcd979d69d99ed1127e490f180840a27df0833","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4832e2750.0.tgz","fileCount":42,"integrity":"sha512-T2oKwH+83tc5XvYr/E8dL3agV77EnbPJfFw4S0X09kfgaSGinG9PxYoyjrIuNIzZBhwN5dXsN8VdLCKr1HgAFA==","signatures":[{"sig":"MEUCIQClrBSNwTLgUqMvpNbvN+kvw/ah4ETb/Nlnv1k8/QK81gIgMIwASII6gO69nTQubza5bKNn5KCBffR/zV8PHq2pfu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXz4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoEw//drOtjbh5+1RABDtZXqakJ2lCl28yHmwtqRCwYg9r4sZ57ohe\r\ntrScDf4j/qmtQQYmcvt2mGVAidi8lQ5oTXqTJE9TZ0R/2os3WlcEupeTbJ4Q\r\nx/LBschq8rX58fieqosHGe575Ie8nF32mcXrQkHONsDL0+Ti9vjYKavnDI7E\r\nVf+RmYCdxnrh40UnmW9eIi3fYNvgXenEwWups/3Zif3wOjN7SomlVG1l/NeE\r\n8I+xKG+ZXGUAzHGzDtAg8961F/j4KGajFUW1ObKVcVCTkqUGySFdt9rFOPeo\r\n1OvPUnxgoc4DZf/VCORncdIlVFqsqMgnnBMWpwsOBhZabU8sZOjzix6FvnSh\r\nrNdXlgY6bexvQ+Sa9OTMHZIqLk8s0Q5SSPUwLhGSYpZmrX4TtevgXfGw+tr0\r\nwpFbTgFb6rSooxa/ZGXD9X3alSqtaSo835m9qpKOVnxngUgatplyWjF1xR0+\r\nD7yOJCb1F3AeBCzIlIOp25rKlnnZHR1Qb2w06q1uIOEMVnNX+wjDBy+xD2oZ\r\n6PO2zJpIWHL5l+2B+26mKMdTnKc5m2cHVQhPPQWjU+1w8Tjjt91vDuf8OBJC\r\nymtrcBVwMzpNXNnX7emzdV/cQ/UMzk/MV3KCScHxH2b8xkUmXtpmi3xswpIM\r\nw+tjJB6BXypyrNhdI4orbi6IuxqfuHtFvVc=\r\n=lrGK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/button":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/tokens":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/icon-button":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4832e2750.0_1667595511894_0.07662979680611448","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/snackbar","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.215506426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4944196d13c14e619c446b84aa3f2a2366aaf4cd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.215506426.0.tgz","fileCount":42,"integrity":"sha512-HmeUPgtBSH8c2A5Pflda7vzYoVyABebeKN0Qa2uPpGmbw9qWJgEyYMKeylWgVTBGTw4e24B8SZL2EEvkKMVXBw==","signatures":[{"sig":"MEUCIHODjQVp9OEQobl4h8Ecr8CToUECg9WuJ19Kdo5Cj41KAiEA3XSaCs9p09ToKybZKliIe4oioK0Apvc/mpwAu1+AAIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbdRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWWBAAn+p7ZEIRkr93Ep77W/B30EHEkGgMROQRtVOOOnF+rgc9SZmu\r\njdImElJN6lf9YWQWbv5urhAvoY3vuMk7NxWeip/vHn541oDCgKFLiWYh+Wl3\r\ntoXDPQ1SwqsshllUFLbluPra10B5PIdB7ubiNYMyZcvWWw6bSqY+4m547lMI\r\nu4Tcl/4g6Q2qFXM5T7m/TY2xOuvvMLjGuwc793pkWJuqf6it2l5bbsnLvtlC\r\ngDiLt6gQJNT4GVd4nMRt3Uv1f4d9PYelAr14f5P2ruCnOzeIP48pGkp1EKo5\r\nXDoJjUkh/c75nnMbw7ycqaqgMg7cMdNEpuIWsHCCFjKK4eYUJD5IBYaKKUjn\r\nWt/cBiI3ksaaLamSZ14M7gc+vfqiCCIRL49gKeUlubvCywuBZRmUN2JXaoTm\r\nskorYI/BxNdL+pxLh8ngHtiC6nyCOge4tGyenYg/tkze6GZHiQPMlEYzZ2Dg\r\n78Ec+7F/uv6zBDYS2y4l3IteMxdVXI4aX7i6rgh2ITOVKANNSl+oaPviw3bf\r\nwbkj22hCk8ytdW9m975Gy0BdXpG8v+asPeXHOhQ5Wzk1E3P/AXWs1+IaD/Dh\r\nTBom+aXajGK3NzcU59Fzt1n1YZi42TAAwsaZPpCJJiK6nHwwZ8Upuj2gHQU2\r\nMuyQpDVBf2b+NNwR2jCVSz7ThvB54Ntc7Nw=\r\n=IOG1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/button":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/tokens":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/icon-button":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.215506426.0_1667610449106_0.9038655420511321","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/snackbar","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4cf917476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"108a0a984bd1fbf1496e26901f2d715ad615002e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4cf917476.0.tgz","fileCount":42,"integrity":"sha512-YsZ00RfjemI1xM7cfRwQLjkpKeMu02BjmBk0kybidvpsRvbdltahHk1HqQgsDGpu9d4ZEGLVX3CnTQxpE+eoUQ==","signatures":[{"sig":"MEYCIQCbvFAyKJnXDG5Uj1rKJ8WKqWfTt8WMFzJVKgxOx04H8QIhAJbxkn5cb/poUBRtqIliK2kwKHz08l+et06B6xSIcJVg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqXtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofLA/+Nop3jSQHOnzfPUH8rNcq7akpl6AsDuP7+fTuiI3Ii7UQwe8k\r\ndTJe4+DR1GnmbqG+1tt7Jatl3cxLKiehomV6IDUSrecYMjrdkCo11oIl9rkX\r\nm8kKu5k4/jw6f/0oGweyulOYlqFLFuwAzlZxNX/d/NuYFuXH3f7xmrsvfoRb\r\nMeXP8PLYqHr7SWXTj2N7OzFl5BhPYD0aUR0X+NOAUc1paBZopsgo2LWAkz4l\r\nUS78+JHDe5ekJ9oKgsoo4pyggTqhAeb0hZo410/YI3CMeEEQxxWvUqxJOkrF\r\nxiX505orVH80DwYE0BhOWri4M9kMNSu8OYVmTGFgIf9ozChR8YqG4ylEma22\r\nJEvkYnS/nSBAzjIgxG7akyH2GmFOK+T3U2Q2+5os0Esb+0pTgX3P2Ti9HXtG\r\nu8uhSPbhFeYJSHlLVCpsBKiPGk3zG1VpPIMCeuNT5WanWL4a0U/tbkE/0k/4\r\nsC/W48ASgmmiiCzYwbt8qxf+Guz3GbpqjD+x6qYvv+HIrHFB078Mz9/eWNmD\r\nssj/fzC57OqKpbCI2aZ4ZiDO91adIQrNh9xTFD/zPhVKrUekcW0QvDh1nJ0R\r\n8xDKaWLj5zfFZ1fZrNek0OxgB1Fn/6xLw+7LtwjvK4l/I+KI/7oHGPT3zWb/\r\n1yT4llQn5CqlSX87SqwKFL3XM0ljb2np3P0=\r\n=NQcE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/button":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/tokens":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/icon-button":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4cf917476.0_1667671533008_0.33589796707556197","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/snackbar","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ace18a32f1aa902e23b6fc28c9c539cc2a6e0be","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.eef14bd32.0.tgz","fileCount":42,"integrity":"sha512-RkvQTXyl3XsdkyeaPGfODkxjdSz77uj99nqR7+KDLmPu9EHujQiZPcNuV3dUnSrLyMbDZPyl8YPZZCuoGMPgyg==","signatures":[{"sig":"MEQCICQwZoQhCuJ1V6D9pGOuHAzKA8wR7cc6qfCrfrW6Q2q1AiBjbc7LZb5hQ5WqW6t2ISBZUIFM4SACRPJqei7e0EcbZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+4nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfzBAAmLk8y2G5cvNqdxs1MJu8aU4UpcCjOURuvezXA4M0UCxcMtwm\r\nkkzFZ7sIeLKGewdCDRdApLFqHistWYHk3ZzD3jE3e4FyEqg4e8cztLDwr2TQ\r\nqNSOC+LEdH+BuInnVJ2wn+BKfBLZGA22p4Z5NmYgGM65fbjhA/8fbrSTWWcV\r\n9E7TV9R27hz/acInqkdPLBoTp8v1gSDONNglqa49Vbkpjp8TN7T/gsvnBdJs\r\n4TtwsG6Mxw1PsNMsk9+mEf/NjvN051wSTIcslG1RETm0mEe7N5zKiTTatUmy\r\nqjgXXc2tMeRqqV1mQlAYFctvdeYxF/9x96+3Awq/dy0hDunRL/90Qlm6cbbo\r\nYnslBhnge7OqQb6rZ+ht8qLXaMUz6+UKv7CFz+yGPayJE8JygMO1dQe4J/C7\r\nTHmg3EVhKl9ADg6Oi2JeE+HGlfhncEVfRAyrls8oAGOUQ3Tvjayzff1lU5kn\r\nI9iKspXu0SzK14g87m8MBAJp2Yusvl0jRxih75chOPH0ptmjwHKvjrFuJ8Q9\r\nrOjwCJCc2UqlLgCOirz1VimSo8NEjnWno1aHkoWzLIkymfKennmIMRqhK3GL\r\n4n+1eYQMNBHRUvEYRQdXT0/YniB5v+CEosC95JbZTX0DknRgZAKmebpCRPtC\r\njxl7iRgppa72D81ODd52Em+SeZhToJSto3A=\r\n=NxcV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/button":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/tokens":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/icon-button":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.eef14bd32.0_1667755559558_0.0969282371663096","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/snackbar","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b07e791d0185dcaf1e1a89d5f5d5e2fe0a549fa3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6faa29fe9.0.tgz","fileCount":42,"integrity":"sha512-EtwG9qR+q6eQk2jHiJP/sXWSNgP+UBGdwg2KdYI9NlP3zHq1rw6X+nW3bdJXQZJNgX422zCLXGd2tC0iHivnQA==","signatures":[{"sig":"MEUCIAemOq4XiY361XuBxjEQ58pw6KxxVNsxdIAMxCke9tUcAiEAtfx8YMOsWnXv0KjL49Dji6E9jg5yWh8PfsWGZbK2Vgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHgqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcVw/+PA1DrHQwsNyHEzQnxeCa7eXOsquUklkifqmTjrAadoDKBD7n\r\nzvd5g+e7ucfAEJHp35Q7C6hN02t7bJoyUf7ewa9PZ2KBj2Yn5puQjsEpxh7l\r\nxLDtJ+d+F5juosZ6ly3w1vonB5bSi0k9BitWIa2NAOK/K5OsyQlsk8asReHB\r\nZCWd5J4eNmAISVt5+lC+3TQe/YoZcEehxHqhhdQ74sQZU80h8PB9JdteZY6S\r\n+18seazH3cxbdcAzbY1bByubvRl3Ef+dEx6lEGzv2QdbnvtDaRj6X3ToCqk0\r\nH0nDWy4rKIPX8R78r8PppaqvtY75P7nTEeRa97rA8txfmcIARYSECOoFNnmQ\r\nS7Jm5jmf4wFg+KvNJZ1y0ZGIHNVVBYtvx77JvQhYHWSOXUmUamfW353cOiDi\r\nTqwZjZYp/nrbJipENZme3vwFcrwp83QxfY2EP/PqK/Bie2VCAq+dJ6gHY+vh\r\nnojj5HOCu/zIgw2yhz67NE49tuFMdKATjZ3x+WIa/G5MXlOI7qU+rBdXotpb\r\n9QviTIhbbOBlrtMSh1Lz5Nv+nQQGIA5Mn8L0/kndUfT436r7BuXfgkBg9Ar1\r\na9HNPGrdbnFPDUdyUWOJFqJYYzndFc/n40mB83HZwTmiQq55nSUf8wB9lDLD\r\nW1vBFYOnJn9zObN62zv1zamswIqOZ1EqE4Q=\r\n=oJOq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/button":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/tokens":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/icon-button":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6faa29fe9.0_1667790890179_0.6948624855182284","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/snackbar","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.9af09b967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d83e2d4a116f09eb4099c374b586e36ad795720f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.9af09b967.0.tgz","fileCount":42,"integrity":"sha512-h0FYWZ3lRi4zuVFQ+/wME/m3J/BdEBaed24S0mKxCiXzoZlwOE81slqTYjUzgbyVx+mam28q96ziF1sgr4ek4A==","signatures":[{"sig":"MEUCIGcXn89+jKkqkUuEuSPXXSqaVQN7mDemcUzc0qjM0QSbAiEAmsBnIJeF0RXG6Hd6KAd5H+pciWw8TK17tUKlVFQ6bcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU6AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6hw/6A4CjXd1F3K7SLo1iNUdybXRPukP+2kufPWiCCU5Y3v3p33+n\r\niNbQ5rR3IDbz6fGh3BAsIKfIssnasn3dtg/WAaltdnGnhAwWu1KvYAwoanSx\r\nM6j7bdXuJGrirPhCkshxFBh0UJakL/p/w74Q52xRTshWFujDPK7+XiA8DDto\r\n5NK22dVVIW5RmamEacMKRxh4kKyvQFpAc+oH5VYX/EVOuqoysyGfCDdtwSKQ\r\nP10vsscxcsjPTgbEavcCO+FAwwqyIBcx+ZYvd8W44WaB61MizEns3LgOhZE/\r\n60NYcHT1qODHVgvv9RCv0TX/ljheB78ZNoQFC/ns4clu06uHJm9IelbGA4B+\r\nlQxaV6sIx4BMlJ2EsIZi/9ht7yGFey/iy9Xze0C0CYEzPMJBkon4HJTcNfFE\r\n1/GTovHBSBF/2BqwoK5pdoNG+cSfO0D87UTzdx7eyFx6huTFHTge7f/USxd1\r\nNWT//tqP63BtCa0/7LNEOa70Y0fn1FnTBzNVAZh4iFkazPJUKWlBuSGucNTH\r\n8JcYPkeJ/sbXYlPv0tVAWvxclYqI0yNBRwGqqCLDKaYIMhxnEh76f9aJBM99\r\nn+IhyrIVKV099RSo5QyQTTkZKj4b1a8Vs5iMjTztTpKzexQg8sxnbz7cnsP0\r\nYxugFOjLL7AAaFfiNsuQmV+QPf/q0kcwY+I=\r\n=v3FR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/button":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/tokens":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/icon-button":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.9af09b967.0_1667845760693_0.8151337952832685","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/snackbar","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59eb3d1c16222b735aa3c97bd432ea349931caeb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0f54fbb93.0.tgz","fileCount":42,"integrity":"sha512-klmSEYZvF93lMP6aml1JvrnrYAu+TViswOpJRr30gPvO7rhSspu7wdjyUuZoN3zlraUOP/Vumw4C0upJFZcq/w==","signatures":[{"sig":"MEUCIQCRegvkwNP/4xvMWmc5TGjmmdDktu1tpWESw/kF7Z75+gIgNUjGF5jOZowSLOguSK7vM853QbDDyFzoESXHlNNG7Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatDnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZXQ/+L4qNCDEOJKbKcOZIUKrvFzQgWauONVT5c3gCU6EtO4XhuOd7\r\noKys/Vw68Kb8Taiz83+jNMO7hFFDPv4fO8CVJcMMV2z/NKCEKQIubpfPGIVU\r\nOfws8NyB3WrJU+5N1NRutM1BHx29KCkd8DWwGP/tbI4iu9YmIvj7hoNjTEnW\r\nS4hC5KCDfkJF3BmdXEadtR9F2+4z1F/USeP2w60nolSV7Z+jc81cley13KXN\r\njfJ4Ga7b4sLHL5N7HwJcqqHJf2J9KtkFmWsffa32x2VhG6kIuXsMu2R9svwc\r\n6SHj153ccnQbx+OFYTa9ZiwlSy0x/NEkXQC7hPRKXGqcjBSCzUjit1SdmEjh\r\nCoGvEOh9GRBDvCsR/9iu/ZNhob5CWJG4GAWOFAurx4LhqMsmGA0hlbRjHBNC\r\n+U9CFLKFJwktGb9KNGmCh4O+sYWAGQP+1I3dpTBEqyI6+6L/uiZaSnuQfouF\r\nkONOw9CjrdDYFjgPtSmTEa1I1D7mdLJit6c5nU/XcbHeQyN3Tfr0ENFyutqM\r\n0KUXLtscoowN/H3nnLEfF0V684Q2OhoW48UPmLLERPV8SwuXxbFCyjRsxdci\r\nSt5XbwL5XiNK9L7O+lVRVFKdEztHfDT7UywqqSUf67DccrxO7axNPEioBFa9\r\n15OtGk4BV3HNHrmLbWP66DoVZtmhIOQYMS0=\r\n=07Sp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/button":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/tokens":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/icon-button":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0f54fbb93.0_1667944678845_0.22920545305943896","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/snackbar","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc612c0f069db2e94bfab07d63403a016691faeb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":42,"integrity":"sha512-vdHTIlSWQMNEj5ODq2QZb0dkXnYy6yTnc6zkjVv98mpx5rpRhoa3dwkn7b0Mj054hzCDrsN2Ai/DX88XJJPjOA==","signatures":[{"sig":"MEUCIQCfI/XfyBGaQMS3TE977vBHyHUldeUopHGvnFNqxJcfogIgAc4NOx1iY3SN8JRCTOCmU+fIcAmbDvjxC9dBA8df3W8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaypWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3aQ//U5a2sdH52BNy9jRCGGiy95ilH6oCk6HFj1QZ9i8c4fyDIa/T\r\nDpnSvwpQP69LDAqf/yBsvRRdg8oCI0IVKQ/UTHtZCdeFP7GsA6UEu5RGpDDY\r\nYBg7JRwI/ikDr8161po9+qDGgz6NCeTb8AkSclMKtDSlP3DD3WwVY1x9p31j\r\nTdXpYzTL4B7pUXfjtzZz92dJYQhjjYvgIOU4NtuHb10RHV7rCrRvfyWwKjER\r\nSD4/UPDq6KNR5+xTFJ7/64V3lHktIXdpmGFuhWBxfuK+MtT1iEvASlwZ5jJk\r\nw6KWPkmwPFddpjS6cBfhXWQ4U927JhyXiXF0EZ89st/zrXXWZ09pve5deRYl\r\naM1ypNW2TggASv9TZx6pZrORtnaffL+ksWT2cpEDRfM9kiUAvULCZ2xXY4cU\r\nFASuXPiGoXdk7M9mwT2Ab+A1cdwzkpwfsyCUF/FACOhrh4nBHrbfxLyxfyka\r\nqGSrFTV74pyvtxfCcemFoF5Hu3LsvaSXm1BeGgiR1+8ugR6Av0Xlxz/2BTC6\r\nnLrbi2ADaNofy45JmPHBiHva4j0DUjNYI4pHM/OwFhkB/qZYSovbRDZVgMO7\r\n/cw6OdNsvsovhqJ4FQJhRPvFyrA/0ISfwDmEeCGGKdFKnwKrTTYWYDWKZo5A\r\nAwoIl6hLfeZqcMqejxobmCKXvGQvfy31EcM=\r\n=WwDX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/button":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/tokens":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/icon-button":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a8d47f9fe.0_1667967574362_0.5542432521157814","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/snackbar","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cad6384a4e67fa79045e69696502dfefec3d1af1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.66a1e75e6.0.tgz","fileCount":42,"integrity":"sha512-si2PShqG1ipxQCcbKaDGSSDV/7Toiu8YzF47zRXAap6+HpDRWvnOm3Jgj6+TU9ZLQMlOAkyR6YqD1k1/92aJCQ==","signatures":[{"sig":"MEUCIQDFAiOQ8GkLFqgKjHKGxz2gVqPGbGhatvQw/FavAaYCzgIgVI7mZKn0tu93ZuJmEzcJq/NSjLtblC7+ELSdiVJf7cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3S8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2rQ//Y9Lq+O8ylV/k6wY3n82cUq1/y4JZv+UKlz5A4giLV4RMZK7n\r\ndw6CyL72lk/x5Jz/ocY9sRmdBEqaPSPeFJbzYtODCWGiiSl2QHx7vjz5S6Y0\r\njAm0556qQnax2ZfUSEf5dnQhreebsu5EbNgvHUKuaz09leCiFTX3JrjXpzH6\r\nhG2G/m4ESb28TloRdztkX8IjZ6H0IZ0ZfmODnY9EfnCDJyg6PMD4B4RAWEwE\r\npgPeP6gL3sMnCCMA1XBNdwAhHl8+L2WsHGumYgRyT+tdTCoDYTCY3AZMsHTo\r\n8oiophQvEhWvRlh8rrQcPeiJ62kaV8TBd5wAcfK8cf9n3HKXvaBZvxnrKuqq\r\nMJ5zIgEfWJaRJ8L1/gkHEGaW9VEf/HKUnpECtd1WVf9BcL2sbARby0ws4Ro9\r\n2mijx/zgjFX/j3lq9zfG/h0JKgGEOJqncW9vCCGtedrhkpaLn8Y3O56NkVXa\r\nq1+UHr93CUhgHn2+WlPAw+hq0bUrpmm/zF45zOZyvlzWIwGaPBlJQ9f2xLlo\r\nMRW9rVxXUK4cmt4PphCZqcIuyt8FcmC5VP3fgOAHNS/Drkc32D+cD1KKOedE\r\n/9RN4pzQLaI6COAKngeSgS2PpZwEfYFDQ5xHuyRLjUnIZ6PLTMZT10oCyK4Y\r\nBGnF64HdbKgpyBdIs7CaXpaEBMHjRKyEvvM=\r\n=dRH+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/button":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/tokens":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/icon-button":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.66a1e75e6.0_1667986620207_0.7823089129731124","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/snackbar","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c902daf8601ffb3e5fa44941647dde385f88cf0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":42,"integrity":"sha512-c8Ciuazwfu5uv3mYBcX0rB0KADtvN5GNcnstXuzbzWukrjP+UaQWT5B5S3cCf/W+ggJFeJqbe3Pnm0HfobDxEw==","signatures":[{"sig":"MEUCIH68sy1BJglWM5/iC1rvVaJUuHOFg/ta8P+aW3ylWALxAiEAuS9iaN0zoUpMwLh4H+U3inj2lmN+xS2u2f1rwGWI3wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5UCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMiQ//YTXs6xhKem7g1/jC7Ou4OWRT/rT38M8vbsqUh5pwc1xb14Df\r\nMlsdt7gvwNwlUmcOkUiD5H77PGJwvrYXSZ/TmasUtbdiKm6/0Nt7bwLIc3p6\r\nUHcmY3WEDcQGGhHExOsHjWT/H5pskVWNTthY5p/gRLOmCuTmuzbP6XQH4at2\r\njIFCWfyN7elyIqx9Bac02rupt/+7ROMXhLsjFEQA0dnejiAzdRcSPliOr+en\r\nMwLrAPbL9DtNtApAee1+PqpCDEQfGPXADLhzjgkyWtYWCLv4EzHMzD2C2cpC\r\nZlZISW4xyv8YrMhGKzf+euy1f1Ks1ub/aAGPku8L5BhyK0vMKH02xi0XY7Zj\r\nT0v/2pMkYSMELLcIUuB/hbh3CxnLH6IXIgMlUGYtiVKMd9ew7fLSSTYb5ZDu\r\niymGl8ZQ8hySlUEDs52qNfddlYpOJslThE0wiFztuxDBe0VkGmvji+ROngrh\r\nFGLGwyd9AyAL1lhWXBVigpW4DVEQ+5e+Ujaq4jrkgzNb8850Csc1+lcJRnWv\r\n21oGO15rNbps4w06vO8rVERWbphF+2cqje/QbVFkOcM7sAmvAS51iHsoyViL\r\nrKjZIhCim+lzm3k4PGXMlTUxB32+OJnp230/tqhCcnu/EJsAQp1N3RyEpvb6\r\nYetTWmsw2OS1jZnhZ0sJQ9a0/5Ynkjx4U20=\r\n=cTys\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/button":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/tokens":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/icon-button":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5e5c2afc0.0_1667994882589_0.9464138163700884","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/snackbar","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f18a1a8a45214929de4bd698494791baab05fadc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3e3f43359.0.tgz","fileCount":42,"integrity":"sha512-J2NUGP42QUwYWoxFJBmUSJNZc8HsE+nlsoc7j/mLxcAeF9fvR3dAdthY5Fx4mCMcGWuzqGeXwSiY2GHT6bcQcg==","signatures":[{"sig":"MEUCIQD8IvwcervROpFdbQ4j5kJu86CttR625UJd2ZkbOK+F0gIgOWmSDlXQ24X3rhPyrr8CmCXopJxyIbwsAYZelApM6GA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAfEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFzg//QLzBJzIXtOFAm4mmd8142hvpZG0G/5Kjw4A9bBOIWnuxtdJK\r\nxI+TpfG1ATZFAb7zZDoKRePa6KtshxGdij2PhAk3JQfgTWtRgvbNXqzYLu3c\r\nNnOakHpXP/7USVFpaR0idl55QBOLPui3X/Lc5qDAL8e6cTgmYukHeZgjGi2c\r\nwRHsm0gvziddXnoNLiBW77Wsp6Ab6Mh/CGUbP9V4fke3IpGYW0Os2MQC6NE0\r\nqyenNrnpFfMQsoS7w4SMDEhl8uKxd/y0ZqUsHaRo+8pPkuan07yD5J20VV4X\r\nR8uHF/5sh+ydMwk8YW7v5gZHNOPTzx8tJWqfRRJaAJK+1+cCqKJPYop1fE3m\r\n17T1IVvnvIpcz8M4amQBIS6AsHSN0p2dOgf5ykK68oCYtgCJhI0UTT6E3iWc\r\nRkkS7P9/0rIxIcupXdE+6ucAp3hyDDz89gM/vac5bApxek4fRYtwDMB/YtB4\r\nvEEvWCIJICoF/Uzj2M+Emx8aR1UqUUFDekvWYv67rts1n14J9Dx4fAS9JC9j\r\nS4JgWwVMdctxwm69v/ffjvV6RuaJ0W1qyFT5R/fqsOL/UDnBarASFh8YRk3Q\r\nqT07bI2dvcVWhbyZfWcqRc2eItJ1Vi7DCGjkFwQrOXZp7e5FgyLz3GshCBQ5\r\nTQzUUbQknIpm1WM0MjpJtJpQCeZFvvg5LLU=\r\n=h5LE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/button":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/tokens":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/icon-button":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3e3f43359.0_1668024260328_0.895344978411992","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/snackbar","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b79a37f6121a757ebe6a8fcafc37f08776ae5ff","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3f667fac6.0.tgz","fileCount":42,"integrity":"sha512-5GdwbHUyxcPaaw1K8wboTL6GhNML0itakDJkNgHe7t6VENr/r9OuXlBGnNj3muPzuf6VPgoX1F9v97/+GZEitQ==","signatures":[{"sig":"MEQCIFU8b5Z1fCf0STmfYT1N6bW1imIoTipq9MBMf3IkXsPmAiBs8A4KYEIjIbq+ej7hYyZ+PfKrUAeWYIQrfARYZY5zsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCSqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnTQ/+Jg3X51POxKDklbtRAFEy+HvSZXNmHD0eNGInQGpM7p5OjtLH\r\nNRfwRmyPNvEUxHf6Pzfm0AjUdkdXzy4UkYBGZVxrTENEmx0/bu3ljSkFLSmQ\r\ndU1M6luv0DHTtfLDWin392vaSCsZ+VUeyIme0PAv5kNPE8anpg36I4s+NfSZ\r\nYZ5WFIJMuYs6LVjEFQPbYypb1cUq15Y4MB6/GBcjRSk/KJ5oVqaR2BrIVbXY\r\nQQ9egr1ZXe0wh2QKdSgr2SBF6YjVtRHlYTULNYzytSc5dHJRRbmQZqS6zihy\r\nz+SQ0A4GN+r5bYRA7lggKV0g81RbUlSdqKAvyTi4ACedutTFJzqZb384s4Ao\r\n+dtW3aNXj2o+oBWp4zYLIWtB6y4krAXnGp2nwKgdSxwZ5fM8YhBgKpFd/nBg\r\nxSmbJTjDa96W0LH+n4HEl4YcOxJjdyNMeSe1Yf9REbivmSNa4etbb4V3H03P\r\nmVFGfVwvRPhR6gQfLMj4AXYaoV5pj3HzRZ13/hidyQMcn4n7tkYepdAQkEzT\r\nNGt+HMN6wWJq0/mDsMs6bfDA+5x/oMKP9IO1wYKeZHRYTFT9XvG2MK2nt5+t\r\n9wf4BTx6Rm0UYsBBDoIulyahYJMWKVG0YeMMMGSzAeeIvu9A+SaMnNdHDXf6\r\nV9I57sdic1fjJF85PD89YbIaZ6Yau3OAk6k=\r\n=rfLG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/button":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/tokens":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/icon-button":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3f667fac6.0_1668031658448_0.5524058252435831","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/snackbar","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bfc5f838392b89e8ba7af3a1f8d5c77595dd4bb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.faa28c1c5.0.tgz","fileCount":42,"integrity":"sha512-x3nygoFV6y0avKtCnDHunWgKiNbXQArG6sLgXDBvb4GFmOuejLCw4gyBMWgxc19tJrHCBNXsGaadKaJmWx7G4Q==","signatures":[{"sig":"MEQCIHAvt9/rKGEksQ0JWGSCRIMJqMRAG/rWfIvdpJcEQdT/AiBvuukgrlaleAtm8kpqjD1rMnhu2hIsljWXtLGIgR3DVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnpAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojSw/+PnPuZGAa4JrPNZ4mgpTDbJL9IxrW9OHIjgoCB1iXCZvxziiH\r\nhS7bxSkMQ/NpbkT6nbPXOL5O0fot+gI/18OLCz9EYcH1D5t0KrH87dXip7cd\r\nkY8/VmJ5/HIYbhs3z1qEaXtgb6JaiTh7TO8Bfsw1mqvqEEn5/hb3mFxFjq99\r\nke7NSjHM+yOh36AZE17zga/qIV5KC/EyKVIB1iZY/VOZmrPwMQ0oyxhuAQuz\r\ndrMaz6u3l4Nwwmhw4Xx7mjqhoy9XrPaafn1GxFIkgsYUdyH1TubmwEVAoqNa\r\nsA9Py+Tm52f2TjL85h3gjeF68BWsBlFlRz9/NbdWL1+4er4Eh9neCr+bkMF3\r\njruKY4rWWdckec/UD8XA/qEMzHJ74lVd2gzIKUEIv7a41Hgg29azkDWRCbPs\r\nMBcRKk0a3096coT4Xs1lbUxUK8VfFnLtPbzuHN4+EZM+dWHs17Xwo0iXe8XU\r\ndJXewwte0jGu/9O9F1DfWQsZH1TmUqqlr7P1Zv+oCDbz9O6SrPL7hfOtxlnW\r\nIJn6ju0tOSNVVbsrjMyFRSLmvUYw6HQjHC+bohUfKguRZ++FU3CSVWyJWBbQ\r\ndsAmAp9DZTxpzgH0rfdoCm3uL0cldP74y/DjWBx4GuyfK3tu8hymmku/zTmW\r\ngsgxc+CN3xS+JffXXTLrH9blQMAgSMMDBK0=\r\n=y3r/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/button":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/tokens":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/icon-button":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.faa28c1c5.0_1668184639826_0.6057037889697365","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/snackbar","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a868c7866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc09e222238f953a06b5f0c86f6e0b8a63e99331","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a868c7866.0.tgz","fileCount":42,"integrity":"sha512-kPdg7X3Mw7P/cUMVkJrriuXBXgPCA4aAT4Tv2q9LE2QZH8WEkG56r8E+TduEvFqTDMkOrE2NjwIBfeYk9yJTFQ==","signatures":[{"sig":"MEQCIDsWtzf+M25J6Wapj9eGPQlgs3zMbkv05tUsCPN/ermiAiBksQnZ1FcdvcyQCGdGsM49pmwbztnhP2Yf/bTbZ902bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnprACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZyRAAkHV3NvnzKI5Qwu/+JsTYKmDc4aJzSFOPMcK6QBYZBwz4ims0\r\nSjHqII28MoyaHVbmwqpPwreXzFAUpFsxBvMTlq8ze467kGfX59cRD22Je693\r\nfooGdlpIjw6f+LdTgYmfhekSvNVUdm2RqvuT0kklAK9+vH6GSBlwuINjFLIp\r\ndUhDuO25pllhBtlNXLnHlmPQp83pPv4bL318tSMRSnfdDIONmP79IzFu4uiU\r\ncFMFslPOMj6IIGuTsUg4VCB3XyJmED8lLjMV6G71XmLU+hxxTK43qS/A3u3Z\r\nDYR6psduYz9C8gRpce9xbsIxeHP594NVhXrh+G8ibPbRATgL939Gh9Ot/xcT\r\n1DRQk9PYgkDXPAUa2izbNp8yllhElPRWZKd/1AtpBCaWa5AfOQFrnPhVJQNQ\r\nDhkho9bQN4aJfOg1b3pvrtoFxc8E1Bz5U9o0MoBjSKM53cwvzMzhdyNcuzVI\r\nmDnOkOPeXu59ve7Cx63EIwrZsP65t0locb0japdApcU/pjaIgLeUfCalO86U\r\n+4Rr62Ec5ok9PB3A/o5hRgZqs2n5WCk5hbeJ5gDTkeyqBg3SRK5+cZ9ny9KA\r\nnWtfkDYvSTk780w+6L5assfCiuK+g6tC8kkvf0llB1WbV/ou4pRv3nL2Zj2M\r\n/7Y/wdwvs1N68B0ml99Dt+P9NPH46rMlBvw=\r\n=bjGG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/button":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/tokens":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/icon-button":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a868c7866.0_1668184683488_0.9778927539082747","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/snackbar","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c06dbbed7aa7ca627915715d3707b5830e859900","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.602fe8efa.0.tgz","fileCount":42,"integrity":"sha512-drYFuQdZzJ5wHP92+5nlALo5N93wOHAbCYLAsV0txt5Co3F/TO0gCZYQp4UAaMSbq7Q28JThfyViNt2kFuZZgg==","signatures":[{"sig":"MEYCIQDaM9DGM/d2ErdT1H5g3S0fEmCIV29OeWwja5s4Oo282AIhAIqS48rP8UyyZg5u3jd5WWrscoSRrC5Ya3UQuloJaEle","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboKtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRFRAAgjbQwKxtRoZLDzalnMDKhlQhxrURb63YqHdJOvzjcqVKPvS9\r\nxLXWbVLaW66VXWiJ4QxBXpCx1rFVdylSJ2kwvoCOduQD+oH7eFgaS10nyKYV\r\n2REo4yRnqqSWICj3OJ5Z7yFMF934STE4sO1coMW+AyZVbv0Q5MT0UnPxYW1Z\r\nN0UoK16TqTCWAPFEmfYLps3+JQaLgL3IpF2/dH4jifMHNG6kSuQV0tOkDUSI\r\nMwhAgwDNobmtb+kvVBXBg/9Gwr66Ecln9ZjNR2JeQ/TYarHFoMCdvG1f3Uec\r\nwNTQAlynI/ZRPsxuzla9SkA/F97vUsf5+es9s6ZirW3CD2hb/457UyQs8I2S\r\nltUcfid+PPqdumkMvjGFTkly4mW3g8WZGigMSO1Fm+7JLlD+cF8tnDa0ovOE\r\nfghgKK7DQ6R8IE77MOKXYMZXxNc833WInZYe8lWvuvyuAJ+uouERvi4umcDW\r\nvQ+6KX5eQ/s88cwNYN1AEdhP4bOASfYp6Kt72OquS8daP/hSwiaJnPXd4jh4\r\n9CsgRB+qsh/tjD40kXD95X28IkFOjXQOqIpBffgHvr2o3IDtAJiwklc094pv\r\n61C2TVg7z/G8WUrsOSaY2j7Fr1pFlgI4dJNnH/eRQN20yOez3z1D2zx/q+wI\r\nZI2HidZAO0LVS6Qa60kxcpoXGaglkq0aQTg=\r\n=Y3D3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/button":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/tokens":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/icon-button":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.602fe8efa.0_1668186797623_0.8572292056258268","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/snackbar","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.558c2be62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7f47fda27dac35bc5f83a34657686e60b719786","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.558c2be62.0.tgz","fileCount":42,"integrity":"sha512-EqJ5D7Jv8zpYzK9fqaPNTugggR7Giu3UCPG3+w0XntH5pwUusYiUXWiBBmkk7cHlri9BHrInjOef+ssxjUySdQ==","signatures":[{"sig":"MEYCIQDkjmLzhykay3m70fl1590nltzzpdnyuErxxvHlToOY0wIhAIdFt/fFnOHfWvZF2qp52IvU9+S3U+3SiuLQqqpZJadF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtDRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1rhAAmH8PEBVk+3qbsah9KtWhqHoOIC1wIMMvBQ2NUtmSuFF+gSFS\r\n64046Tk3xrGHKxFYyfzkaNedmpOWc4ULp4HxzTLyItyR8wLTAN7Aarfdh6+o\r\nMJ/dcm8/Xjzg18VqHDIlHJhiR1M6uBDdtrymwa0bxWhAHP+lK4kMZHe0N27F\r\niV7pB9/mWDAnH7LetVR5NEslfP1m3tMbMMRfZBXWWNnztOUwZ291XBZKoQKx\r\nwS2/cI6kzflU2B2sZjr7p2CgtaxxwiwFYpQVtwwhg6pr8rC4aH6o9a0enU+1\r\n0HWlmRYGKgSeyorMeDMTYbxwVwAQm/0PwUD8EwTdkROGV8PlCCYsHzaG5bJo\r\ndp2RncxcmRrtCIpjJ3ECBoKwusvRcrMiEzE35Y3h64KahlxcRIwdiPzzTcVs\r\nxidFBrJaYyIJwUn35NhND5mVOM1Z12zuHAJahU6y3bCsSqPecxgGBNO/q6uo\r\nGVCyxC8rQ61vKDiWWDafYrKIYxQqGYd7+dofeCB2HuRj0T2Ky4WI+X3PCAem\r\n1ooTQZIkoHKQrDzKFmrSz/ew+QCuEXNXmh1QN9zL0Exm6iGZKsEL4G+jX8Ea\r\nJw99J6lY4lwyRyXpcxe6c3Qxl/8FTl3kRTeovksUC+hfPHYqmiU0Vj1M5/+R\r\nz+5Se6wHRN33doQ1SN4PFYeifb8OYWAsv0I=\r\n=1O3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/button":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/tokens":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/icon-button":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.558c2be62.0_1668206801315_0.37133249015606684","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/snackbar","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9ba1fa69bf8d0a435fd0db81cdfa9f6946e2aab","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":42,"integrity":"sha512-DkzWC+9f2VyRaWzNU2bxwdZygad5dwimHspyrq4PxDDX64tuBU0x9/wvs7eIjauV5DbYfGuTlFQchVYmiEQZjg==","signatures":[{"sig":"MEYCIQDcBV81Juvtwd0tXJ72vYbHTicrA5GPkZWTqBUsjPOG9wIhALMr7/tWicfC3NM3d/r5Lv6PccTZkkypizBoEdeu4Cgz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmYFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqkw//fZnZV1/y7dar9rBR/nMWL4L0R0IklEfbG1KwTDjRUwG+nj+C\r\ndNg6Mv8dWvYOWLVyS/QP0UuwcmRjh9ZQ53eJ+wsn8D1Mjm7UZhx8Mc4VbmSe\r\nhTto9bYUa4EhEFJ8LhRJcqgw8f03dFrgtB+aCI1NAMap81NyOCYawAdLSAQ4\r\ng24BWK9mSgT29SDVPttUJPwVSjS64xFljl0mVA0SxVfwRwqihjA0KH5JN2cb\r\nbyMEPI7IQWmM8gctqzaX3uAdkwnv7E/Bn/9vHzXeckxpd37nzBtGQ2f3HZ9G\r\nbgXFvwgIrvUsaxNRTr05FI6qWkU6/Utl+QypWdMdEn5ZxxTqzmkvg3HRsG8Y\r\nhOlV5aMbNcwLhF08tZgB+2BV3lMy9gt687ih/2XS3ZrrNJbYTL895o/NMtns\r\ndBWHzS3ZA7cS6CGZh7Yf5k6ZAR3mD8Y7TqIy0l+ZRbhU6+TktxnhqddR93I4\r\nWafD4zioeAQDmY2dV5J+0WpL5VqsoQzuMUG6V07h/qjE0QiZZvyysxXsH/X3\r\nqKKHgc+NX85qGw1oqI9l6Khl0Ys8EgPpv/iKXW/qvOhwALfd/l5KbHVPk6cP\r\n5Xvh/hD6t4iEEfpy6vwDToSAxH0F2/c73GZuHZQZ4es0XSB4aF7LoRUPQ821\r\nhRZ9k8xr6J4OhTArCokcKN0wa9VrdKoTWy4=\r\n=d211\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/button":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/tokens":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/icon-button":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b5c13a7a8.0_1668441605199_0.0896080339257177","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/snackbar","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15fd4fc41aeb2edc0f4710d0445da6a7bcdc93bb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a6e1c0702.0.tgz","fileCount":42,"integrity":"sha512-+mjvBYoZcxKFyW0o2aCW2ok0VuFKT6JI0gRQ7Yj5afY0663hGM4TMo22Y7rnoA1Djw75DF3UEIoQw3Alqr7+rA==","signatures":[{"sig":"MEUCIHp25ThIXMpEXgODPokkmVnf/Ds9PC177v4whg0vZVOuAiEAzyYE48C9MJAdVubyWYC9wqI75Xa6oEdrJNO8aMdnXHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnrBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCyxAAioWeKc+AziXrikAvXQeq9fta4UhlTmB+N9s5Rqu3BTXHFUSs\r\ny0D5N9ILO1teFSHybu94/AtHLiOXhpEwFPfDX3uSgtsdFahUp64/20hQwelm\r\nVUCgK3VvF9n3u1VaDhqiyJzWFAVg9H6bDuS1W11yDV9zp3qeNMkFSrQ+lLIS\r\nLGUXJJisrAd4YA71HtcWEOaZ06l8gWX0T3fPznmBW/9Oh9CFs4mFZx1uq0xs\r\nhcXBW6ROR5qJQUcY6VAZxa0KvBGQDYtW5xrUR8VHZsxd+NDEZ7b/DJOV05+N\r\nGuG2UfTxb3S/BniSS4OhpOqGf48o8/iqhWyMUHBLBxBdTyw8vtjeTTeUYMzF\r\nzEJ8yvQyY7YHbb/xeZak3xC4zqi5CkfDxL0mycWSMGfqHkJF4lVmdB9XEARG\r\nMwoSjlNQBDF6Dkf4yYH58CxSSXauGSQuu3RyqxYqe66BuhgPG3wlW1bhUMYJ\r\nqCkNruWMyqmPjNqVx/ZarF3TV7wYOmQHs904tyD5miFiAMR0jmrmcpcMiAl2\r\nteTQz9zEhjMb8pnWnT7TnII4Z88jR/EgxTn0jqqA7/NneyynG4Zw84U1ePzO\r\nCFQJc6YQj32Gb0Rtfa0tAtZYvimUAdAhDYQIwg2zcbrq26gvXP5z1HiZQvUp\r\n2O1Gg8seYAOe9gWD7Rd/ywPtV11mKTUcfmU=\r\n=K0z7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/button":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/tokens":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/icon-button":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a6e1c0702.0_1668446913024_0.4227210857054631","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/snackbar","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c6e782a5490697d1c8f55bde0589b1421921af7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b6f8a06de.0.tgz","fileCount":42,"integrity":"sha512-n1jzuM0wAApcQujCNu5joMb9kzj6guUpy7I9yuAbxfS31QGdQRcBQuZ2Dbj0adXU9vOEmaJeIm9zynf0JKVKjA==","signatures":[{"sig":"MEUCIGna8kB4JC3glH7ew86thVui1x7uyMyV0svFeIajbktxAiEAlaiTUv9vwQgj1vMPJ655TLE/leVNOqG02alWrntMvfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1wTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIaw/9FpwWCLlYDiOrav/zDJ+GMlMA2JCRaKd/oyxNbjP5w0g1J+nj\r\nMEw7zQ5xYOMF6+Qahwg+1xMCxHQwJw7c0O6lgChJ1Z9AxWefPcz1h9KAtemE\r\n5gA+5vlj/shKnA7eYe24ALkOQzVWKjdx1Xgxb9mMTeA2Ger1wCAd/c9OzRR0\r\nyo/tdgRgfxOOPj8pWFeTAiHvTwNbMcmQaitf9sl+Z0rWtNr2BDi8hS/8lTaS\r\nDmOnMQhsgcs0nxavaOV2Q37XqjN+xmSEmPd/NCdftpntkl14LUnqQk9HaNlU\r\nGIm2ievmQ+gUg0hLJmEG1Xx/FTog4ePC/KokRtPSp84b0kNYz0Aw4SQ+uxpv\r\ni8rmND50kBvOL5x2jJWvkJZgQEoz9KOQD33w4RKigh/AchGKx/pjq7NWUOjt\r\n0QBNDG4tTMWg0ZIbGB/EPWHubsztIsswydqfyiAxmtg425HHaqm2vokGwhLo\r\nOM9wyxnhyXEi3g0/PxJJYzzM3bDcG6ze2I9tbW5TxGnaSgRFSBtXRcLBwJw8\r\nWWW2zcH7sLnkKjJ5qcLAi/HDX8t0dstn8ZUsyNNBbWlV5IOBs98CnQxxkVZh\r\nclJbelZzDkukd/XnKdkUnbqgB7XBA6kq7p0kQJx7JQ7rvUMqDQ5JGBdTk6eC\r\nCScma4Y4+h5jk3O2gLOrbL91H1vv9SYV0NM=\r\n=O9nw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/button":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/tokens":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/icon-button":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b6f8a06de.0_1668504595709_0.7880260676523316","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/snackbar","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc49774f3f953ad9b94c551bf13935380d207920","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0163f3ba5.0.tgz","fileCount":42,"integrity":"sha512-SF2zHMviCQWSc0u6+ekJEiyNohklO17ySXMpHlBXRXNrAjBjY8dj/Mp0V+59v04EawNnZpaDP3RnCG9s1JK38g==","signatures":[{"sig":"MEQCID18tyfAoZbXyaYmrqGgdFk866xyHRF7pvoIcg8sQi2sAiBNfT9l1H2PwfaZcCkkqEJUz/+O8lyWw0+gH3Z9igo6cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9R8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEMA//RTvOqSr4tprznuKklRGV1Q9y0SjIvOqMkjCWi5Zsi++ZW2Jb\r\nEijgMUxOiRACyxSw/IpLki6UJGbuwC8BE9zjZAym+eS0cZJ1R92OFL5YZWyI\r\nf5wqU/YdPzJ2V5C0YBYu8THas1gjLYsj4Ii7L1SwRF46gextbmtXLGxfjVPv\r\nCX3edEbxWB5UG5gr0bi4oIwoVSZ9IakGk0g8fq90Jx2PKsCSQaVH6D7jcWrl\r\n65XqIB1clIBEAygkuyiA/9xh2SJCOB4HSIP8YganF5ZRAJQFh9VEhTR1+Cmw\r\nIKHktSQeNrax3uTerXCA62nvEe33AMz/Qdcckbq1d5Yh6gg9kaF1Y5VSeu3o\r\nWufjmPkWuAmy3z+io/bJsaTzwv10CRWAgYkw2NEFCDqlsSQS02cYpueqsavo\r\nNONg9aOvQGj4041TcSRNx01Dmq0Co05FBQ2rfmCc+CCR/eVVQhEbpPEevqL2\r\n0Iw9OWuQkP10IHxtHA07+Rvbv1orHZCsu/8JfiuWtEm47WMvg7dbgUnhqnBi\r\n2Hl+gXGp4q0CKHOLYCs9elvmvQ46IOBXCX880lq9j8mOGshcpAoTNWPveoxX\r\ng3TR7Z6OKlE67II44X2pZ3HUy3/ymZYTmy8vdsjL46kQhUYuSRyXdZquUb5j\r\nxJM87JolX4ovEHTUDak0Dg9gbjCs8aLWdfM=\r\n=uSmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/button":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/tokens":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/icon-button":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0163f3ba5.0_1668535420176_0.27752442019852186","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/snackbar","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dfeaf142d61af24d28e1cc38ee6554080a7fe6c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.66c5cbb94.0.tgz","fileCount":42,"integrity":"sha512-DHf/qS8KRqOMlr2eH/B/RuhLzEm4vumFgg7ohDzIy/Xo6ltHr+ZzYUFAW2rOnh8aEbbR+FfgCfikHWHKB11PNw==","signatures":[{"sig":"MEQCIHWNCOnki6NY5BNS8hF4j1CP+xM3HlWeKtM7N6PFt5r3AiAbHhNxmQ6KB9Po5KSZVLunplQ/UXoYRw/cXOmE6r4jzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+kdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovgQ//fh3xQfvETMxmwzpOjmO3MxQGT/j9kPuteDLrexfIfq6amPNe\r\nebv/o+4MCEDYiNu4qI00hGFoKyxWCwd/9rhyR68GNhUF/FmCI7T99C/Mq7WB\r\nlhEgxMDFB/0ZhlPFSN/MX2FIUQna4C+H4JxVs2Z/ZbWMA9hUWLXIhWTv/Qsn\r\n6E6GWOqA7TG+PTMc2liVYfZeHq0lLmnEKZLaN6sbhMzqdQn5X/riZ9eW7/YD\r\nUNTmZ9JFDhpGlANFeBw6D2A9vyMTsrWCAsALeMohpw3EWA5TCQVxxwfrWsbK\r\ndDK0weXaEJli2YMMDZIA8VI80qJ7OSb6yRiH5EiBOr4tPqghk6ezFJAgUpZP\r\nzL7YiakofrWr2faEk1TsxMGg6AVohzUpFSdVbRU8ul+u+uwyzS5y7MN3uTjH\r\nBMRUGi10B6ZeoEIjhH81CmxQG/Bw67P1UFOgIpx5MQFujvc0ctce5GFW1kRB\r\n7lf0DSUPwQuLo3wzKmkhVcliz1VRb9jimsNgmQO5thUtbC7LWyORCahr4l4Z\r\ngsPcrpsiluOciau21dXy6rmfqrQEP27L5rDHZgvnFEyioMD0pCnxlaXRuXy3\r\nZw8offON8Txk6WExYKxPFNv9zLJyXR7+nfq9aH0L85Oae9muBFYcPkXG6iSR\r\nv0342AeSCoUyNu9TPOwkUcdGsAd1ik9HOkc=\r\n=KNIJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/button":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/tokens":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/icon-button":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.66c5cbb94.0_1668540701657_0.6799615287190452","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/snackbar","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b01136063.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddcb7fd137ea5d288e9b6821cbac9dadbf72c8a7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b01136063.0.tgz","fileCount":42,"integrity":"sha512-ADg8zzcf/V6doguO/lOSolCobRx2pfi+kWKa3zFQWT2kvdK6DQMHh2D/9J1ZhlpjNrrQ4NxylCSVZvaHQM0H7Q==","signatures":[{"sig":"MEUCIQC0eeJ+F8fqDBKGt0mgiWhq+tOmc44BIakpnAh934+6agIgA/8BxaOY8cacsgBgVH258Qwe91daUSJHnPdy5QVlVoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCwWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqc6BAAlE7R4MKtWmSPduAIU5y6d0GTyANbX7awe3J7PSz/0SlVr6Jt\r\ndcDhhSo/g1xdxoZL+4WWSXs7yRu0PoX71Akwt4IdfwYHb47wdSkMBeSPz28U\r\n1fez7RGUcEH8qT8cLeYC469w8gzlDT8hmVhNidgAGks5FSd1/un0i1aV5eqd\r\njNPf4+spbAtQ68lXk7fdQZVLRH66xhll2avN+XFY/NV2+FjMzhAtUWRfVJi7\r\nx6iV4po53ZD7m51VxA5UkGlLkVqZXiBXCigvB3yJOzydLA2gz8rlAThsC2GT\r\n/LW98dI9HrUJp7FGETvVVfRQbol+hpkvhKxtmhRi7MZe/jICyLdBQbk9p49J\r\nUvbfIpVUui24YGiQsNaopnWxhudyW3iq3WFByjrdh/t13vc94jEyQiulaArs\r\n8bjRBwpJSGI+V3SIc5M+jWA5nhsFs7ZD4QsWEaZsK6qVxPrpDrTjgbWdzBgA\r\nyl/rnFZk4ldAKITIHeETTN/JuYNrivhftLp77rl1CP4sbqgX8QwjMH9HC4QF\r\nHEyH/0gYscNE2Y9T26woijETvzlfv+FtKk+7tYYe5tKbLWDMANcZACGMWcjs\r\n4ysNT6IW+mWcpX/WFr+iQRh5GASfWXsFiFnhy6fus6uqXX5hVlb2168/7G5b\r\nN/XKPjK9lo4HMDYwSlmu3KLUVIzj0md9KnM=\r\n=znoi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/button":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/tokens":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/icon-button":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b01136063.0_1668557846597_0.8306707011442966","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/snackbar","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0506bfbf95a163e351cd22703aa72af3d107fbac","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.01da0cabb.0.tgz","fileCount":42,"integrity":"sha512-Fy6Deub3H20yCjJj5vqIXCWtHWmph2h0BT38eRQ9PQ+g+urVHUMzUEL6YObFzwqWCExxSj2Q7lwpmumRfn/8ZQ==","signatures":[{"sig":"MEQCIEsyiybFBAMPs6znq4GF5Fvp7vVVhFQvAn6mZJEiQCIPAiBNEZzHLsAbbwXmIRDSQfDlkqTkBEakP36h4AP+zGx5jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKoLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPnQ//cTvDG2vZAbJmHAsDJK3p+iIvhR7if4VcM3WFMUkcE9xXWR2R\r\n75gd2t69GF/PvJvH0JGBSKHZVy7LfvhCen51FvjfyeUqyekGq4wkD5Joe0Pw\r\nsXe/g9BgeRjNS68HYCIlcg9BjHilYkKJG5pzmMupd040uyy77IefPQFTea9w\r\ntK9O6LvkevOOKqRAj6CigiEdqPBia/dINzgPp/9uHJvjXEYJSUgQeofT3QpN\r\n5eNbo8ZX3jxVmDbkIng3/lVRn0cmSNzU6wh4ZH+iELuXQqSxdPaWcS2ZoEaT\r\nOhWEEQWWihXkXpGvKGdymF3bMkmVQ4nSBwLz5fX5J3bNMK3lQONEc0tA/vJl\r\n/EEEGoTBsze09+hNdM4sEvC6SXDTxOfDaEQHBgCIOa1GQ/tQJwgD5hZGBLAi\r\n0Htlt9oxXCZ/VwR8jpLWMbLG1s6dSh7+VInSVEC6b6vezWjSzbfvBfU3QiVB\r\n754ZYE7/c3uoMIrdlQ9AS84FVFyTf3ZB5w1ukhSMiSnZt09QT/Jw/W+qOyQg\r\nSXMl6knMM796qgYAzKinGJisJkGjp0dOqsMF5tYRMVCSNZ1kGYcztwXz7Zeg\r\n81o5lmB/hzM02dAdioLA4/q3S/4mY82UA0/DlcuTPGMef9fQAI4Y6OKpEZ4i\r\n5MpmQ8Enc5QTh+AtRSLWA0vGYUluTM5JZrY=\r\n=ZZZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/button":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/tokens":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/icon-button":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.01da0cabb.0_1668590091450_0.8419361856400935","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/snackbar","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4ac393164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990727a6dabae97cf5da6677a6dd548ebe42ec94","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4ac393164.0.tgz","fileCount":42,"integrity":"sha512-MFL3cXwinC9/TuvRTMHTurhlqDnj7oRo4awh46GzBE9Yb/C+rI19xoqb8YjIp9YbmE6dE0xVAsW0eJx9h1EmFw==","signatures":[{"sig":"MEQCIF9Y6Fh6ySKu0ZrHykgo1RdcXdqPwliT7dEjx9GvvCG9AiAavY3+r8dkzKAnVcoeGEsL/k/R7+aiRFuRJaJJpI0Kgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrboBAAmXZ3p9rX9JQuZ2tyjfYjNbCShroGfVogIeFhiJ5Y3mN/Hxpg\r\nGbyyKNdN8+GNQ0ksTMqyZa3Jv7Dz2va9NDjxh3SvERa9Cm9Ij5WcvwwwgHCX\r\n8d8GknqSQLVWuGWFyWKiaUNvjyoShlN6iOnZRXIOJb4AkD+g1Edrg2+NoCHF\r\n+CdO3zKDb2+cc9EBfB0UnZw1BKRf+HJ+8gwtzDII+QDSVA6wyfGEsgCcSv7V\r\ncWyWEgNJtKQl6NgHi78UGBr/svcmVhWDsVv2OFWilYOtDsgU5zv7XNF0DXTF\r\ny+Q06ooQbkTF4b+uDeV2I9q9QU2qxxI//KupYspvxyJjqRDD/Wd6QPXyJErG\r\nbYP4AXMkyNQZW68jdbB6RIt/LV3HQbHchxRTqLcildGLmBqT2+xhaZWDUa30\r\nRbRiKMUcVgrwcoP39mncoPV4au2eok2yUCcIp1QnCiHVYbf/YRexTRsHEIen\r\nwGcxJSSDfFgGtGBnCG54kFFOcCJS842iu/iYRdrjLMmIpG85xUdWgExN2+QR\r\nV3AoW7xIbQRLrNnjXquEOzNK+zJn1Bew1veCg9B7Ll6a3ciDdS4zXMV36F77\r\nc06/FVKKdc4/N5zRZnMSJ1asmqfPPU1Qzq7ENeCpOfr+ok6GHe19jdtn1j2u\r\nGPvQDMdluHIH0lw4pIXN7VZ0ypmi+SmI0B0=\r\n=4JCe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/button":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/tokens":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/icon-button":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4ac393164.0_1668615429958_0.5616200429715179","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/snackbar","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6048fb563.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2496a5d0245e5236a0a6b24654e3e80c9b810a12","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6048fb563.0.tgz","fileCount":42,"integrity":"sha512-/jHCmaXJ8nKc2+ZA6wSyhfbLHJcMdl6SoyKpBhfiVSWSEFkE4qbQGoEPkOTcYCShHiejHqyVxvhSh7lzYdgtKA==","signatures":[{"sig":"MEQCIFJ4iPdwGuFyX3pemRPWpduiI/4aV2OymyBc54PJ1v5KAiB7sWrsp2loYZGOmylAXvgVdvizwNPM3lwEC7H5oxpOPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ2IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqlgg/+KJDWhBCz+6fgAUvXhExNJeN0KKl6T26CSCbfRvoq+HRabj+T\r\n/fX47cSVIP1h21wr1O1cf104seOmlY3BwoAW+szDOa/z39TPriFSWqLQY/0i\r\njo2CERz3S8wQkj9ZZqhIT2fG4Q6dLAlFc/m/NNZbDLPxvN699IVI9uE7Se9E\r\npoW7t/LgwTIc2pfRVWHqSxdAjrYiUCCnEy9Ymw8Eqe04JKEnWG6T1WZmKMP8\r\na3Fqx2vOv1qcz2x9lDtuVOWxnLui8igcRAY4Rg6vE9ohDM7SsOW5RpOdfHLH\r\n3eYzxRc6D6dBXoyQKkZDA5p2jZ2px8ATvySS9ePoERpDrSYjLmm5ASTTQPU+\r\ngkpOHoYUeFbVYB99S7Dfa4EvWBXCnaioa8w0tQ0fHuv+RjmOaSuo7khgXyuh\r\nKdWfsae7bUiIXjsb1435UcvyhlcfBJneB1eUlp8JiVVJnFJQmB4AuhAybqPm\r\naN3hwreI0bMBeabDHm+usDbO/xJMNdefwWjbxr74BQyMoOA/XTRWvMiRc4dx\r\nPQEplKj4XAovbefLcX5MdPU6iZ333YKARWhToDE/w0psWI6P0YtN8hP1guoG\r\n7N6De6q5se1dkm7yPyrt8EW6smZsMPKGYFUCWTqPcc9x92h1B94yTIntbtso\r\nQxGksz7tENkORR4tMbTrRVZXjwGZ6Om1MCA=\r\n=QkQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/button":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/tokens":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/icon-button":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6048fb563.0_1668615559969_0.5624006831688757","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/snackbar","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60ba3edddc9c06ce0970f446158465744ce61476","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f7f56fff7.0.tgz","fileCount":42,"integrity":"sha512-HytkdJ1HSt0VzT2rsDZcivS8sNDZQhxJ2+yNlML25SUllANhOedGtQxdAU1E1S8SyoofUeILv5B2OX3gm89WXA==","signatures":[{"sig":"MEYCIQDNBLmahR9cMZ0W+EgCLEH83XZ/nfBLf0ZLBl50Ikh4tAIhAORi0QIQ+kgnrxuqQbKRixM+nr1Bd9DMi/+Pnmx9r+Cq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUCuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriKw//bNukEqxaXdRATZSbrCWvhwmCQQ/3LpfkgoTZW4sZsJJ90XmT\r\n6+wOsGO8j11q4pes088OzIZAQuB/qdmcL1f/A3IcZo+J+ySlHLDWHTmvvZgx\r\nzxwf4zM5bt7f/fznkvp2CKRVkiQEd8PqRox05wi2g1EKJZqzDsRuHntodGjW\r\nsuOy5K3C4wG0Oaqa0Yua3zmHDXDCVpJtHuCMKvHvMHHf8xYUKDfgu+he42ma\r\nFQriCBN/g9NZpyFszz50RLHbVnaJ+lwMByO1kTEKvXK661TtSOJ1iB+VZ5Cz\r\nkh2Tgr1P1mEuF+3X501XVMM280ys9wshV7xuvJjueiXls7m8jXKfLaqKWgK1\r\nmhReQ8d9F9SVGSHiQhCDMYhp2o/Wo60qhDwc19/i2K+cRA2c5Lo2f14xNZEm\r\nr0nLbNfePs0l/uVEgTBmwXAzHXrw0ixT1zA6LhEsykg6SZSPmsi3bKj8btBO\r\ntumI+huGdhxsXtjIh4BXmsXejIPKTdfbwFDjElCqXiWBMnjFBpYT0AZG6OxH\r\nt7mIRPQl7X1m7zhiyg04aR4ToIxD9ghQSgl9hiUv9aWn8B1bCEZ8NSV/oJEB\r\nUQrJC1Ir8Ccwpu1sX2kGiXJ3tbEkH/pr7AMD4J+I3JKlhzLU67nSKYARd3gt\r\n8PTyGcyfDRql8gk4PrHUBAUvFu1R5NeJZDA=\r\n=v22o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/button":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/tokens":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/icon-button":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f7f56fff7.0_1668628654430_0.5097424248078792","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/snackbar","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13250f96979108e64ad23a48498a1c5a0c7cd1c0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7c73f6134.0.tgz","fileCount":42,"integrity":"sha512-I5wj456K99hlxjLfWayeExv86HSLp+6LHpH45UBmhe7OwiFKREAh5E5Oi3HnXexUOmToCuQhStsGL/eMm++pxg==","signatures":[{"sig":"MEUCIBjI87qdwokiYsw/4S6T4oFTQM0w7UOA2x7ICMd9xgTqAiEAwdBgeO3opkjylK22h6ZKJGmANTgEDF+4CsBUBkswZFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUGmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocIQ//YXBkK2HIwTyiBJQNuLV2zZTUyN/+wiICRyqFURhh7IooUkPT\r\n8rbMDtv9eMZm6WbXBRmJfK8pS1tUqSjLL0IgX4ifmEMs1dErlinuF09RdVg7\r\nDZRgdG+4v7rpBIor03SHCZSf8cyOXmYSPGlPW9gE4WjZIQZtpsIZkib6GoFU\r\nsmOZpsa3UzTzhbK+d6KyZu1dLA8lkl5WZWdXX5ZdgSMdIoiMjo0ce3lboEq+\r\ncpAx+bilZSkI48qjAZgdyCNNrLh6KKeJV+iSDMliZN7u8e2GVEZapbvJcyQk\r\nEAaKr7p29500bYuKulysov2NUBhJpw4XVcOgwev+z8VsxN9Q8OX1/M1A1JdX\r\nHqXSmwJg1FVN3aXMGLGNaHEOVQ2ORTYIE4PPsTjYMD3C73zDuaRbUQ7Fl7Lr\r\nDxgXmMXn3nbnlKf2fJ0Qc1DsUIkhmoWbNC5fEr/Pr3h2kMJPSq1qA/sb6yfc\r\nwDsHyftfPut+Hqm+oowmiqCGq+XfbNUylfac1jWjjEnkxWSgDcWJpEhWgLJ8\r\ndmSOM/LxAtPwQVxcEZh+LRa62M8a/ZC+ANHjheWdbpBOoGudQDhLbUXS7b8L\r\nxc90KvoTXOtgICr2uedDNmwMX0nxf9qZoBYDA9YqyRgNErdUrbwZOv2VThhx\r\ntdA6Oe745uJag0ZqeOJvmMPxQ6qpUUMUjmI=\r\n=fsfv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/button":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/tokens":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/icon-button":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7c73f6134.0_1668628902332_0.0037952745542912947","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/snackbar","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f1e037150.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"456e0dd7bf393f9900dd44922d185adbd80ddeea","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f1e037150.0.tgz","fileCount":42,"integrity":"sha512-lLVmGpxhybjFt7u0wY9eZzHrfPbSXkOqtoi5Z0tTpk4R6EdoJcKtGuEOTPzdp6voFPWJg0SRQ0kQsyKI+SeW8Q==","signatures":[{"sig":"MEYCIQDB/fhEUjewp+QNoiP876kFK+w2EvQXKlG+A9znpXTzsgIhAIyeK5Fa7Ro+714Hj/OsYsGxnBSxhsMC0hlzr0RLviPj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdULdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLlRAAnyy/P+iSXSZ3ZOc2tPX37N4T8cw4ufHu22yRMyrhrc+r4xVo\r\n1ToauE76sPmqFl17m9GJFznz8BDdrWH8ga5UJlLryPEs25vczFrBT0/eab7Y\r\nR4zFpvUocpwL3gkNLOFKeQMxkiGFwURtsP7MA0J1pk3nKBRjXEfehV01DZob\r\nU0nGtQLXUiVjlUCn5uJhUTYn9W71ho88C9ytDv3Msty3YaDk3XMOnhD8BJRl\r\nSBq3zN3+vijbRlRWK2UdsF/Y+Ib/qUsNIXeI3rSIndxmn0ZhhVzz43zCA14m\r\nRyvC+7cDoPkbuFufhd/ZQnnytk/lMI4PNmsxLD2RDhC1Zg5jyKOE+Tthozdj\r\ntl9OZfA1wI1zKZVoLp+Axnet6fc7ejaq3rs34jPtmKP/08aIHnXSaONqNPgJ\r\nWagVhmPvcf5sYwwVIoZHs+Q9i8KdTNEqpnlPvRKqTGf/UKKBXfZ/3/OIKZ87\r\nWJOUVhCnvQZkoDFUEZsVpUlOelu5TmlCfG0yRODoWP31wTS+ofkarRXnLYi7\r\nIggYhPG3Y6Pb/2HtpD8XTfgUE2QLdbewWWRofqR7gh4bMPgJqMvph/5uFvXt\r\nv4umfvuOILfzwRYUlIg1BAmDotR0gYXUNWzbE7lcXts51rOeLOIF667yMtCI\r\n8xMYMoNmTo+wnLRnazEzowjm3KkQfEumfz8=\r\n=2hXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/button":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/tokens":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/icon-button":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f1e037150.0_1668629213725_0.9420734094739232","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/snackbar","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.40b18d043.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b7615c2b81b0bfca2a7877a2bdeeb6bbd3e0ad9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.40b18d043.0.tgz","fileCount":42,"integrity":"sha512-G8Q/5EP27DXmqvTI88mHVsmHvFUabGGOwgc7LLa7TANcJlH6d/eNhvO3QGC1w8qRuOi1JGfsBlPIn8iUDpfmXA==","signatures":[{"sig":"MEUCIQC+i3vOgZf+c3AS450xFJq/5bUXLMgtESuxEFKbZOrJeAIgA58zaB8ImA/jNCzvCgK+DB58EKa+jvGwCX0NjqGjgeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWuBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvbxAAg07h1mS5Aq105AjmaThDJ14Sxmx6aN9nT34W3MybrQAk6Esy\r\n4eMx9kJWYspUThUJaFGiC4CsV5ON/en2RGio9SnF2IxvHUVHWLlU1XoTjvpD\r\nlIDfCev67YybScIXkCZo94LhY9rJI/hFhcofvNcqMPNEDG0R6BCkjldjlDXE\r\no91VNpo6DxOPE7PuAGKbpBD3Uz8FHT1E3jxBE5JqfPXHBFf+pR+SrHbcvcem\r\nHnbvkhFjv9f2bdvMMSNwCjr8KXqzkBp7akoeOcsNQYF70caEUV/sCyJdn9+r\r\nDH+soCnmGFpZlHncCjtlwAWg2YxvY9l5L1pgDMpUQf1rV4yJwe6pBkkjJVC2\r\noIvck5mtZRXumsxtfClgaeU3BWuqVq9fcIWAtmLoTEf3D8CvhU6jUoK6ia5y\r\n52g6mfqczWTlgReMU1o8USSu4jLIwhjGCfjbIhyR4vz19yw/QxaB0LVgeeym\r\njVXhZ/QlYr0+KmhuEYkh4+BnhSf9pqWV+Kbauy6dqO7pcavUOghkgdDuJ3d8\r\n4nXa4o54RULYWDlDP4dK4dSBLtRqyi335VWbEO7OyJK9vL+AsVpqkpic9VQ/\r\nkRJGNJbtosWAWgjl1+/T4VO48h06wieKIBStwLkkU8SkjeBlCZdEt+xsRphb\r\nkO2NKVTrniyVC/jaodGULgxCmxXGs6/gCyE=\r\n=Os5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/button":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/tokens":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/icon-button":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.40b18d043.0_1668639617443_0.25564981617174354","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/snackbar","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fff46ae3d5c8ae502b18c4242837b051409bc40","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.86bde5c06.0.tgz","fileCount":42,"integrity":"sha512-7/WPC7vzRbh6+5LL6Zv23Wf2qGdzfLP9NB4wIX8m8y0T+M6nWRw4MD4F3tg6uVVCkQmRmazqt0b5da2NtLf+YA==","signatures":[{"sig":"MEUCIBtNEAoad2sVxTdDKP9W+QMF6TLbCk3e2Jz8Drl+nSJ9AiEAs6Iwvn72OPTwfRXGSpFmpdgsyTtMoMmf2/G5c3xBF0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW3jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8pw/+LSEkj0FEjSDWCZKWN9XDc45oy1LxN1uDbK0GJGFAQ+UuwhQW\r\n4j6GkvwmPEI+BFxumoFxsFv7ogw4659LdWTBB1N8EoRU8/XMywsLys/+/ndH\r\nlaOx2jnkwR5xaO7V4IwByMPwrdV+f51nUXVenYYLS1cC7bCf1nmf+Hzzuc4F\r\npkIe8Vjrizwa+1q73+EUds186567wZ8/bfPCVDSwEQWBU4VDCAs0sL8Cz2Qk\r\nKa7Me5zLXd9nrSgPEUsK/geZaEjEFmph7HQJieVGdh2zp2wcC0+gNdaut5xW\r\n0qNr9r5j67l7QZ1sELTr0RU20x9oLI5PHBEfau7BBJbeWVPxVSychDalIyQc\r\nNw1aByzHiXXUzr+ljWtCsflCT4LYR0VsswMM40y48JEb0UfytcE1ps18UKen\r\npmaGqYI+OwsBaxOAypYGjQxWQV9uKsOA4Ul4WHG8DDdhB/XMlQR3TPi4t7R8\r\nb/f6bCAh4GascLJVLJfFdTccz2z2q5HekLNk14vAcq3CV9NjH2z56+LNwvJ7\r\nH1T9Yntf7Xpt8/bZK5GwfxLYwm/qZGS9eXN3E3GBwYTlunl1EhG6VCpsnBIA\r\niBH4ZgobgutaXbS1b10gJsVRW5KWKbnIZs+vZ6ytWFdwGAgfv4k4FyGrRfiG\r\nzFvXjanke/pGPYDVl9UZ/7vGJnzFPI8ZIdc=\r\n=a1I3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/button":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/tokens":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/icon-button":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.86bde5c06.0_1668640226936_0.6209449918752752","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/snackbar","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.bb7751002.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a019f77e62f072602ee6776736a62dc20bf45b0a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.bb7751002.0.tgz","fileCount":42,"integrity":"sha512-vaeF8h1q7D8Ey1EUWD+l6gnAR4WI0rNZlwxb0UWsGInRpDdWQrRNwLjbg3vVodwshzzYzwKjkNktymT/gStPtg==","signatures":[{"sig":"MEUCIDj+ITD/urBWhOGPuH09v2Fp4N1dgMazoOGbRwG94x1gAiEAjp79r35g6iDeFuUoU6kiHcvcr5G+a7du28qnzlmDf1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXnlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8XBAAngix3wq+FEkqvvKLcrYSJmcQ3cs88lJsh9yQpuApr+27xiL/\r\nGyPdwf00g96eESN8R/02bSh5I7FrqPKjv+r1gHbT25DicdAEtVj8PS0ho1WT\r\ncuJan8aMklqfySlK5Rslkw/cVff3usdC+lXngCd+EfseD7aAyuxhS6LoIM0I\r\nqD0G1ZeovRikHAHqLaXN7Q4mfgenjXZMdbZKvLJxNo7kI6uh48Sy/AppAIBD\r\ndtChITY3mScVgFUj0DM18RgKqSem7qlZA/L4NyAgcUSoZY3toS9OK6z+aR/+\r\nH3Czqqdw4M79gbtCqYS2CZ1LgXjl5p6jxXap2iMD54s+1/pwJ6vaY6yegZVP\r\nfDHMslbqFCVVt41ePhC2QS7EypLKtuXmvkgZqf8hB7nAtBnvAHMGZSszi9f6\r\nnFCY97qYPf9J9ws79Benack+WVuvVp6z+m4nQxBcGp5hRIAnbPJ5RNIyVSUU\r\n/3TQ7PNfLVtUpDFo88m6z0LXsg3yV/ZQVVT0i4ZdnxSh9i6yqduDrTzRxuHs\r\nJ15B1zlm7U3TeVnL8EkhPRUnsPe/4CBhj0DSexuj6J1G1zHoVLt9pMLksQHX\r\nq+B72FZU9BugcqfSsxTg6Cg1eGEv7bUaxT2SIZbFKGpsrx8HJnWs3Clgg4kT\r\np2xHZw06tQeaj3mBDORO53kkgN4fchvH/kQ=\r\n=YBvK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/button":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/tokens":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/icon-button":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.bb7751002.0_1668643301679_0.03142675719326249","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/snackbar","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a1bbafb545c5b8260a20972fdd9ede1b4b22309","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.63aca9af6.0.tgz","fileCount":42,"integrity":"sha512-x6mGIcYUiCT3ndVUah7gb7WLR0KARgSpmvTOl1zDNp5a2cKgTm/aHMYnaJlKwqQW9gBxc6hti3OHf7lgQDENxQ==","signatures":[{"sig":"MEUCIQDZ+f29ukDi7GO2vq13z1OL4T3/47e4RiV87VYusNFqUgIgDdjWLHdOEq99qHbtSRUd29R6VCq+qqMP9KOL4TVcVHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoVdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQcQ//VoknX0FAxIJcfstejDhpKKnNYukl+QEtsbslnnX6UojtzHpU\r\nTwiKREUJBzptBKwL6pFPzBd7GVgVvLEXKR1e0qc+PC2ENOAG7yOKT8X3JS8j\r\nqjJmNqTa0KB+bh8UgZkjkK+m6aZQSg+8dbpQcKL0nKY29+KMH1yCzPAfnZRb\r\n16lz9HsgeAI9h/3jpWMMLg1gTJieBYQNHi1LYSMDJvtmq0DhZUCHsYlJ/o0/\r\nw3ErRuk/JLC7P/cn9A32lzjooYVeWQ4mFXm9M3Q+CCJDmdbdYXWmZRNTPb5Y\r\njpU2XHeIll4+6Be/c0rma45ejhaPaTGpkYBGWp5kabIICWGKiuV8wFEGrYKb\r\nKuaYP/hyGzdW1ahRocwWuo+yj8cVf8mFagvgEfTAywV/zBO5xp3dB+CZ430i\r\nFyTcBGA2Mm4zkVdhM9/4L6OmDBb2GbF6Jvx3w0CXefK2taPAMthm3/kpw8Uz\r\n1V+4/AwiJT0PP6X26FHJDG42wrMA0qFVZFBprBoNCLJdIDiiezpSGyWHl16/\r\nxEsF6EgdY7PUL627Ds2oucsOazA/gqbvwtIli5sjt5BwMxm9bLwyg+qJvgoy\r\n9FztJsglBHm6f9c7GYTEoHjfjK4n3hR+vvlRwdB4LoEDNPBwdoj/UDv/pgpi\r\n0C9pkO5ED5hI0Y3PebVWcvihRkUUjcg0mqc=\r\n=ARvA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/button":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/tokens":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/icon-button":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.63aca9af6.0_1668711773212_0.36593477233445615","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/snackbar","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eb2b140d7fd8c453a45565dcca18f2348d3e3fa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.56482dc2e.0.tgz","fileCount":42,"integrity":"sha512-Xi7Zsf8/tMEyul5nWSx/hi83OL1jFHOGOxSZsMODZi4Al7R3gTmBG5f8gc9fkPyzDGbHEFXvLCt0lfYm3zQUQg==","signatures":[{"sig":"MEQCIDMe82bVOugAE/iynNsL98otVw9hIcuz0GOz1HgVh8LCAiBv7+N+mMbRMJ6Te9HGT9+oow0jhrQQqbsTpUwVtDM1CQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq4XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSTQ//Ye2RW7rtTmErR8MzQtjyQkWFIN2VijRytTDKcdovmf91xbLi\r\nSAp5jYmZ8Z+z5QseaZ7WWxOr6KGwbVd2MwdQiv6ZVcjIY+YnjtWud6rvHE/d\r\nUpnuzgqEaC4nSk/dxaeVvgv8bg+InJGL+2Soo0Vw0OcWkn1hjSqjczdzd210\r\nKvEpX7F76xVq51GRwAqZgI3UE7vzTu2WQr9CkPWqnxg8PMa9OC2CNr05BzyT\r\nujoUgEPu6Xp5B6zfUxg/P/ZXCrwW9R3+yJp4AQCdxG7ResiA4nAs4YY3igVM\r\n4Xd3IK8+UgiYkg9kEHHxk+h/RToFzUr3840udEUDB3WAM+Zz6gw5i8Gms9+0\r\nrWe7Hq9JO6b7s5VYh3dSWsOVp9qbpaxYEZKQgq6O875XjRKFaBW758TMVB8J\r\n6Qhd3sUqy+CE7FJtvHpWq+1xFU3gXAjX+WTKSciTQv5eeXro3UOGC8pei5wt\r\nq3b3Raq3pPLuIzXhbPds+Dnh50SUMGRROcAN8DH0/qD+7xuTqq8Cxzw7cTJT\r\nakUlSJb9AD1Xq2FAdcnbZ0EFlWFmr9ApROMLnZI7dBLAICS8X5VVR2rpeaxG\r\nWf370AiuQRf+A857jPilFXLGdbTIfnpJlfY8KU6qDGzo9TAFzK2udDXVujm6\r\nWEs7zEjYXOTy39AooGkTfAX3OZ6m0I4vN50=\r\n=BDze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/button":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/tokens":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/icon-button":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.56482dc2e.0_1668722199573_0.2189878748338554","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/snackbar","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.953e689f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cfa6acc6e1c2269cf52a089582642f729cc6d5e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.953e689f3.0.tgz","fileCount":42,"integrity":"sha512-0nAXeNIRde9PcAEF6Bn8J/HreHKhjH5Dm1E5pr7MXm21sLbrfxIsBYsJsGo2lQB3Sqtl816+pGPjNEdvR9CZ0Q==","signatures":[{"sig":"MEUCIDq1kdp0oAKgH6mcrw1SJP42rH0lUjAKIemxgSzdF2zYAiEA7BRj92hJ3fUp6/BC3AHLzjRaO7aaRPl1cvRGvaOH8fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrBYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrudRAAovjih1izjSeBdOaAVK/6coCSsDU3s9Qhr3LSaepgK6urIGtu\r\n6SAipX+xZTwVeYsVuLyOYwjMWr2haZgdVzY9DBXMNGUcueHavMEKXnfTlu6g\r\n4jxKjVwpEOq5Sy9aDzjr48uEaVilt4bnC4ioonNc+awgmdVa9DDWs5VNps4D\r\njoitEAKIoyser3gRveQwgHdorCwTnr7BSPhkcvDZAoWRh/ueNvv4mg7OV4OL\r\nrlRmXPnjAUvo1GX+OvS7EdhprDg+PC4B5WgHuIZnTy6gEB4bO4ZDhHtehDPw\r\nXSv40PtBKfZIICoGw22OiS7kxF6ryxu1npayP/NNt7BoqSKexUr+McgeIDbG\r\nQkPvb8ObRbHYAxEU/GglQrLBBn+lrWYRKKYQvyUKip2RHnKP7B/oNwJGGNMY\r\n/HXAIJ8Oj+1pkvFpKF0krXlQkScHdgn3K4mUyhnFE0YHV6Cb3sirw/doi4Wr\r\njhko8xP0ebI5DrcADool6QviBtlbT4MaCDNbwvz+IXlZDaowwIxQRun+36WA\r\nS6ow/tBOaDjnZi4wshUH6wa0Td8jofZ35BaiTsHQqvFhFpypSKCB0+g7hfSs\r\nMdb+NMVNHWFPhZ3mI4F3i36vY77gOhFuflZucg8feKWQp7zMW3JBEhwT3CRt\r\nSyZe/toMn2f7FzIDwN97omtjK4yxLSN+awc=\r\n=R7I3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/button":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/tokens":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/icon-button":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.953e689f3.0_1668722776007_0.07900301395567166","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/snackbar","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b5606a793.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f35c275d36c827afad094cdcef440b705df0ce9c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b5606a793.0.tgz","fileCount":42,"integrity":"sha512-s2WizynKKGJpvbLnP3Lll+3aH1LwUeYZF1XIB82XLhA3tyaBgFU0zUrl5qXYK6nFS8bEGW4JJP3UuyYtsH902A==","signatures":[{"sig":"MEUCIE15KSpOTj/o6Uw0kNBNw/SjsvP988P2WXS4WzNTnFKcAiEA+atQ8VgkuDEAhuFaxq8vRQFOarAqIvTKgeVXnrUTrmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1zvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Fg//TsuRfN0aRPwlp24Q3aH7CCCAQNlaq8ofAptpy0GE4C5wFbjf\r\n5CX9YifS7QP8/2b5nyuwxiQB/z9BAxagTcJHaPIK4eeGGb/LzQWAO116AiMn\r\nnCH5PKVOJ0N/h7Y7ng3DmKioalqjOFRoPAX27FxZ9bdkmzfzRpHoIIZrjUyX\r\nr8dv6ihBCZJnsm5fiHBgBVjevCA2YgsjPp3D0w14aLisbtVXfeQPNWDr29/y\r\nERHJOqEBWeTYdcQcjXcyWmwd38FXBDy3Z3HpmJMeJa0YQhpQVJnHiHoaa7NJ\r\nn4sfNTcQqvluqIhzYJ4RwvkJ61h+Jsw+KSW8zDnOnHFAEQZCky9Od4nWZD4M\r\nIrqu0YyOpVdZ0FNdCLxsU/8KpA1293KIz1vRKIPyCkduipewZ+G6HOHLS/cE\r\nNfbUTTW3vFp7wIOtQA5fpNDFncg7LLX5qcbnA0ntbRk/6M10YxebUj2IzqjZ\r\nOEcRJWYSF73btPKy4/MmGBD4DmkNvywuHUJ/4d3wkE7+ZMtj+ozmVOsBQMlR\r\nbBJbeB6raeyxs0N3iKYrswc8yklP1nzSN+lqH4AIYO7YM9S41qiv+0dACYYA\r\nVz/xhEPWuB2xB4T7dK9nDmu5LhXcfYjf199ppC4zivO/rUxqoa+1E8gGtNsi\r\nSKNwIpE4ACIhD+Mn9t496wbipznfbiirXbc=\r\n=MEs2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/button":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/tokens":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/icon-button":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b5606a793.0_1668766959630_0.7359679012953384","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/snackbar","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8c5675942.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e15d46044577f2af6d01972ca82bd5cca084f72","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8c5675942.0.tgz","fileCount":42,"integrity":"sha512-+5QBW9tQDVCj4VNFw48NkpMhbUipTGwgUM7TgU48hOrKpbX4WbSIQLDJEyMKcF1/QQDHMnrXOvG5BsDL9s0eUg==","signatures":[{"sig":"MEQCIF7DA0EqL6hb4WFPqQGV4DidPKN/lcW56ED/gpjR1pX3AiAMJ5iY8yt6X27H4rjDa0IpmnKsfKbTAw4wf7T5fzI7zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6ImACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA9w//ZdPF7OK+Ae72aTFswYAuA3VTv2eYOYKU7ir6rAwe5Y9MRh8f\r\nIzxNhheZvfmeGHBf6QtB1u7KXN1AgQOLeKF6zh8fnlLCYZ1HpEMYyZKGIKh/\r\njv5FHEBEUva+pzY4tww8c+X1X/wNkJO500gaK9nfc6p7XruywIQqW2Z70G1u\r\nmWjNvtnnkpTVhESs5YVtykZ46jb3b1NLeUVDgXDkynlJ46TXU8YZSeoZX9Rw\r\ndMnn22G/qj5RbPgMaJs27kIcFmdM8skxpzfEGQ96HdQce24hHvDyHqtuNWsn\r\nkDOB6k5afLApwL3lXhW9Qu8tbjsi+ELpaeTayeLZeBEXP20BAWYRUnUS8PN+\r\nBss8G0BwDNBmEJidD5ecDm6HykFIlDcHK6jx6esHaKqnhuFhv7/PLQTQIU4M\r\nVhooA7wP0DSepZ/EcF/xO+OPyXE2QQnUJaM1JkczQbMTZWznsvoAbEM/LMYI\r\nLPdZxjmt2Kl79vYtyt8xaHw2DYO+UGxpuEx9dQjEBJd2EOlbNQlFtxHfRA4b\r\n/vF3MMRPMgpz3WRnRmfFjG3Xchln+x1trBEo1pKj4hRvBXUwdS92ZwRmthHr\r\nYti9Ku2RWSmfRn4FokhxQI/zkdctuoU8ONo2cSZ8XILHNwsdWZflpv5/BKDC\r\n0bjjhMBcnFz5tNiXdOoarb+YEmNjqK2QZ+I=\r\n=AGGo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/button":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/tokens":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/icon-button":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8c5675942.0_1668784677890_0.821622414604956","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/snackbar","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9e2c12b6e8b93bd74110b0a52d5d4d88c2553dd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.697fbdebd.0.tgz","fileCount":42,"integrity":"sha512-uWvjV/Ou+4I5/V6yswkbHapkr2gHCK+3gPqG+bh7UkD82ll1wkMVIVlHTan9lhLlT4oELxWfRuC5cZ1rkHmhWQ==","signatures":[{"sig":"MEQCIDqR+CHwnxHuGLb6JFpkxKWFWUlq/41WhbDz2z6ptz6kAiBKrqs0X9g0DGdC1BchDGOGBkGYNes2UvA8gQwNYOom1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7quACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLng//dwku9FySeRf6GZ4fmtl7Pe/LnoC/cFyiLezIBc/v7cmToP6r\r\ndQV2dKOIbRICtAph6G8o90Li4lT9owSC/h34IxoGj5PgKERpohv/OuGZYvsv\r\nViG1sxnWiF5SitjVhcpaX2EWCYxPJwWxgl0FuJ/eWB3DmNA8s4m1G9WyybmT\r\nlcFCJw7IUAX3ROD9nCnk3qvrB045WEXqwOLHUOTI/mYfTvQU/z8ismhSCXcT\r\ntEOwBTqqjmjmgXFh2Jb+POSYBsBFl5gCN3rnkiDY62cgBqnfY65E0tZR5Idn\r\nU5rMvv7pGzqqk9JVyH3VOIPPsQc/i2eFkIBSAj847ugcSWUr85zyTk3Xe4Sy\r\nK80+8MRqk/pkGyxfDBQssni5LjVoAU1ZMlEwkQ3OxRe/UDb4kp5fz98/ChwH\r\n+766LreGFGUpiU3S0NF4NFm2XFhSTfNLvivSm8FkG0iHoXQYn1guKybaNV4I\r\n8LFhjotddFAgfkpGEEjCm68zLOIElmYckdP8v5UDyZbXT1FQyRph9pULBd3k\r\nhQdLB9JGOMuzj1WrLypp/09kkABY5L73cRPDkAbyeINyXkLqKFe1vh2NGKvp\r\nBRlGn76pgDcREhNHiZ5QixUbaDZjO9e+3x53zh42D27C90BcWRQ0MLNFARsP\r\n3CB8eRk8vGWU1a3YDH5M/lMcUvF0Y9skcLg=\r\n=jRwA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/button":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/tokens":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/icon-button":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.697fbdebd.0_1668790958615_0.67911260824764","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/snackbar","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d58410453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4adaf3d1374ee3e39bdb876b327b737e8ca2c3f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d58410453.0.tgz","fileCount":42,"integrity":"sha512-J9fudKcnmBQkcmPiXUqBRDJ9VEski34lSae0paoteWvh52Wh7KGQEidLeouYUAtUyp20GhhkMoIlUJdGvTKp+g==","signatures":[{"sig":"MEUCIGonRphMf7BoZKxwpzFoHkwhrWWBNA/xCUqgpD4AWXN/AiEA5hWWg0xy1l+KYwKVNAOudzsGRdMQt8tBa8Xn8aNMLaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9xzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNow//R+7ufnqLhY5s1FLq+D/VJZ9s0xb1BLZvi24Jk76mH+wZY0oH\r\nvEfiv85x8KBnMgQaphj2jOngHfZOHyVjl4pv3SUI+ZyaAFjIqcYRMwIE7k8k\r\nHTYyoJGFPapOYNzSg7cZoK2ncsv3ft8uOvnXrH2fEqQOEWCtXMfXOR4PF5W6\r\nhCvshl+iBAs5HMfBAccZHjEgfwoYY24I4JemQnTsFUdCp81ByTH4i9SiySUg\r\nkSV7DgD3AyJV0NiBzNsz5uokvC9tAPkN27DM0pks+vfMFCimSkZ0uRJVN97b\r\nwmtu2oi98xxR8VJAO0n7QYDGVGZJoriBCiA65Az6Ophv84aV+yFqTuaVJ+oO\r\nIUkGJPCa1iIUoOHP32dCNcJbLxYE2goWKUiaEnmIsvijEsOEA96mWn3KNJZQ\r\nLRLPDlVNaSSLJfBNkRjPKLxlnRvthXvhwIl+82dM6oFwpTpMb914GQQJMpTK\r\nQhNBvG/hvFzz900DaUsncHApyC+95+CJPhfOj0HuFKv56iAM8i+CdpTtAyGc\r\ne3ZsOKUFbJVXnVY7DV8WuxVCWo/ibzjHZOUXrhDb0s738NP/BAdeW6bL1UQa\r\nclZfw8J8/W4GxUg29MNOX3MtpxycIIQApMtEwBUo9Reep8UGwslMhttcorvR\r\nANbYxvQwuiCfC1reff3QSCAdc54kzDJcmdU=\r\n=6QnK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/button":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/tokens":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/icon-button":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d58410453.0_1668799602825_0.7541387617105013","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/snackbar","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"753aaf0052ed0dd2e7931681bb52065abd2e7c7c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7971d6ad5.0.tgz","fileCount":42,"integrity":"sha512-svNOI1Kwu9Mg259SNTaGgyJqETRIPwQPkxYhHvWT4vYiHQkJJJe9kFBcIKi+sdTxqqoMZxyjC2SwS/1mkU4/xg==","signatures":[{"sig":"MEQCIExa/2cKuqQsxxjJ+wBiHJ4EGs7iagzV3yYz4cRewHU9AiA8jyEQNt82f3v2j+JMN7sSO3vzFvpHzgTPY4Xd5weF2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJfyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV2Q//aGE0y9eIxsathALTyJJoqx+LmHVyH53wBhuY00FhCV3I+6ZY\r\n7ewOGw8J5K/+hdTVd5+btpv7G7X/xFf+iBnnaxxB3cvlEzjNKG5ukF3jB9Kq\r\nTVUcNpdIxDUulUpC6WP1r4qLQOkB0hWd3Bm+U6V877TSNwKFgvhOKXM5zHEd\r\nSFwm+xtfhA6H9Yodt0B/VoXk6qbyn3HSMqsD9dWhs8uR+zh42ePRWlzmq1bf\r\n/uEH2BjLSmUJROM18sv75Mk23dY0QZPiz3pgVR0XRul1+KjNjA+FqTTNWQ6c\r\n1C622Hyb497wZnhoAUgLEkqHRmX6fBQKdIeznRuqi7nN7TvZ0axTIFZViH71\r\n8hM9f8tRlCiatWkcq32PSTdGlA5OLww7X9x/aCOrNMn5mcqwiQtA0Pfs3NZk\r\nyj5dkFUULuBd6VR9D8BirkbzGVWz1V6sK2vDvFyodlajZaS7cuD6ykWuLCRv\r\n4mGdlcLE/zNW0zrmaztNVLLhujmlOzVpSqyCHy9poU1opGjtNi1H885o7fUU\r\nxu2dS96jiTD7RH7Nt/XdlBP/XxLw2878WB0UUonVYrBUrcryhIcnfVBkt0y0\r\n4Zo2jpFfzeIMz2XBNlYlnczaNKeYtbOaHC25/rlwkKjI19SN4965fF1SZqQN\r\nhYzdanUrsnbpAfaRQrC3G7NJHuafrDeQzmY=\r\n=BWnN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/button":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/tokens":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/icon-button":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7971d6ad5.0_1668847601852_0.7347028494354444","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/snackbar","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7506aea1155a6ba51af624b6f4de6028329d64b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":42,"integrity":"sha512-27FEtg3rpEQznb8YtSUx5YZRMO5E1D4XZlnQXofzMUEYpRb242pycRIkEDSP3mjBBdTdtI8Ir8VaexLW22PfxA==","signatures":[{"sig":"MEQCIHhphP7xvZhNZgviQrFBJTCgNiC2aUIKek1k+0X3tGsLAiAApONo0sDMDLLKzYFKCR3mg1mRqVWCn0Dm1WWUi9gTiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1klACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWRQ/9G+mNvxYQ7dwbFMGqQuPeQ4cfQ75ECCqr5SB2+k0dt+HyxLnu\r\ntLIyifKNHVgnFfWzHrJFbDBKp74qUY6gWNVD90MzdI55W/9O2qeDEEel3QtB\r\n0FlXD+5LHsMmc2jYd8jOLjkVEQ03vV10VumWAMcRTtl3ViD0sbkrgZnRfJoA\r\nQlRU8ZmgnfZTOZFoXRZ+Btb+lSa0kdgZwpm8uH4JasuiiuIEMH0dB2ZIa7pn\r\nQ0cV2K2TsJt2TqkoTGmgqKk3w36NHu2wz2yUae0jyzlJ9yy+zv49x6A2M9Yx\r\ngc2547bzQ2BWtZfHGgvdR6VPVmAhyzOyBN0RDaFBKktXDaPlYxjuluxO8I8A\r\nAcC2zkbK/O9RJg7uRiOCeTRtW9HmW0fKmAYSp8//8oTnfedfxdHzKvEhuN2u\r\nn1U1YKmyO0L2qEnUGliOecb8ZFCDXfvikyKkNxkRDzpRQWH3UofGp7facBk1\r\nNrvoPWW+FgXyeKHl1FQ15nAvtiMHr1Yk0GL/8/eXhwowSqDJoruvnJDMTlz7\r\nodLGDKeLkCKG41163ST0qWtufGSK90r2CugBqNOrSimj+VCxUnje2cz9Cxhw\r\nv+e2M1IoMVYRf2BKgLB8IJlhK0yvmqNRRdGYzGjZ/c8j452xqcWSELNFOxyU\r\n9tiiaqT4BJi/a7Q+bp31b/DE7IcVkSkX758=\r\n=IxQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/button":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/tokens":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/icon-button":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a0ae73b0e.0_1669028132846_0.8036419042187943","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/snackbar","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.96f472604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e33a8047a3b9d003ef521cb7d2221ec68786ddea","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.96f472604.0.tgz","fileCount":42,"integrity":"sha512-BRsDJHtMbbVNwXjPmX8m7SuFw+3woeffhOVy8WhdniwrD/GpwWXJp7sB7Od8ttCuiKvtXtwEtVB3CO1XCBekqw==","signatures":[{"sig":"MEUCIQDrsfGXPP7pqw9R52daz25IqsUt9/3vdjVU7tPXHym8JQIgZKuaKJ0eb9mQoLsL98mZrxhGZWYFNVUERN4VtAI9/ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3UBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHWg/8Dx2dYV9BMb4pcFQHgX6rideaL17qhUDQaYIPRzusfjfhal5z\r\nQ5WOgE0uuvyca+iDMgjv0SpRsOkk+4hjfUUqeZdckU0uorhYh4FKMFGVWi+B\r\nzd35XQlnTkVB5XHd1ur7jaYV6LyfcrGT9q6E8ZkZC12rtRXoxyP7ti+YQ23D\r\n4P2vRh8NgaEHp0xomWVbOwcD5d+dYbV7dprpRmT9izUEcrxZjHNK6FXYqVgf\r\ngW/eQ9pEpCvzRMnpyWE4b2WX3Mjw8HRH47SGq7KCwnrZgVVX4zG2Rvk9tNOV\r\nGkeO8O7ALAltDPXFVvUCMaqKXp10sqUwyX1K25UADXjIe0mDppWBEp96wbv+\r\nXy3FU9NITvCF1B0UFzHf9ob7EK8gg9mNYIOww8ED+G3JF29QLNkD3PZw8ILF\r\nqpkx5xVsCO6U+Vf2m3NMpvOiWzXwjeayUvzV72TRi2UvVpYmw/go/r0t6ra/\r\n1I/TIB9Yaks5j8NFQftor0H3w/bKMQPh89z2NWDUgtdq+xAiznzNEgjlpT+6\r\ncF9lqDGFZxpTiae23RGoFc0Lo1LDm4lQbMXSxwL907O8s/e9P10YEZGTjMUS\r\njXfoSWUZhxF88X7cJv6w8ecgUz5DWC5teMABugn9UkaANqjeoND82+JaSdVH\r\nfv+cLaq6knqBTmHHJ+f1AguB0+osJsKCIJ8=\r\n=7f9v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/button":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/tokens":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/icon-button":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.96f472604.0_1669035265299_0.7546458522904416","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/snackbar","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a10e838fbf72b808dcd163c628d9c61c616bb1ea","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.18b8f31e1.0.tgz","fileCount":42,"integrity":"sha512-tCcLXhHHDmSxKsiEh7yOYAOoc2PbrXyaMB7qo11Wla3qedBgDIkY0ENxEOoEK+V/H/u9SWjLGCpOrFqgeto5Kw==","signatures":[{"sig":"MEYCIQD8sQSBhsJgV9G78jLLQkpc0JYOt1+DG9aXXTQhHjiXSAIhALXvYKIBv62059Gw9eEXssRjRVLMfCxjZA03bOb7nANq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6F1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5NQ/+NIDOq9Kz39/Pbv5xL9A3+bZDHexCeLM36ixV5DrdageHOb72\r\nY5aou8dVAct0oe3+yDXa6M7EYhbcTeER4RvF4SnoUANOIDfHCTpEFsAbh4Je\r\n4LQb3+wfkcUKZYSVPc4WICosQDSdxNIdcPdZ+65TETRl/3AqC2Ow4h/WMrOr\r\nccHwUOtOQuiVLoO62Ins+wW2IUTqdblenM2gZni5ss0QcpLPxoU2SB5FwWR6\r\nH8X0SjLOSK4nnmKv/u0efjdMb1eVnzHUBPR5kY02l3+hNX5NBuqKdQqiOkad\r\ngU28zeNoKqQHz4yfNWzSW2/l6E8FKqGcxT47Fn+xvZ06KGrHOu1P2EVPyPf/\r\nm1kroYptcNYYB1zzFGgJV5qC7EPvwa98Th9w/uhZTw0RCXhE+Bg/8vG1EznW\r\nul0J7LSL9+VJXdT0dgfIYhYXIZLHrayA59kqmd7vupMdazeI9ZMKScIXALbo\r\n4IfApBQwWsjP3If7phQHi/c1Pe/JFoUEKImQ72rmdBCCKTu65W3XRpKNJgpG\r\nubLUjBuqlMZBWQ+mKgadWPce5Xf1ceMRlGI2IAQDO6y0/4KZOeNQ7i06pLGU\r\nB1ICP6jexD35jWruqySN0yht5ZaaLWD87Kkcm058RB1/eAHkR3sRdbqUjD9j\r\nZTnMGbKbyIz82ENu7FN8C/2UCq6cRz7SSYw=\r\n=bNSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/button":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/tokens":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/typography":"15.0.0-canary.18b8f31e1.0","@material/icon-button":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.18b8f31e1.0_1669046645027_0.5932083191270385","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/snackbar","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed02581dbfb01afe605c844d4935f3aec3eb579a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.912f33ce4.0.tgz","fileCount":42,"integrity":"sha512-WYy+wLMO9UB7VbF4ahwDlzxYWw363OCyC+/+oULgzwPONYukf17P4dn8v2CmVCvb4gieRVzuRXv3ImCivZ1mCQ==","signatures":[{"sig":"MEUCIQCadlCbbuqGVoCyrZMtsVRrl6cPlb1CtLg/rUhM4nviZgIgesrKxwBs0llOfScWN59Ii+lQvC/cXhiwpg2CR7Xx+4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7ubACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo39A/+P74rqXJWmdY4PFlCO7N4PzuEilS7bug43ILvwJ8G23scMvcU\r\nHfh03mycjLwgYkL//hHQfyxg9PV8zcCpUICz164mYpPbFvh/AqbH3Tc/+ggC\r\n+jiHASf6XD50PAfMFQwAqU57mosMEZEcd+HDjsbGsA0O7ADZuHn22uoC/83W\r\nFUiL4+pBH210zPhULc/FBVLauX/9m2Ctg4POl8rY6Xc3KigSPujAAVZSoRV9\r\n0u288samtvTCJwEBKggkV8usYv+bb0Y5OzAi10zKw3IOqysdLaByehl7PGqo\r\n30ptS6pioz/4buXlez0Vxp5Cmp7hS+wdyDjvHPKw5PnbSOgWhM24yPFaIRPu\r\nDtYVkQSBvR5bIQI42lo4FvjRMzXnJA0mmXcASdD/pMzRJ3uY/cP0dwN7CBhG\r\nRI8MlbRpEliostYUQEDIf3q9UQ7HUYPn+86rzDz5uyFNcYLzXzMfTBjiIUOU\r\nGZsSBCxi4lwWxEGv7O/Xls4Bu4dbBu5XHqN1N58rXz1/mP5zXYZlQsYZOuib\r\nkTMkgCpfPRQw1LspUtE0aOHPPmyi/yeeJJf2QwZWlxz6OWuXGL1bUJY8hUUj\r\nppP4rD+/LVKbGHxFop+oaG0Ke037hz+MPQM7Zy/7pU9t8y9d265msCa/UFyB\r\nqgRAGBe5BUMare+lA/MR3f3xQCEbpvZXJnQ=\r\n=Yg6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/button":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/tokens":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/icon-button":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.912f33ce4.0_1669053339521_0.6362753056706552","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/snackbar","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"433b10b6c347afe5eb2c62295551fbcfcbb56bf7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1e1b1c369.0.tgz","fileCount":42,"integrity":"sha512-9XyORLKSDz+Kp+tS+tTrQzu1i1ky/P86s60zpOgvCwTBlQZWxHxW2OO9UX5miV5yHoLgNCc7X908OYkstoaMrw==","signatures":[{"sig":"MEQCIB37Zknq2qS0FNA2J8ntAI6GySOR4RKNDivGkmSyWmU2AiAeGTjwNxE0v44lVWAp2n6C3GgIyKWS8qJlChutz8qidA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm4+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtjQ//XpL5De8tXYz725uBEjDr7GJkqIEJYzIgeoh98WuKNejit2cA\r\nD8PcoBzUG2hCkWFY4Z2g2izM/R/lbFpPxHwkWBcjnTOkd+3EdJJD3nn5jGiv\r\nX154MGAl9SDCKNAV+rD37+Av2kO3GM1UMb5rZqRRS5Xh7gDMVdRTWzN+//at\r\nlCJE7v4ZdfSLw3mH7GJLDCdaPcbWO8BLbQ23QowU3jMpNmpmVM4MzGG58R2A\r\nDMyPo0ODqYv07JK2/V+gkW7g6ljjaGViIe+vaCMdLgzpmA+flCdPw1/OSPLT\r\n9ATxGZNo78UBLKyzJrZ2vuQn5sFusLek+8mfPonWop6AGN5TvN0hp2F5hHEK\r\npl8tCvfQBT4vUprRj8Y0qTr/HdKqasYwIIGz23rIazw01w134MacGvgQ67Wv\r\nrl6JkUUoa2EP/RMrqvdMycBxN6kBbl21plTncvUSeC1rEzROqCRum1iLMRPW\r\nJngmEho+LkrJeDfU2v/NGPDn21MbysruDH9P4MdlEhMS+6EzoYtyYA+kxgup\r\nmEPOoOS/5TPcW0knwN3bh0Gk5N5UeBbdYz483ZPc02+5J7i0uR0s7OD0AgkH\r\nB4lsGAFt+0r5B5G8wweXsP1RbgqU2q0WsfJA7d0kPxTMvcQ2oXxkhe4s3h4G\r\nt5Ncc6WfUJ8AQE3Uj59ACUAhASR7ttlEDBU=\r\n=ForM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/button":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/tokens":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/icon-button":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1e1b1c369.0_1669230141807_0.27145099964804564","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/snackbar","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"910653d22d9fff05ea6f4bff1ec22f43fa00904c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a2ec49244.0.tgz","fileCount":42,"integrity":"sha512-KuAmGTdib6uDR8/hSsMu2einEsWOOJOcqgWqDyzSG8p8d0bR8sWfO6Z+dNI5IbpX+hB4wcmdRNmTKwzfN/UjTA==","signatures":[{"sig":"MEQCIAgE38HqpqrKlbYSk1ptT1UHAaLDaHZU36UyDBvy/vSjAiAiAu852CWlhXZV+QHrwHGIB1R8ukKAQ6ieD9QgMkGB+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnVPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzzA//a+dmWUstSXruzr5dx0M242uIytvHr6R1pYpkiaVtH4A+0A4o\r\n3Wrb3jV9BnqRH33b0018VrDuCUnU9ZqYR28zJvWjdjgoW7wEnmC6r2fugNNA\r\nxkTPrNWhrxKWv/v37kZqggkd4nROiKRrMErAjnzprCF0vwJXO7nW6zewkKDX\r\nu23okO3BOsz0BP30lNKBPWgcDcwuSxWjuFNoFhmK3oQpNxfJJBIMWREdth+8\r\n6OJTEFJ8t9SusimJAE/w8rQSXGFGfln32QOGV974nFMmgEUunL9ZzNGGVCZM\r\nNkpUKxYlgqmtHZK+xNrh54sUlIdZebWlzfhqfh/yS7H2fWH2hoJdoMdVQWUW\r\nFiB2REKiQ5qxpn0euRx87wWhCeiNCDIWJHqkcJz+de2/wW9p5xqPOQGtkA9a\r\njVQowUxoeb+ceOIHwI4wR5OvIMnrU3aS6GJEjmCX7VZYWeg90te6d1DBZLqx\r\nzaVzesk01ZT7iC9Hrcjer8Jw2OreuuM5jwQbQecYW3GEuQU+snNqEBIeA6wl\r\nhEh4OYM/dIy4obcDhWq6QVSOEVj7603tP5dE9YL8Qcl6pOaa79fw9w5kZ2jo\r\n4vseZCjKQlRb5rMD21zrznpLQYuOwbiRWkwjcD191mo7BRyHYzn3CsQczQUs\r\nH5rMo4AFVt5Ce7JcOyGjltaoxyd+mof/aE8=\r\n=6CPJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/button":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/tokens":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/icon-button":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a2ec49244.0_1669231950692_0.8296259388133207","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/snackbar","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"696a4cd830a5fcad7ae41d2a70b58d653035ca5d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a7458ba0b.0.tgz","fileCount":42,"integrity":"sha512-rteZl4w3w32eXTMLUP51jMqeUrUOcbO/QV4YGq2HGogSk8ms/loplKoDRwokYXBlwBPdO914DsPtqLTw7xcy1g==","signatures":[{"sig":"MEYCIQCMinGdSBdHQ3ujLHmSFYTK+zLlDV6dzHt9W7onsusYwAIhAOyTi093M6FJoxX2bFpxFZpfNYG9RQku+wrE3M3B6r2e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfoACACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOchAAlBmKf3IkoyqAfv11gEGClPoevZWlIgWpBMGoCyJ07wlBc4Cr\r\nNLY5ek9NVgvM1p1kvbeOYaZzy1m4Ps3wPihxEPMKqnppuYEMy21nWs4Zg0oM\r\nnwR3yBTP+zWQExp8uLjiFC6P+tUTj0UTSMoIqnZ8Gko03iAJk49Q9QX1xXpH\r\ne0qcvuPq43QfC9uCMiBMqdcVF8PyRuUDbhEHjo1RV8IcaAB0l85W8USX1v0W\r\nFeE89QTYO11cDDiiQsgvFEw7g6ixb1nvQkvCnRg8ZfjQUrccTlkh6wwcvSC8\r\nG+eespfErQrK5WxRtQTJUCF+bDAVzZCOdtvcFtS7q1U1gL6GGCBvZF+FC57D\r\nosEHJyza5b6yY9iHX/TfA0y+Zb4PSZ4HRo6nFRou5QQEk4mT6HPk0U6PrPUR\r\naEF9p2O/WINIR+4/ySm0Xw6+xgV1MilYWBiq6GYE98M9nicn18C7M7oq4X7+\r\nZD1LZCMLA2BjnlfavHTKAGDOWYv7GARhs8oAOxV/JhUClJZ4JAYUYdP5+gB3\r\ni6WjNnxB7S6E/WJ/htxK7GO6o3vYpENuTPiPb3KNYgQn9S1l93q2V9mmZLdK\r\nlcvVU6lUd2BWikDVCOZbYIpLLCmeXVFCI1S1GkIyMP9Ob9Dsu/pdDhWnMwee\r\nX1pVhoqvdv1t9k0umGtLNEtx9uw7YQqtLY4=\r\n=C9ru\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/button":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/tokens":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/icon-button":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a7458ba0b.0_1669234690378_0.4623101979007007","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/snackbar","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9501e6bd1fb21e3a7d95c24952c2ab9900583ba9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7c35e5036.0.tgz","fileCount":42,"integrity":"sha512-pw72PaqAWDTxVbc/e5LW3a1cOJYlvdTZ904PmvEgIAm/kZgiQZnM6rn9BDZBvnLeyanrMiB3TkxUMu2I6BcsTw==","signatures":[{"sig":"MEYCIQDQcG592o/dr2kXz8ZqCCFBL6K6FBzdt5aUlR50K9MqMQIhANUC1rUoa/rbaBf/h3nVoQYrDXfgS47Gc34eBTY+couw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy4fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxMw//TxaOR0qRFuOBL4sr3e4tFNo4g/vkP6NgIiIxtAbbPaJHyUrd\r\nu/DY1wxuAjoY6sIRRMKWnTCDjoIMRv6ImYxCBkMJJcXmIa548/Pc77Xu4REi\r\nvG2EgJ/L72SIHJqQcphL/y1w/HLoaBHukqDLNqNDWVX9FM81XPL5O/FPV/Zz\r\n3y+xOWvdDSH+TvTiT6Fnsfad0/E9yRpcbmNVoLnqHqXek8T7JgTatoovfkZc\r\ny7lPv+wdEtrqNokJA4SSewe14hWWFn5uf9tXW9LVYcNApjArXW7nDyWOWAN+\r\nHNmSZx0+3W9rjaUzrBMgmKbK74uNZLnhp6UUg5f+nIbXNmbqJb5asfh+JUQv\r\nmFMgXwO9QA5lZsOE36KHnGcKZBzmJvBkKco02t89gEFhPOtSVMVcyrbnTPtX\r\n72Lqwvp92O1jd6t3BMz0bMEUaB7lBVvSD2jKoHUqc5Gz6rBMBgh3wHhwFxiV\r\nS1rhQLwXJEtYvnQB34wXH5TZhKdOpZpz9mwMiQFKkRcvwpN5AFqWOZQEmLjL\r\nXQjfHQa0WrnDdPagVttZwr2l+yWDyRB1yZq3LqW4m3y4XUyPu82lWQsfEzy3\r\nyYFerXH58fv43/fgyYSXu0Bsir31qYYwd6jllf11xGSoS5k7mrB4MKwa0BAq\r\ndsoz/z8K2t7738XGOT1UrU3WB3PTAk0yxfU=\r\n=AUaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/button":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/tokens":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/icon-button":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7c35e5036.0_1669279263463_0.9696988664108814","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/snackbar","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c92f9a49df81090b68c03254e2f18812b2be930b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4356e05c5.0.tgz","fileCount":42,"integrity":"sha512-iANUybmJyjZzpjBmo/pli/zRR3++Gx3TGowgfknZYTB+KRfYHPOwUMJcK1bi5uLUDWGC/sq4hvPKhs0aYdBBiw==","signatures":[{"sig":"MEUCICK+XyjICr500K4x9vK+c0W2zpd1sUyI9qJC6sb258J0AiEAwq2EH0XA3REnRA8m3Arq/lLFjf1ppI70NB5Z3iVhAUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0A/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxJw/+LDBn6Lzff/+lFp4qubCeChTHsEazigNQnsKkbcsoM9IMdRr8\r\nnl4oNfzKPGBsxiRpcwRzU6D+jQpr0Yh8eKnIzaYiKq9tM4kUKIYbbJ/1fEgt\r\ntdrqMWsAooJt3EyM4VlyCChpfsGlAjLavKxUZehsadZz79BAxi7GaXs18qMy\r\nFofiiQ9WtR9noMtQ0fMA8+6h+ud8iq0SeOQqgHi3yzk/J+J5jNY33JdTlQFd\r\nNSNk5vnHnUZy14mJ95ewaoxMCOXRbhn9d1InFIaGv35YXAxudvFBJpFXcgkg\r\nxIoRtrjaxtvpbqlQaJUFSrbgggpTHGLQiMZQm2smlmW+R0OChvosRawTHRth\r\nmG+quMt0UQ9aaMYe0LmnWM03Mpf05Fs5a4/PmLF5KEvRctZnvwX0akyuVZy4\r\n86n++siYHMMEruFk0PlxdSr6RbmLqqQ6yZg1HQlVmOi6anceLGRNKyqRBbUk\r\nXgKUuVvL0acOKmUBfMjSoV6sWxhInZ0AN8XBB0fSQdmynmE9aI+kAK441lvb\r\nHUw+szVMML/GMRabj8RLFKa4axMlbb7R7YhqUTLrAsovyAUnI7/wH5UQ1A0D\r\n9X+6JB9rh3tJXidnH2mXw679KHMK+fzDqxx74hHSDBzMJZMYbeLmAvnbPy1/\r\nZ3Bx/G7hNhRC8CKEe5mqAifj3NZmamC5AP4=\r\n=Agew\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/button":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/tokens":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/icon-button":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4356e05c5.0_1669283903134_0.05455970180937464","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/snackbar","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe859d38daec31ded35c2f4ee14b90d5271e80b9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cb605f8af.0.tgz","fileCount":42,"integrity":"sha512-hdkzaK963gj5aBiX5QNH1RwQkHEqxmgYpfrSJKvRH4+gh3T+MXNKLavDqPLlhqUmCnb5o6SIy9IW5oLJUuzlWw==","signatures":[{"sig":"MEUCIQDHAVkqrVERPBsaOVXblywNl77Ilgv1n0PQDLK83NeEtQIgLrVdArKvImaLdXUbJZ4diK92tjpxJ1lwc9GS9bIy7uQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0S8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFwg/9HaI2ZGEVcm26heFwB3L9jEl7uKjRuG9oaqDLkGuIbp6w48/J\r\n6NKHFHUlBzXsFLYx3ffZjaFRwgzlUhkXo6xqpusD7RdwOhzyPshMDpXwearO\r\npKYJmR0jcXSOHhAkQZHJN1zRS1Psk8fUAYwmPF/igGg1sRfRVycAwoke6Yr2\r\n3f8yctEI5vqoYLntIupSfbIOl15Z2ePqPhHhjVLfl6SvaKkimYUm5Pm6tf11\r\n8Jp7B5xJOJfFq/yJiQf455GjSBl+nVrW8mqkwDCf/diKeAhP30/l5X4nOFbz\r\nGV86gCWdK93sGC3ayWXeukvI8nCfajqeN9JRjfSfnuH3OwLVx/mA4Tm4iGmd\r\nMJRAi5wFmXukmagRIS2gu6vZdzFA4nD9k58JZeG24R62eBGEEvR7KxCyKXyX\r\nXPRNPk121oafMVjQOoUwHIdvZuXbJXkN17uKrlJqqIDokZ+syux2ppwJVHnc\r\nwsP0jQziPFwxlHsSs42BeKf91UmbjG8mFDG1Cb6jmykAT+mcugJb2IjnwFbP\r\nITET8S17VNzNeb9FmQ/BUNS7z6Y9+Ruw4Kd0TmYOprWDRZmXCFdFLVhnaQZg\r\nUDQ/agEfEh7vNeBWMzI+cXOSDJ/4k/dK/F+ix8qigkALOKPcU3qwhY0hFErW\r\nG6m5uOD8JthPDosAzLXmtcrJuHzA+Nmf1kk=\r\n=xocl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/button":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/tokens":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/icon-button":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cb605f8af.0_1669285052782_0.6299793265611289","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/snackbar","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b6c076d4b72c05378e2aefec1210692a82d59b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.05fb07f9f.0.tgz","fileCount":42,"integrity":"sha512-gRvijGdCZI2p6oo0Q1MWL33zSjOzjhwpZ0DOolWuwOahhB9Kcb4ROIPKl68iu4Rkig3VoQhjZLH6UErl+7CJBA==","signatures":[{"sig":"MEQCIGzri/xDhpAbAVK+wL/5yGCAyh04NDYsN8Ct71ehWlHwAiAIIatWroHRwqMO3uDWft8/P3CGRXqXvJK3v67NB+PHXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6amACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnVxAAk7hfcrIMZTgil8zREtNcghGSWy63z7KzMT4WjN5cOoqaPcpE\r\nb6J1Axa+sOVYaQosOMF7uUFIlrTqddFfFl56enPmEpekBGJCSXFHprYHwmKH\r\nJQJ0PLTnukqNhOmZw0PFqU99XjYEoEc8GI9njV/8CnCGguuw9p9Fi4gEhATp\r\nVKjWCV9H1dos8KqJq0PxOkQfiE+QCBFk4CdJhtmj3wjmmhyG0McdN8ie7kIz\r\n7ESy8SfHB4AdCRjvgp2qlLOUu3w7nytUlqy6bdEKzM4kePS7jX9FXf04p+uc\r\n8uXEagoc3tyzPjJU4gc9zj/+YeW1Z6oz6ehj2Kq1YRa0iWGDsLgAmrncRj0o\r\nSi6W4pYRdqz8K+Tn6MFP44O8uQUujIhv+NQwrba4BO8KjFAHlvkrMYpEq5q9\r\nx8swpx4Q+yuDXAfQeHUEgNr3RT+A2+H4i9y10h6Y0WKSkMFsgXkh+WTtNPAl\r\nu0ZgH3rVdZ0WmSZ8wPT7mXz8CqKfH7ZezpiiDAnI81AZXMfcMCJTuWBRTGy2\r\n+A//uLEE6g6wyhT9la3SGu2gtsQ8K4NXX55cdB89aQveuM0mnU0X1W1NH5lT\r\nWGYuV4OSWQJQagcq1mtCNg3jSIfNzs60y1jCABda0g9+rngobGWft9w58Qes\r\nKkNlZXyxyCq4sBMdJ6lGRgOiJndaOh5ziQg=\r\n=Xjw8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/button":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/tokens":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/icon-button":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.05fb07f9f.0_1669310118200_0.44246710734865946","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/snackbar","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a911b386b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1ef8c23968b2bc62093d58e4df20358166c59e8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a911b386b.0.tgz","fileCount":42,"integrity":"sha512-9T2NRSUHeNAHIuWQJuz9eF2hBoz3hReQnL87MZBpXcJb4CX5E/z4HEow1x+rVbmRJDsfUt2qU5akw4RBGc+Slg==","signatures":[{"sig":"MEUCIQD5DHwqpeCPxHaQhiMVudjj6KwLBVaUF6lAZ+/oMLD+AAIgHqaiqrXVJkCJPw8n+cGKw+XnMVF+8Z53JldtdZ1Hvjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOZ7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/0g/+PUbsZXzFcfRjOmv/30DPWvqcJU5MhaTluIOGLLBcqfYSRFpU\r\nOex/78kQamQR/I3xB1QyI/nrhqoNu2cIKU9lMkfNsyIVwFb2f1X4HCIGdfhG\r\nvCRGSRfCQNGrWze7W6agY1fl0FhMrZagt5TjJBcm6ZvXSaWoqXxHyDFbkjhB\r\nOZ91bXA6l1HHtxr1+/Kxu2qkP8n3+3XgBZr5GHuVCdj4kMWUhdypVj/85p0p\r\nXdpxXV7LXe+jKwRmrs7ioH961gHF0eUqqRqjrfIbkPJSSwwhVaQN0JCW9IQu\r\nP89gPQOQTnr8hlvr/PVazKC7H5MHMmcSFbvREZtYy8rZnD5IOtN7KJs28Y28\r\nlrzocMv8ePOGwOzOUrPwORGjzP1arsy7vqQQqDg83ZmwKVEknvVUxJDGGo9T\r\n0ZIdmunAJP0TqtW7fXLSgW0dzKoHeCTjXN1pD7jkHsN13QB6Sx8mNUJHBb6a\r\negygW6L9Ooz7GnlprI/z9JO54+FiGNmC4RVBoICAFmKFQrknHlyS9wzIS94Z\r\nmUuD0NH8nFnRM/tWt+BkcIw+hl+N/dXStwieIZYIpU667i3AWiSY/dR2x5ZA\r\nnak2fkWMyfLRtF400ByFd2Vr60sUyMRmTC4mgMlkYpkrgwfOJmQ1JEmubRzh\r\niI/8bYkINEa3Noi/nKgYSAmVTQUW5BwAGlA=\r\n=TWu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/button":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/tokens":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/icon-button":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a911b386b.0_1669654138854_0.7320288268668658","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/snackbar","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f3e75d3c51e8fbc9b6bb8b7d545884c07916bc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2aa8050b4.0.tgz","fileCount":42,"integrity":"sha512-J2K23xItlIgH1Z/uKiC0u2IToEbEmeNr0luXw3RofZXwL4cbmjUXRXrtVUqKHztluXaU/kEZumCy5j6UyOy+Gg==","signatures":[{"sig":"MEUCIQD/F68Afk5TxvJpY7Mc9p9fgzZhOGNXh8jwT3Qj9OShWQIgF3OjKnRoC1oZ/lirgbA8gQrQiKKS5RopBbvmbfaSCI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQhNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4vw//dtGG+mVz1l9gQMSRZmUa4BCwXK3OMRBPAvJGLCiwyblsPI+x\r\nnCqwU3jQah5BPnEn2arvb7UVfTFPTCdNjNAIrrguZ5mASEWY0dRd5By2Rt9v\r\nkQgdlrXmxSNAzEvgfcqC5tg0lf19ZeBVBZXX6x/+UcUtvFlrknJ6DlX4rmnS\r\nWG4BTLhatw+F491VqBMl8NJrBK7NnfXQneHG0n/7r8Tx3msMC/5A28zvKuyr\r\na0iwm2vDZ/cem5pjl0ym45MSZBzlGfRjqelMF5j8Z1sMmHXMBojOBfGFgJ64\r\n2Ys0VTYmhJvZ5KSKQ/PvCWhSYBErQVe1Plv/vmiUCjXUhTQ7Fklcm05azuFZ\r\nZ6EkH6FFkxF6SdlY8hbj/BQfuNYMPXexnldEK90r9NkIIk/IDYjLARllm5yr\r\nXBV1+0Oblx21q7klVm2zaBoIEvkcwX0ctH8OJDUlZo1NgI4m/64ssrxk5qfW\r\nu1tt/MGi4W8YuGWhLw+gH2p1irB1o3Ojk8ED1V6w4+PjPxmE/HZuak6xzFQs\r\nfmEeBQd9E++A4c+REiVWj+4lBLJzXIAS+6aePulyLQkx8Hj9R6dZQghMypp0\r\nSYfUbn50rPktf3PgbL+RtCwQC2l/PqOYuogK3EzyW2hlKq9JvGM/U0zcz8n7\r\nlHJw6o7fIrvzLDg1GoYlpHOHooF9cHMs424=\r\n=yE5b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/button":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/tokens":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/icon-button":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2aa8050b4.0_1669662797324_0.060806105481325146","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/snackbar","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.323904a9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"389f5fc219414cc2ca6bb70c62a20ce9f0659b27","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.323904a9f.0.tgz","fileCount":42,"integrity":"sha512-hfWUZa2KiSkT0qxDhWf/OMYkOXWBgkv75TyOEDs0qs6u0MROvZvuh96oJpLx1IW/oqyM/pq2/8AGKSPRWM5nbg==","signatures":[{"sig":"MEQCIEsVcSkhe74/RoX649Xb36ruu0EApGajq8jE6mD+CqsjAiBPGJAPq+Tvtas3Bl7QUyLL7XcgG/iRaT9gw+ldSO/Mew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhibIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXYg//QqogSF+H+sq46Ff3H8Ve959VgKow1SvlhbBi12uXFdlKC7HO\r\nGHefHqisAntj5fUg/BJSy2W7YMzUwYb/AsU3R6RH6gSQvlWp88+oOU9uSZg4\r\nAd4A7WapqCxk8Tg/1pnKzBLz4q272s5NicnI9gKNwdwMKPuWADMhuuPU9na0\r\nY7jMNVZLqKmrqxtC+49KluZjMk37dk+imNflqzd0Zj3z+9hD+SUKsP1MYCTx\r\nJ9b4RvRzipMX6hoVfTyInrqeNW7XLd3BFtCD9bOA0JoDA12DdCDUyzCa/OZM\r\ntW89mmpf6GEovDYBhGAIVLzBDddnJcQVXNcycy3jYgSoHEWfiTv9xtfHRjeU\r\nglOSwYoeU5lNnyv+7HWq7cP7Okq00R3ltXqqJ3MOApeGQsuV4cSyiEcH+MYp\r\nCTDXLphRxInkA1jRKNgmbHVmWcAT4YHNAEtdMnCZGxdWspFypZOig6aDX4g9\r\nvBCL8ZcWSfslIjxD5BLlTF3msibq7bq8W55VD1YPJIqi0mvk/6t0FEvLMv6A\r\nfuQS91j2wZFDnL7Vj3JzJaGXxLiZGkZjfmp2fXjmqAHYUD8Rhj+mbRMEhXzN\r\nt7/jNoigc5Zuw0cCCfesBgyouuxO2VhnYtfE2B2paB2OcWEKccUDWMgaRdf9\r\nYVIc15tNvba732sAhjkT3sz/Z9aGYOpX8TM=\r\n=AQq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/button":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/tokens":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/icon-button":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.323904a9f.0_1669736135930_0.6754270756282192","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/snackbar","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.168a629a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272ce736bdc86c1ee108c036397876ce70ade1e6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.168a629a4.0.tgz","fileCount":42,"integrity":"sha512-dLfVjKLqMiZQumEZyf0weQlVHj2f75zV7hjvrB0ukSDO+YdneEtTRgq4hGZnwgJ4FL/R7thNshD8S5P1nzSFrA==","signatures":[{"sig":"MEQCIEcFjyaf6TK9bwc3MckcTJRRvpKbwPdVn2qIP2KORI0EAiBGdPbPjC0xyW5qJhP656l81sbVM37l6N4EqZxdoqcF/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjheACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEDQ/+JMPkGQA0o3kf66o3gbiSxH7GNwLpbEIvB8EZ5X9K+rdIDGKy\r\n50j7bHucgVJmWlC3XzhrYfKL6Xijy+BrunVGNC1AMX9dCzoCOupeGi7OSn6/\r\n5qGsEKd84M+8BLzdNTRZBP7bZFGx7NY1RzMFSQ7fDgCHSJ0PMJl75rcMPkKk\r\ny2SPPwf59SXrcbOlme2tKVmyv8p9M4P0+qsA5kaROnNcIRvK+NLxD9Io+/GC\r\nKxuFhe4rTwRyBeADwZWXTLjFfrV3AERO4SHqtORx6KdjQdxBlrVYcqyQtv83\r\nlv1WPii8jsrgMr/Y4goTEta/Iao5izTt51+T0Xnq7qhnmo89ioHSQOuwBZ8s\r\n1KcR/05mdVU5S9M9geVqO8/2JxrCd9zy9Eeu5xM5GF//6kKZ0EB3DWl51tE8\r\nccpidi5N6EKq+ipqQVxw4EDUkd0CyLa6+6Cl93wmWHDTQNM5a4WZsRttK51W\r\ni8c5qpRNEDE01paU2XfdE1y0Do0B7YeqzftBQ63grbAdoOFjcbZjjlOEadYT\r\nGuNIKTBXsAsJSLwia1uIIoJ1qpimZw6ZepWbx+l0pPptSFKTWTHGfE/rxAqU\r\n1hzKWK1pNgOpo30AfkG953g9G2beiM3LkNCANAXvl9Iwg3dTt7hMOCvY5NNM\r\n5PftamEqAWEEdILjXucsvidLTM7JcyxrGs8=\r\n=rl5i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/button":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/tokens":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/icon-button":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.168a629a4.0_1669740638765_0.8182509031903005","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/snackbar","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.65c411674.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b384bb73da90dc10daf7365ea6c96c89f1e5365","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.65c411674.0.tgz","fileCount":42,"integrity":"sha512-HCxeQAr6AJcLcPR3oCMeJfWwI2RdA4w+R5WhGGu314snNYlhwv/U99fyagubYvuDuFTgGmagCKn8BUaJtb0hmw==","signatures":[{"sig":"MEUCIQCFYzzTpeT6nqQFaSq/mrySw9LWIB7QyDPqP//l7Is9IAIgLYitcjfiGalR9esuNZ7jq6G+8ZINupW3C6a3OwLu7Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkQHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFQhAAkxb1tgyjcnfIgcJDignP+bU0i407uECxakkUQofqUTz6m7XL\r\nwRgOavUb8kUIjFpzmmYztPzpWtiKrNAAxQb0vuxtVoMFssyV2pkqetP+Y3Ga\r\nOLLbZD0zIZ1Mqvf61diYIg5AOfYdoZvXfw1LnshueH4PBqQcWYvxoa9n2XB0\r\nNtgoqgLXAy2WtN09TSt+2/lu26wVe0ZQ4c1unG7zyTEjSfZJv/+E1nQ5KRFQ\r\nlpIKuxWvcIFxrEXDvLB2pLLPDr6roGJeicw2hsa/JNcvzx1aMgFKclk740wu\r\nqlyYAYE4QTOl5+nHMqwIHXOc8qmYklVZejK90t/sU4mFI+hp8ku98hMt+zi1\r\nJfU3lEpnqOXCC8mQ1/YckN7nj9ImoYtmQVvfRaoiw5qP/qKjT9fi88CWKI3j\r\n8IuYR0SVf7fbj2q6l60Ed5LZcnUImJ0tt6Xrxb/nz3cQuh7NhXwFVOfr1oUh\r\n23kL1/Mhlc82PJ+525DfZern7txtoGFuKGN2Hy+7y3dTRZxo1d6ZW7X71nwn\r\nN7w5uzzU5pLqGXiPPG6da7k7bjApUtXvO4Zwp/lUkeQNHk4ZpxvblFZIdwz3\r\nwSym5uvTEWVnzUN0zqhhRNa+AWyOrqIlFxEkFM0twR7ADciuja9LGJehMJck\r\n/Sipvo9HBgW5YWFtgd+k8JiWNyavq3J7kCs=\r\n=uqRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/button":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/tokens":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/icon-button":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.65c411674.0_1669743623754_0.22480503129224205","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/snackbar","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc02d405e48df46d91ac31fe703be71cf116a117","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a86d36fd2.0.tgz","fileCount":42,"integrity":"sha512-AnWmvFhO6zmA9hQgphew8E+qeTtxrigdx1bBOOl9kIMYIexdmWelFMY1N59J3BHoQT6+UJj4VzYvW5Q5fZ8PRA==","signatures":[{"sig":"MEQCIF9t9x1B3CzkArK+fhwMWXVCmY/yxiilu/6sXt5uCX4yAiAPo/NvFBnrF5zQ/++3qq0+/jYEB0Xn6NUnhgINlkmbkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrzYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMiRAAhAhA6rqeX5jegBzW8rAbgfJ+kGqgHLkj9Q21jOJ8Fhf3MSpC\r\n13ogZgGIEebv15MaY2e64xlC2pxRrbpNg6UAS5xU1ZF7X4KxxOgrZ9Yh7LLo\r\n7gIDvMjGiIq31KAbss8kYDZyJQ/VCuy9z7gjVdH5zkXPI1aDoDlqdLCpiAli\r\nbd5ws/5ICwY+EfyTs/zO3Y14vqy5L5U9SZ8FbRBkD9Ri6Pv81qoaQ9ge9ZTU\r\nyEtIqBZzVh2TdmDkKR8E9JC3O6U0T4Mb+L9xbA0daCsnE/66PaVa/14MLb3g\r\ngvbcTKIG0egZ8d7dfj0hCn5IeASf1Ko93YfBZz/CBpHJQs2sCP7EXVbQFYM6\r\nAzLsyvQY1xU7nN5UjhwZeuwRwXVBEKyyUDNBlhynQfQHXt8ZGEEIWCzRdYEb\r\nRqhMeYisOGQ4Do5A9aVPM/vlEiaDUgrzvY+cNB1oVm1oCbTAaoeG6nxYdNRz\r\nAS7NV1RoCZiD2Rq7h3sK+EHZs2WiR9ZO8wrTLkAll3GZjKMk4zghrbfD9Mrw\r\nbd5aTaJkYIs5I5EvRgmxlz3MuM4em/VMf/j5PoDvO5kJ4nq7nJ4TWO91MJ5D\r\n8fFxAet9x1uulzh3Nb/2o1iiuzM1tcl7wT0/+O5EFRDxYt9Mse5gje+UhVO/\r\nn8D9fr7tEDeMNRFAa18z8SqMqLA+j6gIf34=\r\n=K6P5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/button":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/tokens":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/icon-button":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a86d36fd2.0_1669774551956_0.5935270829598811","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/snackbar","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d1d347d24830a49a2c6c54b84307aa21cc00aac","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3a1f46c66.0.tgz","fileCount":42,"integrity":"sha512-EFYo0ObXgHeUiHhqbk7F0Bj6xhB6mpf+HCh1TB/TyX4xVBG/r3uND3S1aiQ3J6y1RdJlLPmWgnAPHMZd+HxcvQ==","signatures":[{"sig":"MEQCIDPel3vqHF2TAS9ju0an6nzWzIDoDmhnEVjSQH6akay0AiAqd1OqZ953ppcktm/TmigAGsUxW+VuyVWQvHBYK+9Z5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0f5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmoA/9GfUeVXN4WQFl9JPI76wwbb8N5b7VZ6+cQA6WqjeVsHrQ3G7a\r\nQGFoK6B1fR5bJegsO/j0jDX0yNFPXgD3AElfS9Y9AjHuPsJ7unOQrZLK0GSC\r\niwZa6DGZmS4eKm6PzG9Shk6BHyFQG8exLR8S9ygjcJRPBilbEWCPeswE3eFm\r\nQPF8ZqGplokEFfyOTGT91++VezxX0/ipdvVl+OOa9S/Luxkc+5A23twy6Urb\r\n19VAxlBr7BkXuhRWfr+V05f2sQj3Vb1ER9luxVmhVHVK5UtO4oWdh10OUM3f\r\nCB7xkg/2w66mNnb2RO1mHfuHxInKROrPTjlbuI+aXJ7jbFkDUEIa1TJR5ycu\r\nToeuqEsxZ+F62JIeisZ0gOZUABe1j0np6uIyXSyTshVryZyRqlKLQ7ck/qyj\r\nMZB3Ku/9JnvCd7mjgKAbnGfepqlhcSkEm6jYBI7y/oyxAyZ4RgN1TaGS1taH\r\nWE+hhCSUmvsrFw1OnwhJo9HP+CEsuglV/nPaxhD1o1ZBmchau9WHD3EqQktb\r\nnDppaRZyY1wgAVwTQACLDLHkn+PSujsNPogoYy+vZwURvJmViSWq6hjQfuF1\r\nH+nMuoCyxzSr78BjpmK/+xjQQfwDBF+uJIcSWx2Gq2bofr/J2LE4wNkrZON8\r\nou0d+TvCdO7aFKiQYUT6Wzp2p5WPXnYmG/M=\r\n=G4up\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/button":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/tokens":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/icon-button":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3a1f46c66.0_1669810169280_0.3433623046814984","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/snackbar","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ef8af38bd41a307f12bf39726c9119156eb920","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.32d8a9648.0.tgz","fileCount":42,"integrity":"sha512-lDpe6j9fxbAoKnYYoIXmfmN7rXbZBx3saUfMt/jipID/EvdMOMNUqC+ZrqFD4V2A9Wmo4Dgl9kY+NoNL/PxPGA==","signatures":[{"sig":"MEQCIFran9ecf3TzSGB77FTGQDp/anFpQrk1IyPnYF7sjNqCAiBMliGH1V+y/YyPr/G8uhuzfZ1QvkWPImVovF8GkkRoRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOTPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtlhAAgtkTSpwFOJhwyoUTwvxckfXT71h77IpUKu3me1+rbxaIm430\r\nRETfoTMmr7DP97DDLb1UlWsoOMlBqHqtXeWy7uLNnsgggvhQ1Q0V4yy2Fjhk\r\nJkboyovOQxfuq+SV4pnBJ8NgSmPFQmNK7Ymjy8wgNJCK+iXlaRdBpLGNnGcs\r\nuXcoskQFVzcsQ89L1b2xaiEc4QvC5FdPn3WkFopxH9MQwItodXA8iTZvLUEM\r\nJYHwLFs3XFrPJGcGk0RGzRQGrdiwjaOBXlBlAM4dgUhnded/LiYoJf5xSPZ2\r\nSgNDmKm6zkHPKv0Uzd+bvmuARKt+MSbFEi5oMzxn/tagRgssCmNQvPZxAtNd\r\nqvq/5HIE8KyWPaDJj/8JxHWndKng0ce9oWqz3BnqTFWuAStS38nrjLa+i1le\r\nRkdGcCVSOn4trvuDcFaoVKA7SbLmv5uCSDoeyXp9eMSDVXBOwfNJwEvoZYZq\r\nwRNA3QZF+/gtkiR3zpJeQxmhEdy89fK7CYBM4VY8WhTo3OmPD6c/8xZ05sXR\r\npYTx5H/it7DgCIBC4DnYjh+o+qDWeMrkW4G5Qyu51Qtx/anUKYMCbQnywaSz\r\n7CqEpOqzLMy6cSf4wEkEeBE3kEkOFXACfk/SnaIbp7WjcH9dx9WR5sG4r8te\r\nIBoadMddfvpCVpESMiyZii5bggFalzo1LnU=\r\n=J0qN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/button":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/tokens":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/icon-button":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.32d8a9648.0_1669915855070_0.008472151481421664","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/snackbar","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.03618ab70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6231cc7dbbe728cd07e0ad42037ef0232c5b1dcc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.03618ab70.0.tgz","fileCount":42,"integrity":"sha512-tBRZhAxUYAt0cxLwsLRTcLV92aPEJbBAMtR+G1LaSk6VSlksa1D+0LV7eI+24SF8q8hdGo0F7cms7fLXdoDy9g==","signatures":[{"sig":"MEYCIQDssvSvI5Wkzvq5fTRPnCuCM5oRv5OCdpUUxvXg/vCR7AIhAL5HxecHk+ZFwKe4k8JTjfzDMp/eD1e+u2s7Mvrw9NN+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRThACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT7w/9E/dWuMxxCeXouHlWbNetmuglGGrfhngeQgkfyyhInv434v5C\r\n7f5moNJssGxQvAEWIq9IpG0ReKewJ27akAjM4Df/WWyWIhKPig+t9hhgaSlK\r\nFpWYk67KdOCGtpti6QhivxhKqBIEhBwRxPfT5RmHxICdz8Qyj8DFoH8f/iQh\r\ngHidp0/CkQbCUsyKyf44ljfIUy7NQrHn6uUz5Hfq34/20Kw8+9WcTB+rMadl\r\n7n47r01an6SgAqh3AAViVUGaMO+hQf5qvAOL+6luXfmz0crmOac+DJu8LsCk\r\nzWJI1aTU90qLVvQs4WK5Oc+hcEElJK6jVn9PAFtR7bXJvlFGH9wiw4pTjiEJ\r\nCILO6O7fkI+4I4341ac2EYrNt8zxNJLOHp+Jz6+VUX1cOQBfdGffsEU7l4VZ\r\nTei3lzJ+73RUQHRc4FJ2LWGP3Q1nJ8wVFXIsxyD6u5EI/+r4TFNXU3tMdxfS\r\nojhTMALx0cnZ6lSpqhJd/h9xg/XY5K/5MPFJh85lSSC9KwYb035Sq5GKtOPy\r\nlHBHEJX+WQpCCmXHSD/NI6lLsfgdm3plcJirfvhG8frZzKZ8KHi8mNQlrSwu\r\ng12gS4t29aTft0ukycnzCxGclq+h/vaVkPqkOGSpePe2xRq+ETn2PItteCFa\r\nZMQiSX52cPHrdAMS2zWporKtBbGXJXvEJUw=\r\n=PsyH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/button":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/tokens":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/icon-button":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.03618ab70.0_1669928161682_0.7078988486170652","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/snackbar","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.68aaed940.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0d18078c970ea2117ba8064410877db17abcd68","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.68aaed940.0.tgz","fileCount":42,"integrity":"sha512-DpBLg0aHnK770jSdii2TR/eFAMqMTuPDz0lRRldTjvaRYAokzlq+nDRP1WxE8CmV/hhYhL/BKkL/8Acy5KdYYw==","signatures":[{"sig":"MEYCIQD1vEOTl+YVwipyVPs3+QdnwFw30dG46Vy7UQYzDfpk8wIhALuHFwxvef8HyYxA466Q1Meaofaq2Hj8VrIafAPn660y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRvgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmormQ/9HfrGwFt10D6wP7PwEpU/xxUZLqrh2x5J3roK4ilnG37RJ9br\r\nTmh9J5LRfSIpyLzpF+QFs6dTRDpixE7UvC8bhQyQHxtrQselTsIkPQnU8cLK\r\n3foa65aPCdRQ7/M93SEXJ4mKjURVcKwhp5wruW8eVYzXWWUWmQNcarVx+LPx\r\ndSUVklq93SVzEtonSFNugfkRkwvakvWe9o+Y0nSxFf1PLQLifMLLYIUydURV\r\nP3G2lsXJcuSZUjerfprx77bNimd+GSNKsfjJ8kZyPCJSsZ2nbKdPuM61xpDT\r\nZrJgrmKcU1eLUyihrsktU/FOQAH/wWprrYdnCWRpFHOS7BLsQt7zYQ8IJw2k\r\ntjshicNVrscGiC4W523NeoACEf2Ds3GfSCkqEtGGIMawhfUz767GFICUCnPW\r\nZNch4pN8TfabhA1pkWfTsb/2pvNbZSiy9LkBTwNppvDekc7wAUlrD+kKwp/2\r\ndhZ00KtLAUqssLhYRW/9rFYqOh6spbSZonyasrqzDo53m8WXCeaQp3swZriT\r\ngbM5kGVTXDGWJia5NBoJDJVgQ0vkC1C27D6sYT2FKZLMVBFBLWOawzVVxr91\r\n6DBrsQy3vSVUULWtk+xK6f1kNxuuNiFDDp3VOrkJW0figlOxxsRGaetaSDUU\r\nCPt+NGvXFgip3rxSVseFquU7wkHKQV53Ewg=\r\n=u8VQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/button":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/tokens":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/icon-button":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.68aaed940.0_1669929952537_0.4429287739131096","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/snackbar","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7578f001511406cb4134967f19076f9e78e90e4e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":42,"integrity":"sha512-JGNlbjjTjiROJjVa9WCbmKqhfWvCeK7rsqKsBykZS0Jq5f8PCWSG/NxxAEkDLOiTZiK/cFcBckO/GhLjDhET4w==","signatures":[{"sig":"MEYCIQCwErYlR+3eL2W/UZkBWhj2d7ESK++RZ1iCp2ld/wovkwIhANpoKkQ2l6h8Ggz/3PDLhFY/zGBmcz5p7Aewv4ovQgTY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib9bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobKw//eteC98m26g3/FXQ2ULtTqmO/SfqsroeSt/Cs049I63Yim9It\r\nPjE9JX9hjnJvfwO100x0/vlRoxqhYRjEIj4+sgfgzdHMpYr/Naw0mbNFXvav\r\nJcUkJz5hN3mbOjfV6LSUgHoMJMI4qMAC40F6KTvpv+PQ7v7uLWpHbBpYKcHk\r\nLBVqW/7mcBiYVI18HkaxkwUyThz+IqXy56ePqBEAkbcjytmu7MwpMxt7BLsZ\r\nxhXEfGUuHbgE5PXPAuF2FejYxyRmxhRodSb7asXSo5q4ZLsePZ9kc0LWM6Z7\r\nLpOQg6LaK6gNMFyslyrn6pD6BFfAlQtKI5kAi062lqZon1RwCQWfQ4S436h/\r\nQLuQv8A11CLev63Gqd6eiWTVZnfLzZ2u3/UmwDCeNsuSxDrhfHZpVPzsA+aw\r\nC+oGQic9Cyiff/b4rm4/fO1dygnduY7Dwg6XfLzxxCnrCShiycE7ke/BcOvm\r\ngyy2gfobVpKMJcZcOuWJmyreBWInXKuKXMUtvymOPQJ+903UdUrCz4KNhEhJ\r\nYLACCYJU/WVe44OhICdWlkPr2JVE5Yl+omqa3B21Uc3E/azRgwi44rptd7iX\r\nSBTVnwbSBfwiSpPUc0j8tZ4chXrnMRwUZ9x7SP4YbNG1kfEyBZtctA/ZE6dy\r\nhKhfj4jm/QLRrlRttSBK8uQQGsU05mNP838=\r\n=xP8d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/button":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/tokens":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/icon-button":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f0a0bbc75.0_1669971803158_0.07467634060129913","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/snackbar","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3e96fd226480165135fdda1bb77d6ebbd7c8b80","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.dd99c8764.0.tgz","fileCount":42,"integrity":"sha512-TnVlGfshVwt0wsfrXoWJgR5HZZlWCbyZt3trUiFgZn6/CyR0XnC/CbdintF9EECbIpY4Q0j0PlUqciPdefn1fQ==","signatures":[{"sig":"MEQCIFqG7jOdBTgs41isxcLYV162NWCtnEX2/Rj85hexqmmgAiBIMKC/+l9rKlfRkU7u0Ya+XAGUp5/Dwg7SXb5+xlfKFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigWAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDNQ//bfXbzoOK4pB8KIq/BU5npklibuBjaehihVWZYozSgWy0X89G\r\nDfJMN0I4CbGXW6D/GYC2S4SSxdAkkiKkZAXEedgNf3D2Ok8qLe+YNH5rEyyg\r\nGCzWn3uSHorVpisRBUeMOh2FPO4AJ5preuQj+90lboWulSlzNBpZ+ttJGtIO\r\nDbGkrDl8bqofGFS5WTtDAjAwEPr4l3WDaOsns3bdrYMs5FrcrulAunJROj4P\r\nJ08oaglDLRw5lSxO/RgOBLW3ayWxTTq8H/+UN3YcS9sC0NbaiJuP5bkQedcx\r\ng6fp19U1TzeoqLmAzIVYzhghRX32R20qndZBkcKGqgS1vGbqQqrl9/JvVQKm\r\nB7vKAUOCdNGQY0HSOMhLSGmFBKbmI+N2WIXPgTIrryt1qAYYyTQRicXxyKBH\r\nrhdcW++RdBuOkOGG7/92pgvSjl5Hxis75A85kJB7EwMTh2/4488fHYQ+YCrg\r\nZxqRpeGT3a1kUTfaRrLP5pYDUbL/CIMIRnfMRE5IcWxBTgV4jZXAs9lK8fyK\r\nW8ftO3qBU7ijrvgTragcbD9dG3/u1JVeXCt+U+7+5FIpsq6ofHbsNgLiMRAe\r\nPVxawGeQbKdvVoqZi3BOTijDvkHLD8PKVvxP48v5yggDgi75szO15W27jQmR\r\nmtehm4KJmd4Dx/e2lj5Lxdc8o1UnJv7Tsxg=\r\n=Ua/E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/button":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/tokens":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/icon-button":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.dd99c8764.0_1669989759931_0.314057434276531","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/snackbar","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"629f035b41230e17af4751312eecf691a3bc4871","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.fabdcca3a.0.tgz","fileCount":42,"integrity":"sha512-LisoupALBbBOrMnN5UDaaQS93SGx8irAdpjWbFJDvxHm/eOQzEiPh1QCX3ASLs6bkoc+W5U+CUUuqRLQ51atpg==","signatures":[{"sig":"MEQCIEAEOrfmNphA6mzdorT2UucP3FZ/4dAdD93iq8rRfdDsAiAxmHl49Wnl3R6lJupfuGpWdSBSG+wqzla9JJ98VhGRAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihT0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7sA//XxrCWWmBFYYS0NnTQrIOyAIB2WZ5ycK4A0hx9sU91V5TlkN3\r\n8ZbamTh6qdUe4b/HXaRwDQ4IXQip1tyCXyIWDptygehp5w1OaQ5Njx7Si+uF\r\na/rprZfDkJYhgUivAd9lin7h7+YJPLlq/l5KhmF8JlDhrkwcUzVA5gxYAOzO\r\nqnLKCItRlIAMRwaiXchRnTtOT8KsnWIObGm4PYRYySqiPvu3HtIDz2EBnrYY\r\nC/eSRkCVWIvNcTVQvpOzUBlcS4arSpLpT7HAiYiv6sz1eH50i58tmSscTQjK\r\nh+J3C+0Z44+lQZt1V0Ba4ytEiJR5/kjm4J93HOlwsgAWQ1EBJolhmN16Gav3\r\niVJJb/uBgpr2w8wOBZxjDIY5Omk2giidgcQmFS5FZO5tM6OW4CXXPMr8gZIO\r\n+TX4h+phvjRgzUP0Skw7DSIr1dF4brxkHtGaJs4r/v/jb9jgWmDDUB6QCRAf\r\nTkbeLO35X1IkB2F5IDjVNAdy6UXh2/ZvGoiITWXDnMLpSGg4o10reiSHawRm\r\nGbJdOyS14P7HkBWWCw/EyEeBZIoJcSgTHf/sU3LH5dIuGBvgLHGNcSz9R/Yr\r\nhzBDyR8x/FHUOMrDQRCrZM52xx3L7swSu65HHMISNXdvs1NPaJs+B55B4+A7\r\n8hqqNVYYJOAfFh0xCeTakpIIbIWANBBgmQk=\r\n=iv3q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/button":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/tokens":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/icon-button":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.fabdcca3a.0_1669993715873_0.5661952678220876","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/snackbar","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0204b21137c7c53e8dd0d881ddac88d108aae3d1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2d26722d2.0.tgz","fileCount":42,"integrity":"sha512-s4nxW1XhSmYt3w3WfNYylf9bK2F8y0UjC0hJqAooAAj/IdgDTm4PqlJ4VaI3wwxo3RNZUVnqdEeaeUeZMklr5A==","signatures":[{"sig":"MEUCIHRoo578dvkflNVMA+31l1wxBizYufXj/21ZS68q2arqAiEAgI6zdaM51W48CRdlxeA3ZEMTw1Tq4+fu8gGGmaQdTfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiieiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqygA/+LbyOpNZGGh/gvEvuBsXfDDN6J9/n2DWaB7KYWLR+Kegi8bIC\r\nVSq2Cf4fsX6YAyo+r0zfXx8QraatcSw6LOCe6fR02MATz2NDPq/vRcRm92fi\r\nE2LTnXvZgLO5gqFmWtfpHmfFmKNS2P3ewJ6aMiQ4YiLb1PKwoXjNFd6SXlfk\r\nsZaC+x67FqhCB808AChUkjmvdJujzx2U/JN30HOoQy3+7jRR/oQxw6GkpuiJ\r\nCklcf+qTgdyfjU1r2lPmlEJAMZKMzXgsSXUWsMvSEn7CHSeuVPua6X1wpyu6\r\nSQfS9qcDfVKqpW/OXtgcXnqY1RHcCuEKaVFczKmVNrd2jsUDNsf8Jc+vU/jp\r\nqJ0cNz/edQawYqKu47OeoxGs1FAPLBGRkK7CA1JiP0xQD1NvWqwBsCW8VsLt\r\nRINgfRxctrzuLjAotnS0lQDSoObhSDYuJIA/hMu+QPiyGVNZkO5niE/cSjD8\r\np120OK6RDZMgu1w5IaLv8miTS8uGaQHeyEfeDP+2KzHAPWN4ptpGKtVRGyO+\r\n2P/UU1hpL+HrLQ/ju2EkhK0fP1l1dlnkiYCWQjVYaNLw/Y8jGRu4ENuKa7vE\r\nTYBbyeKpA/9pDUUtcAheYCVFog772lbS5PAzGA9z+eBcyImXsuqIHYN1mlim\r\nKodT9USWuQav2FfD0d0lTa1mtz/JjkbaGLM=\r\n=ZkIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/button":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/tokens":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/icon-button":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2d26722d2.0_1669998498545_0.8605783282865962","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/snackbar","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3059d7f562e41c414b53fb50d0bc08681a7fd9eb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":42,"integrity":"sha512-AOajtaO43xGLqJ1h2VgDlmXLUod0s7R2IO7Qdw/sfTph9x/j/1+b2rjm70Am4SahFqmgggl9G6lhd2ZUbdkO/w==","signatures":[{"sig":"MEQCICh/+gJkk+Vm+cLiIQmRZuyqdbc40YKIZ0bjysMT3i0lAiAPqjFd0VxF3s+FGNBrHuudthtE955g8P35ki6w02DFlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijl8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxqxAAl9dLRMhvBN10IemMc+y7szl8s1wRJ5xyKoisgGXXuP57y6iX\r\nhhr7u73dflC8UBw0elHptIezPvpVe0vHdlxGtxPYtD2s9Q1nxYMM7jmZvRUW\r\nFuBUhPhl/lh0NI3r8xFqshXLuz3aEc3ct13qeHc8e26MflRSYjoQ3doIbzTh\r\nIyENVt0hKSH3xtBmAvpXWUypvWP3SDB3uTesZPnw9oCvxAFHOdsO0SPQcXqM\r\nWt900XfO+/MMo8d1tm3fHtz1Tgxp/x2zeFpMv/ozJnA6PBPoai+1DZzMYS8/\r\nu2rJnaxa28m6XGY/oADgMyWXjMAh238H8hb1EI5GIpVSH4n0mbtJYerO7DGZ\r\nxs1+sgYbgk149M6zJDxVcAR/7v5sabhuvYk7Vga3q25LwRTlNLvdeNwSuhpi\r\nvAH/uHURBAWezuSXxuWJj1qXvZx7651eCLmi9p3/2eIibvcZgHyJfut9ROyL\r\nXmDrwfkBCMSPYO+HsFG9gm2TlcbtxvB52wL5EpHMkL4CoWA58BpdvPyz+EzH\r\n5VvphGxdWmsQxWbBaXeaWAp/+xMhBrftIE1lu3UfVPPCJMgcAqAzUracm1Pp\r\nccf9m9N8tY30OEb35pVkfErFg32wCYQAYe7OZmIL4PaXsy8kB6hnThpMod3a\r\nZ7HchqWnEdxkrmSRcesNKxakGigrRuGDxfA=\r\n=NAmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/button":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/tokens":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/icon-button":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.eaa0c3a86.0_1670003067995_0.5358210508752781","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/snackbar","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"473e11c18933aeaae3ed9976e2dbe96a2e628255","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.79a613bbd.0.tgz","fileCount":42,"integrity":"sha512-oeZG7BWtrhHOoFbw6l4i/VHLgs3PTeIvJ5U2QPJaP9a/9GMT8ZsHOK9r/pgLRXE3j6LHp5uoKaSAkTb0qMmVSg==","signatures":[{"sig":"MEUCIQDAH3gzHz/nloEo1EWyQ4D2ezs5P3FNbilDmC2X3Wny4QIgeKm0sqfHD+fFAuScCifJr1dfQIsBu/GdRlNL3bN3AG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1FHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8CxAAo6g2AY2P+g73QzKrOvKauIrPmpdhQXhq4z3kSxcTKjKEpV5J\r\nszEQFV/qyTDRDVWATox9fypQBsZv86aU+bKST44e0hRF0oIeJzW1WJjZXnWv\r\nU4+d94oK6SAXt8KbQpDBckbRdZzryh4jKTg1WTwEC0tzzi85tfVTwj1nTY8B\r\ne2u1+CshNMsz+aC0z84H3+xKXcRAJtUsflkg7a7et+dWPySAPNwq67DjOkbB\r\n/OC1o7SW6Ir09pgDMBVTkIMnLifCpoxL99vneKI34XruU3fc0cVfPAtl2gei\r\n/FrTBWfdaGESnYdr3irpD0iyqkzUEKgN1F/byKzjv/FZUb62JJ9aF68hWeTb\r\nw4lAZgIXZoSyp+Szod41390CA9ofQ6cO7x8Aatmsyvr1l4x02ZnmJNVlUcDT\r\nXjhpEqET6pkki/8dL7sLbpXf/nrFqATCBVI6lJPUZMkNWHNqkFzibxwrwq8T\r\nAoZn5kH38Zsq+MqXSoFzE+E8O01RXhV7T1/CxJtryiCv48c/MxixJwiSPRIs\r\nuH+JA+H6Bm8yXGkZ4mk1F44o6vZqdjtPtQ3md6bwLr4gsy70GMGGnBMCgn0J\r\n82Rfir1U+++GrNmq57Z2W35LxpNbBGUPRpl+pOdggfbScPv0YGAoIxlKuCZZ\r\n7SLLvVdREfAMvRQPud+PBIZLoXIctjTOC70=\r\n=TgKS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/button":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/tokens":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/icon-button":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.79a613bbd.0_1670336838967_0.8278914785048914","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/snackbar","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c92c4b32ae92bde95661d5cef96bd4096eec94b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c871fe61e.0.tgz","fileCount":42,"integrity":"sha512-9aiW2TdLZYAO4jNhxvNBhIXtCRh0MWUtZZOmqeNmrtecOY6j4IHW6wDodWF0u513Xz18XbfrpI6F62ExKm3POg==","signatures":[{"sig":"MEUCIG25zkkmwpArVpCTnULcICz8JLf/SVZt/wbwg4Wk0m+AAiEAjJsZb9rk1F5WRwXvsuf2stF0/rU+AJKbd3Zukysl7+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEZ6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosdQ/+LDWbMSWej/qBXGY6IvJVX6zdu7pl6N42a7qXok8TF2eh6Sbq\r\nVDPyNt39DLz/kBz8JX8H9DHilPUh1hfNzroaR2XYXmsfMU7uN2276Qtx2M3L\r\noX7ZT9iOH1xMVhmwhOck4glBK/tFj1H531O6RcPj+yE12pIQ+I/I0L2HGA5x\r\n+WpjdghGjFb6roXNJGv9T3Xbv9GADS0uBOCklNirL4v85y9iYffh3q0MfyiQ\r\n9L4dZ/W0nH/3z0nU8TXejo1lqKy2DnifH9xDx4vYhRUeTRC4qbsYHZ1B80wU\r\nHkhKUX2izKldbiKbyusEoJCNFlxeBqtKZCVD3AwF/ZqQsyv4oI8XGSFp12u8\r\nAKnXsaS7PFQpD7E1he7O8qDmAGIcc7UAGXwtQfYY5PYSQwe43n2wnWTIusfN\r\n5ufheUeyQTUSS1QHD64apIrVLHKSazfMVvojpbJwNoqkHwEfyxl1iI15dovC\r\ncqEYjUqWlrAYLO6496eF6GjCn2ih7UMrlUKSGfhQuMbM/3TDH5EAh8xLlhCs\r\nXv5IbFs5pH+bi8VAFgUB9OQsdStgSlDMyn+/Q+X+Syl2v2OVj0QPObyOkiG8\r\n3lEUgg3ITXUh9bigER94XSkRCvgYrbngO/sDDnewdA/C1idc8NLIdrwDwWm4\r\neJ0+ikPhuMvta8CMqIys7rLt5py0b2bAKyw=\r\n=tKVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/button":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/tokens":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/icon-button":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c871fe61e.0_1670399610466_0.6896749984470534","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/snackbar","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71ed031a0c6c293b0ecbc677a29d159fe0b73542","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.9eaee7936.0.tgz","fileCount":42,"integrity":"sha512-gw1ixeZheeuIrRqa+9xHPPpCoJPJ8d62y6h7GIrUrJxG9ZJqH415dzB4AdotK3i40gnDsA61/mvZ/DP6Kg3i0Q==","signatures":[{"sig":"MEQCIAbCDbtkU2E4Tnc57k69cxOPrZUh2jG2loe8qhIM4AUxAiBS6uZ/wNoAuBJTqZlW0ubgULQx6eUg1COfa35PFuDQvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPHpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeMRAAoGlA7A4FY76q6QK4DpwDSJTzjK7OCaiINzIcpJaI14OuRUS5\r\nKTuNfhm2CFbFP7Xt1p/hCtzoYQBy5Cc9zAkJKAreMSTeTO6YyQrc5dsG6kVH\r\nS9XmypjpJx3Tyh9445ojEVHhnqX2xiBsjKDSyzQO9BD/Gugn9DTiLJRBGFjf\r\noEL+Vcj+dj3qawYWoF5m+NT9awLv1kj/esFi4oYoB9aBCmLyS/DyZ+0z8orN\r\nkmdXIjortIEHjG8cW11Nik1OzcFbq6iOuxhDVBaLI65a+2bIbOxJ5j/kW6np\r\nq4iWz+QJbz0nKp3ig432QyJLj53pB8ZI5WF1/6ar9PslAT3US51VSyPSXK0+\r\n9vJGAYeNn1k0GTTHCptAFsu4NJsmYxis0V8LZEKyOlCmzstuE7e4o/NMSjPO\r\nxK3IG+x8z6O/RNvppem10U+8Hc3WjupWeH6FzWKp1fAprfRuv+v8ykPCVsAe\r\n1HLBWGb+wx7wPT0g+V+BZhwe+59qa09WjBP/l1Hx7+8VOC6RgO6MyGY4rVoC\r\numzQ0lbAQHhjSUfIRAqgaO94574ixDlruNdnl226LZlsPjSLvmJ+CywK+G1e\r\n36DpJMVIyq2F/bJWCWsE80/JtJ6t4dLRWWkl5a+oxuwQnLnql4GZFdzDPxBh\r\npymAaupz5ABqk5y2Sl2qwPbTPpeO5gQcQsY=\r\n=63UI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/button":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/tokens":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/icon-button":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.9eaee7936.0_1670443497778_0.9754931148793202","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/snackbar","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e3500929e9eded7c8623d160d00fc318a736eca","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1d37bf601.0.tgz","fileCount":42,"integrity":"sha512-5RPaIr7Hf2btrlTHbiZkwwgYDAQ11r3Ka/dj2PisWEZiI+4Wpl/HhvrzI1DbtGPBusgZhd8EMG8j5izY0Mec/A==","signatures":[{"sig":"MEQCID/GSTmGVY7FTYCLySYqMDA7voxi7ci68T8EZL5QqsxuAiBIK7XSoTR7W8o1Vyc7c5jjCvUOLYTUsilfMRfolZSteg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPrUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1FA/8ChR1zx+IPrEzseDARaRGWjJXj1wDrH0jCBTmOH7EzxxXsEUm\r\n9iK108LSSOoDM4SWXxAEspJYjgV2J9vLpZXTNo/7dTuOB1G0rHgG7eYCouW6\r\nvRxoSvxFRkyCf88Fn416Stfub/HflYSuntUlam4lyJgqTKghDMTavP2+c9yc\r\nluGzZdUQo9jKUgW/IPnHrQVTz96eGipHh3WiaYxmR7YU5aQg6XuaD1T0AlOg\r\nVO3N2jBE7HxuCjzz10GQuDUt7tj+CEub6Fb5oEnTPCDGT6/vOAOXoj5h/yaI\r\npRU9qO9sanEfkmOlpE0E7SGK87XvfdAunjBTxQ8Eceo2Hna19krWf6/S9P8F\r\nYuqyNbbGMk063IdZw/XqHzKPD/EqDvWCbuCOqtOLtCN3e3ukK9AjTF/xycRc\r\neqxBc+O32dgzbdQ3Q0Idlm7wxA+Qks5iBddgHJl2cqrSTk+LWACAPMl4Rr5C\r\nmRorXqx2P5dVyxhRExKz6kbNVKKI6bk+wksd/+DxpIrkcgBW9odL6HIpgU6q\r\ns0MiFBcdGZMRcn1hubJf3RqqYwp2dXD3xZgLp/d6NncLZKqkV8gOH/VtWI/M\r\nVvXcYblvfYGG2pqgw5REp1m3uvPfKLBWYjTQe/UTcIxWbehTveKH1jjb/8rG\r\nJTWY+EKJ6Dg4N7hd+LRCmmJSVdKtZHzgy98=\r\n=X8JM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/button":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/tokens":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/icon-button":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1d37bf601.0_1670445780198_0.9466746232402738","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/snackbar","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"054799af3a07b1ef45a34e9b14e571b8d0db46d7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a5fe069d5.0.tgz","fileCount":42,"integrity":"sha512-r7gI9D8kvY7bqaibG7tMNY2L18+gRHAMuu6YHKLAM2E0717CkziIrlZTDqmjIi6nHyQfMAPNvfgx/8RF1LEc6Q==","signatures":[{"sig":"MEUCIFF6K/QmOnxNAjOoOUEkrNQhNSK2Q5RgoGtN4mrVZK8TAiEAtzkcXnZG5Bl02Oafvv0v5Sh4Iaqqiq89H4fi6tjs/F4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4JxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNFQ//Zj/+VUrvtU0k0Kq3FKlvP5FQGfNw/VXkifsZTHZ7UmLTVeTM\r\nnPR2FkpTO+YJ00W085Iaz+2uJJ/00KfLOKEkU+IXyy3WoTcN92LnS1ECpxKD\r\nC9aXUwXkEW3jYEbDVES42Jr2GAnfHndValvrEVEGFaCMqWwc0Ix4FOGsa2wl\r\n1BL+BHKblfYFvwcobqVEdi+0es4iWhKTJzTYTbsva01p59c91iAX/oWDqsmk\r\nQej0z1o1DR4ZMItixo/bCPfariX4zQ4AYh5ktIAxjVSPJutV03mlCHagygkR\r\nIa5fnRUsv8oN12HK57PDQ3FCm2U9y2E2JmEAzh2FDFpKo5KROvRAO885a5Ye\r\n4W+GvogtGsfLYYweuXqkJju+1tBt39w1hObf4mx8rr9Oabqe3DjQyaY9T4Ke\r\n8qNNoncPmRwzysjNucdl7/SueluwggCq4VtG322WdYnOmVPmhE9DjXdjIDxI\r\nuj+rPTgz8zG2z1Ytf+Ix1iwNehizz2fgQX3Dmmr5Pxz3MrBgmmCshMDCo6GT\r\nxBVnTHp9fvPk1IXkhNklWBR6smGohQABjcezUplHZgcjnVUgiwlAEXhUkca3\r\n0y9o7/+I9/tJEyGAkvuIzOoTlHeD+5oLx6p+SKpAQR7cxf8pH6gTJepwwvtJ\r\nkAuqU4IUKrPWbP9PzePWZnT59vWc463gelk=\r\n=dGGk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/button":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/tokens":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/icon-button":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a5fe069d5.0_1670611569324_0.2027388271356645","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/snackbar","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd8bf233aeaece884375fd6562adc2ff31f4ddbc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ce8b5326f.0.tgz","fileCount":42,"integrity":"sha512-zaEFAmiEhlDzW5wu4Ysm65xeryXRZ1GL452Vq27WzqZke+8cPiJ+gUTeIXNWI8H2QnQ4ZhypjvN5EyDSVUQPgg==","signatures":[{"sig":"MEYCIQDQpQ+UibxxgsMYcPEkF3R6Cys9NREizhyeil9Jbcjv0wIhALW4W47dHkoyByag7+ZNHujfVOgpplrRoYXlY1y5oYmZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8WLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU1g/9Hz7NiYhRhuOBzOc6NPb2JlenNWe/drWXmOO8asB6IRE7s7Oz\r\n/WaFeUnWHkM3wxIui1Rs/JJa5mo2JIz1jFP1dcs845L8SBIVC5TM6xk136nB\r\nXt4WXATXZTyzojQRNFVUIgAVaUR8XefpTsssk+1hXcmx1P+AF4aON0M5UjUE\r\nCMwotSNNtBDnCOt45EXabn1JFK+GZ7BLo6LsDcS1gp4jWN53Ew5micAQyY9+\r\nw4LdVka+xDtb3JhF7leyoC3yEalOHcIwqmkXl3HIWz9YzSf2ufYasrEmSocN\r\nMkTRKPEU/ERdjOCsUqDVArJNleE7iyxuxfB0BN2vJUXWrS8EyS8lNv3QDx4T\r\nDmnnIKWmg2nrt/wfmB2FTzLGm57S86JZAetSW1ihL54sUGXEzZum8jlOFeys\r\nO/EF41XP7ERLHK36+z+t/HsoWNPZxmqfplsqVq2D9uCnHyIrWGtxQr32sud+\r\nGnDv9+1piWTszVDXQ3JxTrsfYEhB0JwSac/PMUJUWT04wxmYAOOOh1RODHwe\r\nc4w0Fl8jRpclMIuPfwCVBMgd5NWMYwJml0DlfIP/C6oLHIWM8Wcy9oMZ7YzI\r\nKZFtYD8P/r1uTTyLHKVwLfNc3v9sXXApbTtuN7GKEdf5GOfjYqrXlFhw8NQz\r\nAKkYMFIBFrskAyO+Vf7q8Wvo9BAlJhwzzSo=\r\n=9vmP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/button":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/tokens":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/icon-button":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ce8b5326f.0_1670628747449_0.6829584088311007","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/snackbar","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f17fe57e54f92b234b33c5f46f1cdaed4a3b23","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.43f5323bc.0.tgz","fileCount":42,"integrity":"sha512-ReMrqoUuDZgNlKtt4LeWzbgvnKA8mR+iM6/wHkUklW1GXAuFWBIvfCb8XOch6tdyVtGQ0wHaUJHKo3Dl1eSb0g==","signatures":[{"sig":"MEUCIDiZyx/78zr+lqQ1xiXIcBm0HH3qifqZOyhwI19233PfAiEA/qWwU/+ovjAHj19meoLuJpt+gpHQ1iJ/YU9jUEJe7jg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1tOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjqw//TjgdwxXMEX2VpgaOt8KkpwHwDY96FCeE7e5jCT+a5miWy1Vw\r\nyKWvAQ+OuDlYYaAbc0NQTbNOyO7uf72pRcgkRGRLQt9pyRZcn7U4A/mg89m+\r\nc+vgVryZt+OI5TaywIuwowPXpLt/AEVEDk1p3vn+Y4o6KKPn0Zv21QFlI1aP\r\n0NIrAy9gyX2xJUZJBMLh0Kuis50mO19H2V981yDP5+WYqmYPZwgGDpq4VVPc\r\nkAGjJRUxFRpkdww6FO2bQry6I5tKol3DH7tTBr0nUFRKXfEg26yUiHlfqQje\r\nf2rVjBeU4JjBJYttORslzWc570TJj1SwyZCzriJo3KcybsOEO5g7CHl6DYRW\r\nAtsNFIPwcmjo7k1j7KUuznhH7JoB/3JaZQ0oq5asjtFVtqmHEbyiNb2854Di\r\nWJDYjlwDrET3Ffy88m7wkjsEQyafZW/r3UAMD7Ern+MLAxi5deUBUHeBsZNo\r\nIlTCY4HJxYBwo3aAcxN6uMa/54PjSXgABACFhaU1yYwEAQ6ldnA7TQ7zOJEa\r\niI4FHlyezzy9QRCBur0yPcJvL+SHOS3DvzPS/7+6ekH3JtZv5WPQrTk3WozU\r\nhlKDzDKkj5yTMlnLG92ul8vg6Ov7ELMIX58Xe8E2ST8fUPiQigTTJPkoEb0V\r\nyYQYYEz/dnfUxrRxnjrQfBfcK1AkeQSy1aU=\r\n=s5rV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/button":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/tokens":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/icon-button":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.43f5323bc.0_1670863694215_0.0013828509075461959","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/snackbar","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52e08e61660fc2cfc54b6ab9c4cf70c3df61b852","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5490e32e7.0.tgz","fileCount":42,"integrity":"sha512-xlFrP3u+TVY5YnH4jWI895N9zXFIEj4Eq6LM5ICFWeDKJUavFa/9kzVnFRYOEuOK1epZsvmlWjdfmfUMT4B6lg==","signatures":[{"sig":"MEYCIQDaqVLV7l4ziviyz3lh3Bsi6HBxTrSS3ZaC1+webiru+AIhAIQXjobjWy4/+WNTXrgpzyWwz4JprZpuE6M9ZauAQPfY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl17/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTYRAAjQLS5McWhTWPRigx4tGoJejnqVd4EMtlNqb66RrZZYDfAxFQ\r\nycQVR6G6BDFHmz6zndZH4N5WBah+K0kBtAbd7DSraZ+Octy7W9Mksfw/KGsU\r\nl2CvNEjzzXS4fTcBwDJq8QMEkx/cCoyS6uZCJ+UX/uAwq3rofHURq7Ni+Hka\r\nUrRQMndRVRMnB9y/7YHAN+1RpKxwIPckyrpAVucKgPlpho10Z/z2GJkaP8Wr\r\nlGJRwM9QjjdoZ5wx10rUX+PaOXMUauphRBoX1JB9e8WMq/oKcF4Aw93lUMxo\r\n3OyO7xBkvJSMPb1PKP4PD7e2377aoUQ6TtwkovLoyjvQQhTNAsiEtCyI/Jye\r\nzIicwIjb91ucB8KX46pAiSSR0GEuY2pHHkETldVXTusRrsrMTq3c7sInuA6k\r\nbEHPCYzo8Uqbw4DVOBopBsKRuzLwLLH1VgojfCNn8mWwFmgSKBAQGmHz2AD1\r\nq+ySCz8k3//wb/ZpY19jAjkqqCMZqbEkXFvMMvPBa8uEMxp7KpSjGAPoPaCQ\r\nQg2P3nzdeFz0HI7usN8PMmuWHgToV7rT/kXm+qSnKBcySuaMt0XcHJpXJnK1\r\nyscJBekBXU8hz3ny+BmKUQ7uDX1n/3KPFa1DEed9mTEGgEMd/8ftJ9PHsOuB\r\nx6IWjrAKbsQoKdopNIN7Pcqq/+h06QFEPwU=\r\n=Vcrd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/button":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/tokens":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/icon-button":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5490e32e7.0_1670864639265_0.12508386191326926","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/snackbar","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.817002c29.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27ce07cda9fad1d98005b19cfb9016ed83219322","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.817002c29.0.tgz","fileCount":42,"integrity":"sha512-0GiJjjpr8CEfdacAUP55QFkIjJM4zNUT0D/T1LQDqxYdxGZlbMOzHxnFjohW2BwWkkmtBXJhIKyS6ed376KBDQ==","signatures":[{"sig":"MEQCIC67sLfb/iJBfY3t02keQy99U2p6Jlue4GvD76VGLYCyAiAKA2rLLICiINe0DyjYhHpUkWqms5yt+vkWBHCywvMgEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPTlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpezg/+La7L/Emlq60Br6NBEjJdpmZ8X3WQ239EfL7Q2uSQjw3+uHUO\r\n+s4ZLI/lgA0T5UYp7cIgZVlW3lmHj1jqh4gpX5zNi/lKeb4ygVRKk91Cv3Du\r\nD2353m8asPHs/JOwE1n/NW/QzivYiiOdqbF05ZSia1FxCm/4vHuYR70MhTzh\r\n1BuWyngSowK5tAuZg96ZUWoFao/QW3pwNm0pXYhzXObJdTjQKooa4wxtchnX\r\n/784KpaQreaXoCQTA0qIvLTWVKNDroHb6Zvigdkk0sVmUi+p3jGUUIypeuAL\r\ni9DGlZaed6gyUj8XZUy7tdBQO7bNtQrPRK/X4SABDmDLBhZF36CeN43aUdRU\r\nI5pEmhgN6NgPOU37AJJrQO7wQPoNrZs6+AkFle6TTwv0wv3gP5bic+jZq1GR\r\nBEkbOaQDxyg8gpfE6bgKc8ZJXg6UV/PDw0jbHLSZ8paazOxguGO3hkBtvXN0\r\nvjQ0SwkWKicfTlAeTKNK4ewJQB1tuFz2UAPKL0fQmgmeJZul1bU9GR3x/3Ii\r\n3CX3yulChMAC1eEK8+wiGxhEx3lqBjEsMa03HGPL3g30eUiRTuuMp2hdeBDe\r\nlE94J5FgleNW8eO56VXwXX2ddAk1R4a4/TmKLcwtAbaGWlDYU/D0dgFtk5Jv\r\nCK47uBWPp4qczwDEqjGTTnobITFFaaSl3bY=\r\n=G35Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/button":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/tokens":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/icon-button":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.817002c29.0_1670968548973_0.7811805731419175","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/snackbar","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.313a1326a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6387142c0d802b08f8ec1138d3dcb115964946d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.313a1326a.0.tgz","fileCount":42,"integrity":"sha512-9xchiPaS3dXaoq0CzhveMpkEiXOvGvSWo7/iRVi7cHg+DIXiMAqK54z22Egv/ptlXq0zUfNjIQ77O3+E3pDnlg==","signatures":[{"sig":"MEUCIQDWvx5DRs2BzCsOuV0XKOZ9zr2nqh7YpUKLu7yqhOfj3AIgSmeGe1NU2kdN6H7Y6hV5kcIWTY2cNgi5v/XTkOo44Us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaXMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBow//ciIJNxc/KX3NhygtgThcxvodPvTixx1JQnDlxXi9pzC0DvHR\r\nRcB7mee/dPbqR2h2XDB6mypqKHfqfV2Xc0O/809p9za9Hgg1mthF99nYxz0R\r\nAYSeeyMauquUDtNven+zgZHgkEINSsJyxmyqU2ES8oiUju+9NrUMO9t6O4qI\r\na4QBN4LI6ifadZgLzQUst24C+KmAWTp/maiesGhFQliApNMK0RvcJA5Myu74\r\nZjeWcVYY2bhvN5jkJ2IbchKUAS0plobAwZR/LnEG5bh0HVnxsqaxxOnqPxNV\r\nep8YyjMyIefhW39qEz58Up5dtLAxteLCh+eGFkMoVaoYmBPm5idt7RALCbsw\r\nfwwfiqDue/iRhy9ds8tBBEkH6R3rTx+1QC6HHedEnFCfUQZOeTVdYS8IrnLz\r\n2KC4gQ3fVA1IQU7Z3q1GeTIvjFrtqDGlIEaSrZUuYktnl0DC5fYzM3rt0Gyz\r\n5ovqgpMtkl5RhKPPkE2DbJCVoS3WDXL3mtg9a4y5XnoDDAdQoj2wxrgTayv+\r\ntP8ICdhoLkmxGpdBIs7rZ/8JE1ebk5l89Q0pYdPWzCicwrHvq01YMv2SpvBp\r\nIuzA+0ndFS2thFtxOsU17jGDlSdVoFnBCdSAnIOMEVTO+R6N047hcpeSCCOy\r\nyybR9vqn5OBtBamxLnjGVypJwOiZkdrNKqo=\r\n=gWnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/button":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/tokens":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/icon-button":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.313a1326a.0_1671013836418_0.3602625614036443","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/snackbar","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed58a7d95998deed01aea5259f3c0a87ca1b637a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a69c14e10.0.tgz","fileCount":42,"integrity":"sha512-QYN+933R0SdLGZM9nPgAlm5kDv/8xmrtTJELrBH6wcCmDVeq4lO71R5fr2K0V/jijtsaDV47OSwdTzCVJFrZ1g==","signatures":[{"sig":"MEUCICoX+api6i27tmx4cWq6di9FFzSNyEKSSeMhf/jJqZIqAiEAgl4tu+0cD4YcL5HCcNr3N2eIgVbwwS+RuLixN9t5XWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbGQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjtQ//YOKJAPIP0iFgxFghrmpQ5e8uqfDMvPs0W8dg4rXmZJrr/e7V\r\nwsywjWmm/4m22MzexsDtK93yipIODOHoiKuaoON+chEqzGkk4YRho/zMn+3v\r\n9lSjVaf6Rcfx9odJEeZp2f+4ObIHyEYswPru8lbUh2U9QN/pZ9sUuC1/lVzm\r\ncleC449nT6s8sgZAu6SYkPilP9SXXiRfj1s0A8YUp/60uTuHrH5A7ArZUPTv\r\nI32OAex8DGFAkW0Y1pKZcwvpLcd0rLN5UdLKojrrkMrmi/pLJK9LrK/ga48/\r\nkUQy6vIbb3yOhGb4NiO78bLWE2yKAzzo6iUnQ6ZuuGYNSVvStFvUcrerOM/g\r\nbGjLrd6VM7bUgdTbxgGQaGlFhY3aYonfoRtpblt4NhXtyXrg+4mmV5biU3CA\r\nJOOSnhoLd2TmE9C+Vp0SJpN4gvcJ7Uv7XX8agqyD7m0alf5iYvtSVLaUV2t1\r\n9ZqkK8GvhyzKtzta9jAReGos0nH95aiK6YPAB7Rdyb7fS3xT7X8ee1xqdjAi\r\nR0oKbRs1FplROfLNpyO8qYUB/3yglPLLn3VJJaKiwMrQKsIIUag63i2+AlA1\r\nBVtzeUV8xzsmSk1vMvPJnyzX9AoQNpFYnHvDApKE87ShigxWgwpgI6vYsGtn\r\ngtIxbnEUmAAHcaMbQNQwcm2O9o3IIljmmhY=\r\n=5qYV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/button":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/tokens":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/icon-button":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a69c14e10.0_1671016847870_0.46312800436519086","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/snackbar","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac1dd4438bb4bce0e63ad36511fab779e15d03e9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":42,"integrity":"sha512-q8OHb1XpBdJOn4Ejy8jD3WJV808R8k5k3VfKbwIOtouuYykWJJaj40WihEwITLWQAJUewhIcKfIFqa98aWwhcA==","signatures":[{"sig":"MEYCIQCPz20zYauBdx5UrzmUjKuVM+KWoHziIXOT8bX/LBy13AIhAIsYLFgmborxVg8CSU5B14Q49X2YTPPwvmzJouSkGc1Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf3qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/JA/8DW8FQiKb3fWmktZe1RsP9Zq+1R+n8sN+iS5h2PXD/2c7r1h1\r\nOC0J9sXBmdT01+VlE/xR0NYSkJB/IFaPumSUjwtqbarX+nHWAK1EJNc2mucx\r\n3BsUDOvuA3XENtKS1n32d6uXyolQBPnxvoQ/Mcqrh23BXMviw95IIRiybnr8\r\nvmW6URpm4SF9BoOumkxcfvHnMkK/l7xOcXpCoDWBErt4AwH+44ifii91BTg+\r\nqs+06zvVDXlQUiYDAEshAv0VEbyr1sf20aOcdvNxXAQ4+TGK4px0OYnHCchM\r\nVCgXlYoyfMEKC38IjxXY1EgVfuSBK4nt5YZ3C29iLiu6tYp/WLsFVIpZDPyl\r\n/1mh7nwRZq8eOUyDhiEi5D+MEdS/5URHO1YYigtay36hBDfaP5HfSbKmhRBN\r\ntIpoeHu8iKbz4vo7jhFN7dQQLmDe/T5jY8lCeE/M8KT4hJFJeB39d+Cv5R3F\r\nNBDeg/N1ww2vgpqyOJWsCES3XJhSnkT57WsSK7Ku8qG0vhImS7Mf5+GDHe7F\r\nHlStOcGavr496YnlsUT8Kq8oBZSPSYfhTLo0wou2KIEVZVwonkJkoDcV6Ba3\r\noalAppBhu+RigqsOC6RdHub4ttaviG/V/IkLvySHNK93OpKVzPOaVtF4fhQ9\r\noiA86vhTu3XUCpqXGcqyCqYxcFaVCu5ToLI=\r\n=SpfK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/button":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/tokens":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/icon-button":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f43e0ceb5.0_1671036394591_0.28077669949583606","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/snackbar","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.34767110.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"727dcb369ce6ebb27d11816bd46842047b8148ec","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.34767110.0.tgz","fileCount":42,"integrity":"sha512-PPrCe/nVCIWqNXUo6uqTqHoonKn1JUiNRVUrDhtiXhDlcK1FfO6reRqLa1aQdoXC/C6KaiHQp9CoYwkKQvBFvw==","signatures":[{"sig":"MEUCIF/acCbPS6Fmo72nZLzZI53Ra1LTtE+xJgsdmjxxSTQ2AiEA9rrjxSWHCY1ayBAundD8Z8bKvzik4RI+2qe85WVo1Ps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgZIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs4g//aOXwJLHIkiSOocnkpKVrgQXQpjCmNuYS/TDAqujpFX/3DPXQ\r\nLWih+5E0m2HdF3pIeBHiOBWk+iQbnqvOAOi4ZJHkc/uXiTyus/4oU2z8iz+E\r\nOXu/q5IFoQ25EBRGBiiaRMZyuN2m48mI6/7uEhjF+9+fIVHQV2WqdlDlp26+\r\nu0Z88+4b2uz28xsCnF4Yqu8OgxfHkhscnO3QM8coRjWmHWMHGNk3W89uzm+N\r\n/PosybAugt6G4M6AxJzVFt7YpWUhNTuho+UwWtnByUBo/496nZkSMjwgr2pd\r\nun/1pE/zlcWD+911qhhF0UmmdDQ9kHe9Rs38wrZEPjhk2oAKYqrlQI4StMMB\r\n6wTU4VDw0FlFY2SHPbfC8WseQysZaaLkxEQEOh5PMxOquauu3CGf7T6iDd8Q\r\n6v3l5R/vneyx0MdVphGJfi/4Zb3pND7IByE6ROK3gqea2i5ZOgu6pusSWhKB\r\nlXVdtcTMfuslI1mvJLwOLlxZqlSRn98D5FmzQ2nlSac5mH/Sf20o+YkgHqBY\r\nzkohMVs6wMr3IXV9bSE2r17oJwGknCFf1XpyykO4kWO5QBMQR3zBpriWlwK8\r\nluUn/MDAwufXnRCJlkeKfF+xeaETkCNCqgk/zhgDL+8fKAk8GSGk8zRO4xBp\r\n3tYS37iwmEJj41vF8i0tA+WebMkg+tt44cE=\r\n=kvJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/button":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/tokens":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/icon-button":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.34767110.0_1671038536398_0.26978823509331207","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/snackbar","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de58e8d46b3fbcd9e87f4161dace6074523bf85d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1f99f3c50.0.tgz","fileCount":42,"integrity":"sha512-klUeNXplVJD9GgL+dfWxS3FWEjaO1e84gR+TcdudgWql+92OQNWuajoWJpSGrTMaboaBUlrJ17FLhKCDJsGVww==","signatures":[{"sig":"MEYCIQDKpCAJgquskhn3Dhm0n4ZCTHn0ndZYVhNjK9uIaQ1TwQIhAOIXykxTPccGFb2rl1tE9pKv1FducOLpVLaX9e1OSS+1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy7GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopHA/+I3G/qps7XlULB9I1U5rIifkchfCO9I6uvgWZ04h3jp/aECW2\r\nZGhVSnV/T0DzUEW06KHh57Lt0ul/nlumZYtjekLIwB9gbe1Vdmtibk937Lkk\r\nCjd5gG+hzu6wrjyNS4KSVrbzwAuP8dAeeNPWGJY8ViZyIhUDhiK5wF7FQAFs\r\nDVm7VNBMLbxdPdwtrmiZE+LpRBC6bRqBt5eUYsX3c6nBCNt+NH4cSJJKy+9q\r\nXe0Rcv1sTDSp4W3KJ/mCMg/MtJjnJtXoBDRysaeN/lHBE++MQGRPpIT8HO7n\r\n2QKnMF0PfrD2n+1fuitdIG8N1Pn0v0CgydwbsdAGHpqbdRERnw0R/k902QoG\r\n9qG8zT8ODaoXXPbT2eyuSMVDkc+bDjFQ9qDRM/PS/XvIWHPJYb9NA8wmEYGp\r\n7U4c0dQEVZBc7ctUeZRvk82X7jd9DUTi3s3/A7f3QMsY9Qu5jb4wsL1reQF5\r\nDySBtZgDEbEEMiYVTzC6+KA4NJ5Pkk9TNgiluY6z/39YbZqeg7x/tP8I9E7G\r\noM/3DiVB/GhudWYhx1/q6GXtOfx19EDZTa3ttCqSGjDjcSs5Pam7SNBJO6NK\r\nMCt0eAQtCH0LueGclcnOAQd7o2s8NRrcIJUeTmk1cRdVyi6za0XBtVD6JNBw\r\nbh5K68gnRviKkMFdk0sMaQU5KaBqePqUpoI=\r\n=IOY1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/button":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/tokens":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/icon-button":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1f99f3c50.0_1671114437830_0.3371395995827906","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/snackbar","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61fc29be27f16688d2382af442bd008b8076c77e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cfd69490f.0.tgz","fileCount":42,"integrity":"sha512-YvkWRSkaIf8DY1lWSMdgX1zg18e4rex/JOFatm+xYg9m89uYdsDqn+CuyiZPMfd3LeHydZin24Y8S+G+Lk6seQ==","signatures":[{"sig":"MEQCIC2pT3LRBo4hpeuhCyUNpVA5oKDzRk5BMaQDJHuZVA45AiANQFER/X+wap7nJg3/2G227La4PBJ952rGx4oAQJetlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNCrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4bBAAiq2DKLcmT0tClJf3V8uaIHEQITQeyiC7o91kt+6YCKfaeu7q\r\n/QgC5Y+pxpAYt/FrR0i+yBv+UMrgZkLrcWxB0oeljjUs6ls7ycaXbgMrU7Is\r\noKzqmXOOmEV3ew4X2gzDS/2JNBixBh+hrS/8BQXG3hGwjr7E8gmM2A4mKBkl\r\nStkyqDxFRSdKAtB3/jFQ4uOh9+z4nCTxRU2rYYcCvZALy6YXs5obliRnQh3o\r\n8ZeX7FvHFwAu6GfICvWCMLuXST74+Mj5I52XgDhxlkOGupdUC7V4ugc+M8K9\r\nOVilIKJAahkiaGL5nQL0FzHsYROoXmmo+Ug5tAtgZfrKAiWpThs6+dby2QwB\r\nZX2TaGbrsvPtNno7PCMcgIg3LP9ptdj35RGq1Jw8QMFdjAgqB+aSltwBtLYE\r\nlLF9QoXYKrJrr5nNxLqNEaz2wWL6WCUUZzQyI26ActZkJ8sW8ZmzK2g7YB7v\r\nKBDfiBtCZPiWf9DunO/rKNzYdkoOXPwnNVoNTbmyQJk6s8w2eI4mXTd2cvjh\r\nIaaJZh1rMef7pBqdX3VXJO/zGXnUj+eVyCn9Kc440IH9dRJWVqAWYM+vNnjG\r\nFNqzocXvdl1doA5UAmvoQcAem4B+uhiH3lIJa0ru3O0tvXD1xIffqTd53vqK\r\noiMPJHUeKR+9fSt9YlYzf61MMPDHnF0qFys=\r\n=CSs6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/button":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/tokens":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/icon-button":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cfd69490f.0_1671221418878_0.9275213135001481","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/snackbar","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3489914f5cc06a84a302c624798364eb1f62ed4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.94ad8d986.0.tgz","fileCount":42,"integrity":"sha512-K6ySFPTGp3pjfHjsUamjftFgkpuTXy3u/CXDrQbWcLjuU9V27Q24TSXqfVUH2lqE07e1PAhOz7LI4yhGQu0Bvw==","signatures":[{"sig":"MEUCIQCjpvdIwY4/p4NVXrlSy+6VNlQ3F+WDycqDDpj5363dGwIgFj2y6/hrjo2z4yr3b87gkpPBH6rcbXIJqRhgZV2UxKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLt0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4pg//Sgq1hpj/BBQ7AZNIJ+3YOqUZSbEGegDbteWoUm65gbbDQ25L\r\nBgqi7Zw4mV59/KdUnFwR+Yak0qC2dhi1Qiew580VuhAJCEycWpSNowEa5hw2\r\npleo+KMeMtoPMzVkf1X60wv9Q035fPTlYd0ZPNASQKTSMojb7HXfu7HJJe2K\r\n8FXE1CnzTGqAMBiy161bWJ/G0/ucOit/0yaV2TwA1WQi+74wkniKX88M7v1y\r\nfIFE5fF1jHZkGHPojs32t3hViA9U8jsS8m06cYuoSOPtwjR9duAqjlQjstRH\r\nlreUqJ/0ZvEm5TY1AUpcqZUJl++DD6U1YJ6fQFOBTWFEj4kbtLuQIJTDHHEH\r\ngLTVBOXu+FDytnQsx1OgSrj3Yqk0vkl03oH/iOnto8HKD37RAiBFDPw0zVdz\r\nua5AOTXf20HDJZhyHNaJhXGL2fXBcZUIkLCroL4brRXIH3vDWTV799HXhLcC\r\n/TtFqXZDFaiMlJ/peFoZEdFKThDam903L24OP3tjH7/6wGeAtFSn0AG2YO+K\r\nbCCO9ZJAd/j8bmC62ODGde1vVxmuS7rL0BY2Xg0F9ZXiJnyB6xKkvl8WVVGy\r\nJUNNcKDePzPQcgjRppLpdKrTwzOFruVyfW4EtIB0YIYNICtA1ZQIV4VBJT3L\r\ncx7b37SH+rfxHSRBpBfQTgSi6HF//dxxfYo=\r\n=TK5I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/button":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/tokens":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/icon-button":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.94ad8d986.0_1671478132275_0.7014769118912128","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/snackbar","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.604264203.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b46a085b30fd0b4b639984b6845a011af73ee125","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.604264203.0.tgz","fileCount":42,"integrity":"sha512-87c2+QNiIFhtvzcJSUj5d8rhVw3BgBzAG+FB11oX2WPRUNmy3REYbGZGHTSFrBehWFrs0iBCusrDfyE5CiP5dA==","signatures":[{"sig":"MEUCIQClmdbQzTo7+fDne90jKSZF3lGupz+VLxvEKfKY7/4iqgIgGUK1UxTocievkN0UUjjHrDbt43ZiqHneCI8HTG9/5xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo33DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhmRAAoYthfG/ZILyC5cbsiDoRh7aC2Zfn2MyAI+wQsMAhxaCGP2dp\r\njhVGzzbw/yBGfH57XQ5RFw4KsaxZctmIz2glt1H1qY2dn9hQ/+PWjETdaNaN\r\nrin9is9B7G/r0fre+2AC8ZApdjSARUKik6KToCta7oVrFSR29keySr4F4WxC\r\nn3WcsGOvIeM3eoJQKQoybTxoW3coMxiWPS9W+nASLLe0ueyd3AT3xtLF45kd\r\nQG7XupBvZlZvA/6GEDuWxSxc3wEjCfknsDwRI6H92wG55OmR4RvaoGCQjHIW\r\nQzXaqFZ46vX7T+pewLJas7g1w8wzw0qriBtqp6/fBXkRniNdoJCogHec7xxc\r\nY4jZJgzZGOUk0eczGx5C7ahgdaxQwVMLrA+rAuesVDFzFvre7kZGXiZZ9WNc\r\nfRldXtfzm293rWmtqlz9XWjiUNadVyxogI9v7oikr/UorOjxaXVXIo4UgJas\r\nLHUQIL+NqJbggLjS57WmDvLxJ9y5el75oNimaud9w+/RSxXiDEIbmTNTit2/\r\nHML3hhYDsBNygIAReycDEYIUZ2MWFW74qKXxCaf3Klcg/W37wwgsX+zoUDVp\r\nuJ0ZNesJKV736MvhfGqA5EQm/tep/r/zOiAbxFLewj/ibHjYH+jqcV+Y0ga8\r\nRdMFhAHZuyRJ3n7DcdtP/azeVfFotsrmajQ=\r\n=GOmF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/button":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/tokens":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/icon-button":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.604264203.0_1671658946924_0.6720363994156124","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/snackbar","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01b74b8f8b312c7f2413dcb3822e685ac5579d36","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.85bcff6af.0.tgz","fileCount":42,"integrity":"sha512-45bVq4IlDFg4uOzhui6bYuKpzR9M3xDlhny1BZvG33ckcytRUkxzkkPgVCgSuP0aGz5GgqKVlzVbM618EJ4RVg==","signatures":[{"sig":"MEYCIQDwcgefmDhJKVcpHFvQwHt1VG76Bc+fH2jM3yWR9zIJpgIhANtt6HpILKQy1WxzQdrVDaMqZjRVqfVQ1oqBkTDwl7dD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDDzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2zQ//TD7KHBUDVcO6vf+MLXwyCVCGUW1WwFwO3SD0BeR1yz8kdhFD\r\nCgdomAKx2MYlj2PmoRuj+l8oI+lxan5BZqvTVZRv51GtXNeUqHxq02fwmH8K\r\n/MfULvS3Ptosvb3icAhMggT4nvW4kPeNoXjVU8ZCF1moUHdJTr5KgIBbGwuE\r\nyw4wWf92sOKQwyu74pue/VoxmF8UvGrg6ZwCk0/reAe9uho63f1oxWT0VMXY\r\n9kXZaJVl8f31xpUZCd7E/d7WHBjgDOToVmNhce80U+HppE0LgBKQilAYfkz7\r\n+ZNK1GNN5KoRv5iMhnLwVCPvxUkHWN0ee7r8KYdynCFgD/2vbshk+kO2jgGw\r\nuAg/GRxHnGzjpd/yvb2SeJFmLQZS5ZT7InqImEwXwdBvBvm+734uvonNJvCs\r\nGTvyN8MsjD3B3ig+tw3sGsqoSPYPWo/E4DP4N4KTr5VdyrmCrDAPnPWxEzEv\r\nhDJel0uGYWfJjTHz25dWpj6tznuQ7xB39BF4ncLK0thZ7jQ4vCND8ofLUcxs\r\nTOP+k5q5Aa1K9oxzGVVjat5rujGsd83Mps1vT41ZWzJtRHLfDv4Qy4g5WHhH\r\nn2/xL7nThnBhuIqUN1MJwliMOOceCI2ebWUGeRFOSBd3FHJu7qWruq9zUTNP\r\nyXG5duLJsMAwZ/Ggz6B4oG4TDc58g6+S2hg=\r\n=Vc1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/button":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/icon-button":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.85bcff6af.0_1671704819136_0.5496052412938581","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/snackbar","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9eb4ee6a4bb6b2d0286de231d3cd01dfe279e23","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ece3e8d21.0.tgz","fileCount":42,"integrity":"sha512-d/cYNoQuBjAp17VLANCW/Ejcmicb8DogQWU+Yig8Au+t++TPqba9J24i3sqkDZ3WYtKY9I+3IgeWMTqeArorkA==","signatures":[{"sig":"MEUCIQDjdY6SKtmZen1gCBcSqPzQaaPn29ZpmY/J9HWBAUCd7wIgPLR+3i6t73aQFLqPndh4DF+iw4Guvt1+8SDAr36KraM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJBUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd1Q/+L5y+Egv+a0ORjjdV+eMXF2ruW/w+GZhNr5zEEmNpKXU4zitT\r\nXshlBmmHeRjHmhjQvizab9cf5Ub6db7bLLvUXLNKBmqEPsiInKtDl2uGrLhK\r\nQdWif/EyxS+WCs1AYjxSne+g97T23Hx3Z377dWq3egsNvlyOLEWcwsKv54og\r\ndMwnx9w8Z2VgjQd0a8ZNX2058xC/JjWFciKliRvBp0KUWaVUz/b8rkZPSD0y\r\nEPzQKrSyXJ+fRhqY6/xddDY4YcspspStl5DhSFziMeAZJiQmi+YB8KNqs4Ag\r\nkrtcpEbgiYw1pyWzr80a/ekCZA9iTipBYcxZs+RdVNXQiaLKnF0yresn/Zsk\r\nkcG5TsCWOKwPr4AOKSYt2EYIEsOSnaRtJGgBTK7A5ZAniuGZvJVVnwRkvCZv\r\nb2jva7SniVkyxHQENifYFpt8GiQpzTMF+hw700cTq9BgXjmoiCRf5rSOaM54\r\nPhFTUksUFsnIy4lhH6rTdr1U9AeGsvhVNkUjaz36ePZCsuEjX1LCuhT7NDvc\r\nk66EOugc9+ns/ta4zmbosANtmnM96pzHefmrEBQm2QrrXRbakhhDQwRVKvXT\r\nD6n6wZmDqa/3BNXrHuqtrXhJiTi9L0w+u6hGVHFnkC+ZK6NT+nmJY8Q7eiPa\r\nP8tlEcXMQLhjogoF+gc54NWdotK1Nqu8HMo=\r\n=l8So\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/button":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/icon-button":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ece3e8d21.0_1671729235937_0.37591445627442566","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/snackbar","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2914233198af7aac8dceaa2804920c8f1afa1bba","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.278ad53d1.0.tgz","fileCount":42,"integrity":"sha512-hyOeQb8ZttoVZMrLltjVG+nnmE/5zcP75boUJxhJg7gHsNEDQFue+8N3vlDRZEOzoBGwGL8lquj5zNeilxI6bw==","signatures":[{"sig":"MEUCIQCAqKH7j8bVURt3W3FRneUnKEs5TzjnLBcBzzi7Qm62IAIge0ZI3iLoxKahCC6HobxSECe2FXaO3tF0Cdhjaz2hnQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyYuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXzA/+IFavWRxJOcLfKAyFY7CKL2USfA5VAgEz/iAWi1oE1qsLjAMW\r\ned45atps+vEheLX+bdmsjNZOj3KIOn4HIumk77Q8ISU1mVfKG4V9WNRzUUh1\r\nbU124xG35Nhmpzj3TM2AL6p89anxuTGIbXtvnFLStxKNmjB6wltKiI19qCQM\r\nq4jbqAve71GHw2d/AYKAIUXerGd27HuEUpMa/MMLszQljzV9HsHPXTrEMsPn\r\nTLrKYwv/WKA+glk1TWF9L0jW5KZOczz3+MyFON2vAtiiT41Zc3zwYb5GKNDf\r\nwWO3A5ghATMHo8C3fCmXFWZSntqMIvVlXE4o06LRNwqIwc81Wu7aTcCIMffB\r\nkcvNdhb1FSLXWn3gSNTh6cfYI76eUGTQChHcGX5BvIJsWjhdVMrLkW2He5zZ\r\ntD1RCay0lQ4jAM0wmRNrvQoOKM6pmUwdKp4+INNVQ8HSOGm8rakZ4N++0Rth\r\nGzbevkHYfLC02hLeVCa+jE74jX4cKxwMNi9WRfRZxJRZXTgkxs3qhs9e8ETA\r\nsDIU1jUn8NPo+tUKvhuXID3z0e0O0EaIUfAvS7EaQiOslW108yd7fGCQxJfQ\r\n+rOKU4wE3dTvmH32x+j2ETXhdXNhvevmhpNlECgeY1PHnmKZPIrxhs/JMT2X\r\nYZwoDuaekt/ImZeomLun26JOV5TyUCT/xYk=\r\n=y6xn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/button":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/icon-button":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.278ad53d1.0_1672160814517_0.3934924587848412","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/snackbar","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b23677aa3072f16f771af055195a87145182f87","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a7d8389e1.0.tgz","fileCount":42,"integrity":"sha512-qHiaUL+BaFMwVFZHJO3qo+kKjMWaTn5Pwb9HZi4BLXEFNia0lJSAJVPG1NBkXqeI2Mm4Obtjl0On3iweMTNMqQ==","signatures":[{"sig":"MEUCIEeHzDWgI4AECKnjC/CogZ247IjO94Qb42masWd/+ZY2AiEA4F/40mTyACb9qmQPQvvhwCQiKsaCb08+Xc/NAgNLBzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0IFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqocA//Z/szVc51NuqXCHlh91RfXqoH1w48QKZvAUXHJEe6I8SgcalW\r\nVlzn24O1kYYE+lw09+iuNb7KHw27YfUdihhn50+36wwQEbMULT8sYmjPE/oC\r\nygezj+wWxdeXoKkNEx7w4ufjgZksRvACy7Wj//t93RXIzytrvQlCRs1zD/v+\r\nSJSN1AzoIMRgzNXewo1b/3vF2UR5a15ptFWK363CkNBWp9rp1OYYTp1USuRC\r\n7QIDxlOQsQYuoWzhqXdRVT6e+MPMBnDxHZur+gfnmUtX+zkbWVKG56HTUZkE\r\nfs8D9W8Fu9lyomr25QlSDaJd9ZH7smR/XU64OmykSQdwtKn5YUUjmfMWmX4b\r\ndGJ4iyNigN2he/9KCF80g8CN+gcse8pgfTZ5JOdzRzi2sS9RrELyHnxKdLSW\r\npXKCSQgq8+V38GONLO4Gfacgp6Ehov4ZJ0+5D5eO0v5HaAs5z513tds0/+Sx\r\n4Nihcy9dIPjlrE52mWOqPOjarHOrOmWBbZPDFOylATk3j+lD+lVK+4Eb6k6G\r\ncFb9insz3s3nmAw4ec+cUJF07F6AHvp/adi5cRSKfJ2HGcfakySJDS+1E4ZJ\r\nuTlbGKV1pHS0yGpAdzd3wO5m7D1OL3VKG9J9KUXIhZ3BmzTdquYhu4SIZRfq\r\nGfe+DOusgIoinEDczLrodboMfOJS5qbRWtQ=\r\n=umFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/button":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/icon-button":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a7d8389e1.0_1672167940878_0.15639822351745525","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/snackbar","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a296b6303618f815b9f80288e164b839c794a45d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8175d5eff.0.tgz","fileCount":42,"integrity":"sha512-7bo58zCMblYLx6aH+aa9M7BwLg9oNWd+6mCqBQlGGkrdEbNpExBCWeRkciMPqcfzO6P+cmo4DauIEmwJDZemFQ==","signatures":[{"sig":"MEYCIQDsCa56DdPdcmHPsV43yWIBitbv1U0WuVUt3Or3FQyYEgIhALTWl8yhW66zXGRhspV73fWXFtWOS/tTd6hVtrTaPnAY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6GRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmPQ//Rqajw05mI3vfF+Mg0gvBltjYS3lXmb9npcnIIiDYY9GKw+lb\r\nqm4bhRbe9sRh3QohiOHZd9rTGSIwrFcqH/5JTpL6ndRTKsH+UOUMTfiI8dRi\r\nAW4/pcmYwiWMhCPDxJhTu1tJTN/xpIPpMDHGZr11A8dMJZrsbEKM7dhHFg+b\r\ng4ROQZ1w3EsiF1rUvC07py/uQvk0dFBk8m9DAwqdD96+Vd6LCHYT/dsRxkSd\r\nvm4iLs2wwhX4ixtHLfh8uR7LrX+/eWNQjn7+9DPOQbcC1KGTdPLojl0ixssK\r\nKjmv67DtwRIiJhmQ9eVIEtfP1M9ZQAU+8QKMWDYYr+uw2Xk9V2fpo//CKzgr\r\nGDm4ZemgZZCZxLRmiD4ux7ByE9HqHicjWt/txM2PjfNCWJt5XmHbnvkeXZ9t\r\nhyoRJP/tNi85nEIJFriU5dIUGpXlYAzcSPHoFGukiz6vDph9EFE7fO3Bjxah\r\n6wuGZt6uTRafSG1/Z+Ae5yOH8K/by9XMdWAWJhqxCPTM8fTRsUc0XKWaDepG\r\nhdOkbZFPTwbqu4sEtginBpUqxkVAvjIPO2SkKIGMb40TxVMYCJR1Yrs8ZSD2\r\nxnqFzASkfxAktkXxF3aKOQSIgiuorE/EAyPyQnF076woJ6RFcz9VSK+UydMi\r\nhUMMRLRHD0Q2Jiw1Uf5It03NhV7pxqFXEWQ=\r\n=2vHo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/button":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/icon-button":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8175d5eff.0_1672192401514_0.4254693363172808","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/snackbar","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"539e12c6ced1c15a85f1291d4e7dc4005b979a86","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e21dcb86d.0.tgz","fileCount":42,"integrity":"sha512-UXIGDYg9PWiDalxoEKBFa0Vga4VOUmWFn/oXg6scO9YLJjRceqsrLJP5EMvsHR7hsLNcxlxp2g4t5Ok+vY7DoA==","signatures":[{"sig":"MEQCICMYXOU+3ZQBqs03dt5ZNv4vtMDlJKPDaMd8JrX9oSh6AiBSwlqakq3s/jT3TWK//B48SBJTDnQNDubMM2E7rTDa/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ5QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqIA//Z8lMv3VO8TEc2w6xly2PW0PMklSC67kU3/Zoo4XLZgU27PuD\r\nbOD7pnH6gg6AdsHJRYhLIeVf0+07DpugyNhzWDzCuObQvyshm1Xg5OTDCyVg\r\nyF59mw8HH3Q81CrbYQtXd+5w0GjHZyylmr7mqC85S1crfAnKkTFzuhdqrH6d\r\nDHBT9vrDyUEKaSFzFIGcL9tl8XKhajiMqroDi9KCvWlF5aI+JLUJk53F8xMv\r\ncEUtUjV6rGs15xj1tqKd6Lf+gLvOAfk5QgDHIBT9454IdzkTyAZTUHPH/9Qx\r\n8sINUFSrxDtaQf8F/5I4w6AYJCKQVQiWsH5KDvdRNCYy6Cs831wXDqs1HWNf\r\n5gfa6sAmpAzZWV9szGtqe/FSKSyH+JIYoOUwlZs9/0XaBSdNY3HRLsSu0QN9\r\nBNOzX9whgxYRq3TQqK50AcjKfx+IzKJwXuC5Uf593yLHNH5TNyuXUY+zF03e\r\n5g1TkL11hDJ4HRMxv89o47KyXARn54o6ugaLpj8TY67cbsTwC7Z0ipXOpw22\r\nDtlUNWTEU+J8VTwtLlG0EDqz4gXdl5eWRu3S7aZcLkkptonieIm8oEJ5kner\r\n6fvU2VkoE1qh2pNfrdKDwR0M6D4CfgRq9JpV9PxPKn0ddTMzwmbYXdpmxWpu\r\nIobcsJtUmNOfxAVbJXajyUWMjfxEFfBwjUU=\r\n=FIzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/button":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/icon-button":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e21dcb86d.0_1672322640165_0.27089763499592046","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/snackbar","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1172ff4dba88b7744b9844fb96c76346a12d8f2d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":42,"integrity":"sha512-WHvUckWRtqjjRJ1W5jh55G9iOur597DW20oDC9Oc4pR7rIGc6eryZ+OdtZ5fnIhgPfRC/VKqn7ewpX+6/tXvVw==","signatures":[{"sig":"MEUCIA+bAotrmhB01qXA/CfnjoSPno7rSPe4UfaMzr9Rr1F9AiEApDxsitmeCsx5eeCuWMMCLOILl9uo4YjyYrmn7TBITX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre2wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkTw/+KX0RB2fYL1oPm+kVT0Op4rEDZhTD2vy3d5v1PyJTSr6JKRj+\r\nbhO4p5oSUtYkgu4WzBg28anrrpvS2tDKorVF//GLVCRHkhKrc3OkNXQWlC4f\r\nwbenMEJGvcUbMIErb3sPaqBwRDoMTaspbZZtvGAnRy2ef/xAIEnnioUiWV7J\r\noUAOIBDmzepIsKsZ6C8DDAs0mXUyKmLXE13VkCrg6AKvPggPbvIbilrzYMwA\r\nfLRsjxvBd2caAehDpGtm10QPw3FalGDDK7e4sB59zFJZKBEIzrwqaLkYomeH\r\nAsbWuJiEX0Lp0yHwVkVXiuLr6cxWdwKwZfOAesjIx1n6QLZCzL3WuWz9hCRX\r\n3zuhAVdtVSq9Dh7TTWLRrlHvJ1SW5N8975F0FDu/KJ6MFJDQMl7W8rVUO/Y7\r\nOfZf9UMmUZ5hPg6RHk/FiCfZ/ksUr+2JnGuJqsCGZuDpObV2NW2TMJ8cDlyB\r\n6DobIkq9HIZax4oAUTLu2tBWKTITSDPxAnswL7vMYkdTtV9MUKTtGYahTC7G\r\nI+wQYnzUR0hcV2hsBoHCdMj0xG66boAdibdfVpziDhXftNlESmudn6BtOcxF\r\n6fl7RHqorUhrfpmFgH7CYksduCOipGA74ZKa3Ebc0MCeKbX7BGNb6AtL7m7V\r\nSFCw+HinZCGrDCGRMgKZIr0obvN00Y4FtOg=\r\n=WXKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/button":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/icon-button":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.20ab6f5a8.0_1672342960090_0.3426656752365098","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/snackbar","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b9806f623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2085eeb87fb4a8a07e18bafcd94bf22fa373cc1b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b9806f623.0.tgz","fileCount":42,"integrity":"sha512-f49J0K9aBFYNXRR+jy4RBOb/Wkb7DK8EDzGLVWhhLLkvACkZaH9hIXX6zUWjz2ZNYVOF6dnDKfgWie8XK6lXKA==","signatures":[{"sig":"MEQCIFDyV+B8tuzZbXZkj8xRzUYwlkpYwzoX4s53z/K7J9D6AiArIkwarZndhE4ktyQjcmxHJmixLkqtn00KFP0zrclR8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh27ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNdBAAjGi5Xuw/XkcgJc9tigYPwYACmqtkw5IrLzL9oiV/SLcRaFws\r\n0qOPwSzq9HYRoVYYQjesmlQGSAJmcV1frWeSN/caPMSbmIkBJpQtPmXMLULC\r\n2rnbSiZLnv0xEH+DEPlqVUIZT0kf6ZpB5B6K5p458YhkueK2NXFJi33NhdEE\r\n3aJjBfrwW8FGhVbIG/pegSpf/acm/E0KZmm0vMPDSkZpyTHJFWHSJw5QZTK1\r\nqhk2FRwzmuKbJOzcfLseqQnaTU9J2qx6YV2lk4Y3aEkRMyVBn+dCwusfQTK5\r\napS0oasqC/oCTLhLvCWhuiux1JfSis23y2LUh6+PLqs5Kyya8LBxoSAkNmo4\r\nnjuMrnFkLoqQDZh74zg64ZedxJzj1JJfFG6hM3Be5OYP3+Z9T/4iLwFLNrfK\r\noxr+PEJrtz+8wIxtTYX6fJV3xt/ZgDDR4fY5bAyotX5nyDeIRm5IIrv9hQqx\r\nE8gGDUxD9xyUaN8DnCifT0cCfuL+hDyBZHoiL2rkpb6FaxA3K8t3EtI+PFQU\r\n1A6gPJ3aq3L9BY6eGi7SRwSY4Yl/tEMZh683hksiX0ZYfFSCBorzT1A+9vJv\r\ny/ieby2lTkmPpfRbZou02u/I0/mVduCLweMVXFv+aFcCdBIhfpao7WyhPuwv\r\n+jIcT5YKnch6sg/hW6U50QKPbExUnGp7NCU=\r\n=8Nh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/button":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/icon-button":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b9806f623.0_1672355258761_0.32327419233661847","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/snackbar","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b33eb8405060daefb58366d53ba62a89050feb1f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.50c9f550e.0.tgz","fileCount":42,"integrity":"sha512-EnPHfqjy3bak3JYZuHi3ukehWDq0WuMT2C8o3iqAkEzuK6tTNOkhzdVnnRLIjqCdr+mmVmNm6afQb9FV2MHP9Q==","signatures":[{"sig":"MEUCIQDPy4SN+xYrzxAJfVZCATIAdrSXDbFEwyBnyDBaVmia4gIgKXnfQQNtzmIgImSyTlDMqJgySy0Hz58qQjNOk5KH88k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE6FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRqg//dqnGDWqfrmLsKGJd1z+ml5fV2EQxAa/vZN1yc2WOFmRAT5Ud\r\nHMPk++Jd5WWdL904qi2ytxHh0m5a/ZQOVHxjQSacMXmzQnzKdOOE49R+MqbC\r\n1y9Qn4d+lZK4hCEN9EpJQ4IFyZODGLWKdt6CCVTppLYVQfCuJy5KrPcRZCcq\r\nVIQTz1bZOFFS+hR8H4CNfw2IR03Bwyo3jinAf59pzNHk6wBB5kIFDNXy7HIM\r\n9yfelpz/OadQValcvpPNetUlCbZMXTFDzijcbaag2GkhjOtRPSePO5vHoHdO\r\nhw8uCw4VLQov7on1pAxC3pkZgN6vOxMq8sJzgyO5iMSeuXkmm4YOinGVEErI\r\ngdhUfWg4sBcv2jwVERc7q8TMAPoqAJj/6jF6yiICIW10xCpkmORCQL1mVr3Z\r\ny1obfPfxmlgRQEalgLTi7ghKpVK9WXqb979A3YJQewXTciCwFbaoBX/4ACeY\r\nvpikpIckDR9cP53SrD7YIxzJ1FFmODRPJLvm2PydDmB8/zHOsoOr/SzMUjIZ\r\nUDgvUSP8xj2I/9bqmLSYdEQyftQOVx3dlZB49licRRwbjRFPQOfvTgSKUsuP\r\nDRtlFYe6h4qKqkBDoB3/hJtQTIoNDMXjB2b7WoG5H4fXueI19WgYm1SgDkE2\r\nVyiB08xWPKhxQNoxWAclUCPVZnm2f6ppDm0=\r\n=iWTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/button":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/icon-button":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.50c9f550e.0_1672760964869_0.9189950975616632","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/snackbar","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.af490a848.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5993b0ff54e7f8c1fd7a398addbee4d549346615","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.af490a848.0.tgz","fileCount":42,"integrity":"sha512-mfARTO3ztd81SxdIzPUyrMUmBfrkeuavtx8rokxTB3DG7IkukU27JP/wwNcDjcdSybYdTuxt04iv/HaqOx+oDw==","signatures":[{"sig":"MEYCIQDpYbLKt1T3jyeUgcrw33cahajamfGxznhOG3KNegEBEAIhAKs62kAxjhbPwVlfm9rb5bTfwZItaFzhmI74Xa0C5xfb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFDvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvuA/+PhWgLSNJfhJyA4PcfuPxYn0QaRpJUKJ9Ios9sQo6ikaLX/Ay\r\n2x3MZSZj9urXlBMOLniY/NL5EDkKusPL37UmScAWOKF7+puxJSlqlMrW8c9z\r\nGLchX/lsLROg1+TSVUqrH4feHHNxaR0bFvP+ouDzzl1ALkn37rWBpop/nas8\r\nWfwuPYYYak6dnWE2eSovZsLOAXVnh6WmRaX+ZZgDnBgt8YXPZyDiQiwQLQMw\r\nHTLVeXgOV61o3qNzfqqSZeC29o7kpbRHsKEKGgRov7dxmxzIcUC8Omv68N8V\r\nMmPfCW+g0bHAI/U2+h6BpfSaRV7w0onsUDYBWTxBVJudsdllKud9sN0e3GuF\r\n+Ns7EuFHi/zsBf5w/cnJNeF1841/Hux5NLU+ZbFu7gAe5L0cUWcBkVaMTzM1\r\nSqy6XbGtRAEgJA0Mgvz7yJD9wDt7pBcY8hzwa7BdSeZgEtLy3ztX1weJZP76\r\nEadrkuKYqyEOIdqI1EEVmBkW799MbM/CwyFoksTmA0ux9doSB8bvtB3oLmHR\r\n+6TuWc1RTbYhacRRUY+iif9JFMq0stLAzpwzIC3hp01rXDwU8buKlAqXwSM3\r\nefKLpy8lDWBiwkoKo+my5aXraEQEUHReMPIaavAtAvcflN3W4/u+9vthMxlR\r\nadoVV6nzXTUfxRB1lV/gqI+II3mG1WXbpio=\r\n=yOv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/button":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/icon-button":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.af490a848.0_1672761583340_0.5819222184518751","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/snackbar","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27eb514a38f23e71e4ce7c6eccd30b360a93472f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7cf487c98.0.tgz","fileCount":42,"integrity":"sha512-CLoEPWCgSyy+fX81BcheX2IE43kFRGO9QTFzpGsMeIGR2cPrJTLF6wj+i+bna5Zv1Vf032yuNqn4qDS54DGZHw==","signatures":[{"sig":"MEUCIQDKde+jupbt3/HzJ15zl25jegLtqgC0KPHXwDF8SBL5yQIgKkeIJo+SBF4z/V7xrbPkhDVkR304FQpAYBiQNDwqtiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGiTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAuQ/9H3/o8sOfWHMOB86fpNIwyHVwXUSq1f7jkMX8ZYsGXOref63w\r\nhB7gn0OLmi2Dl6hOTpkKCjjB3kSaYDKSSxVw4SXzzm/Y/PixNqzXRIrju1Br\r\nTp0HfcrYGFTdqLPGODTyzvvNwXY4a0eCK3oLL7j9nUqCV2IcgfGAZbWO5DJL\r\n1GZzx0vi9m61fQbXf4g5jkf+Wi4hbQKQpcetke8N/Z9qBjxKBdx/vYlappcK\r\nY2DD9pkvpCSDl+wpUdzYWJ9Sdt4yZ2wNIICm8TOHYX08esgqK0277g/uLz81\r\nsvkZdYMNAVDBCl8h0OxhKfnEVfDxYsZtQtZmZ3XKNHwIVJ3HnmLWEU7p2SDs\r\n/EW2Kpd0wN2mVI36q7dhz4eSmz5qvboF9KtxgxzzsqbwglJn889eoMr6F7ta\r\nC1XYo4qWU15KFWFt0uaQK/YJOcp7NgAN5EtBSqMeUsrLguETmIvlq/wWBDaP\r\nS8eIBleLcttvxhKBF+td/m97Ho/9UvfKj8SCqwZnONEhRp+yhiqeawd4T3ft\r\nYr5+fSUrhgBQDbCj0y60IQczKM5yhVDg74TRgpMloVmU/qheS33IrpEob6hT\r\nOeLfRhpCksocaQttOexJk6UbxjLbu1slaf0njYKlGTTjM+X5I+RXf1g9P6vX\r\nTcKJ+Y+M9IQcIFZcdL6BQGCdwzhKlnfb71k=\r\n=A2nR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/button":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/icon-button":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7cf487c98.0_1672767635599_0.4324367552293593","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/snackbar","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec0e9ee1a31ed3a85fd5ca29a941fd0062c9c4d8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a52be2d5e.0.tgz","fileCount":42,"integrity":"sha512-4/M1SB1l8kq1Ah9tYIsGV9FEi5XEGg4KzE+fVFBemyRM1rE/agFhMPAsziGBj2kalllPDk6y/u7o1l+UXEDz5g==","signatures":[{"sig":"MEYCIQC61YWQo6e84/1zx3RdRvmOjIc1KzK6dYC31wotO+OltgIhAI43uiWRc/pT9Yp1Yv7FKjAs2yHZBmiGyZ/Cv0qeAmrI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH6rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdsQ//XWTlIyUfJz6Rdg6qoy8kym1ZslHoTeO+evl52w9BsmTErZHL\r\nOszLNzewewKY1UtejHXmv/nPD1x/aANEOy+QJ+wPrxAodW6wfT3ulAVPWvBR\r\n23RyZZAVqxUkKSk/JGFZAuXxI8tmd5K+uqCKDyyjs2LxRsv4/P2OBtoKsCXd\r\nwL+3+CEB3Xp7Niu8+jLE6wX+sU2S2Rn7Zfbfsy6nZANDXMVkjwXoARs90lD0\r\nPsBwFSIP1mW3aDrIzmLEa5uXmpxoqVUfr6FwZpGOVVfRAh2XFjD8VK+q62Gp\r\n50ohjZLjRlrI80fJ9Skvkqfbs9Iz36bvOZpGslsvugp+mi34WkQU9SO/V0BK\r\nfECFfsE9hHUdHCW1X7Ane1kflgnUxFVvVu4OD6wWIKq264XyFcVkhXEPQrWr\r\nw5gZD63z09gGv8ufl2quVPN7HdGylOCE+9sJ0ZQc7Srik8j2EhV/0Su0+Ihv\r\n8xSwXqIFOOfeydDPYEKReNWgOA23wGHjuFDHFryNuaLlt6FPLalw4C9PWMNf\r\nKjCEzot4F7IC41Wpcrf2szzXY0nVt+O9jFvnmgEmFRtwEfsBNXADEHAb1B3V\r\nL5iqrS5VJffTpiYIdoEFqMkkyWoIV/TllGGjFF3q2YAwC7P7/lfJjUh+hHQU\r\nLzLCG5UTdHKjXRZMMl22Bw72ncVwWjBWH+M=\r\n=vo9i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/button":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/icon-button":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a52be2d5e.0_1672773291401_0.8599694644940545","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/snackbar","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a512dcf40442c7297b32c8f898c5c0949a433f8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e38ba17c5.0.tgz","fileCount":42,"integrity":"sha512-oMnSeMfzuPf1b9pBw0kHkKKyCmC/KGJNJfecTefD8kYCvKCLBhtVx7MrqZvXBsuGz5ROVdEStRSwX9wXgT2+vw==","signatures":[{"sig":"MEUCIF7eZEL/qh1i5bMVQLp5C5nMXXBRsldB5WNzjRwS95eZAiEAzM7nzgOPFelirhclx8nFHMGa9x+7lxdFOTLoFdERuIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK1dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrayw/8CHzlwwLCm+sLhRpKMTqpmI/tB1h/E8XRdpSKvezLOVbGlCyT\r\nOEts9cmOKTf5L51hvZRCc1O4Uoq4AqCR8D2+NPjSVHA3r5j5spnMH2FbtF/P\r\nAuxRofMvV80z19BKkIc+l2kURJuznymU6bOiEGUnSEUzkc4Q1dRF4ceFCndG\r\njZTtP1/L6rSTn7hm1wsIot/v/So/WaF4JRtPATpoOvQrI/bb0SkvT9ADWDi1\r\nWjYRBEc4oLglz9KlXb4KjmkQgUAPT9xqG2Q7SV+h2wZ5h5VRsaxcEu+8IVSt\r\nd28QYmuqM/lHsNJ+h3V6IopnvkcwZuLC2BCxGAcEolQR7BoZBHkCS2jIPuNE\r\nT1dLhPRofW0i1nTk/TjE4vIAmHN/iXSAL2ICmdgcuUIuFsf8HTc8BTN18/hy\r\nfubDyDs2FF6VKUyPwkfwoO8y2meIYWRQtXWluz7UnYgUy66K8BUPC2lQxMX/\r\n34ylJKExEn15zsMEZryAqmPHXpFIyQjP2cxXtDnjJH8ZwEKgoYLjDajuv+ki\r\nBtZsW6acFmFRFnMvJypx5d9AaTc42b3pWHPxpPc3imbiV1UXSbUnpl8wciGJ\r\nCo15NI+hsZcpZSe2gI/x1UQQSX+YJeucUbNeV+bpq42h3YLIlRbzZvfQ9rDN\r\n+aGZi3HGoUeOOggtUAEKlhFdsJtFue0WrIc=\r\n=CDSr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/button":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/icon-button":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e38ba17c5.0_1672785244872_0.47710730316652006","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/snackbar","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d04e665d2ddbfc9345104820d7fcbeb01fb472b6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.49041a6c3.0.tgz","fileCount":42,"integrity":"sha512-iniEO8IkxaM8sS0P3NuBar4FGHyEVdmBdc0Grjkc6uT8R2XM8ZZuZ1b+T8tLRdgZq9EGNcsv6IuTudZy0gzLKg==","signatures":[{"sig":"MEUCIBFcrU7jLIZHWbmhN8GarpMS5U8aT00ffp7mF2L9rc+kAiEAt3dK1O5KI0u7Qeh6k9Hn7k3hoJdaHRYJsBprrSNFCas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZkEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfxRAAjkK3EyxcRtV5t/hzSes4048z+axygtv0LHBe06xLj1Ob1gBU\r\n835ZDQRPAzGuxyGm0rnARvglTLMBxpVMALMja+BT1sT4o9VWej9gQAI/fQHA\r\n5AuddyTcYoNXJuUkOvirTlVbuJ0EdleB838F3iZdX9cPFjyYjXollUuHACuG\r\nsBPOpph4CfMoEV3ZTsabgKvtZ++iVH2JpxWolikmwNmWf9RoYSaAwFtZi94z\r\nsf3oJ7nllw3oWJjKZGgxd2Cw62OoTiV/H90Xx17WEx7KzDzZpC1Ut8uSob3I\r\ngH2EdQkMwyrPaFXVfnDg5V9FTNbwMLk2VCqGbLZNwGCOI6IlywVEfF2YXVnS\r\nFd5HT3YfzDfSst9ey87UNacyCt2HhkMhSv+6dJqa5lPC8JiigL8oaKF1bZQj\r\nrst3FooYxk+fDTMqShLIdwsAlIPhTkvhIRP08PCsralwsv7EP8ZW+G/91wTw\r\nEOmTIrdoPt4UXf0JeYH66pq0Lle3qPpEGxf/dwV2weJV0Tvv04oya239WMJu\r\nNKgERub3jxvbZQ16LndZL57w4IZwn0uLCqBxX/+uyt15+j8xrfY+F8pb7xxX\r\n/X27GghMSuwXWGAvoOLY+FKy55XYH0/7flh9Z7UUECeIiJuNTPWmk0oEAn4m\r\nFMSvIL54brrqiDRBfYxGDsPm3xCJHELl4Rk=\r\n=waZU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/button":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/icon-button":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.49041a6c3.0_1672845571993_0.3511503127263469","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/snackbar","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c492898c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5076a196036c486ca6a5ee3d65517fd066f6819","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c492898c2.0.tgz","fileCount":42,"integrity":"sha512-heip4txh+aZt4/AAnplDBdk0S6A2L822qrg1dyiOwCZ4bvrKTU+ZyKwd2chGG4oFLOuP+gtJbo2mD+yb6Cwfqw==","signatures":[{"sig":"MEUCIQDxNwgqHz5CdDxkB3bxcEeyu21Q4mEkfZ7vXHHliTEa/AIgU1ZYCyeAM/YN/jE2TR2WLGZKgLanEAdUR5tRulwB0l8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbm3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpmig/6AhOOeG5yTzdw2vxP7aGuRZB+Cm6doO01San2U/N3X0A/1U2L\r\nBtdncF7iEmYLa2+8AiRV4tUoh+oGXfZXBF0OWc75nHvPbxGMsAcPcZgdkCU6\r\nJg+OnchVFbY5bUbhV2SAwXdmZWMghJx97Mp32UfJEo+vL19fqXmesEsvdDOz\r\nVlUQNF0A7AlVPS3BOkzGYx8NS923FIxaslbHVrAJX6zX9YKOhPqJYXVw17J3\r\nU1k1mFqLs/X/27rHttY9ube5JdGRYLvmKNNBTuNBcLf278iJnNTTCQrkKAdF\r\npPoQ5NkQSxLcz04PIrquB5JqtY3RIMiOM72RdmWiqHjqnyiKPCHYXqOE90RS\r\nGzHCMnqWntLYHqY+F8TYPxT1g3a2SeDm9Wlf2naSh/XtmhsT5hf5+Gq7Jec3\r\nwIxCSwJY+IbVVYFZa8YCleK7x7iNFLPVCjP91BRU0MSoHCxFDBWYHucvZw+B\r\n5XHXDnCqA8JpHwhOjq61RN0bohLVGp0yYnBw+Bh9861RLSrW381ovbZ7oj8W\r\nXkgcnDj2nxZGPxpCvETKDhRjSKiDOVeeCMYgeKQIdlmW6tslYO190reBxBgY\r\n4HLzXl7i4bZyxpSgl6HXeAcRK7Zccd8jJvxS5ThapSZyEL6Zn2t82NMX0dXf\r\nIk9tyk5hmPZl42IGVEHOe9jzI0g2fvsYVFk=\r\n=wiI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/button":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/tokens":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/typography":"15.0.0-canary.c492898c2.0","@material/icon-button":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c492898c2.0_1672853943555_0.12334694484731479","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/snackbar","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea238915e0841e67222f347350adda4ff4bfffee","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d7a2277de.0.tgz","fileCount":42,"integrity":"sha512-BkH7I+5FJELZ48UDzkbsDu9e3kL1WzJAKjRQpkfJuqDPXNWHnT+gx4nJn7ttPxLjlmQqTRebJC8kHIPs74+D6Q==","signatures":[{"sig":"MEQCIDKHFYWtNy3d1kVODz/ZBYGlTgBCxpWJ7fle4QMX+jwaAiArsZngk2Zc4lku+23641uEvAWSVFedVE+m4egzsxooCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfGZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtiw//apT3dQIIXmS03tnyPUSMgv74tVkMq2lulZX+wjQl49uacUxM\r\ncVr7ep1Wcz8wwSVWADhhT8O3JASJTjYjFxBQtd9NUUc2zVZLP1I9V6PESLfB\r\nV/icC0ZdZoGpV0R0OC6G4IH8xalHElI1iOoDXke8wZ6jubbFy66A/enCJVBa\r\nV252UiUDbc9dJYPVqw+YFC3+AZKnnhzn7hAdlaFvmbCCrNsecaoNWIME46jJ\r\nRD5OSpyCPPglvdviIPLxWAvvC9Ph223rCo2ruMjVl/lUo7/XfqWOMuT5K4+m\r\nY0xnYN65JQg4BJ7285U0IsRkdQUqkIao2qsYmPniHHV7NGhDBdqCTuOgdWJS\r\nk/yWw37PfPZ94tMPLShyo8cHqqqIxdjh3fqPM1SrkdykYaDGRnWQzXJQr8fg\r\nZ/FMDqSaIsF9OsYKqLYfThbazlHhocMgSHJBYj2hykiRL/CFVdRb51i/jlwz\r\nbB5igeQu8g8bXQYKbHhBWI5kuTswECgtxo13LKkvJencqp/GNZ1WJ0P9Z0DM\r\nialDHs/SgUhgsx2DK2qQr6rxq/6MUYUL5pkr8CFhTDukRb8AkpL+bx4FxZbB\r\nOwMqAgiR82Mvx+go7KsH2aiDtHxOSh8+HAdk16wSkPMv+9gVJy2GFHmNYdXO\r\nyTRADkZfGCtBQYWT8XJGe1Z5U0ZB5HMZSXk=\r\n=28we\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/button":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/icon-button":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d7a2277de.0_1672868248959_0.8618557106580544","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/snackbar","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e888b8cb29c3a6c13ccbfa686eebdfc0331ef075","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":42,"integrity":"sha512-bIf0Je1aMYSlkqfceVViJGWWX/BAqzAhiBVvurvKdRoBTezMrAqEimjQOXu4O2fHiLHmKEsO7c0B3dpobM2fmA==","signatures":[{"sig":"MEUCIQCXMY+izQHEw1QBMDI9g/AtXCSr21KokPVVmmkyIxl5HAIgdkshp4uZn045xATKKYKFllEpUbzBxHflBwBmBsZUfTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiIfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoS/w//bT+Q2ovHi0Z0+gs/RGRGrHloihzrvEPUgx8YVNDYAyaMOepw\r\naWmG+McHrHkBwruwRpGQ9+zqwVBvOkv5IMmoRP4RyD6CIz3vj6jqqKk8krcm\r\nCaHjPaSQQ0f29e4ee3gk7UAMwjoXdUDezlBOSALse95pjFDB9BzrblBGYgaD\r\nkkKUgkM7MvHgwDCBD+DTU1iGI8Qpv7854xdykHfZMvAJAzAaH6Z09cnLgnR4\r\nuxkzacFUAzbvaLHY5yuAXu1/g8lInCa8E2+3dXWz7A+d6+ZnoBGpYFHWUtP+\r\nemEx7g03BAe8nGPxvQjdMkf8q/x0MkwqMCBU4OqH88LY4yOrgqilsGQFf4Vt\r\nEZMN5eu7i8B7Y0qbcT3cHMpG7qGBq+e5IqYXeRLBM/r06Jaw78sSrmA899bm\r\nMkJgzA8GnuN2jv0pI4ldu2yv0k6ipkmouKVMBRofH87MwD/VICqeBS7DilRj\r\nZXgzEI2hu03PoEfcQ3MJLsHPAmHpLSPGZb+aJNx2Qd5vICQGHLR0PnRaZ+Y/\r\n311gXog7UZtuG9rV97Psa4wLQad3lRpDzCHOJKb0lzlm0sqnrCFlSRlrWGsm\r\nq7ODzWIKZ6r41j/Exz/+0jdgviR2XgNgkeJiWD4ysbE3Vg56ca74SnU5Y0P4\r\nHXMt/gJhxoi0hKUkzInkndfoZU5epw1/gfY=\r\n=O+kH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/button":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/icon-button":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.fd95ca7ef.0_1672880671665_0.005430469449276165","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/snackbar","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99ba2972b5ede3deaa499f3d654440d77dbd7231","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1eb44faf9.0.tgz","fileCount":42,"integrity":"sha512-eVWcI/AY6VAifbdsVXSdr+rjYU3X8eKR72oT9owH6b1hh7NgQh4ufdUouHl82Nz5PCLluMEoqVjbVxCCfXeLRA==","signatures":[{"sig":"MEQCIFE8RjccZrvlAdARVgBdZtOUQSAtcKMqP0wnmRyTfnfgAiATEXCXWldJSpfyQ+4pXg2cB8uZx45PQ0246EYr+zHdoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpQuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpaig/9FZ8QJWIPQmr8DvGD5wj9HzwQXa4l6Aj33b7ln0D5LnKnuMto\r\n9dWPOSKD/mOhT2KXnit0zeICP43mSM1tmAfmRTthSReY3bEkiLXZpQBR0tr7\r\nQPjxCgYF9Ezz4yE3X3lZh/SGe699kbRv0AC6oJdgFDtKl6ohSZVoHFUWxQMA\r\niY32Xw1ELOCu27z+4IlJi2U5cDYj0A+gbWaehcpc6MwT4nJkUR6fS/s121lJ\r\nWXqCCobL13I2o0mRJaBa3xDasZHNNTehyrEBARFPDRcjNutRUioBLC7/N1az\r\npbFqJYksQXUxMR3ssu6p0FrG8D9zM36SmL4IfEHvEeMkwY7JhQfVSHbNv2hQ\r\nFIYwDJQAoTRFE6DL+muH4F4qH7bIzn8LqlxrbB7j4uE8mpuHxF2+M4cESh+f\r\nAgmsKak6ONOc49r87ukFO+Mg/7DzfZJ+/k9wbnncRD4QcInUxRHfyUJVF6Oj\r\nkFG6ELE1YGJtf6fLC+Rm8fLTp03hG75Tddk+hn0yOsjYXw5HqYCZBbY0sQnR\r\nmIowxLdSDyMhX6M+jiHAUf0dpFMyraiznYcbC1DP69C0gMJWcfctGcOVWJW+\r\nI/w1ecfi8sj/3dgJ8mdXUg+RxqLkcFHtumW4s02Exbh4/JAz2qj4pqqfoOPE\r\nhkNFw8utxrTvJy9QNYXm6nIhx1b2wsw+cq8=\r\n=D+Fl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/button":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/icon-button":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1eb44faf9.0_1672909869967_0.28412659661350714","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/snackbar","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e57e53e021a363eee48787a652dbae828f0b3c5b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.adcdb7db9.0.tgz","fileCount":42,"integrity":"sha512-NKcvqW9a7TYeWG1M83VGWCWts6UC+C9Ubeo5GdERR+dmxX2tFq1QSvVTWpHK7+6aibpVkWspJaLoZgrEXBzMQA==","signatures":[{"sig":"MEYCIQDQuqUbu41M4lq9vM1XdzBR4DbjBN3SSr2bIy9YdURslQIhAMX/x6rceeOrBuuqX6Z37JbxSCvzUW2oDqHqnoiaqU+b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvmDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsvRAAns5WVQ8CKtWJ4CX6HG2DttLGrZ9VLAeP0d/maJBCG0U8Q6ru\r\n+TQiMU0Azqf1NwLrrjU1cAuwDKi50+tK1izgR71LLDpXRZI+2YdNlWtBSE0M\r\nVceLCXZ9LolywBSL1MPASXvRs3MsF40w+nvV2P7+Nd7wxrliHlFUPzSAD6ij\r\nz9sNFZqXutNmAAQRkmTuvR62zl6E93Kbg/CI0gb4kpf7dNuZu/vbC4zYmOok\r\nW4MPhIKKiias7mlkilIggdTz+4RrVFMdewuR8I50ySdfvws4uM1Dg78is49Y\r\nsYOtc5Bi7hvewVcef43X3ige0S66Mn4iM3FUXRjzKtp/qoFH2fTiq7RFSteg\r\nk3jjKbi3M5nuW65PfUH8g+IFO1YAD0xTJh+TsNFlfJ5vLf/LI6kFSOkf5KZi\r\nBuSZ1GVTp+qDw5ma5RClDRXzZ6l53CVcB6ZKcQorqg3q39CbakN373LvC31z\r\nWgSlMOc6G2l7STKTy0gmXlm3W5ehCBKeQREFZx/EuXJTQ60OpelFfcWPRDDG\r\nAT0rPGzv3XV0xRf8VDB3b+Q/YszVnUy3zCgdLSi0Ycp/rdf+A0gT/geTpzkl\r\n4HQ/fnNxtxLBSvhBn8rbzxb/UIgY+GW6xmw4VsLHrThjSMDnYDtrdHHsX36B\r\nk8Q+c2OsaQ3Khz5wWFd9uaDzS0+Z3zwTOTc=\r\n=rbhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/button":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/icon-button":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.adcdb7db9.0_1672935811684_0.5143737273787015","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/snackbar","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.067af7eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd18316d20d2d22eae0a8f7fc11d510b3d5b14ba","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.067af7eff.0.tgz","fileCount":42,"integrity":"sha512-Y3Wu+fQthL1LDWqq0lMiNzpzGPVo+l76wUKHIONSAAec2mFmvSgBWbIph9mK+eoYn4/NGw2JzNwZCtCNZ7aQaw==","signatures":[{"sig":"MEQCIBa1eCQqyjNPsuggL0Rhe8niftTBlep+OUu/sSkdb0S/AiASt9rjnhLhOCCNPI6SYPt1rMo3cJLPJm5Fo2uGFFYpvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":830624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKwWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkCBAAoMjc9cnNAq65R8ocV7C0n1xRJCw5Tghkqk4DG2jNWp/r7lA+\r\nrGEUXoJW398aK+Q9PKtN56RvRuPaWoW2/OBiS9KggL4/fOx0gAI2jXKyDSzP\r\nWcyMIdKw6ub/e513pB22siVnjroJuI0XbOC+MET9QO/p9/CWVvpdTux4lZJT\r\nVKADjLi/prnHu4+XQYZ3bXy2/NcAsnE8QXV+QtnYGSrPZFCBsRAM7bvEEr02\r\nrw+jfqLqIHl2ZDpYPGytmPByQ/BLxJo3rvORSplSOxPwhqvkZQnpHxhumOGc\r\nhlN7HCZr1swFA4sibTXdJJjgetlbTVW75PmelDW2VmD+29sLhE8EfW+lPDwj\r\nfzGg/cIHt8grlJtM8xRVs76a+L6GqObssW6Kw46Sp5emQO5rR75ibfA65CEi\r\nVAIhOIqzq/jO15OUlZWSeo+qgqaXitwbnnVtraqsWIfGQPvZvhLFcHpPcG72\r\nOzp3zMfbuusT5Rg025Zi3U5SSST90FNM1v4JIA3171Jv/PMKuhos80TFW3Be\r\nGJh0xLIQ/Vmpq59b3KQvoTj061CwwsLYvGrshRMIh8wjVqZnoGn2ot2/FcW3\r\n0vdBE1bzPIulMZRH7dA43hx3651+4otStAJPwxBp3f7IPWsS7Ygcw0euHlin\r\nsnVr5Os8s+IQJ2BrRurd9h0wAg4IPkIwGHw=\r\n=jNB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/button":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/icon-button":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.067af7eff.0_1673047062736_0.9422564343915292","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/snackbar","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64f05529b12769dabe05f4c1b5a92ffd390809c0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.21d1196a7.0.tgz","fileCount":42,"integrity":"sha512-e8CNLX2JtWLIV4IRxbRtCa2oZf0ohalVb4PUs+aBByLfum83dkZ3YzH5yrMu7VJB/ev4/UVO2Qz2dWW0J34Q3A==","signatures":[{"sig":"MEYCIQCoBm9hcGFvquJd2LZxdl6E4EoYQ3/ro5lfV3mkHE3YkwIhAI5XVofBI7E3ZUfv8h8BuyNAVJCc05pDnEFBcQVunOEv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/AlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdkQ/9EnKbqvRh/IAVNYy6l8yeWp1CPsKsV2zbcLkQIXbhlMwNmwnG\r\n7XGRIiG6iwiX5iGfJp98wMN1DBJU4BJ/FQWGrQP1HCTUvuuxu61H7BS/ydxQ\r\nZAiH9ybCWqH+xVQXlvOhfiHflv/KO7qFDwNUkk3m9fzZYTKU8TGESOOfBqwu\r\nKLJKrCwC5kQbNRYCJH/l7SbpP5febq9eleCVrp/4JmIyTtMAUk3Ju80+GkGQ\r\nZUx4d9WJkxyXpDVsy06ltFaGmmtEvS+UOVXOiHNPWl42RKFuo2q1x+P8yqx9\r\nix1L6pwdW/Pe1vxSBDos1Hj6qOw2oIjhGk3/3zyZyXcUq/w3BhgoVlzz7YXU\r\nzt2V2dflpx/yLNU3xTKSZXtp4Vl4yTvl3fGclpwsx2ziiQMPEgo481QqqYkp\r\nmTXjDJL1RUgnoMa7NiSV4Tyf+AHwoySd/ARFcXOzadWgukFWI9oYRYZ6D/9u\r\nD1MZQ9kjWchXKnn2ouXgP87u54csPr1CgcMsOO6g9jx0Jzl66U/AoDZ7v36E\r\ny3InpVBh1ZHKidNnqYrVEqQ+RaUHwe96XpDei315sfbJ/X2pIXLAXm3URUHd\r\nDDrhIYsqDLGoBlfU4MwAvjBVasA+3D5oici9gCUg9bkCkFM0lX0LDYdmu0dh\r\n6QtG7J689MQidEX+OTVB0uYOecm9qyLs58E=\r\n=AwhV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/button":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/icon-button":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.21d1196a7.0_1673261093555_0.6827615131167377","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/snackbar","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52dce77ca42a3589de704c94b2a79de7da19e46a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":42,"integrity":"sha512-/DN4RfqH0Rn1UWI+qdj4LL3MEehMG74mFo1bQYFXg7UsnWUOmvdmAXIO7kVilTnzvE75N/ohl5HdnSU2XOhZQQ==","signatures":[{"sig":"MEUCIQDeOKkwUssF7jKIIADXXXxGIRCjrrKGuz345ve3V6oEsAIgG9nP1PXcVX3k22hGHycMweqW+Y5fX7i73dpdAaWIBis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJRnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJFA//bTAHVTEwcL8LN6O1G9WYVlhA/w9wRwGpk9zB2kB5Q5Wv/AiG\r\nDBbhSp/yKdXQRnt68LGakSWE789yiZN7GzCTIuSd5lxzvsEDNtfrXi2UrVsl\r\n+NUxvf8N1yJkGtanBDkB4rbXYKcCl/B13/ewij2h4exNtQEa5E/02s+wKM23\r\nKpC7fnqB2hAArWk2j20vwWweVKB5/2YInf8xgLFE9E3c3g6vHhQvc/Pur3Od\r\nVtWkmsWv9gKb+Dg4gehyD33TdNkr19HPn2JjT/2TGbL6c1Awo1Wpp0S8aev2\r\nIEpqbMQxU8n6k+QUUwvIWx5gmiSp4DvJUyDV7vOEbfjN4jyIN6q5/Rn8JZ4y\r\nYA/xlPS4qv5xAnxku+qZCrPiCdGhmRBgkLa6UjNuc+TgnBNdLrOCex/T3K9i\r\nIXtR9g58XlyzMM0BEzmj4s38Xl7xsYHcJsx440c2fv/6whBNVA41hyjoD20X\r\nhqxv6kGo+rQa5p2fwuwVLSXnX18/Axqr95aCTCJ4TPncf+lsQIxiN6lptqu4\r\n8rrb3xc7/D9SELqFIr1M4ubdc+ZLPD4lnmKOOHVQaR1hhUX/R5c+QG1VRPVr\r\nYEBWU774W0upwM1InNKhteom95Bn/a4ISDS/ibNMoXswfY6j/4TUAFOTIlZj\r\nObmvz3Yz37ATl3WiKIWgfaCvMnv5ZiM0VQQ=\r\n=ja8S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/button":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/icon-button":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8d2d8d3c4.0_1673303142876_0.03758722410279014","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/snackbar","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"558c41692a61ef26dd0da9647696d6afa5510f86","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":42,"integrity":"sha512-niZCdjpX9hROQlxC1E4WWbWEuqqqb4GO0sVazG/vLHWRXxdHsfMh9dkR13rH8ZWn2ayzls/Npn3qsFsbRBXpRQ==","signatures":[{"sig":"MEUCIQC9gURk9ClHXrhSaHiH2A4XskZ60BNVnmqmrCB1/pfZTAIgLE7dlxvtUR8bhkXtjA9xASKsolGX0ODjJBcUT8Yn2NY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZKCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA+A//eqB1+FvYudDXu41COX5LjIg2qqUeLqYxdXixHzJUsLUGrFWm\r\n0NsyI1Ew37IQWFpU0n9FUYazMv3bBQyLTOlq67ZZLujDWu2a4B5Lvomi01Ph\r\nbF85GJXzsOg+75uJi5+XnSCxUFJfy1gZLtW6vAy1Wlb+wSd7eK7pxue68mgC\r\nK5n+t5XxqgF3ZjrixlRs7Rh8lKBUbGzWBSPjzUKMiOHwBskjF9BKRPwtQBoZ\r\nD+ePHFsbV+U9/gZSJlzTwvAONpkg8zWdHFEdj/dbOfAWoMZZLQG8vxJrY/D6\r\nhwPjsGvBZvoXlXNWJQtOme3odHsV9OunOoDUxeoTnrs2qE9TjnUEesP0F1EK\r\nrLiH5YlRtMWgGe5I3peStv7BkbSuM/KgX/V9YpeBaVuwyVOGmaz7JDtG2lnz\r\nAGFEf2zKah6OXCkPNsR/Zdq0Hi3YzMx+06bTo+lKAwFAo53ufT+0we/7rp1O\r\ntCUCju+kLv7DzqeMzaOmtRmMWgDHzyW+aCKMkDWXb5nnVH1bAsstY+ZyC6sQ\r\n9Siwj13GMuXtNsmiOlUoC/BjufzTquIpvWUoTl67ljjpomjh+NIMb3jxoyFI\r\n4RBjtznpe56RLn0kPGrSKwNwMAAz1BL9AXrVHMxGUBhiH27yqU2mdawJeG6c\r\n16EyZu9aH6XE1OdYm7r/SUuPOzNFNVBM1O4=\r\n=tMg/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/button":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/icon-button":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.fc6ee6c32.0_1673368194182_0.680212546955481","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/snackbar","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28ad233eece88b294917e966c9da870dbd123f42","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.73537ab0f.0.tgz","fileCount":42,"integrity":"sha512-g/BYkazws5PYj0x/rOtuDNqzQ1oIoeZf2SRSy/4GREIv0gq0EAs4sy7gDHTc9BwZ9byLDD+7hyPI48THHX38Ag==","signatures":[{"sig":"MEQCIBT7clNpDIFjbrgMtjO8IdbTER/mxMwemaa0D7jCi7XpAiBU3WJJiYwKMyV3gnaUU99ydDbxTfsKWmxsOj8eybMp7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvarCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaRQ//cSWY0HRxPSed2ypNHUdxEG0EpuAn2QvN+uRr2isiq6+kNF/t\r\n9ieohu4LGmwUMv4o3jqt5yRzicp3Fq6L2cnjd1D5aDatqqDLbhzmlDLbQa7u\r\nDWbl7X7JhfHn89WZfRTZ9ewMe0jCeWlqst/6U23IVuhyfV86bgSNJnw6IryN\r\nopLfdst+9ROx7S4rDOTMIymlglEkkqw012T0ihsvz53XvHkmCcUOUE29xOjA\r\nU85Jx7C1KvItELTin9HxZbhCV8oCtnwtD2gpYgFLXAQZr/6w6utd6EXrXE6U\r\nUibhaYF/AF4qhOuVReRnux7HnVJ+wgfCn4X0sAVACWyFQLcN7+dRDrrgF9qj\r\nIQU9leX5oYOD5Vn1UiAllUOeJOpbsS9JNZ3OFKrxPZthPl9qDe5o8M7GZX3I\r\nwGqTgjjY/34DulcFKjo+AdJr+bfnojEhBZhGQMF0vcEdVQjiWVp/le/vPIQv\r\nDq5MzpWBtbD5shaOZqiXENP0HQrME7sZjsPpcr+BNvQf9DtL9odtVZW+DTf2\r\nrQeB6dUyiPcNOL10jITm0R8UEkTWmwCTPnOTLIT1Nxn2pGwmPWzqrdPkbCJf\r\ne8J6njlvKrHjMjfy+P0RbbLZg5deZrkM5AOdP60TOqiI5sHRpL3iTWhrY9bm\r\nPMCRhvqhyYE8kAr9lwcWKgSsV8qFOxfekZk=\r\n=oKoE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/button":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/icon-button":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.73537ab0f.0_1673374402479_0.7251077979412555","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/snackbar","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.684e33d25.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43734efbe42905c91c773cc95bfb9087c7e162c7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.684e33d25.0.tgz","fileCount":42,"integrity":"sha512-itO+DCkOannZzR1/cCHcqAm7ifhuFvXmDItNoA8qLEcAyJDJJRkhpwj3XQ01yuo9gBFcSctp7Txt7e+Hncm/Jg==","signatures":[{"sig":"MEUCIDu94/aiUfwRAPDjnPxYhwQ4+cKmSAzuq66Pt+fnWHxAAiEAzgvTYdjauZA6Wf4Es4WXZ+/0KuCVwPVFq+h/uWo8PSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbpwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhSQ/+MR5WLBQMz1ZJoR3UowPnVFSsJomMPb0Lx137u1VkJPRjJT5k\r\ndJYe2Az9Ue4Z7ZmjPVp9d53CP8V0o2o9n3sp80afnYh43RfucciBLFesbbUH\r\nE29XNXRnGadDzUsLS3sQiXbEEwnACgCUjnjONXIMWQzuqmQDRSXcbyraC2Zg\r\nAuWh4FIoarO25dRerha5OtSZlGIewob0bK7scV8/PO3ICVMXde3S6cXLraUt\r\n/Qy7pX4BM+HG2Ew0M3Xiw+U87cLYKIZrBQsgI2/5+tCPyevR2+t5IyHlYaKf\r\nRUBf5DA7Dn24QWH1l8NyUifmVGchN+gncPqClmmPCmvygVcY26nq3Yzd2no7\r\nZAkkD1qsobpeEfZNGB87oGkYibo77iiv2vl4n+0e1vIS4j2bhszjdQMI5UO4\r\n2fEn2I8HbWSZJhqoPoXO/1/ASOqlz7Gooz7FDf66NJnr9o2JeBadsLjLsYHJ\r\nGjPOm6Qq+ZGU4PCjuDsCxO6IB+Nru8Kc8ko22E4MWdhHszli9LUgc4r1ZWvr\r\nICJLk9k7tEFMPXvhR6LUKKqLB+MtB6FphOf5v2Ke1I2eAFPcsSGDA6vv5wWF\r\nCerZ/s+l2uaU6EMUKfGGIBBd/EtlytcLo4cBo4dncPnrDTtQnWP2XHqOaqt/\r\n+tbWhXl3xVt4E0opscDSeaO3mvo60H1o888=\r\n=YYu+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/button":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/icon-button":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.684e33d25.0_1673378416710_0.607645198298931","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/snackbar","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"015ad028a2f24f4662fbe41cbb806c00504bfd44","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0e89aab6b.0.tgz","fileCount":42,"integrity":"sha512-WtGu53K8Gi3AOlLnIVR/T+0JA9VxR7B+QcwSgoAVgJedUTNqM+UQVvftfmALU5rVSQimpWe+Des6d1b4ZCxcDA==","signatures":[{"sig":"MEUCIBUVrtsfTRHtcbHaSgM3nitt4G4goZPXlEeuI1b+Q7yvAiEA6lUPfCgtXoZZ6FXa8zCff1ExeTC7/8h+B/P/azvK0Bw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuGgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW5BAAn0CTYDDfYvYW0bl25xJgOy86VX9zNbaZB3GVXB+7ssTNa+11\r\n1+U4U68wdyT/yPG+LulUrNocxndHlctkS+OHswSXTvNgtMq2Jii7T3DDfHtk\r\nPVS1e3BV0zaIONk6qcZI3GsZVj5rk/pQkkSPHL/WsI0y5OYgDbNTnNxROiGt\r\nklBG8piS4SoEnG9j/B+Hc5Ju9E1PL1VDtOBtDAAHSBYyDVhVvMxG5/8TpDXU\r\nOZXO+ykSpVVa5OwBZIa/33gEfOLvvZqHDAKE50bHUZntxK2QmRmfx00C7Rgk\r\nHFSYfSleiqpyRhqzMjQxiFwmEqDVGFIMrtLgYUK8ZSYVtucr0BtiT5MzXv0n\r\nv4LfcperxIg2mNvOqdTgTwVjTwk35fHE1rcTPqXvE8ijD2F0wy930OmQbuOH\r\np7v5p3OaM/aQNmFQmAMTRIM+n/f7ESm58uiV1iwMVYbE3M86jf3yfK7DwqXN\r\njUO5Bi4R0va2TVf2/5AnlzPhHQtsnf2mtcPKgDDAUb+WTzChUN07ia8kq/Yy\r\nyUBqb3DiVudNjXVYx60golZu4b1tdZ113WethG3oBKqxIuv1X1ss2NSEMG16\r\ndFvsDeau7xvuvaE8nAYbfcgeEi+iX+nSL4YAy07R3iKKVQvZdB5huxTsCL6r\r\nyRWiTeHDDoAi8waCJ5rQc9Rc/jKveSipFbU=\r\n=je2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/button":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/icon-button":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0e89aab6b.0_1673453984344_0.126458253948883","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/snackbar","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5067c7acbcfdab1cd394ac42737a84eb997fd83e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b0103d10a.0.tgz","fileCount":42,"integrity":"sha512-djmeyH0sJGhqYN6IMfBmsyax/sdbIUMTi4cO35y1LOLB8fV8udHMyM8eQoG+XDWE9iwPNeTPlQbbMsJ96cuCvw==","signatures":[{"sig":"MEUCIQDOt4SoQMrvJHBr4sp/EHtPetP27SrMiaxfKIhArc5jHAIgafzFWSZ+yRSgXAOkyOlsZGNJTcXCh5wLd9ZWjhNoHao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwqKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0LBAAjh80vAJaJuRGrfaGuynFuiog8XjMDILLN2Oszy5Pmk+fzphC\r\n/U2D+KGV3PWwhVmnSP1ipFO4gqkbRNbRQZh1kSuBbYlTYHGIPszstSG+dVYo\r\nfEg8Ya2nHsNuPpXuXotvkxMkmxuOf4kpyiy0MhZGK7nZT8j9VsgXnCofANGm\r\nW73Ug68bVzr8m0tad3PmUiBGGeTOpL62Nr7+tmB+uTvowYbYY5e1Tq+PN0qS\r\nfAEyoHsY4VwUW0t5Uda90kUJg5H7l+McjLZ34xDPjcR/Ms91iOC+VZANoirn\r\neQTqiWzPWKrDiJSZT8M/l3q9VFkqKlrgo4fReQwcph3VrY6W+Rqixish/Dr+\r\nOyu4cp8UWN6m+Rlboxvp/S4taNQnETO5hlzV8GIIWYKoLghq9hnfKyto86mw\r\nkZVHsbWTq7fsKCZ9oBL8tr1wMmjIaNG/jwG63mQ4LFPIReajB8bcHwy7Aw5e\r\nmu+7GQCCZRv4lFBfUkXa6AIE8BVZZeBHzJgeR0dyNt48J+FYsTBbNRjC5UPi\r\ncjUB/Z+i4ZRItlKKFcy+uCweHOidJF7F1Em8ttBM5m7GgweNFoKapxkGF7To\r\nEZCQ0LUeBLC1/sVigx+KJdqMgesyiPqYjGhmypdzXA3CHSWpyzLHuir6c2xJ\r\nEIdvWBD0J3Atl8hFN2hnKzVEUzJ+rFULVwM=\r\n=DAPo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/button":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/icon-button":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b0103d10a.0_1673464458410_0.6039096691525769","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/snackbar","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dff7c9ecd15b62163fa448583dbb533b4bab5884","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.50e7a5312.0.tgz","fileCount":42,"integrity":"sha512-9mxMVjcf4box0qNysKxBeQJvxDEZp7rluAJba2bHpjdqYwDeHw07jVm6xIwBesrvg1EdE42j3BhK5pFh48Pk7g==","signatures":[{"sig":"MEQCIDAbCo3JxIkvszGLrAno5g1y/PcHqwLoHA+0Wf0s+/tUAiBWQzpcIo1WhdPuLzxvPZMbXsldpHyOuMVKGhhpMMi0kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyJdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotCBAAnSDDedt8B7jPRrM+49Rwz6yV+esyvdah/pz+UUNf/3uKeLk3\r\noS7kVi4MDahePbfL+YE4Jf+hcERN2D/8iMmiWWTS6jnwf6F0O0u3T2ru17qG\r\niTWutLJBuCPuRGkee6qtLbSVSKlYaB9CIwcXZdi8Cc2Mnob8docEy10cmxrL\r\n0jg3aLDvs4M6QAy2qILvITgs6rqs/fevoHwrHwoDL+vOJyN13nR4dYEz7kDw\r\neHRLzzLacl43723i++n0Ic7wbUPSejqj5ufGUQzKgZ8aHgMXH/3Z6c5fNOSD\r\nPAPSnRwOtvu1WtTjQiNFV/bgedvh6g4HZ/i8E8y14BxEcQ43jcr8SXP6FInG\r\naq+t5wFyiX40Z/2M2uT2ROrkigMdxkMezxHeMNk/HWxA5FrjyoUQxuCPS1Eu\r\nvSJXqbYhjhXkvXRCe0ap5Iy7ugTlgyxjObajGvoAb0+VZ7UlkDf8l/U43iB1\r\nN9UguYrmnwQp7LK18iqXgD7RQUJLsZ4dqWUTxHAdTZbK58WDmDgI5hduo/br\r\n+6e8X/cJoOlRiDVJULGbcLpZIJue7kg5lRyXp1+jPLb3VXKc41sKlztZGwIK\r\nyhqIoUU20hST8CjHy70NO9ovExXJNZ67p3kuSoW+UA+mYB5c+wU+z/nfhEAa\r\nRjUKGQXJFvIs1qypL92leQ7Fxgjw1o8XdmM=\r\n=afr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/button":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/icon-button":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.50e7a5312.0_1673470556937_0.13164383858252648","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/snackbar","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.202823f54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"105bd38f5674f7025745cc4f90fb90128889f980","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.202823f54.0.tgz","fileCount":42,"integrity":"sha512-YFiORvJOIvHSAh24e/SBfZWSiO2DoBJgH61IIm/0+CXZUC/0geoTLkhY4+djth4hefkRei2/Z5rrsx3sWrZIQw==","signatures":[{"sig":"MEUCIHX3cqODyxMXG4VFmUsFLzEZt9XjjyGX88IPraUwpGr1AiEAiK+6iWcFeMcJkcl5sRJEX8JZFIsjSPgfXNRFiMZ40e4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvywXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoomhAAnbCXSUbYwA28fVdm9lYs1fg6TCWmNp0LuK0WycOXRiMk0OhT\r\nhiHqFFsWvgH7vlfrJv1kOkqfZa4+EtAmcsSiFT3cC9RaIzw+MRWFBxcqDIlZ\r\nSXe5jdGnDYz1fzG07F+EmNf2cJSYmgbMHHzCH9BTZE6K9T2h1BpENa4Zu4BL\r\nFMCCojZrmGHo1xPNEZNYgObz2Xjq4iUMKKjdHKqY32CE2McMzQxcDYF6mrjo\r\nxLyyZ98rXD0DVtv58sD8Mghi6lCZPJoBmZJTLwSDkoqtg9f8GGmV9tu3YqaM\r\nPfJNjgAMNuucIUOjPY1vFTEsNhHEowYXyqRQb1Fxx2dIb7UwpeYYJxvJDCMi\r\nhwiKUGp0xNDknE5k09T8huAkV1ejLoKrlpddOCPJ1NZZpa20sTZ9rP+1ew31\r\nHziyPwE75V0PgpkpmSd166FXicXHP0d7swthrXTsj5XAvR/4f32yBW8q3v32\r\nYibMmYHd7UoJ4Umms/CBN9UO+gk1u0v9ftQZFYuMpeasyMDVQ431oFBCrPrW\r\nSaeoQ+7BfUxOlp6+kyU1sW9wK4A1MxmNesGypw12WU1AQrp7/WMcBPg7eu0D\r\n4V0x24fUxBTn4Z+VFMQZIh/8AwqAtw0OxCqsAHRDyBaD+6fbVAAlJxXkY1j6\r\nRDYjfJYmf4yp7xQcOwS395vAbqOIi3C0BQo=\r\n=eyAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/button":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/icon-button":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.202823f54.0_1673473047117_0.7029490145338624","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/snackbar","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cec0f7d52fc21867ed4a51a7e376de517e32b599","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.199fe2a2a.0.tgz","fileCount":42,"integrity":"sha512-J88swHgctQL/WAVFuvnilLUmFRfq/ybMn376gIaZw+CY5EH56shlRZh9Be421NlS/8xjKA+/V3hHXrIvCyedCg==","signatures":[{"sig":"MEUCIQC1UfxBXNnrdnUv7V8EZchh9546554ZQUuQebXG8ZCWMQIgWj8jM2XpALblxPpzAdq88ThThu6gPjHDS7dTu1hsmHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodUw/8DPfU3oBBbzDLPg4ni3/O/3qzUkgGH7D5vKtMD6lk3htoFyJW\r\nSEjIV284QrPOic5WssGXK/0EAB7rGsBJ8wpJ8xqUIoJeLc/uBbvyANVPuD0V\r\nINBaKLtPKTUtjsSKcwTOry0iohYYxh8FjzvQK2HKPPlMzoPUP1puRekkNh7X\r\nU0P+iY0/FdWZKhxB1eiD7E5oFnPhyAUv3ZYVOe2YRSAQavxt3ummpENNTjp4\r\nv2D0kLF/DIGreO5IaGvoWOfsYaTIcQv2uxe4ldaRWpqb35BzmUDx4b5ZfTi5\r\nBoZ5VwFj43Vf6/tXMtQj1QCuCA5YPVPOplNlk0/ix673p6JDW2U/bb9b7tmz\r\nJR3SmC8ptptrAQWpkPAe6r6/l3d0pdhZ+dTtkUOjhaAKM/oEADKJLvfmaqJ/\r\nchvpT+wIthwwdiZ9TrjVNvluiFPXjD3IuVHhbnKmU6pEBSXJiyncL112/nm2\r\nlvZjMUHosv1aVFcPHHHngabIzKGD0nNt8FvScKdbUHYb4bwkItSinOG8/ovK\r\nkK2vDfpfb+hcYtwvbNgEZnzVScfnXnA5xdMzaOj5eRd4AY4XC4WMiMWsMpEa\r\nsmsSVN0A8eohK5oMidQovIBmX6YxGH8YiX36lSluDbWJHzgskS/hL64cOucT\r\n19b4C1C5N/QBcZyUaFCch4F6cUSW/Xf4gh8=\r\n=MMUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/button":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/icon-button":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.199fe2a2a.0_1673474256546_0.9765836677283009","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/snackbar","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feb2017f46a6bd4e4339da7227bc73782a898e5a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8c0786d6f.0.tgz","fileCount":42,"integrity":"sha512-RgvNmNGwNjsF14aPBiaMRuAMyhUMZwv0FW2e8mBwIU5783KUK1oCGcaXNYuJS3Oz6yv93KWXteJf36RQr6ginQ==","signatures":[{"sig":"MEYCIQCISBl/m95Twnu2GJZZ16z+hB7yWVM+EsyKSevRnfQfQgIhAIX7StDNUbahdeo+32QcWp4WTdgeo712BqBxlbJJqPmi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBtQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolpw//QoABnSAxnCOW3bslBHPvVWjPvYIGV3QqTL1KdF0ZPYsx9WK6\r\nHit+gg3boY4y2UyL3c2lOgkXlhgRfYd2r/MKtGHM+H+1xiS67+fffLsZndf8\r\naUAWPOckQoz//BZgx/SELn1gK2AfBbSjZn8BafNf7IA1EH+XIhW++Bm5Cq9e\r\nmopIDH1AiYDVP+yBXwVyKA+2GYEZ360Gi4jhNvakHJF2dCFWn4Ao7RM29jDn\r\nlthWLov+WwtK7fu5Cc6sXHDwhm+qlYCS5IaZaVf5qGkxn9Vb4G0rZtzwpn+0\r\nDzR9yUyjWk/Z/kzIrk7TbKJjlqfZBoeTN4FCx0sAudV/zyhbOkZovHY24IbE\r\n3MhpH9zPRPjb8EUWwvzeXhpmOgRsk5hNm4P1guOhJJSn+FPasKk/T0hhpPWF\r\nLwXNgSeOJfbm5zEjatIqHaPlBS7Suv8n1kCwNf8XVCLoUVMEIQzJb/UofeVz\r\nA10wGnXxGdmqiaoKx+7TIy3aDYxz5wU8g8srMWkyUljN9fDfa8/oyA7JtUPi\r\n5kM7JxIKbicaRwcgd7kFVzpW9NiZe9dU7sa6wmN0FlCZdv+ps5n77h5kKrGT\r\nKkO4xVVYUFAZFb66cS/isOpiHJEFDbEGRtR+Hu/FK1NuQHEskb8jIUu70kdR\r\nGkdJHqUV6eZg7bwff0x5//nR2hhv/0iyoqA=\r\n=OKbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/button":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/icon-button":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8c0786d6f.0_1673534287810_0.4033735878500997","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/snackbar","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ebbfca086ceeb9d79ff621dabc4080081b96fa5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":42,"integrity":"sha512-rxZ35mAWNGpl2VieR0g50/qVRGMYYMLbFQZOy41V7NaVoDZhiUGagAi4X0VelKVvPQgYEjgib0um7U5dHVGzBg==","signatures":[{"sig":"MEYCIQDkrmGB07oBT3JVHRn81Dj2cZ6i+QpydDrFt8dgdgF4uAIhAPMTk3kBXMLCjaCa+2aJCe/vYb2Xl4SUu+h46hTnM+AW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvZfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr/A/+MYj41vEsQpBBigkspm5guMtUhA8vYBQUr86+X7LG1eX3TM0N\r\nOaaOjAojAXjnytVxWRDi/r024COslt8bkTO7piJyGOGIzBgNU50IyOq4jRYj\r\nyWhcfSZYWn94nCuBlB/sEWgx0K7HCNSbpjh+sgFYhi8mQ90PLXw0XoQutbDC\r\nHKFoGbHs9srdw7KHgRuiYqy1zic2wazbmmbFFrLbGOU2h9Og1R1EG4dgcOYK\r\nYj3avu2UU2DCFN0tgv9qN9D9rCx3EGS3zjI6ZJv/WB1fLzsK8tC+2drlaR62\r\n5b2yK2oI+elFkXRjoSisQtupBf7VQB4v0Mi+QCirpMAbvP/F2SADIOcNjzpx\r\n7IEUHuYa1ahZ+fr/dTLF/uPhxeYkTv7D2wvjb+2aMiVEZY808RxXFSRyEHJG\r\n3hLanktVI7DLdmQFuToZlHcdFOxZwdUqXJXT0wZw/3NkylThXqvpp/7JNfbg\r\n7yHnGvNbGRrHkL2ampV+/2Dds5qePoKQqXb0oOfqlKygcbAipgqg75+bIN7i\r\n4eG31mzgTHMvv53X79F+053gM3vbloSXVHw0fa87Vl3iOnKUvIoRL1DQS6eN\r\nndHE+wOMpT+kmVZ9s3fyvTD/rssgAaFjjR4aoaYeNn+Yvc3v1pELm2xqO8pO\r\n3Fq097KgXxyk2GjFBFnhzJTr5PkpMxMeZEg=\r\n=oGaL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/button":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/icon-button":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8a74f7c6d.0_1673983583453_0.5594841557294121","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/snackbar","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5cecf6308e9112e4963536dede1f207a7d57ff","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b4687fdc1.0.tgz","fileCount":42,"integrity":"sha512-KruRznbFrokOZc+d5cUVrmqAVRe6mxdvxSdDf1nsebjTeK9IlANATew1c8WNl0BiZ4FVpE+dpAobKhu9ihdECw==","signatures":[{"sig":"MEUCIQDCikXZ9QmWBTZW1rqoHb9AlopZD87RiQDK9aJMm2t/1wIgag9wUVNUFIgljBmEPXGAKyaq8/MDJqf0cQ+HXJVxJkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ8/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxjBAAhEAOMy+9xTLOWyKUYdWqzCkBGdo8BkDQaD+00mM37ufSAzal\r\nKY8Nb++BghuUiSLVtLkBQaqZio52qIAag5/aV7mce1XcmT3/hp81t25Vl8uv\r\nEMxsY4rE3MGluEU/EUveT1aCzLheU6scpcyjP20RtGvo3eR1fMdnBrsYfNqy\r\nAbnc9JDj0yIpQL31H7B1TglIxGDE7DSmH5r0riloT56G36K0wjx2VG9XQtxe\r\nnRUMpfn14E4JUbT1JCjvQB+3KPfBd3AW/jdENoEhb7wQNfOwkNS4szxy6PT5\r\nYYthcHOb/RG32WvmlkerKjAidu0CeVQZeQm+D3UL3f1tXHxH/T20xuqoCHeI\r\nfuJrjPUhrCvkriIfkxeciFRRmeVl8hkArncG+CKDwk/aPqeHxogx4Aidg9Tt\r\nW493bN+0axfa19jzuEMqOhoh7s4A2jJ0sUpNmV4OmJ1TwDLFmkvazhuF/1Jb\r\nl5f/g71QGjitD8Xy0OyZhPsO3UVzOFILKt+TLcCoe4MLvQtKgf6FeEsRyY23\r\nBLIqwlK2sSD3pjuInWogwXJHNU4r+VCvtpHaiXxsJWFXbPiXlnVqMOegNpl5\r\nWWZqO9VvSCMUecFheA2LCsuACdGndR12NL2Ug0HnmdmLrJMq5jnRtBp1h9Oa\r\nVu8t+zRfctRQHGn/SJtV6KLZLDaFL5S20KM=\r\n=b24q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/button":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/icon-button":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b4687fdc1.0_1674157887030_0.06768228515053654","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/snackbar","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b836b9892.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dda857ab43fbaf14b877b104f3c5ca3a8220218","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b836b9892.0.tgz","fileCount":42,"integrity":"sha512-81l/O7yInGo/YCaafx54hyqw420Pwl+eRqL26RBtHpPvXSWxSJW1OWG3E3Rgxb/JJfUDFB7e0i/As/TLq+BffA==","signatures":[{"sig":"MEYCIQD0HpdeTPHnL9Bwk2wWbhjqiq1gfOZAKwwkvs3A5IRL4wIhAM2kRmTbxmBdxutolUCtQ00kUT7Q2GIYFgG/owcDXGPW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F51ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcVRAAhwakmnYUC3WpxyjFmGGiTa13WYPdkoirUzTGwMlldsrZ+FRl\r\n1jHWnDuuJ9ARG9zErWuybWUZ5TpWTrgigIoeSBLvWoWUhnpyWpNlA2gWD4Sy\r\njREMnCv1FBNtxO4kp+r5YxGsmH8Oakr+HF3ZccV5Lib5Zpn5gdl8kp7ngDtB\r\nUaln2Oxm7ZiBzDXtU27QF2E6T/pL1funVUOQu8s8QbOqdki1Ja3EptZgloJU\r\nE3ArQSf62PaT2uCs+G01dcQrAB8S3XazCfVf+CuFOJdMGthrbXTzwg7PSwsb\r\nMmGKmue33ElCF96AjGZFvu0D9XOYbkQIMg2fobsG5dhec/eWiSHqx8TLZEAU\r\n7zu0kM/JRQ13NCrTYqW1Q6S3Z18IYVA4x0j0CTqBoqZQy/rKXEq6oI6tuULq\r\nZ7c/B4FKNwN8pW7QKHAfrtTQVTUgccjpDYqprz7nIYOpkER3agx/Y3qZE5yI\r\nKZZw/CaaPghSWIIZt39mTfnx4psjBWc8HUlH/DttfjSa45G3jdkd9HNsKcHy\r\nyjnoXMWDsmj2R6lTV7t3LVwSPnE7Ov+ubb3RuGGQ9vHYqE+AMpcFdpXem/yf\r\n1y0hAz8C7/BmQGS4kN/an0P4cnH+EokCCVdlZ7RMAStJBWOeOSyMMITaaUQc\r\nBvdey1qKaCjY6KukrOWlswaT6qNOB0Ggt3g=\r\n=XIKM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/button":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/icon-button":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b836b9892.0_1674600053631_0.01013404107986493","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/snackbar","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b36472659c4ca9593e621807683b8e65855c023","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e8912fd37.0.tgz","fileCount":42,"integrity":"sha512-AzgBHNQFCi0FrNhJjSAidbOvSQzz8F2qnbNq7y4TNWzMQqTVAB7EEOUIS7BLKQWNWJnOB671iuSq/L2SYluRFg==","signatures":[{"sig":"MEUCIQDaoXtFdhbojpk6+jLWG5/lEXyTYc5aGn997FfTEr6mngIgPGhTVu6m3v0U1rqO20AYb8l+SMjffHykth7Kx/qloqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0scCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl7Q/+IdwNpFz7r+WDdRq0mcufkCaMaZEws3BaCxYUJ1cRKC+S6vXc\r\nizIPQU+Ud0qTeH/jvjRu2YVkQnDtlf305K/yc5RSdMk2hXucyaMlGCK3KXpS\r\nNoIWY0Nvu+4yny8GiDb6vLNr3JSNIILkVEZ4U1T4G0cr71JD/TfYz+jcjEaj\r\nOF/EkpBm4TRVO4ArEh4zEi+yKgBt78VgP/dplCfdq12PUHql6HS/sLCvXlnh\r\nP7JA32BisTwqOVdhEBtoYMI/vg0JsHvMUg0z0jHfLMeIjjWNDFRPiGP4iN5n\r\nwe/nEeljvIAgTyjqpChkMmEFBfniNyJmgSrIaniHauA/e6IYp68A0n4gVMYb\r\nMmcehH4/csV78zdHCq8Di72HCI6lxkppGjQzNS3iZMG0TUQT4cLIngATfeb7\r\ncufO7NVSh5a4Lf80wSdceeG8kYmiWVT7t57wYbZgNRZ3CAzSUIVbe67dxJiR\r\nDEBV+OGFpE5XFyAxjJQ/0epdMRxwlwtGQWM4VNeJHfvrwpmlyaU/KfX8Pmi/\r\nvPqsUFrj09om5mK05IwYvrbpTNKLDDywJlHD3uonAnGUTkUFfAjAKE7y0+sB\r\ncafi1IruMTLHTRKkh80zwMUG92SkFozR3DVFtjlAT8AAcZUdAD/4v+4NOWHK\r\nLGamPBjcoXihVu1GKLt7gAkJVyRXjY03Kvc=\r\n=lUn/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/button":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/icon-button":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e8912fd37.0_1674757890352_0.2377387035643661","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/snackbar","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83351832e23ca88e237221962f805e2d2141ecaf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.16fbd30ff.0.tgz","fileCount":42,"integrity":"sha512-697m/eNn+VDtnmIUYbF1FHggQVhDyhKwtRqXt9zVb3MZtlwjxSF6OSCJi7ND7qemLnhllPzt7qawuriJ/nllFQ==","signatures":[{"sig":"MEYCIQCQbA5SC8mezrWbUXxIvFePhYeDw+cYV4UilRWvYB7/HgIhAJwIpfsu9Kve14bsCd0LRet2pYoH3PdsS2A6PlQmN4CU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sgvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj7g/+Jwkc1VHpMXbwbQho+sCxqEUjh6G+KZIt5MiXvbj2lrhTUdDI\r\n+3R1CONMWjj5dDwNGQhdJUUEtRMqysboBgPewUpHHyOfqUYeMD8RKc7dmq1a\r\nJ4rsg0CPARlNQCYOf9BSpWZB9YUQtY18U6QUYNg1Sbmjuw2KtZWe3hOvKGmN\r\nXClp1MrVyKVwZehIv0F8iro3sj+mQatQc+bfYAHr36LNGj/miGQ45WX3BNiS\r\nFJKFIr7EJf921Xf3cV3puOgUO96gzJnqzeZb0QjMAiW5D0Y67fppHcFXhFdo\r\naysZzxUtPFC8YA/XsCYzmyPKd3FFAH1aaq33q+9YgaRN+wpZpLFqdyBiMzZX\r\nZfqWZJ6FwwRWWzV40oxF0/b/0nclu9QAaNlOWdTmjUlpjbfIPapgLBLPFSuS\r\n3vmlJoRadsG1MHN8T+Gt+vIUNvX3CJjqIMR3cudmJSyPuY2fvxSKmIyH2QW5\r\nvjgKrFCrgEhdrY9xAJmZ8OD4uORH9UcXwqSXBsYaX1CM7acWf474kgUvEkbs\r\nH5xisbKnU7QFDhlUQP/zoKt0N/VFluRFU98lTf1reWu5LiCqLCjz2k0pYYs5\r\nOlS7WOTJJ9muyV+oCKJX+H6ZQidKZyjCOW9YJ0NdAgHqFUC7SEgd8A23KuSH\r\ndVo9qOobpjsv+88EQNQSX0QLakKCBrZIgXw=\r\n=fKpw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/button":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/icon-button":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.16fbd30ff.0_1674758191495_0.7287774575284236","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/snackbar","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.033ae083a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cbf497173e6d7ba3d465d6ced313504e72b6cf2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.033ae083a.0.tgz","fileCount":42,"integrity":"sha512-XJf3Y3rmCCuTYG052EhAUrEBcZPiiE4o6yLV9rlODUrnV1nVNklBcSx3B5BHHRDgLqpqvYzJHyMCAZhInHhqow==","signatures":[{"sig":"MEUCIQDGX4d3cGfTcFdKolJv9Ih32SVRgzSkqUUWOhr0kXiKagIgU3ALIOTx8pUbwRWtd1vvhPzdWPAc/L9zieP1JeEWmEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP6A//UA8Gd/ASxL+wmGbq+ly+gAavBV9OUH57Njfn8XjrRIhB5kce\r\nON8fAfIguLSTbq+J1SUb+ASvJVpb90612J6sgU2v1jFMIZryR1+iO0UdJNpa\r\nYCZeVkna64JkiGCppGeLUmUxgpibYxTGmaYb7A0JTY4ZE/2Adz5FBrFVlfoX\r\nTu8b7S3e0nE0+lsNYsB6SJxswKcAIzD3BmVfNwsUeT7EtSd768TfrAI4UIWS\r\nOHvfvPMKnrnNqydN3BiLLSwPLwoVE6KC7yGfvB1pV42MIZGJIIK3lch241Kt\r\ng45tjDFFTfPYhvJjzviwdqPGn6XvcIWJJhIjloNjWPD4NxsKWR251IEdwhB/\r\ndTNgWbLbTh/KhLIC9xsvz/n4CYUCi8eSGYsII4VAhPW9RRPEFPyi46z49QW7\r\nNfki9qwBzmqGOZcYGQNv/6qVCK3JgZOQb3xKsswsb0vUWEEfYjs3ETuPqlLA\r\nv0pWNCvnGqAfuTSzOAU59Ha9tsdT/7hPz1m7lGpxfvJl5jTAxECEzDXGHqAy\r\n/V7KzOHJvpxN+a0QPCEY/J3dh8eTWDErGdZWEhARi7xC6ElWXiWb0oMHssiF\r\nHMc/HiiJUecgDXAtrT6hrX0XYQ49zqmvNBXIRmhBOD+jmxRvPvrSwc7uJ3a2\r\nWBNyOpUkIkZ6dNTl3Gky9mIJrfcPkZn8Cmg=\r\n=McmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/button":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/icon-button":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.033ae083a.0_1674761315599_0.35097144830244864","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/snackbar","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ea50dfc297ec7fc292c915c3f0b960c48baf0b9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3a705fa1d.0.tgz","fileCount":42,"integrity":"sha512-1iFzbolhB5mqmQgo+Goa1b8pH62ER8DgkFDPUMNCekI39BtzVHKg6533Wm6gEcpc+rdTYSQzp6QIaNbNjDquww==","signatures":[{"sig":"MEQCIAzNCXj6TkTF/kNJV7bEEBarud4gytS/ZipRx8Nx8ew7AiANw9VWDqK0ir+gKfUtR4SMAgL2MbbYm3g6WjIck4lycQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FP3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2HA//XPC+mQnEZvDxW3JVfKnmZLtFSWEkKJQlZEsVRbJpuHBGXuYQ\r\n+SnXmPHQ2b6thkCE9mz8bO4DrZfv53ygug1VL4Y+OIaitomRaMAeIdswHTIy\r\n1O6ayPKKFm5bwFCNf2qmLzTO+Kjoc0EzkbbyNbsmT8jO0C5hdP3roeoaUwPq\r\n8Yjozy2N6cIYIPBMKI7vueLwAHhuBUZ51bIwYFXdxLB4dE+78wDJt5c/7/or\r\n5dq1ztPUzWS+lC2LupbGw/0/vAGTx7cg4gGST/jxg4psDpsQg1DQUNn6jh6S\r\n5OEt/S0y3YgDYRk3FTOlmVRCMV8uRGKRPJdR5wJFFaTNhk1e4wZxdeWgeqf2\r\n4COmuss92cxkBYYnDh2o1zaPLkW3OfGTEm7eadmZOxqpyKY/hPMIl+mN2RbI\r\nxcti1CoRbWP+lAKYeKIOfBEb8uqyKl9HZz0PJipDDR3b3WmeXYahwAeAzJpy\r\nuCLhfF2ptXNlU4MQSoCp97e2n31c3gHE4hdOGBE+qcJZYrfSe11NPgrvs1It\r\nB+J41raU4g/3pOrkrL75ggWsrtsVnCPVfjEqGDrNpDOrmGoR36yBL4ahl3fq\r\nRa+wIeJkN+CfDTZfmYrUHu6VqqCsIQmXAeydyFNK2w+vmFRTIHpuFHbAF1rW\r\nPxd2xnkbFG9giZmJ/9m+6JuwHjYO5WnyxIA=\r\n=DjdS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/button":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/icon-button":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3a705fa1d.0_1674859511384_0.058131896620972956","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/snackbar","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9171be3ed190f57122835abedf2f63b51f3a698e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":42,"integrity":"sha512-MYunJJait8H/DDBJaEIlLiJC2tHBYRG4xoyv3NcTOhl61qFW1YWXsconEsZgN7pJ8haYjmPiYtINPMko8IFR5g==","signatures":[{"sig":"MEQCIC7BsiRoBQbSJEQsGrUK4ue+vg182kSEwgErQhzy9XaDAiBvTtS45y4hHR7ck2ZNKSyX+9HhDQPFQkiOzS5qqSSpiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/kQ/+Oa7zqMvX5rYw1leYHmrhwIzN7X6kEXYyQbLsjH5LdSN/8jn9\r\ntMQ9JQ3f23deQUZkduyFm7UA3lSJ5Pmy2MH/5EY0w80jO+BxSuZfcasdpKjo\r\nl8zNebz7wUFOB4byohu07kLZ1+9PKNum7K5oASAN8OI3057vKnFgLf31EN5X\r\nS6QdaHSGvnOwI3uY4xrbz/HaSsWxS8CWTmwA+TukYjZlPhZdUAkF3vFOEuH4\r\ndSvyVCnv+gNpz8ZQPucfwtP+Qyuo1ifJjXCj2iXvvRsSRIq/Xl+0JeAV4Moe\r\n05iwRpS+GrilnvI2cn9noaPkUISnJEtX3K3QgYyoHp2rLgwW0mSPMdCYsQjs\r\nZApNrgizGSJpOT0HvBGA6B/YNb/NxKMkMG9L+DANldpYzGRKG2BKMY3mQKg+\r\n4vkvdpKhRCE3TH3iooQ7w39O9TBa5kKipN7GQYBDonPqn0C8Q5/7MULoxXZR\r\n5YTrlrvlb5XKpxDQ9zuGqNOYm6X+heGNs2FpKrURPOMQOuxyDjjN60z5zxWn\r\nq/tk28dakXb9pGeDGWzdpZCJQu3Ok1pKjp6UXRjVmj1PMyNlEtRo9uuU9qWD\r\nnE37X5QL+VVeAkyf9+8VaWCVTPG+w5OQNBUvlx8bnLMu6C07MclzIEw5MUOv\r\nUNm8GNnt0oau4HSNpu15AgHg9sP3iloWCGE=\r\n=lN/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/button":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/icon-button":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d6bea2ff2.0_1675179106890_0.7798516288841717","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/snackbar","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77564dcfbe15452c332aefbb2a975aa8d6fbe253","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0c94182c8.0.tgz","fileCount":42,"integrity":"sha512-TvytAMhBy4YoZVrH9XEnTudklQcXlvj1SzccJrWEsPkT+8Ywl4jd+Ppp7IfA12KhndW/F+v9XV8pd8KSJNnCBw==","signatures":[{"sig":"MEQCID29pHfkjdAQgCtMpC9tSZeX9JrddUrUg6w6A5MMeoL8AiA1VvR7HLylQzOhuYnfcJxV+PpkP7KmNc1+lg0CkbH9bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qVYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpe8Q/9FqNy3uWZZXxOjxqQFHEc8D4Ug6fdnkGc4OIBjfxxlYEr+yt/\r\nhhOZfxdAzydoP2XwPfS0eWVQg/oOj8glEvwv7P7mS0fvkRaNTM2fcdnawQlL\r\nC2t8w/k14aWXYmpEyaFprTRyIMXmKGxajAggXRuzHBUk2mAP7mLyIXCnJGOa\r\nKSaVBKWO84yWjdj4hJclJuNDFrs3/qKyKXcIMLtQfV5AC3FCCt0ufjkBTcYk\r\nnBf95JSdNrL46KiGob7aGlrulDcsGOWIASrdZskRXgV/vArkpYMQ4VPvOuG/\r\nTsx/6jQsh1wOFtWkAgr6JEfuSJ+NNyD6p7HMeeL/Iz67sYMvzHGE6g1SeMRu\r\nMg7aOpNZx48XmAPJYbOrjfVcboWruPFg7MX46YTnH0zCoRB7Il2qpssRxrJg\r\nk3mety9S9dmiw82v9psnR/IeVopHt/EcdDCpQV4JFxHusip9U13CITueMTR7\r\nRHPkwvdTH2rPiYOmMHJN5BAL7NeSH3iMfzvbjTzNPhAqekQoz5ydW7QdiWim\r\nTQcJ0Kexn57fpQKK5xrGHYgVL08m6GittoixDBYPw4f3k/F9wXBVo6dxRqOi\r\nq7sKsGujqJfHn+BOU3FB8+SKWYg5uxx8p6F/Y7fkLc4v55C3T4ZsLcPYwRlD\r\nFpvIL5oNkMUiz7NqUFjzJjmduJ26UK9pkKM=\r\n=6mQC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/button":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/icon-button":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0c94182c8.0_1675273560139_0.09003586457378154","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/snackbar","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.15b221540.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9942cac0f21d844188dd9b17bd82af7d6814e11e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.15b221540.0.tgz","fileCount":42,"integrity":"sha512-BQPC8Rkc4kN9RSGBdaZ/XDxt8tS9yUzsePjM/cQOU7ZuTZZGr9FBPS0qmPGyyO3BFgHnJVeL7fF0Agus+lAP4g==","signatures":[{"sig":"MEQCIFIWHj/7HGrFK/QNQcT8DXGdHMrAyRUAMXD4CaBfErUwAiBrnAHP9pQA+v5SRWdcDQqFrv8ytlCTYpvgQ2mfE5E6QQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qdNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLIw/9FnoZHEE6nNHmFqtnyMXk5UfrDh2j0CtgTay7gHuM3wyBI0xQ\r\nAb1p2B1WiYGeo8X9168oEMg1qUKU3rZvllgIGZ0JjSc9GtQ/UvXOYdGbdO0l\r\nYTmz358L2gOf0wGy7D71dkJ8YHrVKLCImnqxbXKGWlMHgF/f3qj5LatCyN5H\r\ndIVY84eE707qmKDVDv15T5l8ffpOxnVozWPm2fFbl3BaemF2Cb8ukdxXBmeq\r\nCE0eryAEhjZpF1UCV8KA2wcMRAc4XmXJmHSlw6nw/y9/svwLylsFBXVF1/Nj\r\n/zokj+nzazGYQ5M/gXuBG4cys71r3YopAAK7qm4Somt53BN1eebVKPGmzoas\r\nVKkQjpMEKZbCSUyDe9O1c6DkMWpS7HsBhrQIH13OTvnwbzsAe9S9WxOjeC28\r\nw4VlpgQS5m9lVtni8YSUyjRMfw0+eqz9bgYw7dm5tPWKxWt6XZHhV+uzB4Tl\r\ncBa+d+nHMJpp2BUrWD0J1hZQoy02oixfvEJZZlS3x6K4V02Y3wuxetyJZA07\r\ntkbVg+2ir5Q2U/KVCiaNAn3DensG9F+jajsRxCsbIvnXYaRG71LABPPQFlQC\r\np+ZDozxxVF2VRbcZV/a/vAiBOTcHEKKmhkSwaJl+xodf/ZkGfrwIl0ZFpDLy\r\nZkpS2u+a3rCrvF5BJUhS+xGPd46bL0YkUAI=\r\n=gS0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/button":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/icon-button":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.15b221540.0_1675274061228_0.5041492874937563","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/snackbar","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f7137ca9f861a32c249c10ef44cc30b9ab59296","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6a4b3f834.0.tgz","fileCount":42,"integrity":"sha512-6MddBA+gfLsA0tr5ItQ/6Xajt6LHvlJJN1Ndq6tcK24oPdt/bOv2HkF+6WtBO4C6Oi+hK5Fbxc3c3oFKoysa0g==","signatures":[{"sig":"MEUCIHHn3/4Xu+xGgZRkPiWAHkQp02Pk26xM0ZxySXS57u1uAiEA+DkCZzBty5kiBkk7KxNLzvrzPqcZ4xtdjkoflShGLHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2ra9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOHQ/+JTUiovgJ9clX7Crs5Ov7kop0vKZxOUBJc3ChaOdeXs34lTzU\r\n1deL5XMXkScLFqvU2eEbXeBKkpg7PykPEXPCpi1SJDr6ZRfbvOqCtR27BmLF\r\nkBjEoWErwa2YAZWRw6Y6ym1AfeMfTS1s+iRsjdHzjJG/15GTJ2qjSp36XTsr\r\na1TZJDkNGXtyZ5zh75uqVyagzCr/UxtyVZzyzpyAkL7nfiXPsVf0e7nHomGo\r\nkxIhb5HcSmBJoAMdezvqKZZi4oM+vN3EkFJqPqaMY3KGobEH3vvG74x7Ju6l\r\nN3mXzC6IjXgJmwqdI1wXZSSCVjSUieizLPZye9d4o36PFfDq0zXsFsHZZwWE\r\n1CTDftot9jiBmC3relUQbfld8FNjco0TejTkRw3PfEsj16/LkjcWO0T/wYws\r\nk/V4YISnoQcBkwhFHSoh46Hp2MJWqHBssa77nulpKFN3U9lElTjgYkEUlyWc\r\nOJF/90cZD6NH7pzvhF/ihY6F3hDA29otCNl8EOObhQRdMvLEZ0L/A7hMrqv4\r\n/qYhubsFXOQzEGVA2kqJZEYkyNo/PDaspGi4dNP8Vf3YMGjSAmby0TABmyvR\r\nMCQ3NbBDa4Akrr9c2GmpS/7mb80fTGnuSzHMLfTMuDT7nLMCzaZNau9gqOCN\r\nQpRsGIAjmL9QyesykkOJOy7Rvt/A2SormJE=\r\n=OHX+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/button":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/icon-button":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6a4b3f834.0_1675278013513_0.6209979661083695","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/snackbar","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c2591badf15bd2a29a9e14979f6e257904fad83","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b177b40e2.0.tgz","fileCount":42,"integrity":"sha512-xuMQGgWPkDRnMdgDnknYT0U3c6Fh/uFlIYW84eT1TY0qVgZ1imjyWAwDSpUZqTlOyhvRrFu2LaNVIk2eStjNhg==","signatures":[{"sig":"MEUCIQCyu9EBLcuqvDEI2hkz+a7n9OJE+Yag3JzgheYEK9rmUAIgQD4b5It4V2hvgDk60bN5n1TsxkaND8q2FK8dDRwlxyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y+iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpeew//RmJJPAO3F0SqaCvgA3TV/aqoB04QKTlMkgJNT4HzpJITVwuO\r\nPSl1JQ6hyXhFwPAbXijNRrqCp+5EyxvZ6MjIN+cBUsBgYFU47A1kYA/wotBp\r\ntP7bO/7Pauh0mtFZaKRHjKAZWka0CWGXG41rOG/qBYdD5KTSlFVanCDG4Qer\r\nuQtcXMj+Ak4yC/xEQUNsSl4AdBXsOYpM8HKGrSjO74MRj/u1M6YQnaLjtPVj\r\nB+fL6h//tX+Uba97MGydbms5z/3ItOPt/Eo4egJD6E6ZC72rcy0rkacHcljo\r\naCOSSEbMEsSfn4+XfPFUi1Imb527S9/098L83Sw+3l3in0lLw0lbJk8ysI5Z\r\nN6jdL4VS8TdP7hTkdIpIqx+KuLgCcYKxaVJCU82Qzaa3RnXK2rH4Iera0gT0\r\nv+siD8c/m3aWHptH0paM0GpAzhyqGBPfJn2VXMHWgG73MKCHGXkW4ccyelqA\r\nfrdmUiDcQX6/CBzd+Kc339ISiHdynQHpKyaOP45Z6aYYpq4dZWev327Mn9pq\r\n3ykBtWg4raGyp2pCkd5TY6Aqw7pvAbhthL251Wyob/HnMMoMmzWKAN5m9Kx0\r\nO7qy+ZfVg59BmF5jmVIViHpPj07IY2RU1dJWo4s9SDblbmj9NH/SpYpFtI6t\r\nhFwq4YG/yWpm4bw3CaLJ5umEUsllLa8xBWk=\r\n=0OYX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/button":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/icon-button":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b177b40e2.0_1675308962664_0.4955548092156048","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/snackbar","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d9f821042.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7da5ab5971bd6c4054545a51c6765d44546ac9b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d9f821042.0.tgz","fileCount":42,"integrity":"sha512-XyOZmdtubsa1g3NkPAL5i41IRulDcmwmIMx/0dk+uiq3NeV6rU8bWeCXnACHocINyDCI3k/B0agfG9N7vke2RQ==","signatures":[{"sig":"MEQCIET6yqNXwivOMk0pH1+X1YNd6+Fh+otAs59Zz/d/g2w5AiB1LCUWg1rIcV7sKozPKVw58jGG6Z2Vh5Rec91xdVoL1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/V4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIgxAAjB0s3HNBeuPsA+XUsXVm/Cp+2iS8x2kvw7SgN5v4mitSk5VO\r\n3A8yTEH8cbTohJxd6p9EAYmcxsTzvxZQe5mwT04I9wml9a3fE70vUVlGGUyN\r\n5EL0QxU14s+CYJVhHByTjWKVedRgABQmNHQ8K+BRF7He8MCw1n+blgvJilAl\r\nkqUEX1Tjkrv6xxoKi+rvlZC6NY3nDj8vXVtLa442uBzSgbUKCXjpzEruR06W\r\nRluf1VfCfwWB0q9J/3OMfXcjZ04RLFlXNhGGbW89oxA8nGdlrhkTTUFSDVh5\r\nIYRU7z2n1FrC1Zk7p1yiwPxirwzoWIa6WpcbGd1IM3u3wJ6OMHVRXvW0ABam\r\ngX9q27OW5Gg+v/OgFltVsShCOtsStNFXXdONFuQM7YHGoo6vnBUHpzGpO58i\r\nP/f1vGAH0QovlkMOF+sbqTZHg/W92dE4itIv1F6DDIaHxvB4u3rhHEhXdjGT\r\n1xQHIRq8H0tW1OKWdgyfq0AFkazEuGQb2GVlzZCxQdJQ5rKcdVHKZjSFtkbi\r\nT37rJsVSFSbBlaIVakf4rVzHbrwdhtyWQE7Bip7q5RZRmHC4nUlc24+WDoh1\r\nBUjsAVb8g2DQkhgJcmPvQp99u+L+ckWnWmmgOg2gs8XE4eK491D3eYbYR5b7\r\nsW6SM0/FxZgCR7rveVaWbfOQXyvTp1ZXvNI=\r\n=GiiC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/button":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/icon-button":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d9f821042.0_1675359608109_0.85388975285919","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/snackbar","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89492593fc7fbb76405bf8463ee05589c3e47129","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.47c7deb19.0.tgz","fileCount":42,"integrity":"sha512-YV7eyN/u5ulWY88cUWBaJCVxK/T3hAHrscNdCLgZG32ZZE/9ldrCtu4sEhLyEAONzEz5FWCCXx1zNCJOyZ9vCg==","signatures":[{"sig":"MEUCIEp7o8N2NEWdARFZrnOV+c6MxJRhKdRAyAotnHD3ndQqAiEA0Cdko1LaXnUvYhjIGvaGb/pfcf9wGICrwkPPLeMGYNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M+XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpiQ/+PX74GhcBFKzRsdsooy6L0En45VeEAK9/TzIvHB8+5/Lj8RNl\r\nHbYdOG9+oThJrJujCH8OPDO32lxMWQ19xChQ+WDmPCxTFRKeba1w6j1g51+h\r\n98llkq5cnKQPPKE7CZzGwI+q3mC+4GhwL7X4MgoY74KrUnbgZZ0Wn8nahJzg\r\nYCIsLXtA7JrJkBWpC+PrrF/yehOnypBJhFiOQrC/ajL97k6xtr0/v4QwOiO1\r\nIPci82AMrC3vRaKsiHQkKojZVizYc6mFTbt4K/hggumsx/IJmvcDz8meSp80\r\nk4JWRpy3jRv3pxtxW5ihQ7xho3uZU2TW3S55BXTcSVrAkom+qFASUZlfw2GP\r\nhZPwVk88R6xz+hPmYMnnVwVZByzJbSbg9CU/QmydElCOpm+3oxV9ryV2R2pS\r\nadSn+0rNuiIwm4bMspiKnFK/YrUzbWIy/ergeQsdVUn+sfTXnO/p+jXjn60i\r\nN0qBMUS4TjXM/86OpPeTBSeOjaIR8KgyWZO00OcZt5fhSkjhBYTT3iq2rmOk\r\nwdlc1efSfc2c18yyomdFSbyVwzJ5UEd8jnXDsILOpaeKpsbjEO99wkymbrkM\r\n9E8D0mv2Rux8BfBx3oQzpM7GqxYtwNfOtpiTXSzeqgLVHmNcw5mDBzsvwlHO\r\nGaMm447kk2Oh5l3TLZ6/OGboQzaBkpZPNok=\r\n=2jv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/button":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/icon-button":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.47c7deb19.0_1675415446881_0.7610803284626431","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/snackbar","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd1f0a530395d3dd9869e5ee8a98f2d08f7eccc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":42,"integrity":"sha512-0NOZZi1dH1FamS4MlCyY6UA9PEFOuQhretCJlP+sG15AYgD00goPJH0bALDaKE/7f6kstcZyaOPSIPgv5dqLig==","signatures":[{"sig":"MEUCIC9OueytVBWRZd6T3ziauERC5igwmiufzGN5Mi12UdnJAiEAu1ZlVgOPqinT7GXLkUJIB2LXIDF+38+R2GsQriIvbMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fguACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7Gw//Vgt9uRTKGkPoiDaHG8tbhtDtizmuUlVoMD4peHy5m/YKZv+p\r\nGs6CW4DwaHWWPIkYue3Tk4J9bwmYhr1PCwejgxTHt3qsbWIv62BYnltO1Imo\r\npce6h8hTabMS5Cj6gLAJWxdxQIm9sJmvLycb5LuEpw4sm7MQnCVkPOw0jn6z\r\nJebSvl/s+C/lvzKMjCcompEJWz5ONTL3JL+yOdTeG4rmK1aMrsu0sEIlcpyJ\r\nqa6NwjpSvmO3NuSooPDI0RxssnKUGJokjl3zBVZ7MkvoK8u7qbKwQOOytSx+\r\n9jAKT4noVJVj1RPZ71OB0fqyZyrC3+Oh1Yvxu9mbVgfG+fX4C8yYC7OL/905\r\n+QUAE4d/UGyA8Pln4rHqVgB6ASQ4j/Y+UvDNebNFcV5GrtT3KHv+Xhi5hw14\r\nZ4C+BC7pbzlI8wXqaRfqRZHi4FxC22PykbvS8d1QnuWxjUTwevHfUGFZ7F84\r\nBgTB4JEVS60yhURgOe6frmqTsOac5QhsrNkTaB9UiksJANC7hXQZfc5ZbFYO\r\n7fnTzaE/SllIaJKPtwNtMqx0pkUpk+F9G1P8gmsO3umSDSt12cpVCZq798TZ\r\nnVOeOdd5qPH3+HjpWw6bkn9OgqdppLenR2qN5bD80ARf9daXIV91PruColXO\r\nbgHYspeuyass/hQgXnxG81irmRVgatN/710=\r\n=CZhN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/button":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/icon-button":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a16dbd1a6.0_1675491374448_0.8424015906878644","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/snackbar","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.93416f87a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef1984109b84c1a9cb4a02820d0a1e38cef1d748","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.93416f87a.0.tgz","fileCount":42,"integrity":"sha512-TFOW3MKN8JPuYJXT5MkKsOvRn9MJuwXIa3mE7MH6S2czc0ZhipDyz5qW7tv6RiOk5w2I8AYFp0za6SC6YlBVhQ==","signatures":[{"sig":"MEUCIG5G6bM+VYFA+95cAMcHDsYfziBOErYLigVgRG3m1p7ZAiEA2uOME4omVPToDtS3kJYDzEehhea7IsFu1rXAX6PTT+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lFgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMGBAAjYHM2Hk51i08wHtKOev/0i33pTenvQ2sGHPeaFMSdVUYGB/i\r\nmMbRHnKI6NenGl7gkFByp4oStFh+lRCLlpVVqsMQtaqW2YrJ6o1FEDpCKxAE\r\nOmmki9Cc0tUcS4RRXaKiGZ9CD2Ocg7dPO2hNDF5s4fg3WQdgCOuSDU8K0GgJ\r\nrEPrTh4yGAgEJRfN1HiWqvgmrY5DgTeKK/nm6X9TGT9+nu67TUD0HVIUyoz7\r\nseU0PCs/A77GHwo07ts2FTsDvUYd8jZzvy5aDUKV6Qp6K6on7K68OIP5vN1S\r\n38xcqqnnsBfB2aWAYcpnt+SmXMj9pRdxfOQalii1L3Cixl2gxT7NFTUsrITp\r\nrehpzggx2Bk1U3Cy1NzsopNdsVPwHdEHMISdLd9OzHi+F79/B2si2c/3x7R/\r\nhml38y55Yon/s4JZSIV2EN2G9PUipOuYbYSrZ0xLmxE1Y6dTezMX+Wl0st60\r\nxr+p33IybKOwUIvH3Xd8wzNrAeW5DmYQ+2ilj1z7j0b2d+IlPSUzAg3TrsWL\r\n/+mXR/XoQNZ/xvIHWEAtqBiz8pO86zrCHToCyRp3qWcVGTB4Qam2HXrKXVkz\r\nS1haLtXILAIh+Oz6ODv8dbM88EJOYJJcNWx9Tjq9na7SbIP7ChbN7DW5SJcV\r\nbzMnAHiAN827mpm3Xq3Xw+KpyvTkD1BdUJM=\r\n=/UGe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/button":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/icon-button":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.93416f87a.0_1675776352087_0.1079342235087215","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/snackbar","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c9f5768df5c26bebd67512c75d0e12117edcdcc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.49b8e7442.0.tgz","fileCount":42,"integrity":"sha512-+8M8AhHnrYEboR3HwrrDJijdDStoaUT4i4rhmrwaMQRbQbeMeheKFpfQX3W7zNV09JY0aK2AnzjdG5l6Dk5TsA==","signatures":[{"sig":"MEUCIFmBjfJiT2nkDROySI5Vk5q9UW/6dlyazeTbbloApDekAiEA1flbGkGhV8YuIeGtnkqi8Pcr5lgUCUsCZavGryjZKPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tqUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoajA//evGDv64Jc3/4odPEENOD0RTKHb45DqF+QystV02w7EIHA4Dk\r\nla508fJ1zPdMQxU5zd3tXgOP5Gbw0N2VGv90KxBaMcm0AUt5zMVK+K9YgOmI\r\nhHVYRJXtto5XNUYcGxLK07nPdmBh8XBuxkJ2b6BKJDOr1eAVH6uCUY3ufG3U\r\nK88sBEgrYLHeLeduv5S3SLghCdJpkgjmHvDgWJkjBhRyR59BbeH1SEQvwIn8\r\nekNg2RVVHRI5V2VXNrm6V2pcBpBDOm7sOhlkqwykY/B8kJKSjkU7jYlNlyPU\r\nNTbF8jiwbeQfN6i699dxU2tBaDnHNuyKDd53OFhqAfZClCebSeTrQ1fZMK5r\r\nzkDepRzSdL15e9Yl0TTP9omoe98jFdD5NhzZUdH1ots05V7LTpVI0HEN0znV\r\ncS6Op0aVCzA6HXIECZ25aeZq8QlIywTl/baMvvdtXoa27ZcZml8R5J4kP+Lp\r\nNnwwkUQAvdsKU0sTz4GyiS7AWyY7sTfcWVV0rsQOZKKrWia4kPRbzDfoT9sT\r\nbxino4LI6ApEe0dwXmKZJobQviscD+XPHQddgDqtzksoce9U8UzaOYzUxrm6\r\nRoZWMVEB/mxvgsdrxTF7BRFzo4bTaZd+Bw6vhqrdoFZfhvQzjQI+sHa+EqFf\r\nqS2Sjm1FbKgS7RCY84iiLg4hn+AQneMYh0U=\r\n=fded\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/button":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/icon-button":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.49b8e7442.0_1675811476656_0.2746295318354959","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/snackbar","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.de38de758.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7ce3dfa6753810d88263b762950cb39b1b272f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.de38de758.0.tgz","fileCount":42,"integrity":"sha512-5LTSJHGobeHOJgfHu35lWih4cML7kHPJZCfTbX5KrX5ar3rve36sWzoIXDmPBOwrkQTazy6z3oDbRJbsz0EBIQ==","signatures":[{"sig":"MEYCIQC2kceOFfNmlcFXO0ejHCqMmJzUSYODAXZ/hOoda07R6gIhAKibe/rkc+Bw/vQs32uuGkr/+Y/ss1Tb8SELkrHmgjIU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RTHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrofA/9FxjUOnjDStP6w5VPZu4De4jRVHjI1kThCxl1onZmvK0qMPAd\r\nUXWdFy5Cbv0qkiAEbBMyQfGgN8HJhsVh6iMdG6z57RMD6fOtwiQAUvx6fLNv\r\nqLYY7H/janDJWurzCJol25sJ8RCZSXTVUiEtpmRHygl0JM9ZKlPN/5UStHaG\r\nMXWVG1Z4OlPah8QX8oOUC9G2l1z7ynPzZgvR9xH9TwCo0IkgJRASCbSLsXL1\r\nhPTzteEXZ9lFLKkJv4iu3l8lJ4G8FqvDn+3Q6vcb1DIk36kog+P0j+p4hwi4\r\nriaxcMx5q0FgeBjWOYvAmPUqbPg9W9mKJOLkXIek+VMKYgZuzkT8kDnTMAMj\r\nkjqgmfy7tG2QWreP7G683XyVOkP59weXmuxO9SIBoK0DIb6bF7A0C6mC0l0z\r\nKxOq0/+IetyAqFpdCfV8kOcvX/vMXojEcBfMxXzZiSqALeT382a6vJT3/UzJ\r\nNiPNku1hMOGBAvno0+NObtypa1CWKqA9tNUE8rmvG438OnjAmBc2++6BbMAx\r\nKArAwYaA8RZDWpvN4SlFEDTfQan8egmAClZgrkV0+vp8JMc/15t/p2UbBcLA\r\nqlFHaRzgAcKfqEohFk9MNbBTxIkt+N6/YayuazuTkd2LlTXfgjW2Ly5qIUbk\r\nui+99xMbJq2mAAS0MiBYtHPtWhXla9J4vHs=\r\n=4739\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/button":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/icon-button":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.de38de758.0_1675957447450_0.20429528638582561","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/snackbar","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6808e0a220a5bce71dff2a68708135f5019d7f48","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4d62de70c.0.tgz","fileCount":42,"integrity":"sha512-5A7Bb8RSOspLmIA99GtVFwbltNaPfYVeyJQ8AdZ/Ij1Fxqs+tt0ZZM8WyQcZ/2Tvqdo7IcLGEkoiC9RhmpVK0w==","signatures":[{"sig":"MEQCIFK01beqHHi6v1tM++NwwqpqowiNFFX50fm0I6ilZh9BAiBsMrVx+gDqd724zDxmCkiU3ZUrLmAVO92+YRvdyykR5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W4CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpgbg/+OnMGS+UlcyGNZ3XOkymDv0ysQly+LMOT+H6pXkpMn9s65i5E\r\nfeqyCVC2emOh3LiKImML9kBU22PEnt0/IdO8tIAg3yjfKirVrYCr4e2aTNPI\r\nHjEaROWkD8KqbbgED+G3K/WsoIFcSu5tPC0FNGc3tWyt2xCturt+9pWdoMms\r\nmJgwhAzWvzujS+vIN54vaP+JP/p3ovtOYSCnhTxxQgiR/56FUyB5zfMD2rR4\r\nof+sqNxKEBh6fIV+SLOn8WmgAFWyRX2Pj96hFGk/2zBgrNkMp5NQw/HUXiFW\r\nq+u1zPIv8neukwvqNzpDGgaXnymPj0RwUbmiGn+wLO4n9WvXgXGi9AVMGfkE\r\naQpGOdc1tB0w6OqEu2FfAxjGu+cLzlOnLZZJQ6Ob2RaV18ZKKY/TYtWwAyNK\r\nUtg302itqVDlHTHLWRsX8CTNpnvjYAdrU0UxsvonZmzOH3DRdzdHRcw+6HJb\r\nv//6YtXgQa3JrBp7roW7xiCLf5s+WlMACwfa3fgG2wF8WdNerBiPUegknxA0\r\nhBeyR/gtyD4Rlwk741JweJbXDsCx8JWL+SnpP4DkCMFyTHvuSrPXUtgr2I2G\r\nBzXjXh8mAskDJUcLXl/mhYhrerQXB7xwV7rRjIKvO6C9FWCN01uRNF+pGldq\r\naF+MqoxPHyT6DttEC0GmEmLCYvbKjieZOpI=\r\n=Czhc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/button":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/icon-button":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4d62de70c.0_1675980290253_0.5971037865082582","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/snackbar","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0df6becce6968ea0df83cd7ec67c589c79e554f5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6fcd8d418.0.tgz","fileCount":42,"integrity":"sha512-Gb6RpDzzet+vNXMXz5LLIxQtTeySXDAJyBx94fIHNzu/BHGk+T3fh9zwt7/EzrSxoBxnQp/e5h/VLreDQpXqMA==","signatures":[{"sig":"MEUCIBByL8/HqsBycGWnkG7/O/4NN87y2hQUpYl5cQoJsDSOAiEApz76hJb1RqDtu8PHDFJCFcay1VScq24kG+lxqzZHqRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iRBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoguxAAnvU441ND46OonWheP4jZgjPpVoNqxAQ+Ulw/ftxOH/L5ETbR\r\nEo+kqUqd98yruBwE9IBYmHvn4PKtwvWnIegdvWH1r0mpAk4nafHQyvVEalD0\r\nIWF4K6seVZKvOo+BNwJU1Ti5Y8oLdmszWJl3fVIOjZvwVS6Uyb3ssjMqEq8E\r\nW/rfFtBac0puXQh1fojZIYMuVzQbf7BfwJGndHXFQvjlz6XW9nDg+1fbHt6M\r\nufr2euVVMdHxEdxrUQcNvIwYLy8a1VYOGEm1XSWdElH8il86QhdKzphjSWdv\r\n7GDeRgWlNIdten6tL96xyW2RJGKM8zvZg8lmqCBOkRabne+kO4dDOzjvMwnV\r\nZNVYps5zVoEsNGj29EryzCNpCawQVDiZ9hAPZnrAjVsWgrjSSGpJWGB/6GGK\r\nlxbDLkhI6vwmHSXFGfuae+Gq1L7U1nbpYDIToYp3Wc/Alsw5eft3Z+uuOE2a\r\nUPk9nd6io5iRLFgsQ3yL9l/GxapB48TvVXMS9zOZjVTFs1MQGR0e7VGuMbWy\r\neY7EPLFhBzn9IcGut3QsoRdyqvuLCndJrRCVc+hT05tk49O14TSwPX23c/nJ\r\n+hqAdYcXAEOdo6akWR633H6aF6BzFeJBe/01c14F+MmhbgyrGrpIrvDVcWVJ\r\nm/H4i8X5rquEpkynl5ix83B722mYI+aca+8=\r\n=ZNqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/button":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/icon-button":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6fcd8d418.0_1676289089468_0.26095023905319215","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/snackbar","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.066d9439b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c63da731a6f09f70066b09f43cbb6f72dc0a4776","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.066d9439b.0.tgz","fileCount":42,"integrity":"sha512-9tfzAO2ViIMGQg8IHT8u3Ys/nyL7ulFHipkjdkxOSVgfOG5zZtISSoSX6Z+Ad4hk5xTWcqlELoKcG2cifsFtSw==","signatures":[{"sig":"MEYCIQCFHaYM/jD9MlIRKd/X/YwIrIdLdshek7w4i7xEhNWPXwIhAOwzFDG0otaulESa3p2NjpKQTVyOYWYs89Hy4L19ccN0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7Tm0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqukA//UyfSDJmScqir7UAvZnLVRpE+9O9N7p835t14QRlOsCHVAvF3\r\ndX79tYpsBr8soDgkP4PXHbU1nBM6SWIWO21fVRrx09vvgJUqquM6yhQckv1z\r\npqb+HkK6mg5tYbzLGaa04CWRJ1tCYJ2iZtftbk+4+OOIBqs4BIlMTqABk2Ch\r\n4GIJpn0eO9vzVtzAKWdGI8DqqOmxXE0WqEF1B3xaW53aeC9TqOdfw/exICNP\r\nYU+3LAArHTz68udZ120AnvAyKsQfIuBX6VrDSrorrfKyUlirOJ0iCG8uQPxC\r\n8DSJqDxZi48Hetr/13YlZdJeruKqEg8uFH9bRLX/tICdZwzl2eBkq9cGSDRr\r\nBMxrBW9Io+d58KaLxEgxtzki+tm+pTZQy0CFQ/yLNppROFDDENJJVpzV2RUA\r\nPnMGmdqfEFvSpN4r3wNCiO24+ppN2I5+qqLQ2Ll0vS2A1GJFAPBn6gvKunll\r\nndJ79ohXBX7Qg3cwEpzHWm6obSklrG7o9AePTZaL6xo0HAzJk3lINfRzuHLC\r\nM+GvLk9FjEvLpT5FHd9nOLTPNIEs+U/mHKXDmswpAiyNB5z0HcWZ8m31tdAD\r\nrIylP+90jVBEVYuvCfY59klaokeEgF3ZV/hC32Deb+2qByMR019RsY04COU/\r\nylASEXgPxSRWtToy4vYYXR4wWJBB4s3hkG8=\r\n=6O1Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/button":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/icon-button":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.066d9439b.0_1676491188497_0.3984305509097168","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/snackbar","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b0d99998daaddd30cc0b1449b3ec3913633bf44","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7ab32468c.0.tgz","fileCount":42,"integrity":"sha512-txdiC9laAfsyZlfvd7aaqjFo/82N0lj7tkRIiMCb+KRUFjAI6lJRiUGuk/ObaQv/4b7+qpKmzCsSzfmKbDJmng==","signatures":[{"sig":"MEUCIDmbdexpF+rBDsHVtSosVaKmfCoSIUQThHdP5lHiQ4p4AiEAgVoVVCxb4PhRe7HXCSBO70Ku7LLNMI0cydEBd+1xxR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q8LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo27A/+JYhljngmb+P/NfVYEjmjJUhpZQm+yHyUq/ZphLrcU3B3ECcZ\r\nDTmH9kRYeuFiWRTGaS4EHFjU+2fhH9vvYF5DkLk0K/NUQfsQfZCgvvjOya6e\r\nD8M8QzGhvkkOfuvng44DM7okLDvK8WhRRhTbK0rX39ALruf+rk1H7qvD+3e9\r\nY/06PAcMCTp+5nJSUd8YmCEdlsUajceH41eSqd6oX7jrJLNJMLIAnairMg5C\r\nQIWnT8ENHHRugCapMgwnlobHAZDxLyU1Y4m/yR4VExnFvfWR9jznUV/Y2hkT\r\nqrq5/UjTBnVUvuTuML+3NfKhbXfcaUx3kqMXEx6/qMYZHydaZiMjrOtCdEt2\r\nLZwzfJ4QKyaAhmwqV6seq7riSVPSKT/QtS1x9yiQBHeZ2yzixCQgGf6cA3Ek\r\nF8v+tiKlLbZxGws0Cb5MS3wYiLKzQUbmzHKy1LcYi4y7jzf1h4GbJg+UScjE\r\nR3t+xUsH3YGPtKyuotrkmzJapgfaG0EzEuYONdRA8QdJ9S5C4S1v3+gLHNfs\r\nOxpKb6XuwXdZTolnfLnliwZCCFxuehCmoxSQTtKofqwRXtSD8mYf71zFOVq8\r\nd8EL+rBFyzQ20RbYN3mQSQ0wZ++abkWB0H/icwhc/mQeAZodtlK61vVeFBkF\r\n4Y8+oUjwirih3P+ShvuHLYKvCgStJE2GD0o=\r\n=2bWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/button":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/icon-button":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7ab32468c.0_1677004554855_0.5884206971338495","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/snackbar","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ceaed66c2a2e4da8fad525c9fa0702bf3da2fc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.fa27ba61d.0.tgz","fileCount":42,"integrity":"sha512-X7RGiw4TrLIVBi2p02+hAl2YRjz3Ywie6Guk8P95p0ZrMENqe1hT28ZwAo5MclkAo4I/pBq4YTCJAjpqgpPn2g==","signatures":[{"sig":"MEUCIQCZ75bfi7EK3Obg2RpPrAL5i9B+pKIhyIA98i2oewJ1eQIgPAJnwTZxkx6jsvmuoqXCdQ/Gg/YQZLFU2gLmShRMEiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NiKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVvxAAn45I4f821BcmBDZm5Mq8u21OKypjVdykojZOFeUpWW1tZXYc\r\ngzTENNfhbgHQwZXurYk4SoRAL+jhC0npOeTVblPcKvd3Tcjnsq5kWmBI2ocK\r\nEUBPE9TE83N3OhO8crkLSAR3ON3z5XOzSZ4d1FUWgmXWZVTX/w3PMgdd6aIi\r\nwoFeFqUnEKnrV8orjo29gvQmaech4iQ0P+MRLX7+WiZWKriOA9q/4GnPL/4s\r\nTiRDn2VQHJ7upOTLi17P4j933bZTSKwPzbjkDhvlMa4AKr3WnKKBBAsfji8y\r\nSmyNHfECUc2S0WbPPVd3sk8EWC9yp2gr4XsHstJw/8nLdIgCSnmv9H07u0OV\r\nTZhErxMdEU6pSo8pRIpUVPfoOaXPIhHllfA3jPgb67MnPcq9XReUlZFILeyE\r\nkiR/6A6QMObyLLZ5UaIXA7gdTmzrckvqca46/o8j+3Kx0dssuMKZaQ5Qm0EN\r\ncvCUi42ChRxlaZMv6rzmu1DTNvb17YB1JGioQL2Lm4cb5dMe/1x9C89XlL7I\r\npUELFCgv+IJlF56ElO1Dh3Rrh5k+tvtIr9nBfxYheucu6z1plTe3D3eF7/JR\r\nFg8iLg6zzoBVHRhsFTaPKiHgIQvhPC6JLYulugZlINgHjplWdgc9Hfy56XYS\r\n5o09fnIqmA1lCSs99ezokLqpwO/heSe7fc8=\r\n=MV13\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/button":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/icon-button":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.fa27ba61d.0_1677514889891_0.7306688237725829","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/snackbar","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0117cc08dcd83467df9517f22a916725778788d9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.311ab4d4a.0.tgz","fileCount":42,"integrity":"sha512-5QWYkLZCg+3qCW6ubKxGVwTF8HR+ojbweevR7MA2iKnZOgyIpJOZDbQ3q4RzviVHbyTOI+yVdOsQh4GjDvjEjw==","signatures":[{"sig":"MEYCIQDOFvNfbPbfnACaMq1E8D64+Gd6S6UWBRcVetK002OkdgIhAI3NZrFtBEYUoU7Xlu35UnT8VxmeXSuQwOABqyG7rd+x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N2hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZXQ//TpPE4hGGB/5h1hkQJM1w67m9TfgaJFZa2jNSZQZISEsq+1Ec\r\nBi/OXnyUMub6Du3N3wyZHpyb4R1Yd8K5wWXXGwyrjpIaFZidPb1TY1rsLrXk\r\nenTtZ4HrBNBMKs+mcGSpdHhMkOEiLa1RcCW+D6ZLU4elJHbuCSASCADgldH/\r\nZQ1pWOKwKApcvhzDzyNCXHCr1+fVGo5BvT7zeTo1+Mpj6DHFKIJTRbwtK5AT\r\nfMQRrNg00pfJbEZzd8dGtlMvlU3ldsDml7OR13Z7HwdXzDSTAxh6bYa6FZtM\r\nzDqmQffUbscjj9hLxxkIrKDGPYP+bGxzuwQ7nYRoBBYGeJ9lvcsailpOGBli\r\nYGGxLVp8BH3fVbg77NNwqKjNJk5KsNm4uD9hIbam8c4Hd2iWoJRPnyBRO+IG\r\n9x6Y5LmBxoR5q4rOcnZHOYHJUolc+mLUeBqBVsCOg0kvQEFR9HDcvVIjBrKy\r\nfVpB7IMvI/3dTO+jheU2yQ/0o4AIMZZ945/px5OENIEnRWIdZuGbu9v02p/L\r\nyMQv9NbyPI6eh/TlZ51sFPHtvtHG3MpOGjSZ1nfYjJpgqWD+gOUn/qRmAqH8\r\nu1qqgYyiQYK1zI0J1Dj/qxuEnDVkPNq7T5vJ957dHbt485CEBGv1Tbi84Iu+\r\nZNVCcKSUwv1GlTiGq7ZcKn2qnpVko1tJKmI=\r\n=KFR/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/button":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/icon-button":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.311ab4d4a.0_1677516192974_0.6580013658240751","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/snackbar","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24ec2e8db5128eb9a3f445936bece75753f47831","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5cb8e2174.0.tgz","fileCount":42,"integrity":"sha512-rxj96cPnaiw+griSrdqBMb243ION2DgtbIdY4iuN04Jcc+/Hx4UWvQdpAGZQrqMVCVDAbFhIgXM1D0QBBnZLAg==","signatures":[{"sig":"MEQCIHJxsGAUzGC6QxZTZjt3ciJp/bzoC9wjIGlINyt51B/UAiAUkoAHFmB6eDfhQNCD8FG1l9oRkLzkl1kSC4Sv2YHRrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/39LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC0Q/6AkO3EDIz/Bdhb/MnCIlOcdVQ2sn2O4cmOFUtcE3XvLpbV8mK\r\nbucwqH5N6A2zDv6mmdps8jX39TXlreYMKNXeHKAoBX5gkjXoltRuFYZCle6/\r\noXDnAaV/q+yFRzw5D9l0/I0wdrb9nh+iBLFgYqyCyW43eLJu0ipoA8cqCJll\r\nAGi+XtinPB1DLDd5Vim0zar5u92FuQujlpNVZQPYJBMQCELYZZJ/6uyTTtm8\r\nUCoUedkYV/LfVcB8pm35kpLWiJH8kbE2ngrAaFer9VWRgp63m43QnY79FKPb\r\nhiWe0+4xcVet6t+d5e/PN1XBzeNH/vracNuZhRvX70dBBPDJefeGQ2EYF67t\r\nJiPgVfCdKUhX/ZDKVDV1TjR6s+kDp6zDDEoMm+iKWDEGbu1w7BK4vgBRqoXk\r\nWrK+A8fXOQO9/pWQu/V+bl+7oANcWFHSCsL2dzQDfwYbB4aS4HWNy8yEvm8R\r\noAJufGExvNnaZ/v8XmfJbDCZrRnL2w6SgmMe/yDsceLbY7vHR2kPMgML47SZ\r\numP0iCHnnw9XG7M5Rx1ULH3A5c9bCABXHGuQS7XQXrmp8ImN0tHWSp3CqjMK\r\nHN0TdpUSwZkAtIGFbLOUzmBSgN6cjRUGIk2ayK3jaUZ14+PYQhlt/CHu7hjb\r\nDPLVBHUb30OIyI68x8zh25/itMZ4BqMwxSk=\r\n=XoYD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/button":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/icon-button":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5cb8e2174.0_1677688651360_0.9014120826442473","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/snackbar","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f32339937.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48f5e45c7a6f356b1cbfda1a96081314119e1efb","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f32339937.0.tgz","fileCount":42,"integrity":"sha512-TORQlP0yxcLKLGEeoogeZkQsQHY2L4kVivY+UcYPDLzdFQW2d5R3IWlvBqvhzs/rlB+E+I+Tk311mhRd2aC8gg==","signatures":[{"sig":"MEYCIQDH1r15zLLT9l9wzolGM6Deyj9cvKAztXb80ZnjP0sKUAIhAL3oSGILnfHWdN8ZyTRxVTVfbQB6bf4h8qhJinWTUmBp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgQGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkqxAAkWOyqV1fWLEfLP3j/jBv+HAq8KC5IGyAfHSUB1gQy6hbS4V1\r\nEbTS7DEiuzNITWmvwdedAvceo54j5a8gD7crAPA4elHbN1o4I3Y8t5waZ5hC\r\nmJigOmYV3+5Ea3Q4aaUDR6rLGjwkKMnuAfa/mNt+9Qq1+zkqj95oAulY0q8R\r\nizfHY3c/noNpR7rkxE7beay2PHZWl/COvq8T1gKv6c0uvZqnHMaICfTSo7+B\r\ndZ27ArOph+K8EG/fBTRclZVohCiwKO2DvdR0kKB44kcUIBd6DvNXY1ok7uIU\r\nJXX/qVpPUGSM0sU+CZ5ERWWyig1U5MOPiruk/q84GS/3C0V3ZmNlNzy4r/fn\r\nL46b58NLOmKQClJyC/fXOff8b40P4LKiyxminP+Zn0GColORczK1IHoFYjwV\r\n6j2+zsq0YP8SI5vsg/vAS6CCJAOYQ8143POtGHhgR4EvOLzFgOYxh4n/F/tX\r\nalKIRD3Kd8t9eEf6ZRAYbRY7LpzbvV7PqxU3mQ07UbAECOAQIKHkI6KnxFmo\r\nisdEswgRXrMphXmOX+rvJ97PSiw05J2FwcWOTGdfkJYclI5ntBc0IRTiW5Ok\r\nmrMjXPL+xdgzVvAgh/riHKgfYp29GG8OloF5nx0f6BT8qjvXYGhz43O5Ox4K\r\ngo952OL77LVf0/gsMavbH2h6he5ZIpDzaNw=\r\n=4YWk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/button":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/icon-button":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f32339937.0_1678115846626_0.3506205095210617","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/snackbar","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"243bfc618a2cb4027b1928ddf28024925e63f8b0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7644d63d5.0.tgz","fileCount":42,"integrity":"sha512-4R6bU6pZYQGrKYNh0ologdVOnf3AxYYsQhKm9TjHbKsWnWmnTZEn2/KBP8eJou9mPo7mxDRBQUI0xtEw7sLJVg==","signatures":[{"sig":"MEUCID3oLBkxrqy1QwLAHJLTn5LWM7blBYFyDcUBT3V/BjD+AiEAq0MpF2cK9E54kup/VAi0i+XSIuo7vAa58rK9x5/C/o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmk0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIdxAAlHtFj1Ht17+HFqbp9IR2s3LS0msodOApRLQ6afKdrbPCtopC\r\njVIMrihdAhWRPw7FrtijaOdub7VLhqdUUaH1MwtjywHU6WgheHjL8/I/W/oK\r\nsWfLCU7tgY22HhcGHA1lurX08R0WvhQsobmbZb8gads76NCjD0EliigypNzM\r\nHyX+FwqBX1xIaOnkzzapBsM6hhHmAPGJ5uzPRA5+jOCmzjsIZFKVuPG/fUAG\r\n01dWvoHwJT4QKAX6fLWBxTjuHsMTwNKeF+rTQYVhzTUFgd+n1kqJf6GyKm9K\r\nyn+M6gQybqIHLuqAQQ97YvTojFbGsxzOtwA+/bf+fEhDlG7ZhQDDzeX1MGB6\r\nRUxWNUOI5RDH267pIqR3Q6K7f29iLv+TpvPsqLsWV7lo8W7MxCSVpkGLGdiC\r\nBgNdDN8UM8tr7GYFdgXFbl3pWcUJuL09+vWYXnFlBWY+6IL5bQmZjUkdWb7K\r\n+5sHa9TLnS3C1PDEAZ/M236QvwlotV9w4j6O3eh3B7zCEZjC0XXi6+gqWuyR\r\nVRtyugLS1SeThJD3yIoWil3ywAuY0JnwZHIW1kKx2bG0jRxKJ4moQmUdqA8h\r\nTk6GJ6lXBhR5KSdWmrxV/CObQj/4+PUidrKJfXXHLtvVpxmJbzL9rGunoH80\r\nYkYjZEaNNpQtatWzW7kKuYi7nq65DWxkjWk=\r\n=qmjY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/button":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/icon-button":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7644d63d5.0_1678141748551_0.782103200198488","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/snackbar","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d96330c08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92dc2ae015c5b3e98857b1f8031cb0bb99700fa6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d96330c08.0.tgz","fileCount":42,"integrity":"sha512-2nqJUp2Je3+TEQGabqvTxKsNLKpRDpwALrZhAXOLTNvYbA0z/ViXbzvJMMI088Heb/zBd1Ca/qCuKHRrxEthOg==","signatures":[{"sig":"MEUCIQC9iyGWuqEKS61iNK6rBmEWpLHLVt+O1HM6ApH88BIgMwIgKM4XTeX/HEcaB+tVHviTVeEkLlU4a2yZKkCZT4RfyZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHTiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6GhAAom/CKjpOMoQd0ZVfj7wmHv3e8ktPKSqR1mtAuwZs7LHUszYy\r\nyEz0QN3iKWl2vcDSHgCHFoS2jjaaGjT/N9CIA8YihqxcY9k3ZOf158w8mN+w\r\nrwGKtzm26Q3nOAiQmdKIOx9+hnus//hqzTs1LJo3IegiYpVmg7C2J4WU4OCa\r\n4tGwNJh7NYVAXIuYp87BgzlvMAfd3DrUpQfH235i5Xlyf0iHkhf2lPvuTKeC\r\ncKxLD6DkPv8x3y3VONY9zjV/UokcRsNL+b7UVMDn2V7rId7XU/M75tqUIcOE\r\n+qlztdbdDXuCM51fSNwRXf46X4Og+EkcL/+ync/5VJmgZdUyEc6xHG38RakZ\r\nzurMIH3Q4OBDgIwifp2ZuHhQ+YfqZ9+xOSEnFrLpiXZ9ikp577IpfqWjMwEj\r\nN546yEQNpNzrp8/qcz9Xj0NADwTwDPcLzOm+jlU0NG8hmxEgNzlJ2niwhFEx\r\nBYpg6sFQvsq+AZ8NdMOr2lCLNUbI84rNGACCyhi3tQY8VzranfgOMOVKzx+2\r\nKGyxO3dt1+FmgyhcIVfBptT/dnwfG608imRJmaAjFJ3auRx9ohTtseqlIxkp\r\n4g1OJtsBiqCIMKmIoMp/6akZoTuM3xrp14uNOV71J62AF+8py0fPLDZOz5eu\r\npBT8yd3pTQxjd0dVcG5XsG6TymQrtEhxANA=\r\n=K5Uw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/button":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/icon-button":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d96330c08.0_1678275810687_0.5587832104700492","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/snackbar","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4d8ba9624bda6ac6ecbdd585f47bf5478425b82","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c99cae77c.0.tgz","fileCount":42,"integrity":"sha512-gk6HetFaw9d6vRuGGXKIt7ShOSqc/SDZbjdVPtEAaP7iaJTUwrzmmWku9MMPybJDdZKxYeJrZ0QM6fgVPzg09w==","signatures":[{"sig":"MEUCIQCDzBe9s5xucKnMiSGpYz7iuDo4mCUd4SDEAHIwxk4NLwIgRcAp+0jirQ4owu4mkQhZ3CDdtcJeUpxdsZ/XWhyLMs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR3iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyIg//cvw8ZVNssKFfkuCySZfBZBnX+XJ1ySX24eWFh/Rl6/u+4Xn9\r\nYUerw7c2VsSH5rH8mCN7qdxZzZnA+dZ5xrqrzsnohm5SCwwsXa6Pt9miegt8\r\nWlaXryrQPG41Yk+0uTBptxx/0F5+iLSfzFVw6F0nVCMXIcN9FQ3Wcm5+/mjG\r\nfk03thkj0ykj5W30yrU7iFiDGC6AhNxM8SYrF0bvxM99CcG5ADAUOqbBW1Gp\r\nDiSveDwX4+vrhRf+w73YnV1Y+3IbnkbgWC4ObGA17Azc2Wl4yVLYiuiJ4smN\r\nKIMws2wSKL/JDZbEnEv1bk2xMjd6PWYDATCUGKdGiq7zNzCK91W/RIbbW2yv\r\neQrPaLobmVqdedLef38JifstWh8LbYRwULOrlzvDidjRgXtfoV6iVuHDrcNa\r\nomJOrNWBdGseu32NbcnsUCBkKPXDtr4qUynWJGCoZnt+jqWcIow+0Zfq1pKi\r\nhNd6JiSvnYgJxZQ/TbCfxG9Xou6/eByAH6YcbcnJUiryrHaS4ZXC5yx5TgsG\r\nhqox62HgFqh2L+flB696hR3CnOl56Lk7VZRyq3XtZKkJZ2wO0CpkgkwfPdDE\r\nIqm0y0l3wH9jGo3O/KxeZEWmKYqc2zAvZdG9gyE7fPqlvqBxiXuYMDCcnel6\r\n4r0ELhoZ+neic1L9uIRwRUp6gFRVxv55Cwg=\r\n=eDh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/button":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/icon-button":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c99cae77c.0_1678319074070_0.025908311595828293","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/snackbar","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d564ad891b2cb7008533bb9427d9da3a8d788189","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6023b1cd3.0.tgz","fileCount":42,"integrity":"sha512-1MiZwDpTlOquv5iFWBp5qr2Qv1gF4jzEEyIgsGEJDWRRFn5IU2R4BEh2EFdO9QBGlYLpDC39PoPhAaTG5rsi5A==","signatures":[{"sig":"MEYCIQDchR4I3HAMbA9/npy1zXQDhkRmIZU0jOL9x79eJaYP+wIhAJ2rMbrVFyuP+qK2FvbgZ3LZfx6xlgErmCmjmscm/zhy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCezwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP1xAAmbqG9GKk7HnyOte+meWObHQ753U2MIlaev9UMjmH8ZsFjviX\r\nnK7T994osO8sR5d/3pSUObP6jZoevgDSzRTFoMtCNh5Wc56YgzqSRR73wBP/\r\n+rU4l3m6VCgB/Cgcm9INf1we6au53NeMD5uEnQHQSLuYN7ZhdwQ/D9GLaJ3b\r\ngpyuYUEDd4TrgVcIICUNrO38ALV0uTCrIEh37PjxV++w4QAyKSCjuEfvOJ85\r\npxW++SQg3WQNZ8Po0OLOPxRT06UWMbgadKVGMIZ/uaH2hqA+grdFNuhEzgar\r\nkJbIvWtPKGFyVihu68POqtjBQ7TwTekZAKyaM2tZY4R3RuPrOPuPly1BE9U2\r\n529fYc50ClgH0yC030dX66bLPQoRno8zws2rfWGo+HnPVg+UOA4fwIYrg5MJ\r\nlXq7wpUaUVNKqJ3cPKVPF/Tny89LB/I/kQJChi/A0WKP5EVpXCXYS6x8BJdD\r\nuNY4RV95eGhKBGz/x2orMEpwO6CpJO0txNl1q+4Vqm48z6OjusvrSV9lh05d\r\nQbEuzIgfv0OofYyFNNC4OM7LNT7/3LELeDw6V0o7W4DNXrNYO9ba6T91sSDh\r\n9BlwwVxgLMsyG4WnRMFc75OzZLqMyVjScsSg+dlOO3xN5KtqYwpZjZ5rVQXg\r\nMVpY2rZRrfwKDNWlNiZxGjPzo3PWj3MNfRk=\r\n=abq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/button":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/icon-button":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6023b1cd3.0_1678372079726_0.9696115836472221","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/snackbar","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.274610c77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a465e958e9c38ef1549b66fba88968d208fd3bc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.274610c77.0.tgz","fileCount":42,"integrity":"sha512-rkrytYWKYWgMs268KIfxxy/ql9/SmUsUxCZ7GHDVAbsidFckRwXaxpYcCt71+7L8cI92k7ypGe5sAgfKH8VfTQ==","signatures":[{"sig":"MEUCIQCThT/sQ+V6oO0eo1eaKgYfx3G4L25LlZJdeqWcVc3VZgIgeGMIcvnX9P7mklDEo3CTuYsUlyW7T4q08Ijm0BLgC00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfSRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpSw/9E77Xz4ge9HV4yiiNnsopAx63HB/73CodYbIUIWMDyW9bQ9Nw\r\naMXxE+QilJLb20EfMQVoacZVPhAz+9Do8MoHkSNsmdCb1wrxq7HZufY7qkGF\r\nyzrtxS/Z5ew/Xxc7hw8rX5p8LJSLJm5gVhELWTqaqBDNhl3w605wUuGsEQZc\r\nemhlk3I+8NNNu5Prmre8k7UkyOOqFirQR857/GhRn4FY7P9niUFQ3xBpvv/d\r\nNWfx6IKhrTAhwwsFaCiCPpolUde0dAOVF6yj91C13cbWsvFXLRQsYP72M68o\r\nSR9lcQT1it86JJxHNjSN69qk6n1PhsMMHlrVK5F3u9Ij2HD8ZoK7HhZBptWk\r\nQwmcV3qUREEwm2ZeGxUIDSkLE9uj4kN0GLBNbgtQdAJw7BgWTpeiQCRO7SUP\r\nw6OX/L1QwAn98U8s1PffwnrLuP0Dfp4fGvF4OGfHxeNpihFOMtCYO1bgatNo\r\nXYsDUv4N5IRWH7yUwr7j354pJJfRqlQpHhlZzoxw/LXoyD4/FsWMBDrdBqaK\r\n2OUSBVIglHFJqVyumG+iYWjIOe51SIAuPApdkEMN1asoN1p+Pcn7mbrDk7NC\r\nZrmrV+GqWp3C3/Jk1tG5nS/x23EBc2XUhBaVy+xvlCj5kAZRY/6L+V4n0Qn2\r\nt21GSwpVnk7XRp9wbC6KsLemmsebIJCf0QU=\r\n=XrbD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/button":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/icon-button":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.274610c77.0_1678374033366_0.897949034056515","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/snackbar","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a274583b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbd6985cee05776777d14cf35ae99e23fccbd39f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a274583b9.0.tgz","fileCount":42,"integrity":"sha512-XIvTCCbgq+VQM/fHTRwtKMtiY7RgZvYQzdbOXuMSga5Ox7P3kGdc8u4ce5cxUX4KOr0Pu3QqpnyPe8ucwtZ9Cw==","signatures":[{"sig":"MEYCIQDSWbNl79Esqh3i27GVDA4g9IJujmfkgcHXvjsPaeKODQIhANWQmkEY1NuD1P3nkB4ZX+VzXouUlo7XnkJkQfBhma9l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjlqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdIw/9FF3plsACVL9VsL9f8+KjoFbSakU5+4v5djABVp+VoxPTwGSi\r\nOQZR0FpEfJosqgPzAJ+zmB05WxFn4wDSho+QGbyRaBkYLLLBq3ePYmXEChhb\r\nqOzE8XcorI9W+d5CppKpswxnMV26Kx2m8QXjM8ajXfXsfPb8R8YsdaKCBnTC\r\n9t/XBiePWjY/5HuDYY8I7k0IVMSWUfppRkHHewXKgLjmMeIdMkO1NF4K00/t\r\nU8GYwW5Xr/EPnPGwxSFQQ1p42J8TNyDeH17pju6fIGSxWX5xZvMXj/RFcnYh\r\nO/1APlu00bVd1mYW3T3EJkNCc4w90D5nO08/utTAF/0QI+E/1gsLkUauGKF3\r\n9IG8UnVOVpMbBGEPHeBCbkNcydHpL8JXeDmdTR4pC0jgM9NjqoWDrOvQwnt4\r\nP3l3Ilk9m7KmgQU/g+7mUQL4VztxUehtDGIi9bP+o4y44Kxoo+OYidSbGkbu\r\nWjz8Z/Xx5Z3bqqMBuYBmuChSg5w294DQTMZaxMvBLZMhpA5zhlLV9CYONTPh\r\ntFIsK2Ev+IDtO6w5sV0nlV+/B1oXcUmwuKXQsn2QbYu/quoZ6kzwalAQ+u+r\r\nbFyoalCczj2hK4nfTL5vbmUAfH+WVtM9UZG8kKHsOZFpyjV+5XHVBU6yis20\r\ne9FkAqXboid4ugXP6mXDPOoMYJaI03DqJC4=\r\n=ChJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/button":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/icon-button":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a274583b9.0_1678391658508_0.9272999682694152","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/snackbar","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2939af5029dda29329c502087dd04e6279c9a9c8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.304a94e8b.0.tgz","fileCount":42,"integrity":"sha512-BbJb/qk6w7aPgBnqoEgJ+Iv0FSq9xdkRU+tCG4lXsCJLVno+k5QLQWMAs6N2M6YLjut9H5Qz5zc3Yo9T9KrIhA==","signatures":[{"sig":"MEUCIQDyyLe/9dQQlcXxbVfegXcg2K0jGi9nfJE9w4eXIuybCQIgDTXb/xZcQ5uSrqzDny1/KeZX3VTgY1mw+ozITpDLwfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkWuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPTg/9EaP4To0nFfzhyQz98qbBSR2ohRp9VP+55AJgfkws6I9cq5YG\r\ntrPXy2z9Ex0AVTnS8p2Ia6WFoE2DXydhc5e7c4Xxb79OZEswf66Tq9WILY8s\r\nVR7lqHREa85o9WKYXYfj/0dMAlt8/KCcE2YZ43BCTwAiMSqb02an9TQFGQAP\r\nSEj93A554fSFGGl/CQCoB7CqlwS6oNO+K9E4q13uxIeeK347Homw9YRZYOQl\r\n8CJncREq1RL9Ow293BlWKIsrnshLpipbkpj7R0Ks0m/kNUKGfLXfT++1dU6S\r\nANRzrJD8ONd0s7fT1E7A0yR82jxKOWYoCkVDMBfxSYwABliPi1AdLa/Mq+it\r\nbTHYYIgHG3aatv5J0mbbz0n1h/BO81/gz3KsVrTi4Lc5LGVmCt1sJB7ggPV3\r\np7lLhIRttfh6mIajt/MLCZESCMgIRMJQlVAhAIR6w8ePwkEAtZTgeWXWY9xR\r\njlJIwgtuQtLT2E78/TdFIWiA/6Dr0ZFlTiQFGLvHWBRJbsu9UAxXvfJt9diP\r\nn29hTB4jJosKHe8X+4BH1K2x3eIBV4Jg6WNJvTrwkZBbhDE9R9SxvgO13pz3\r\n/Bsk/LElwX97EufjxB7OpqCv5aBlsGhKaaazAoaHwhngwOLBTf90E0Wq9SNS\r\nOhSkGL4w8X61AA7bQvyuMho27l7KR8/xpHE=\r\n=EROP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/button":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/icon-button":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.304a94e8b.0_1678394798382_0.8165198403579572","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/snackbar","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6c265915c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b85848db2e0938b8fd35fbd8761af965faa9630b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6c265915c.0.tgz","fileCount":42,"integrity":"sha512-Y7zabIfodsMYOy+BtGS5oqKXSQBicaYKH2OEiE72hBT8gvWNugh+zT1aVfbTC39aJgNhHBGNsIkexqf1+C3ZbA==","signatures":[{"sig":"MEUCIGReKBhUwgPmXgtso5dD4u7BoovFg9uKOoY0v7Ap4ixsAiEAwdZA1DOSiVoFdEa3kO+S/17DaXrcvwNX8+Q1w7HD5KE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClRKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkgQ/9ELcj/FVEMkB4fcJA8iFWfFvtdpyQl+WGL7HH3vl3Isq/Tua3\r\nn9Zlb8g60+p6twR0JaOHG+HBcuH+A2xU/5s5kaBCLE81YRQYGz76tBJc1pcS\r\nz6NwO8WLwk8D+9Bfj7M7mv/hN9TXVg0XBEMXw9VFYWvVvSn4YKn6LzQsqV7B\r\nLH1JHEWktyuQvPFjha4OAnndfWjhFgy2mihUR0wFhVmQcptjkR1KFeK9H3is\r\n1aW5yiSWkxRR/MQXxEU2uMcxw+NCDQx6IhVQccCZesT/c4oZCycQb3czl3GK\r\nP5CVbDNBckfM7rjpfrSRA/8wt/OSJ03SG4Ep3j+fBHU++tjZYA9O5OFstQoT\r\nKe1Nwa58+UooXzPYG+hy+qLNaiA0ifMOjHKaPSvuRar0hcjV8XUQBuSRv/cP\r\ng/MKOorfQMu3EbOx2jQNf0uRVnOB5zVE6GF8h7HJixyU1gkD/Dltia4E5UHJ\r\n6IyFSWN6HB0jloc9cSn3YVFojaPxADWM+CK309w6q+uRxbmap0jZJh3YBkaN\r\niNyCa1+2AenKWdSleexyEm/d2yC3fDoKz49PooEoIlDCI4y3YCL45ehlcEYV\r\nxkZJWh9YzgJLXkAHW1B2RYuZX9GiYTwAXvR3smOOboyJyjuPgeDWZGGsKorG\r\n4lXxmd94RnkPFDh0A3gRrESpuTLkz3ZTfQ8=\r\n=rpN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/button":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/icon-button":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6c265915c.0_1678398538419_0.861398700238297","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/snackbar","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.de5224633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51730b06b5e6b41194efb857cac4af7b61a215f1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.de5224633.0.tgz","fileCount":42,"integrity":"sha512-YDEmUqo3JD0bFOrMnhR+awQZRzepIJ6kGYmMxcq7MD8aqbqhCachFNXIGw+7JIZzOtzplA8kgKFw4/D0c8AjFw==","signatures":[{"sig":"MEUCIQCUh7Z15xihcsxORqXjnYoVwuSgP6UAfQi5hG9qB4wqmAIgMJw94Gs4pnhwtoLRDfl3+Drs+RZfU6t1pJiIQSZsJ60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnJmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDnQ/+JJ0iJmnnarA5IycNIL1bhYmkv9lEmWQenF+MgUPwxcUKYVc3\r\nyM4ZsrwueBJ89Sw1cRqh3M63KesxA+nMYZid4hioqAeT+IRKBz89464h5Y8v\r\n9PKcWgcbtWmlE5C0OR3lo9mYV9M+3a3j+r0cWqAaHt2mDAETCBx/kev1xlc5\r\nu3IkuttOSGDdHEh9G05BaeFsfrqPyDdz0Y32PhBkEiy+Fgv+dWXlvtknNDkw\r\nHZUzx3VqnJAWmWIqo7RCJA/mKBLkb2FU8ASqzvDBUJwEQ7obJ49eqTfEW7k/\r\naB3eAzORTB5S0gCMPNTI6Z2NnrJEJuesS4ZYxdk3s2ldd3xp13mIiVWH0GCG\r\nwokCTrWY6hJ8QuwiY9Se5LWBVBtL3r2MMnCJtRDj29vZ/jlOC/GgH4lW0r/v\r\nqhPaI60KqhxzNaVCIgwcT6oS0bM24/3ScBi/ZTj2g1sboX3ouvj3dXsfmciX\r\nDrAoHhBDyFGVutTnZWAHUm4z87zHUQt97Afsq1YFTMUnoPbZKMWIHCCkWJgE\r\nmM0NeV3Zpnhe5ue5IQEIX/pgvCgNMuPvM0gqcDvUMgU9x7RM9KUOr6oNnB9H\r\nVFjx9mqioHHoOvVwPcizIjnRgKzfZXQrVCAgbdZz8cacjM6+sbiqn8yn52UP\r\n+xmastzPA31Ye9BIEk+Zu9imnbsHNElF4Cs=\r\n=64ZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/button":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/icon-button":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.de5224633.0_1678406246125_0.95909139695266","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/snackbar","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8879557e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e8be70e6939f23220bc0b469c953113bd05ec24","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8879557e6.0.tgz","fileCount":42,"integrity":"sha512-9XtYRTPuaWM33LeATWhoRVwLDWHhEC4hWHLLvj9dDmyXSekp4n6PAmj6xqZBUV6DSjcET1tDxO3GDh7d2pAu1Q==","signatures":[{"sig":"MEQCIB1iuV8QLxHY99O4RNXdEv4dFeLtTuvU1RBokDElYgcZAiBS15CzTHDUlbqvXZWaoOYOOsuIr+pRiU/zbuVMrKVJRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzofACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQiRAAixg1GbVyUKWJinVBnXfMorbGCkYncjSLcnwitPXk+kNkfsHF\r\nfP8OyJh5GJtfRenKSKmtIpMiYPQGYdljO9dZcxGaKkvlzJ38tc0CJ0BO5Ah3\r\nf/v0HJBdOeOHN0ZB/sqcCsveEN7EFfma7cR3b042n7ynlnxe+Anr4ZFdmuH7\r\naVsUErig01f6CjUgPR9FFnoGMPKdcPOujdtC5V360PuEWwCMM+9pg7z5f0Zl\r\ni88xsWZUcWUKAUGdfonoxw6pgJFyHj9URWNyFGpuEC9MkHo0an0IMoPS7TFS\r\nHcSK1+KN2eXGO4vIPfh0LdMmR+F9fN69MDsa2Wt7lfD6bHYeuzA1XmDhmti6\r\nTHf0Zpa0ak15UsXFu9O2wlgF6fApQqArf9xZKKwvwyJkahFh/Prs4Zurv0Cw\r\nmxqWLooEp3YA+6/c02UiBWF0uQzMADjkddswjLKvWw6r7kaMwlfC8JeUhEMq\r\ngH/O5Wk5rgPg86tKk3RCcUulayYeE3OvvSbL8IB/Fi0xRludl8Vvy0qlUgCI\r\nilfiCf4jslyP+SXtvAo6gv1jsCqAfpUoCi5Kys35Vx9n6GmQS4EbXF1UT5pD\r\nKmmuByGiaGJE7aT6WaTmDMX8WQcy01W+wXciqIFp119Iy9k5GeWIbE8tyXbc\r\nZ41i95v413Hiunx/gxjhtQhzqyxG13piFcM=\r\n=VVq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/button":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/icon-button":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8879557e6.0_1678457374749_0.8442831481589261","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/snackbar","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.23073a303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f50cd38598cbe1da03e5f9b8cde28717b2dfb208","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.23073a303.0.tgz","fileCount":42,"integrity":"sha512-aAOnzbXI9jWwKOCOEu3XBn/PsbAaJrvodMceMPfkGnjH7IGiVPptO3daZ6dSoO5kd1XhD9fNS6UOloD88J9qaQ==","signatures":[{"sig":"MEUCIAtQc5+cyvD3O+PsGiiez+VuEEOPwi1i+mqNNLRmL6faAiEA3bEDMyOnPII02NoDg5ZEwNlgiiaBpPPtrFAkYyipLg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzvJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOmg//UzsqNMylI+IgPjP9EPMNRLSgpToAkmL6B7LaUlpGdHWBuSvv\r\nXiKM24NtU/09KJIUWuVLfqSW8ldSypu3U6MIeaqm/BZmlacTSBg5Ae9VcHTV\r\nYaeqoRPv+rTMfLdmX4sDKn5ReyIzAbi/q+G2uZ5JIfEhhOxN8zl7g/jvRoSf\r\nZfFTpLyKoO4rSH/DDrEzBSaCwXm5Z5UYyhzrlTvk4skpFpkVvYggcT9dl/pG\r\nHhYNHth2vIIuDzybXIyCnogoii0gRqsZNfQeV9+1GD3HfP/DLD5STBwO4hP2\r\ny/4BkBMO1MFtDjiCfGZARLbxzYWz1jAdDOfH0/nZqE1ynYICwiFLwP88UtkT\r\npU/OlTUZzAISNtKf0vgOeukWbaLqd/OnpBVahKbYQSptkpKgKxD4JCUNPsyA\r\n5H2ZPUHkNzJFjhwAsonlW8OdsySVevXDnHyDulB89LWdBedtMvvU/XxVbyix\r\nAmb52xGUaV5t8gko7pX2OCgx9e6k0wQRKUNVYqbnoikfu5pDQkAFmBaBRGuf\r\nxlK/fpWlHrG/DDjJ8xj8bicZpONeAFM223qGzbyW+WguxA5s2KwQEbB5LbLS\r\nErOD7PrlB+ZLLnDDyCPos0qipg7lyTLa7g3C492kj9SnlldxI47zf+ABUOHD\r\n6ydlIEzmlvlJBa+IIpL22iogCVmCRkFO5tY=\r\n=tAOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/button":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/icon-button":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.23073a303.0_1678457801546_0.7698553385218398","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/snackbar","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cfca0c9f91b0eb5efcd866d18a66953556b10ac","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.51c7d4014.0.tgz","fileCount":42,"integrity":"sha512-hE+s9am33ta2iyGajY7hBcNXuzIpIW1tWMqUbvaiP5FGRXsKwUXaIUhpE1CFNLtPfrhXiZC5iiC5CWZY8+h7bw==","signatures":[{"sig":"MEUCIAnSGsVEBxzB3Y55KsUN8a17skBh3m/223gult6Yz5pbAiEA+LCfJLr2/qQ/ykcuHdiF6spkYvrxsjqAhANqJurcxAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC1+EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzVA/+J6AvH6i3xL8hpkKA94eAYSVabKozacCaobvsRIJWqICrLCuK\r\nnrhqXhbPOj48EbPIrDSTvAwnDm0YW3+orDsbgS2o657k38bIesf4J4kPIswj\r\nTjL50mEzOhrnsUxOx3SLUpaoSogtcIMo/Jkq0eLTuFIvqWG3CGcmEW0Dx0JJ\r\nhKzVpyw15o0PmCbf87sE/qEhjNRpPtHu82unYakznnpTkBqPzLKCn9vN8lwY\r\nsQkVWHCyl6pQd3bDz0tPk3c9vJ8MvwlbWuh4uJrzLPa85ZwWfFLfKgnGy4RX\r\nK+WOOP9+j9QPRsiu+lhJhkcALIiN2125ObSC+//HV3R/MaCEgopPfiN9dWPM\r\nH7jdK7E0hJbdlp4vLV8aDwJ8Q3kcmG4y6hN2C66IZmYTTU4saxgFSNGW9qLZ\r\n0Z4Ft4hsKoRrre2X1ptfmwMFszSUeHVpETzSNMSNVRgFczNg60kJk5j0gbM5\r\n6lN9IDT30WHLdK7lY6dxwtH/KVwZIzZartgOczGg4N9C7aJv7K22dnTDkEEa\r\nsOBKXiYGarAJdQMQQKs+RW7rDfxxYmqVLu6erEQzW579vwwHgMySqjd2FBux\r\ntAWZZ5OTJaIhq3bl5cXJ1uHOCoUhgS5li8No6tcCk1E8jqGGSy5dkBHrgHa/\r\nEvUi/9+qhRIpuSGCJzPUOrDj2jsPRuh3K18=\r\n=4RE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/button":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/icon-button":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.51c7d4014.0_1678466948361_0.37836528841845185","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/snackbar","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3098400ef5ad04909d7ef41298ef975a3747dd5c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1175a5be0.0.tgz","fileCount":42,"integrity":"sha512-a+pu4PxhJRPD5/GsZVmBTEKiFTOBdkZtzJcGK4CDARgZGxzp873DYdu/P7iB/SseJ6PmxQyrK7RhOgiXlL44xg==","signatures":[{"sig":"MEUCIDAXJKl3lR2nEPby6F5ZYcKNai1uWSWLSbUKKsHWKtsjAiEA4pMAW0mLuYHH/rLREUsg+2lmHWxwRFrCV/ZJFWTXYcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5fkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGTA//TO3YI0pih/B2l9QxVpHEtNZ/Dpyf7lOeyhecG8OHJIbPlIe3\r\nYVTTKFJBUg/lDbjNnv9ngC3DIDe6M0mdrF+NgD7wJfpUAnKd9jzu6wm1o5JI\r\nSi22SpyRli/alQeOOoTInP1vbfM1CS8EMKURFEofxeYEzyZ2XrThUcgJe5H/\r\n2qgVV1KIeIJluMnJCCKARRrTaBl83FnTZyoCp3HVwam84pdz5H8mrgRwd5I4\r\nvB7kpusdPumYiLb6Ql5k0qFnBGAdeUFpVJXfWZyhfu5U/jF8FRx2Sr63rZ3R\r\neJKg4IJxrpBZNvAS3cWQunGGGJiZFj7mhVDSsWetUbabsXyBMaZoAWTI2eFC\r\nfle3YcUG1W6+GgJvutWpzNWB1QVnRGGIWniQDoVAZ1j7cxPmYQeR4V53o+3t\r\ntx9p6phS0xtRY7KcnGHItyF3M70aK5rL4IlOzRoshBbxay7W6GxgSJ2rY3z6\r\nmR1DeTglqdqVudK4sP0Jaor/z9tnc9K79jzRnXxwnQboiqdJMuSyx37povea\r\n+uyLqz47+vN39SalxVgL1pnnTDEofQR3Q3D7PcnqSydesVkL6UWiPbdpUabW\r\nHWX57d1scuGhKmDrl7Mh5fbYUDhU3zlhCWRni1przrDxYrUluqE4ogwT63E4\r\nlpzEMP02mDjJ+zjFt+qdA2hoi6ZXPlrMnTE=\r\n=7Sz5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/button":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/icon-button":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1175a5be0.0_1678481380087_0.7816473972423332","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/snackbar","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"823cbd3d82325175e942de36fcc0b6804c01e2f3","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7adf3af80.0.tgz","fileCount":42,"integrity":"sha512-+CzJrkWc6RZZ+G+rS/C9N2lUEq175n/VsuC6VEJDmNJAwODdUH/z/+NiCLnfWWeozu5Y1OO0U0ruJXpZ5dVQyQ==","signatures":[{"sig":"MEQCIB7k+zVgPdi19PtDCOsRjpIOzxekM+m5tPHIyl3359XXAiBg0cNu6x84FqoUTpByEfKADWP7WD0YvukN9yHMrV7dyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9jKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE6A/9GPbcbhqLZFNpq30NeyvClISHGUeXl15oESfFj5Ftt+hEmq2u\r\nQ+E7FkrkC9uzFBaDMcGCdEWVj1scWJg3OTqQCMJPnrXPzkoItsrBNtXSryzW\r\nRWxGR4/gT0ZyPJQgIPH78wNntN4y8S0GbKfWemiQzNU6oJjDLxaprmQRpcpa\r\noTVykjG7IJsC+0rG8OExQj3x7cCSGzL6g21uC4EWnYowRHQ3awxCFWrU2j2M\r\nsuNpMzhdIzK13BSNJ5KNxnwVmfc0B5L/9kjqpCNB9FjcVFvlmAny2Dr3oqfp\r\nmoSwVs/GC0jD1HqoiKO5XdYnEePeJf0lZctpCjIt/SmV/sm9ZiyszM5QGnYS\r\n/eEkOd1gnGu+p3oe8l0thJ5UrEI5ogrP6Y4KY0DrqizhnclIQnnyqShYELcT\r\ny86f0s1+BBeGXOR9W7E8uS0+pnkd0RYlTzE42gj0ywL2ApNpbHl27J7YKG24\r\nQqzZGxrUJYpz861Ax7tXT5e7BEkF8UNhUBQh5mggxewI/jQROwzFhAeC9JO9\r\nnaqP8f8GE+m2b2511HbxUV2GwXK9JltI6HznM8AueJj0jq0euITEDwd+Mh5P\r\nHWAhDiWhMZIpr4p6UeVDenbOo+8gczuVt5ucE1wJRdsJ9urJdp+tdBEsXu7F\r\nzWdhwUf/Kf0EIO5TNwjcDOVCc1qYs9do0Ks=\r\n=zH8o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/button":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/icon-button":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7adf3af80.0_1678497994697_0.9969536220392927","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/snackbar","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.82554d770.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6e986284f70428b765cb783bb97109aa34e8673","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.82554d770.0.tgz","fileCount":42,"integrity":"sha512-XhwTgtrxtzWXpaEQCgklhd5gb1hUcY7AHwCUOnv3+NL1YSARWlEymAiNGAoann6USRwfpW2rvdbhbofrVbQTLQ==","signatures":[{"sig":"MEQCIDOSoJPrkuE2ZDKgI+POze8a459YENE8yNDpNCU2RWyhAiAYQSwoZm5Z9gtJzJncH5JmVjQjLi4OXNr98zcVRGJ/qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9urACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvvA/+MdvQdNOjYNz5qCtQ8NcTuoTm8EvxW/tZ3QWnD79pTXnJnuoj\r\npd0xOU+YU0toJmfmeYvGt8EiXvsg2YwaIgZ3hb8yDT1hfqxvxCTiefz6MTbx\r\n/8+/hA3s80sccHzd/Vi7VyOxGyruy32TYotDb/uDwEagJN33pGOfqHJzaUHc\r\nRwEBqsYCgStUsbT+OI7M/Pe4g6CVWq99pLx+lGcpc95pQpPJbHimFQlr/Cyy\r\nTY0Aj/rY6utm5e5QTBxpzqbQekum8DwPNR6OQgyzsvjZTyVO8HZgnr+LpwD1\r\nUnoL4iPLHkTeEtpbdsY9HkRKmPPQEasNMLI0A6nEIeaqyrwsvkgntk9TOKS7\r\nzF0ZSDKSEhWa/BogXlCJmKCJd03WolGW2ANMTqIlulXo0q2hHwLzeBP1IPBv\r\njd/r3vs1mlce+JCCnwkfq6gkzOYp6suL/v10df8s9C5sv20McJfBZF3NrCp/\r\nB8ArKp7cZe97nOXYTNIMsrif3qrr0SlXBc2t6iIeXWr5Nmm+Oem07aS/C0b5\r\nHuEBygrDrdAjgMND8qJ9zml9rvYxXoH4i1q0hHCzmeGNo57T2gBH19zHr1ZZ\r\nOQDkBosXvsXseY7wcVEeif1Z5DPGzvLEcp6fb85VwERXfHXtQxzN5PIVkXYc\r\nqzjmD7Fzj0atmoBybmY4XG2H3pg/2U6qQW8=\r\n=SaCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/button":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/icon-button":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.82554d770.0_1678498730897_0.4496814691664095","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/snackbar","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14b2fcacfdee12eaf4523c13ae71cde644eb5f93","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.93fc524b7.0.tgz","fileCount":42,"integrity":"sha512-t+S4KG7ljVENNP02Ntl9oETszBXrKsKFyhWoVVS/4kKrfMgpblX8NtbKPspW8c+RYmoKpO5bQbua2QXZHBKiHQ==","signatures":[{"sig":"MEUCIQCXxY/4WnfuI1Ka/I0hM995pYe4spcgGsrLD0MRrl70yAIgENWWdIIkxJMC1XAsba8mbFN/+du6NbB4p0ljypg7ubI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuGJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp84w//aY5KWYYCgGo0A0Kd5N/cvxBXaexQNkKjRlgJrLMmEb8av76c\r\nTabUn8MWBNoaffywd8H7qpzjdgPTHY+ty/l11dUZLdKKBbKKq9SCemjzlsXO\r\nh5A7R15HklwYX9v3x3+oeLqLpkuRq17+Y41ER/vRPE/A9cF33TbV4ULxIiFD\r\n0vNmY7t1vxL0vwO2p+wPG/QRUa2qSPu/GWjmvFz5XmS8wv9jC51+J8aopEnq\r\nqLg2u3sV2DrfPnx8pv70/R3HDh2UX/lyWfY6wj1QBt6uVejfCdtDYG9Pj3P+\r\nHEnb1iI6BzERP1jactgpzyGv7t7IKZymC/irrL1j0yEU437QnHEk2hqli0/r\r\n3LKXBhMOp7b4tFCF+QWmVnYsgas4n+dny7zh7cQNDWqOZhn2IeWAGZyjNDdn\r\nRqb0Wm35YP+Up7S6/SqIlpZoUo3CPCwB8b+NV8bxRHE7qkFNgJBuJCAHMCSv\r\nRstLXa0Qm/xpbDOQeKDIk62ExK3Pmxe/HAkjnklBrjECy4ln+V2TT79u/07K\r\nShamapme8YzbLsoZgM75bLg24DOQXoqqWMmGvitxZJDko94Y7d/jn1uz9dsb\r\n6h/Iy//PcXAQrBF4ZVSdZKHKL7fzAbf0xeXh8vi9VmdcXKLb9YT+BYNPK8UV\r\njYnjBeEHdWtdIutI2OJfCmBdPrH96bzMpFE=\r\n=yGeH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/button":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/icon-button":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.93fc524b7.0_1678696840799_0.04618631017330843","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/snackbar","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f6a69879d73874af4f60216666e6e4ea5a2585e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.50be0fbae.0.tgz","fileCount":42,"integrity":"sha512-GOexVv+1mcOKNg61Gzu/KCnvtX58NvZ71jbF1A47QqSThzkkf5difwslQlU3hGJj4ExvN06qrnffRMivY+bw4A==","signatures":[{"sig":"MEYCIQDjzfHN1sgs5WXMfTjt7aPcskTzkVBBDZsSIuuDpCq7TwIhAMsfkZdPaC0+aNRQYH3H4hsrmxGYQKjwjEfqcRihYEQN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2FQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpzg/+I3FKf0pYgoww38Nzg/UNIl53UWG2gJ/vop9WXCGni/SJPcbe\r\n1ciVUWzUeuuQR/JQuEG5K+k7JSiGBu9+BDS3d9ip9+mhOh6Z2hLBC+Z5zzx6\r\nlyjkwvHwTSlGNPkAQuR73ZAp9S+nMLWHjRV7LZYo2uUSmEXCy5xP0XFLnYdw\r\n3rQR9QMbJC/gGVmeHh/c08YtFKCN6bQA0sK2hZpQebj5WIhfZvlSAd7nLeKR\r\nEJGLKyNIOqa6aUKsXuxcuAWlSAuMEJ4gTxUlh6QqSAKtoBVk4h2zKWw6wtA3\r\nQsU716sXXumx2mRHxRwEnmOIOzx9rcnSboKdMQCHknPB4/PqWJbVqPib/IqZ\r\n0fv/L69VuNggGyXpSHqI6KHU8xylpcMXDr+9n56tvMJXoxRkQWGdfHcUCXL+\r\n0y2cEYmiHNn3l15h2OMRl7hKbpnvqktwsqR56ib3RXYRwDqUYZ3MCHjOgJ+N\r\nODz9TQno031t0GY8MG55c2DwWw5h5MaWefakJ36gwKYnNbAUPyxBZnybcbyA\r\nd3dhXehdh55YISqil9uW8o5z/7TiSHB5OILXFHnIf2CvqROryW2UB2PrphW6\r\nhecuH1Rf2t4LkRBOxz9DIjrXHxQrXkgAiBbB7aQmp0RWQWasCufve4JjTX/Q\r\n0jm9eIgDyqfZ5e/6r5g+ebdNDojNNfoqRWM=\r\n=Lpir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/button":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/icon-button":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.50be0fbae.0_1678729552078_0.5094246650538361","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/snackbar","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bedd765ef6f2134195be26f77fbfc8f9e659f7e0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":42,"integrity":"sha512-hCzNDOC4yZqVMgzFj9y03ONkafaHViQKZ81VOPTNNTB2xFZtL3Xfm3Ve3H2SjCAb0j95FgBlyk8RP7bM2t/k9A==","signatures":[{"sig":"MEYCIQCZYEcbDoej2ieQOTKaLG/ooLZGdD9NtvLXKVrqN+qDiAIhALgQ00PjOUTt9bzdK27gGlNMVaWGjOAOLtsF2v5S6XQI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2IeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKQA/9GU7q9uKYAtAyn4h7xzQpgZJpcxAt3Z97xxxKKjHY0AVVvcGX\r\n7XDi/qKSaHSZzMcMqfc+MrNRAGlEo6r2/tlvfBouGPR/vhh5aozXT0wiDHRw\r\nDM8MDjqmix11mnaW1b5UZZZtcbP/M2wjkLJ5kr3uCLlBEB2mZoriY+8fUQ7M\r\n0hcn1zToZpBteaz2UFmhLk+BaTX8cKA72gNC6juL8/TM9YC5SHKgf6r3B7Dl\r\nkPu9ytw0vU4xFUM7PVGlO7gZ8Zu7lbkCYeRtemxhQsL8nIYV6c2IrmfYMnGt\r\niDUu22Xu5FgMYZKnQMI0q8RgxbQTSku31+ReQtVujlRa1gb+LLP4MiK3Qyda\r\nbMR6KY93ZJ7wcdSsk6rpClsatWaSGNpxq+vc177xxVQFQcxsM2pAeAU0zM+z\r\nH/rfUr7ztmZvd7FtLE5iNZneYdgf1FvfQF6oyibnh3EGnb64f+DTnhCnGuOk\r\n3nU1vXHZEtrZEMUtSxRFPyOPeqdlg8W+sQTYCfeBlE9MUOaj5hq84ES3DBx4\r\nmegD/VqSNiHZTtJik+5XJDixMh6mqygZsNWjabcNkcqrQ9sO/5RoLbt8qFDs\r\nA+0kCodFvssjDVYxnjmRPzWGm1AoFo83xQ/pKlnfdOsa2Ec9crmE4kITPrp3\r\nm14iHtiSDAY1JrIIkg/L1rM98oQf63kvoE8=\r\n=OuVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/button":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/icon-button":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6b5ffccd9.0_1678729757837_0.9772658030220127","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/snackbar","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"187cb1ae3b3da9a5ca7decc6a6e1a1a52a4a8f13","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1c8013f4e.0.tgz","fileCount":42,"integrity":"sha512-Nau4kgTV2lLVD93r+9PwRunCAl5M0SyrVmLtyXT7hja/0P+BW/yL5NDwYLrR3FmtAjmwu5JVoqAuOSx825Zg6g==","signatures":[{"sig":"MEYCIQCyDfPtbKCDlv5oc0AQAK2AOyA7a9qlf0a2GWKoSPh1ggIhALAaE57otiKeuSktw47DEE0y8v93jUQkPLax3imIJZ9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2W0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0oA//Rfc7vJVryc5x5kc5Kt51oBhOijRVYHiAcg1gP7afEYYSF/i4\r\ncQrHs4+Khhyo+Pl8UnrZ8c0vtoWtUQQzNw0mvuIW4irh78aBF51zZb87M17E\r\ny8OSD2c0J6ubgXLNhJd6dj92GlBp+bZH1YFt5b5Ktj0L6x8+cNlwHImqEgiH\r\nA2aVC1Lj3jrtGlhqmjRxsxOE5WnBJ6+wyIoofswmfuSgFX8ljwx9Sw4jYgLU\r\nFLDyMfTEtx2waI726nzI5D2zyZghcqUFxm1FEplczWa+E7EXVkxSf9cm66qx\r\ntm2HiU5py3WGiuvHgw1a4JpC8wh2jOINRCJBj7YybNesjhW0mouF7YmdvJ79\r\n1CbXWdhigbWFhJBOrmfD6zf2DV0ffahCoyk9vlUmCeHGfGxAxroNFpF3vXL+\r\nH6bviW2WrZppHvw43ehd+rMVcQEyDCm3l/BjbaOAaJ5fjEPDBCBfHDKSHudB\r\n4B0qGhyosv2S2gUGEYMqOzb8wgNaSDj9lFCCAvcXthWfbWBqiP9FaHvEIV1k\r\nGHCc+sI3E6u9Be7BesC+I8N8Bo6wDJP/GgM9QWyeyuL4KM7h44VgajpHFpsQ\r\nYXQzWRdsGqhD54Tz7iyla0DkM1GlMwXjfJU0qrGXgWuxjbWoQRyaQBhhxO8e\r\nXkmXF/22UmAD7LSsYYUunG6/OcN9oe0DOx8=\r\n=sqX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/button":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/icon-button":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1c8013f4e.0_1678730676356_0.3078528726410332","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/snackbar","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.112715df5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ad568f7cba2c2d178a541917cbc99ef886fad16","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.112715df5.0.tgz","fileCount":42,"integrity":"sha512-6d14gapRVTZmuDSwqfgmKjrchm7EOcXXZTlDnTU8l5lcx40phDbr03K7oIq6ZxjpgUERCmRuEittN9PFlAXpwg==","signatures":[{"sig":"MEQCIHydgna+/RKfy5ZtLQITsHv1zwhAhmfOuoLmGN+QwZRPAiBBdojVUoOlcr62+XxKQ0SkZ11MmGT6ZTLJN67vbS/QsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD247ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTJg//dLxI57N5wIxgdZuvNnpbrtL3nIraw2KFIHqXW2uzzczVpeJb\r\n+4sdlEeTCGTL9+jkph4dOEmapfG9vGrxIwpwzVNnYlkpfxAIkz12zjGu7Aji\r\nE2VWFX7rIiLehaTCjIJSikJlI/NemheFIyvip4MA18/gn12jxYRZbl21BLLX\r\neufJycwXbbkEweD2XQP22qUBcDzWWfqKeJg9HKs93G45ukfBWEk9de4GrEBe\r\nL9QnexfGJH114bEhEtuD1oBeN35tvnAnkb4c3txr1fwVAhiB0JQMZVn+KhYW\r\n3UZyhGdJsJtwQJEsKh3KJbi9wGVEU+YASY1z4kbB6RYY9Kpdf8YDOc1GSrQH\r\n+hfcL3+yYHmF9XXScDEaYOPITEK675Fa+LXmGTh2l23oRnVhUA6Fam2/LdH0\r\nk/3mlHKReGMRU5mRqB+MgXOdzX2F6VWY2fdl5oUvJ8ad/R0gJYi0ZcnjWEiC\r\n2GLn4WHol2tW6tFG/R/zWl7OyK6I/NP/hZfa0Yt14F4+zjp9g8mcqIVW59Xq\r\nO+h4OVApgHbm0AimOVVb6buaYORzmqLlM/E684go8br+P/u0Rg1bLmj3trCu\r\nofVdAm2OUfoALA7h1VOb9FEhWMoYdG83xDlBVxGoDyTC3wiEr+g6nBcxUziQ\r\n4KKgmbPCPxExe9E7k5fhP+oHCAYGLR0Oh5E=\r\n=Mxkg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/button":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/icon-button":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.112715df5.0_1678732859025_0.17731098882340945","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/snackbar","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d250911f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fae2a3cb0dadafdf14f015a4b3452145ef591445","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d250911f2.0.tgz","fileCount":42,"integrity":"sha512-KiyrnaYi8VHP3iRRMan4cZtTrNAIoK4bu4caCNncqgUlTEu5VPbYWREuPrBfTdImW/2POAblNxdccFqRELebcQ==","signatures":[{"sig":"MEYCIQCt9/yNfJpYmEfNrlDhJrq+tsrCfd+FhDWBndELV4ZpagIhALykRHaTFxfMcnQFz5F6OU9PkRNNXnuUcK59sc/nQdeY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3p+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5tg//YdiVk1KKRZR+r6uwtI9JMsKQ+CSjZuhCWKtiHo5Zt4h1RJ7T\r\no7kN4wg3dbXcv4qWwDUnODvThjpFdTJovx5liwCYoelRxRv85BhU6XrZ4I95\r\nJfT0/5nHiDlCrlomECJUO93oBjFSoEGrTvDRzHReKJXNhy21u9gSJyJ+0maA\r\ny/hbMgkLJQoYxbjBjO5nPVXvqyc7/fQ4gzG0A1n/kISV9OFh8MKATfUBqDVG\r\nslTuqFaYRq8jaqnhHW2qBctocorChMXncmSf8WyS+B50j+k9RSbMJtzJDs5y\r\nYS0Mw5xej71g5m9asJeGwBT0+BCn4M4QbjvEBYifT5ro/+U94JLRFiA+l8jF\r\naXx41Ne+Ovmv0l+Ibm/ks0A7KeZX3D9ALXkRvYoeaPU933qJOB6mqV8xHnBi\r\nBm9Bw0KNOQn/kTrkcQtR0ZARpN6GEF6X19hVcGKXKM4g/thGYK6cgIme747g\r\n+By1DtqEknp3OMB7MdK/l4raHKkNKy1m6gp0O39frhMbiHR5wFqrXnY8oak2\r\nVcBvux49qEnCVYdynS0/dtnfCugii5Ef/iK+GSDZxb/zhzJaAyFeNDEYRalQ\r\ndbuNjdLJpyL5XVox6voZoHN9aOXiFHYVoKsZwqSsW7xwcbnA5TreMlGRIagl\r\nmwtscGN6aCv/0VEU+56hELi77+b0Typgwpo=\r\n=Zoo/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/button":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/icon-button":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d250911f2.0_1678735998342_0.12114570255414248","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/snackbar","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60cf018c71daff8918ebfcd4e71bf491492c47da","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7cd925c12.0.tgz","fileCount":42,"integrity":"sha512-ulocjT/2ywUAv+ntQyVxi6JZBwrnV5eMrmHLNJLtNNLLWDyI8q7OS6GGKY2XY72NUsbiB7aEFyr8iSq2osDqrw==","signatures":[{"sig":"MEYCIQCl5laPqsMNL52LRPIAzFYrVKVQWQVvgwS4V+alUoQV2AIhAJQtP5gQ5V9wz5uqYvrNSfbvx29Ef8Ia4dxWQZMuoC3C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3xEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwXg/+MWNV8RFOiE5dqUQUoKRf6CCTucDHXKsAIZ0N/rKAX30miSpE\r\nf7STwYJ7PdWBH9jC8YNElvAAeOdHNjdMhkngHUbUACHY81kdrUVQu0jWgig+\r\nnDQGSMkYsIPhVTsagYIQZHJRs44Y+5EF4tsJtnNpi43l+bW00c86+HgkTyFT\r\nAyvUF/2xEFlfTUcfWfC/EvxbdFktRuzOfPUeLjB/OalKlUTlAG3EdPjYvexB\r\nwcTsQ8C4w6CRBy9unpJ7cBgvpsHHpX9rVR8BxV/wqn+nKLJdsnebArkWXrkS\r\nBpw5BB9vCxlpIKmR82aeXuP/8InIHEeeV75jFrocntPJ+SkgRwYPMaZr2jX2\r\n32YFILiNXNQ4vULEAcArfBWI3+cyLaqldXlqzvYqpTK/rTT2ykuoWcYxbeIL\r\nB/WEaZRdLTFVfgZN7RaWQVZ4cdfZ5h1xOjp8gl1Lgvw6Xeq2qygImYKf2aPD\r\ntsM49861dN0GF6pEJHsaP7WfbCLT41lV4dd2XKrmETbmtq4t93ED3vqz9Zky\r\ngMHr5m3jYgb+7NMwxuIFoaLjgFEZ7nQGzjl7Zhg+dl/ZfBEFdPs0jFt+mqyQ\r\niQUaSBVyvnFcrVE9Q+fBG7qsQutuEpKN+pqmASqLwAu1rcTA8fpOOojwYIsS\r\nGLc1t1rjry+PRKTVMOVdL4kOonvfxwH1bL8=\r\n=+DNU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/button":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/icon-button":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7cd925c12.0_1678736452158_0.6497281762092624","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/snackbar","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dc68b253a2cca9b58f137d7ad242651aa2f056b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b2ddacf73.0.tgz","fileCount":42,"integrity":"sha512-bjoyMNKVKTMKqZE47fxnJGIhdWLjN4j+lunKJGgpdJrUwL7NlXggmeOVhITYDn62cYfamD42HdZRHqgIrBfl+w==","signatures":[{"sig":"MEUCIHFrzHZFtsWak00h59rcDgqfstrs2XYwqIwif6PHLVaBAiEA28AT+IQ2kWHwo++U1NyzmS9Njf8ZAcbHfJe1NMLPzMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD30/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxlQ//UXwP05obYs/RIaFQpcqSzBooxKcx6fUhVUGAy3ZMpYifxNFP\r\ny6NdZlIc+Ddc2+yusiUf0HT+g0/Ixp+CAoJM9zcC5Mpmw0oue6JbbLTOh9ke\r\nAxFG/k28u5R94+lfuaOBocScsGm2tMdk5SrI/JYYMpL8ebUBpaheq/SeeVpS\r\n/++XMjSDUeCq3o1Gqs0H4CKktBQb7KK8vOPtS9RjcNS1AXkFyKxwZodDsiHM\r\niibhqTorD8A66+IAPgpogD1WXoQT1Gta+KHvFCfX3GielQwA52qzY83EOiY8\r\nzceF5MY8gUPRDi7n85c5uFbrX+BltHvhe4m/2j7Wa3CKelaH7o63Kn+gPgVD\r\nK6/6P61Bje3XtadyS7kVEu0TZZc1RoxTWiGeXlhVVrUosXI8rX1lhtC0GjZr\r\nRT3+FmVEPMKnduhUBjqFH07agJXoW4oV2WtOtRCn+zIgPqFz08s5cuJeRpsc\r\nyNdbfDT0c2cfGQVj3uWuVkRUz9ANWTG+JKAlNyJnSNy+y7GkUa6FzKWr4ppG\r\ntkD35M0heWbeSosxKlyLIoNicczBbbqhiaBkqlVQmKO5vZ4ihr18z8YYNvxI\r\nodtHNv0vVYVW6JC8GYBgvHkznI86iK4+dVtcHSfRXR23FA3IzW7g73sNaQfv\r\nyinvfkpUqjhV8R8ntMye4/PsMCY8UR/hPiU=\r\n=jRrw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/button":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/icon-button":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b2ddacf73.0_1678736703348_0.8551467420638241","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/snackbar","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd9102023df967e5fc5278828f8e934ccf86c856","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.989ae2ecc.0.tgz","fileCount":42,"integrity":"sha512-jsmaFoMfXG+/5w6nSgmo7SCaf/xISNCRxhXpqCbaDdldEbhZqWAm8spBzzDg+XE0+49/m94NN+oFm3pYNBpTlw==","signatures":[{"sig":"MEYCIQDHIah+bK0YOUXMoh4gXhG6Gq8gxcGv7WtBLQcxCzjDmQIhANqoltbGgf5TJo6bMgVHZXdMJRroSE3aTTe87yJPCqy3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD39xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7mg//UAsobAiwxnhGszcJvl8LfqWIy3UVt+oZSAbCH89lX6LEhCXZ\r\nK9IUsZAtUodPQUf/LfKkQL9wyaPI5i5237M9TRVn8s2+IZD/WHYLRtXpW4ja\r\n3a1qXENVt1Egm7w3SxZC/Y+BbBzXrZA/8O/Rj7iUSe7VuSjlCyxFnRslBlxV\r\nAXRGY21PM7vucx8ClpPpBByWgTy/icMAMQ+Psf9VCjnei2SqYTl+sMOsTGV0\r\nLE3LUuRiU7KqxTZwt9SubSV9Iv4fUg9WcxkKuwSscP/ApWab6ibJSGLySX2l\r\n5geDT7CGsnoDiIVUGqHZgQJWppU6RomuaWo1bMVXlSyaKxhkTCdG/aWuyimW\r\n3I+61YM8mVmDEP+DONhcO0NfYnMFwDHvJNdywHKLjw7Q1GYfkGctE4LXXyiw\r\n2a/2n9gfxFC00Wsfa5qFSHM/nRaBj0Q67/1HFQ+JN1hxdXu6dLMeM4JPnA0Y\r\npirEBQSW8Ed+cXPPGZRLwivErzU1xfDJ/lR0ySurtutpjThPi9CoutItfDOJ\r\n6bP4af/2anctXxZ4WyVsK5WFibtJgR7uB3+v/123dzLtCh/cWKulX+AGDcWM\r\nq0K5aMhQzqnSiyCWNB8pIZXi7uLzYDUSyEk6mGjE9ePc0DsI07BgjpRIFMsB\r\noO5+1Rnc5eV0wtJOkfAWYVsWwBNYm4K15e8=\r\n=pMVi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/button":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/icon-button":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.989ae2ecc.0_1678737265046_0.29372826844647215","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/snackbar","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.89c66483a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1302da861297ac6666a8c587ae78b1d2e28d8ed9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.89c66483a.0.tgz","fileCount":42,"integrity":"sha512-6gCkJjcbz61szY93Y8+46oE6pK0T8JNTeBHCW7+6xj421nJiiR3tX3c8ApMcmq4S6L40uk3lGESmwba0iBMVnQ==","signatures":[{"sig":"MEYCIQDWAk1U7CZYRc6tYjkyxsV3iBbBmZEeLLpL8sTueHAj3QIhAIrgJbImXlmCewLJ0s5cuPK3xjs0NQu1ojLs1PEuwYYj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4T8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0XQ/+KUecF5IEcHARmOOlpMvRBCuRVYtjBrdWt6K3Pco4J2Ujuniw\r\nnwZw8uPR7xsmFpNwc7FWXo+wlox+ErKSgcKs9mu3SM61SfRgkOnK5T8hIPKt\r\nZjy3t3D0tfJPmllA89+6fpfSa9rHoW+QdwPd9eB45YHNM5urLG+qsHrFFx/4\r\nAGdJytyWpuedJSkSLUIg+A1OfF5i/YaIarS3SxHkDvS5uDBINFG4Fk1uU4+P\r\nrUvOLra5mj0BzlmMulNZvxE6r85e4bWzyB5jntk6+4Ykykx71WWDrCzcZ6Am\r\nYNQM4EhkyUw7og5/26fAAIBaf4inEfoWborMgjJLp/1kkk0yMsWQGxdqRG7P\r\nhbtrUkNe36sPI2rqlOZZA3GawHdvN4XA3gqw8tJej8qIAvEF2K/tUojNN5QN\r\nF9uJEgEtNFNUv3lz52zOBqmgASzJwUcpai3guOmYcDMwvqz3woyDVuMcXzSk\r\naZJzjZfuDENuPem9Rfe2iHf37Jq262LmTvz/VU2Ap+9lcInGsPhqSBO7xUht\r\nhdyp+NeVKJega0Vo99Vn8UFN+b4nLUQSPO0jM0cuSh/PU/Z0EGMPz+bdQcpj\r\nI1ttBpGFaWhcrtgufCN+w2l2WgO5Et4hWro0DX5H5+iyVeCZdihVNcWcaID2\r\nnmi0GsPDIBH9H7qmLJB3E6jnYyoXaWw70FY=\r\n=592x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/button":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/icon-button":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.89c66483a.0_1678738684493_0.663424574009714","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/snackbar","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63fabd14113f45273e8f3deef1a48531e996fbc1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6a85742c2.0.tgz","fileCount":42,"integrity":"sha512-5zY4V43NT/aeiPWF3dKJ78tgPrmMhmTfwUTSbLO1/lS8n9c7PLU8PsRhEsBUZtm4BoWKVq7ZQo2Bj4Vy2sIhZA==","signatures":[{"sig":"MEYCIQC4YnJHHWghMjqGqZGWKdNZXIxaCdZ2HN1nFAdKcafq4wIhAL4IGpbSM0Th4z/S/Rha2nitlWMfaP7qPZPkuY9/lnFq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+CbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpOg/9HKyzTL3bqbVB/hIvVTRWo84RzJPprjTywmHVa9CRjzGWNdm2\r\nz164TQUN4kVaXuAtIhdHNnke3BYzSXICU4JLCvQobG9XQuQ/qaZ4GMgKLY36\r\nNx18QLK1yei8/UjjieEIf9k5yQPO10ErYyka4x7OQid3W589wXoAJXs8VAGl\r\nhaYPqptcP0+zLAStAd2MYavcWmPZE7CO7r85uWz9uD9EhFwEL+OP4j2Ikn5P\r\n2dOeEqOs7mnHb3AGd1QNe7EOZD1C8gtcuvwNWtrcSGV9XvMDneiewfFRtzJY\r\nDWmcvwV9XOEQkzbCyYwI/OPO1JdvxfHDnO8jKfh04+RI+X1hJYbAQsefaJ0t\r\nYfEy0CftYo03euzk2WjSc9jUZMiUXxxVKrDijkejN/JyBAG8ohE3wR0MlFuc\r\n/4Rym+KrlWhn49/Qjon70G2TcHNLgpJ/tqrNXaFU8n7X9z+6RBosDvKPsZDo\r\nhLdQ7Z1AAtW2jeiliugeMsj/OTguw5TsxX8ODP2D5BPJotHLqqGkQComh2CY\r\nxtN6cwWyXfOkM2Wqe6qlLrGXsXrnRfSUzR4SIBERImhHAezuWgrEn6Et92eX\r\nfCt/mc83003I5kjtGVbZlVNDNTzAPS0MwEfE+rAErZH1328NOAsWaUD57yNq\r\njUGe7lD4P9tQn0rLKGOF9OtVy+LKf3uaXGA=\r\n=9Vkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/button":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/icon-button":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6a85742c2.0_1678762139623_0.06174601859658724","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/snackbar","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78b38c42d4fbc62273edd3bdd507d859232e15ba","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":42,"integrity":"sha512-W5MgQc6T422gc+glrrbLCzNKavWEUmNmi8feoD8oDrbdh9GYXuOdY7YCUDE+B/osp6J8tuiTWjwuiVOnLRmJzw==","signatures":[{"sig":"MEYCIQD6NeTm+oPsUdsixswflEE2AWuvqX362yhphzkiaDmG8AIhANqEAzTMCqEYXAqa6BrHdBFMlBH27VV5VXQkglHRLBSM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELp6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYjA/+J6pnZg36Kiwo+h9NP1EzpoveJ18iUICpEnZ1sQ8T1wndF1ac\r\nmlIZ1xKrdh4AevtBy5BM+rxPgJObO9T8DuE2pdErSxyRA1BAG97L+utHhxzi\r\ngsaPB8jFx0IOujR+ps3TsOz6xCQm10/jJNvsJNAVFLpzw4UmzkfVVBvO4vNu\r\n0N4ybvFzmbjCx42jTpF09Z2qgGVCRjPc1Fj4qpT9BimyboGL+swqYjERwaA9\r\noz/1218FC+g47/nNoFLqtLFTOYmTvtGZT916DrNqpgM+oTukhxTXVZIjvEoQ\r\ngLNo3yURroyVA+Lg8nDUFF8Bk8ztxPHmDyMsTBWJgKYtB/vpvZ7K0H5Fk03G\r\niint+2YgMfzWWx2ZmYllIdZiaaNI66CB/KVWHNlw3SAdS/pZQ3fIksVpDAH9\r\najh1bf1t86y48YyXMxHdtyu2PW6kf777tn+GXyOIyOhFFS6giaFsvmZJfAxP\r\noRu/CP6lC45sQl/Zy1VIfOXN41+S3R1/+HUuf+08uIoIHKRtrzhbAl89S09T\r\nENq7TN4teLpihuJej6S/ESzVgIQptUt0BKT9DTcV2w5Cb8Wh0o/CoYQi/P+9\r\nV6kb2HKhfcylL/vXfKNgdofWdEv6U14nU05KYrrvxhrDG59D3fiXquv/zE+W\r\nVCEz9NNoCmtByYX3suD6evqyfoujJwZay4g=\r\n=u1KG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/button":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/icon-button":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.bb6cd78d5.0_1678817913788_0.22546226443743267","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/snackbar","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed6f0239f1e64f12e8a629cd95923a98412b7354","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5f94aa37d.0.tgz","fileCount":42,"integrity":"sha512-Qnks+ocHdB8tW/TnDtgZK1VUD6xZxPdQUg1WE7OPnuT9ry/EiQJSOk9z2F+n8RDKDJwzlN9a4f40GoZVwCi3Qw==","signatures":[{"sig":"MEQCIGUWnRxUWh6NZhXLvo4xkc7YvGvuvyBG2izEdtLQEnM0AiBhy9dczKnOi+RwN3wnktjhlYqf75Gjt5hxULw9Xvq2GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELs8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFIw/+PGSV/Xxj1qi2E7qM4Rf+xJfLABCjiLc2GXaZHkmWbflS8dP3\r\nXN+bZpH6p1eXu2+ZjkCa4eK9MMnw+dju/UVrUOnXCNpRpPjVELfaTw/OfobE\r\nJcluU1IlghvuDid3dEgLBFLXDmsN5PhSHoC0kNfo3cAQAdOAiqr4CN/6O3wt\r\nZ3qbX5pg17xlF77d+A5vEFqDRlrkqUwZPP32gNB3y49GMQr0Z175ptse6NJH\r\ndMfWg7xqshhxmU6OAkk5weKKOoq2mam/shQEUM+06N7/XF9kq3DV0b+4JUO2\r\ntucPk0kGiRSnCjQi8OQZqUx0sxs6y1DBpXW7jm95s+iUzj+ZyxM6spzUB7Jx\r\nlWIKC1kabe5LieTzdIfVM2kiKRd2Md+apLIZBGZxZ8nePIqQzy8Uu1oK21t3\r\nFZy+mF27P0ivOs+Yaesqgdak+njmGyNy4v3LgMn8bnW2g3MHBNzJhctSoYa/\r\nbPtpuaetFYEZk+owr1T+xR3CLfkxoOitH/v0Z7lMyIZYTgFWIO/rhZXGOdRU\r\nSo4q4cr17MqIX5efX/19Q0IQP4HgTT3lyxUgNubVNSljVclO5LfEAt2ix0XE\r\nTUeLXy5cNuRZAp7ozL9Tnz5EG2IstC1gxgbyO0NQzzOZnVQsAcSF6MGQo+4y\r\nC6+M7GfTScPtDgmkAi+WQOMlNW/MlaFfHUY=\r\n=7BS8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/button":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/icon-button":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5f94aa37d.0_1678818107986_0.5150050280766669","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/snackbar","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1bd317240.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"547574d15690fcf1669510f596e7acd2dec908ae","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1bd317240.0.tgz","fileCount":42,"integrity":"sha512-sMDpefsB2KrGFU6vhsitZcLAynAR//kOUr40qfO8IGqMcIpQg5v9bLgVLPjfDT/okVhujrZ7o/+582agvGsiMw==","signatures":[{"sig":"MEQCICh3YCmMgQcfs8vDmpEAmurInJlxGLeedXlY3bOGnbpQAiBRL0KpYy8+5cH3txiDil8X6h+rf0JdBa8aRehc9FEJDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI1Q//QMpinfuuIYG8oOcZ+GWe0ZqlStHlqZPYA9Pq8KNxS13U1ddw\r\naz9wpQm0Rs61uWqGetqvpGcIfxrsIfETmm4syR/79QPssjCmI8dVO+JYTgZs\r\ng9PVJj6E/dsmU93HZhmnwLfs0hU7z4rr9liHmRLBGFn7XxZSjovPbh2u3sq8\r\nZKuOyKqXlVhodpVp/iZD2w2H+nA7fMXQUxJD/yDRjeR+dnzUD6vd9EJggq9K\r\nB9gQ/jApDrICzS81qHID3UdU4GS0vtDr3leWLy6H/UUa4SnFJLqDV+LrnUHL\r\nHnOYCjvgBEe5Ia+mM3h3SYvPhZ3jJcfJdHBEOCczGpKWL2cvD4TGKrqKwGwY\r\n/NCsspjZOJXv4Il+onfa9CJUkMF7Dg+N0gopvatGVj4XstO8LXIFXMC6V+Rx\r\n/X51NdfL6tOL9q5Q0oBtj3+coXSiOEWrsxjyUEAalsSilAfi0ql6gRPqFK+3\r\nbZYYOcJaTU+T4gOsnZw3Wc1wo2M8woANIHZeSnz+Ez7fQY5YNbMECulm+sbU\r\nzqW+bt35eCc95trKl3eWrTjkL4/DzHJUxf6SWkXKxONJgiiTyTzrKW0JShpn\r\nALo1vsqY181L/GRvohmaEt5aQR+TU321Bpw+CuMwyVUAgbiJiB987r8VFU/z\r\n92WV5VznFAtnmk0XnWgrev3J+G0EMebIK+M=\r\n=eTO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/button":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/icon-button":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1bd317240.0_1678818342240_0.16486934910535278","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/snackbar","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d00c376e3ec8fe05173ac1addadc1f68272d4c4d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d441d2a2a.0.tgz","fileCount":42,"integrity":"sha512-QmboZzAs7f8Bm91iFCqNwhG4UljSoQ7TMZvRodoywe9L/EsJHR9Cfg6K5aPxYW9NVWvPJLBrsP3NY9AReDSdPg==","signatures":[{"sig":"MEUCIQCZ37YhMm0f9DlJQfVsmdB32D09lEkXzX9MFzPbxHDNDQIgRhShhffSpD1bd7A5tZa4GOo54q80CL3T00Ckv6OuZv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTvg/9G/2Gt5iiR/ruiUNW/RtAbQ0m9jtJ9iq+JX/KT/NffN+JoUc+\r\nXabS69XxCiGmXSsgDopQL4P+HewHtbmDcYBakQwiXNs2y8qcpSRlvaRDT8iM\r\nRXFe9gQ7eXL56aaSYSE0//yQ0s2auz3iSSQhGHEziRndcqLcA083YCp/A+q0\r\nYRmasJlJNgN0AAhDcmq29okOL17pREpNjSlKcB7yCrx7QPYS2J7hL7l+ED4v\r\nQA36t3wUdo8WUstJM+1eC46KGdFAGmz8azc3vJ4FOMwgjOBE+brBpfcETTkW\r\nJknA5C9rFT/5kBdk2GQRt3WDGblJzAW63nhZyP1tY3CvtTT6Au+ntD6T4ZoL\r\nVuEkoBJV80k8KVMshMtHfuwiNCxkYG23xHatXoCLYzbAENi46mOnogZDQTsn\r\n+lPyXdPyexmjJ4l6rHd7yxdE1ntnElwcLlDxIrfcaa2AoeYbvcQ2ubrY4rAI\r\n2IAeG2MG0BKudEoZB5roJfCjRqUzpJd9G1t6hje1s5HSuhyXlKSKKRO5o2LD\r\nIE3zo5z5v+dDq6Kmn7880n//iZiGGaZGmSgQ7vSqc31bwUeuJPLl4gHfNxcF\r\nFIJI4fJrl8iao9B4RDdf73ohZg8K+ceyzKnrA2RhYnV5drfrOR4mhyLJtQvA\r\nh0aCAzGc4jtgvjqcFxvxy+n0+yeYUOfcuHs=\r\n=fiAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/button":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/icon-button":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d441d2a2a.0_1678818507489_0.08495919270660313","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/snackbar","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e16d5383e40529e29a570160eb11c8ed244c88a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.fff4066c6.0.tgz","fileCount":42,"integrity":"sha512-rQoG74eYbH5oxFcPIC2Aw4T6R7bWhf27Zs+gr9n2H1NvowQFGT9Kl1H6JojB0C4NYyRIRqykPRBtWlLc9RWavQ==","signatures":[{"sig":"MEQCICGrjVdAAUl7V0goFg/KGPnQSqa2n8b/aJZUs6dpmua6AiBPDOZZ+Co7tqfJwakASKhJi7RpVH2rmYsj0XJzwpUOeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkcQ/+N1JbP0dpDXfMC+an5WYg4iQWQFcGgdk4+OOsQShRczfvbypo\r\ns+0g8X8D6obw0k4apn8JXrdrSRUo6H0QdldqnDultke5sxCLfWsezIzlRHAA\r\nFAjaj0sqj7bTtO5S0KhIbvEq0hNEUWoP/4jF2Gt4JD607x3cw0jO/u7n9nDM\r\niCMRpsZTsFMqhtkODA3awB0SeQ1tFxjmlPSK2WC0RmeKjRCA+mgrEHDunPco\r\n68Vn9mspxsJ9/g0PW70ngz9P6VF7qYSdFDIsThjiMUiDwd7Gdbag96Gq9N2k\r\n/Bq5GocXXhnZ1HfJoN3Iya2bYjWyFr11pxrEVOM6pR+VZyXfAjEwk8HlL/NV\r\nsjdIGfUT63NvY+FfNZrHHjCk4XAtixccIesOBAwvzJPtdjc0cGTvg6Ou0cbt\r\n6cKgvrPfNWy3iqFBMP7pEyAMsNKpNfaUAaOjyyxdgBCfThfd4wcii9SDBcze\r\n6UmXy77a8jln6NQk/RDrne5C42o0cR73piGMZxfqYu/yVGS95dGk7YiqLoMM\r\nKL6/nXkpgrzbdjxfXzljn+C7bl2kpvL9+Q0U3j2CDBxvj5iLEaseIzEp4U50\r\nhhLzkXSwVFAle3Bvenfun/qrjtccMyw3v4hg0mw4PNy4rO2VDUJ5BHw9WcyI\r\no6ca46QO44eARNKoUJnIu4bRNPHDdienrIM=\r\n=dR+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/button":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/icon-button":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.fff4066c6.0_1678818547245_0.7039538706343158","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/snackbar","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.87809c710.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dbae42bd0c62e8a4dc25e6560859ce4449c15c8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.87809c710.0.tgz","fileCount":42,"integrity":"sha512-4d9iT4dc4g0DHP5ojD4W+erSCkYNL1FKOYihN8xSWIvENWXrwV0GTXCmC9YxrF/elo+xWXWJA/Q/Qj6WcyKXww==","signatures":[{"sig":"MEYCIQDxW+HnHnO6ruoVO8htkXXFoxJokjroFWo2uEz6YkOr+gIhAN4g+nVeSe9Uokj7ud3MwvsAzT2rQ5dxUHfKiPcoQodp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMCxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvLA/+O3mZwW4sD2Fls+xAJnKwBvRe2ijPDp8oWOBEEjH38B/rwmtG\r\ndFvbIe1oYaE0G6ae6CIpOyhYhYeeTifdCudnjFcsO3Xc+wIzK37brV+5f9aK\r\nii8Hb6/pwhivDDOU50GAAZazoWcFjUh66eG/iCiofW8wol3r/PKtNgIq3C0F\r\nPbfXniCB7yMTeyvKAP7HxPw/yV3DFtjH61bz/48nyPkakqxE8140/D1i9v+0\r\nGYZY3kSTYYJkz/FmqEmHP5dnchEhq9Tic8b0U6spUEgiuV4SzImGaqU7wMLs\r\nIPNYM+CjIvKZk4lg6DTYd63W59/7xEY+O3qDxgz7mxhSCDCtGIhW7sdTYpkr\r\nV5Odg5fE6G+kzvlAEHLh9r46kHxtVKP5CejkMqINubz9HQLwjTSQhauYKj65\r\nGLdlt3lhOLayZqZrYueZGPgjEGqYeiiyacq16V36qXlw7tSPQEbOxNdzZmTk\r\nO5tDqPLAAMovnodq8f9Dvqy4nFvtz8GkBupGykgyHBi1sO+4OINDyh1A7eMB\r\nEmsMPaQBs3b/0XcmlSyKLCnYVkgYzIt7s84Xr96eCpgGyrKLtrAtrUmsar+E\r\ni8yTxqWHkoNkioUlPUQmEnHatL/6cAxtobPuTA3LM1cpUSV4jxWe327j3Dko\r\nbDx6SuepogHKMmOzYy9uIgwbsEDSii6uavc=\r\n=DXiA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/button":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/icon-button":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.87809c710.0_1678819505555_0.39859609982679345","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/snackbar","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.48d30012d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c73e6049aeea8a5388eb079f7b04c1e0e72f803","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.48d30012d.0.tgz","fileCount":42,"integrity":"sha512-0hHiD8dYWUCl/B2EUh3Mi5DeYheeaJLzM8V2omnRib8lnukeeq2dGEzz5l4rZZYer3b+rY4AEiXoqaoC0x14OA==","signatures":[{"sig":"MEQCIFQKWX5YQUYx+s4Y23st9ljC0lw1pSbY8KRYFWZLbrC9AiAfCrhg01oLEQdixMh8bKDYMZEJwU5x38W+bsQZCxVAKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMG1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlWA/9FxbdtkOfgqN8tq/lkgVdJz+G65pmONtrNcODTPG+eOaNbSh+\r\nh0eUgMJH0ffOEIQvuR0dJoKm5IqPrGFaonQBwXHgdDdyq81vvC6UGhqwHXwW\r\n3ZXK/08vWdNVPDzt8CvwBj4Ag2TX0RvP46nVKaUdTmgApXpo2JTK48BNNgs0\r\n2QiOjS8Hl94RwJ2C6g6nveEnWwd5LgXx4XELG0PyGB6sm9E6eBy6KMBAw8M9\r\nAYfnyE8lDDn7lHhjUyQxeErLJukJn98hKCcdbX2JDQ5r8Q/3TPtr00HBUVAS\r\nu5kdn7LTNkfzkGQEDljPgPWWYJFEjNtBe1ZvilgOokFgToLpyxYHIRoMpCxr\r\nsGhMqYpBYNqlzNEYxHv0k9bgFLXQjoTgaNfDuqmcRxpKyWLXzGuxAaQm/3nm\r\nG/atdhf/kOrnyy1uhgvR2kMYI51uE5YWTSaRz9h3S/YDn7EyWn45gJgbqlKY\r\nayMhz2mLmUfRpYE8EDUQp5tPxwSIZP1NcI5oO8ags7fR560hRW7ire8KAxHG\r\nqFn5vFrUGAa1p7e1Jo6dKFmoKiD6uvu99+bJissxGE4mfTJq5OfDq/p4o8ue\r\nZ2XIrtCGxkf+0rvMwZkMH4/nI+Z1bLQW2XRH19lgyRLgSGlTOAJXpVukUMBG\r\n4vPx67j//VRd/iaMpR1Tz8lz67gJev0y4qY=\r\n=rDI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/button":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/icon-button":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.48d30012d.0_1678819765076_0.19701052281319908","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/snackbar","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ec9785006522a3a2d9f9e025ade07a45e9b08d9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.419b23cc6.0.tgz","fileCount":42,"integrity":"sha512-8DSb1LhocPpmaJXCDU0DzEFAl1q5Yh5I32PBTnQg08c6AEii2+EqUQhuh+p0dZUi12aSmTCCIRiJZSTxhE32jA==","signatures":[{"sig":"MEUCIQDE56Oq17bS1SvED8vGDi+zQMkv4IazyvIaoRF/YgDCgQIgMq7EOhBN4W12bmcCAtL9YUl/a8YlVCNVXDWfe2PFWx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMRNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/7A//ergxczVa2VHWv+qCdfEXEtIaO9pHE6oU+ETBFvL3Xq8/KDoR\r\nwcGr17zrQebKL04b5ELe87jcwChgr1dvBFKHYPPJ6zqvnfVQuTNoEfQPNUrS\r\nWWoEMn1rHiSAVIIxC7Di7/jwr7+35ZLThXPOQ8RzVvoKuPxYJKPicml82ywb\r\ncVI9K6g9YhXJFV4S2GbSXNRskt5SjKCb9v/4N7/iuDSOxSGt3i0Tz3WnNiNP\r\n2kBS6G8WbH/TE5dq+e4+ZzwnYcvhuvlQGySedAn88sr682FLJYezY6nAfZ77\r\nZvSB5WCupJPR85SIEBhom7/uj1X8i4Z6mFPnoO33rHIPXoZGOTZuz+vm0bJT\r\nVJD56FbvVpFO+luofoGgNeuYD8uBwN3iGWlabHjoU4XA0thytLaYfSPXJovG\r\nr31zcoSyyhiWjNVYm3q7lEAxXLcuX+H1jY8AJ9vTGTJxepKKUTzVrt24CIDj\r\nb4BV97vdqK4JYA0HGEUiP4wGh4Zb7g0o8i+mH1lfSFonzoatxSD504FwcLER\r\nq41+q6BIvTbSkDG3li+NPuvFkm7dYSYubcZVBZ9tyW1RYOtwOPLZ8XPK/Ct6\r\nZhiL8HSuMt372d9NgXNirCSj7kTNvF7k/b0Jvrsx5Umk9AfFxnWU7OkL0fWP\r\nTpFl4PAhqcOsV5McmJYf01E/rNDVxMIzoSo=\r\n=e1KZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/button":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/icon-button":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.419b23cc6.0_1678820429662_0.5832066228747605","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/snackbar","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4c78fe8c47202b8119cb66766272f3bca98143a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.bf86521f4.0.tgz","fileCount":42,"integrity":"sha512-ZR+fyPqtOtgW+wDPpRt07kcecdZygn24UrrbLwg0xS6fcv6iLE6ZIuVX8zqLtLVyqthvGVKqqFiTURggyN48Xg==","signatures":[{"sig":"MEUCIDf2fU4CBynw7aPj6SZT3v73ceuXPNHVlvnNvpHLC97FAiEAlrudhtpuQe27FHRzwfQ880ls00pqTmNpFztgbG1ZMCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQABACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9bxAAl0a2HDfb4CIDxVrJSfKgS3EFns5P6OOpy2CnrjdojCW5M0Au\r\n60/HiwWxMknPWk2owJeb2G2JIC2Lz+r0exToMwgdgXZ0Rp5EKGblMXov4mF9\r\nasrV1Tnp9VuULp2gdtJ5GvS6jhrxJ3A19rg5WIZbCugjfVG9hqhBuoDK+XEs\r\ndNUUPbqlDTCgmcGqeSulrEAhJqYAoGA+1NcC7Cpl897LHSQaZBDvWWu4Wn1P\r\nq0hAR5Vd9NwK54iMEeUnh7gAw6VdjjTtgNWKuCp4mhbqLd6eWnUFun82yfic\r\nWMFSkzds7vw/PgvIbjhkyB93ILXqg+tUrChMMFVyOZl18rE34lcEBFEI6uVv\r\nUz2CNZjdh2PtrN36qrKo8Zzh9BeqhlC8wtO5u9jz4QPYQxZkxNWVANb/5wTE\r\nN2JJevv1KO7wapCj1q7OhLhv7J2cyUinDazJLIDHg4fuJGj3L6OTUoN3QkYn\r\nChO8bqm6G/1t790AU5izs3myoMUu/QRy4nAEKB45m28153GkCYNzzGRwWMGW\r\n/Yhs8ZpiLkubotd9ZJJmfuRSpgfvZiSJa/MAf/gOfmuyA7cXG6HEL3wx8Egr\r\nnrOft23imWP6MdGGAXBaNwpFa6CRHmJf+z4YX2SocyZgnweBmYhijUGX++pp\r\nSGo2nBTRbYWsD96TZPpvE8hfEz7iZ3sDbM8=\r\n=BI6F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/button":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/icon-button":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.bf86521f4.0_1678835712755_0.2952985231564076","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/snackbar","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed536a1283c0f5d4670bc006435f37266366e9f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.11f3d280e.0.tgz","fileCount":42,"integrity":"sha512-IrxAasSaiihjfZnJf6sVYLlwW7HnbJdwrRQcl9q+W5u75F0sq+epIR7K1HwlZ7EyUqy+hSgfZuNB/8/0fveLBA==","signatures":[{"sig":"MEQCIC9XRPGxdsXSAjwCJggYSmndmWXgS76TR0elePsrCrERAiBOxk0rckNIicWtWWRI50MmieXJB/0Cng2n937ybi2qyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ2IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlPA//R4nD33lkev271Gqp9+ZI3R/0c83emFnEn3vmrBcpMoXkfIec\r\ndIOqQEbqczIshH2tzrauZOR/PAfP0ROYkjUf+o5rULeGCPFqkZDOs5ywOPnh\r\nBfjHu2JULH1jPOhNbBNp77sZEUValckgspcZ5BZu88lK6SKAW3DiFfqdnsbf\r\nglTOQO9uOsDx2lxNTp+7w1EgSVQ0xEcourY1NflGLJ+cZtc4JmsezgumqExr\r\nOW1bLnolihVRnYOFK8zJG3M7EEokudy5GZH6Sv/AI/Rk3reEgn0QIPZ2gc+0\r\nweqaSXh14VZO+yzaBKQm0K43Vwfgdx31EPg22gt5zdAYNMNaaLlC/cHlD5HZ\r\nQg9WhlOJvytOBiDMwPWnw72XoHxAcdjeJwNehK70EcVhXVbO88dRIK0LKfya\r\n0R7aVRl4DtEVlObbys/DcJ+4lA/8UMHxqij+DzP98AMNlC3Gfm8YAB7AFiw3\r\nijePoltFNEwI/UJTCo1bt+idKkLuSH/63ZSKPuDrRRDbnIm+PgoqyEqb61Qt\r\nDQAP2cixWGcQBqP81eB4mC97n7X2BlbgGWGZtZTsmuQFhD/ixX6B316EtydV\r\n2MIaJ7bIqco67zq4u9S8ra85dw5Dig3lmk558/6Wn24iSrxOrbqWpr8pzcW0\r\nhotyAYXmjKN/ieIOyx7p5wHSkdbR3fp2wWI=\r\n=Y/uS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/button":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/icon-button":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.11f3d280e.0_1678839176225_0.35521872054049153","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/snackbar","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b281a409a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cd2e6ab745fe14fa00aef3a8fe33c29ba28aada","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b281a409a.0.tgz","fileCount":42,"integrity":"sha512-P5G3EZdxzBRVGMFSoQOlI3BS15G0s5fGmdCQ1tuRV+lxyAxREBfng0V79RMfE4fR3Wiv4Rtz4reor1FHP16RcA==","signatures":[{"sig":"MEUCIA2mCwNGGZI5TyctknWDLI2sJLIds8wWzc7Zu0ZpVx8pAiEAvjgBrpKadF/Xzzo4lseD7HOLqvF+dDAmTjAD1XZ3ooI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdCXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqL9w//QJZhrcw71NiAaOwAm6XlkEwkRg+wWaKHaC7KSl1lcWR1tC0B\r\nqfX/9dbqL84E7LVv9OihRhToGvdqqKpino98l5qeOsj8t8aG+uQZd2/71L5x\r\nCIwNe+tQrzEM7MlhK67x0o9yGPvlnXnD9Wm2I0fojCI7uqdITyYjEAS0MGM7\r\ncKsy2iyus05r7Ns9e/SXOIMiQUSlNRAXahK3QUSX9jGina5eexSr2NhH0SEI\r\ndB4mj5Se2rIshNQpaWjZItD+bErwkeADrgUTVhyAUtZ9iBAwRhKW7JvkUSvB\r\nnfiVWcPvk1RrlftMs4R1Vdcy+2Zfy7m+x1RPPI+Fd323doeVtyxviiCYuqsh\r\nZ4Ogae5nTxhnY5JIj17cv5mPr8pPiIdwAbFz+KTeDtaBabCqILlTVZFVglJz\r\nZ0V0B+qInsG3m0ozhpSKSZRqGPTyxR01kNyPUyA0PkGg/cCO/3ho8+GkNdeX\r\nt0F7x0e4QJ5meZCL/lpits7X47dfZdd5zuzoEvrG137x7/i0UbDS4ImmWUbl\r\n8bRqtKGO6mlH0rckYV+yMtlmUwhVyqQzeMAyi04PEUo1LKGO0RCwmq5/IV/7\r\nxzp439NBwLt0JB2B7gunUIAI9j+euGXokeUBaijfBqOclePpfKugCCqt7KyF\r\nEspVh2HpcNJUG5eV5Mn9m914cWvURm4MF/A=\r\n=FqTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/button":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/icon-button":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b281a409a.0_1679413399238_0.2540036342420955","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/snackbar","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.39e473690.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf80f73a3c7cebd3aff111a3122f8c62220db5ee","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.39e473690.0.tgz","fileCount":42,"integrity":"sha512-pimiZURJoh02zvGkbH4OF6/kzIY4bZ/0Liy2KLRlN5pIDl8aBK2f/W8lcaTChhWga6IrWHJxN5m7EULjbPl4MQ==","signatures":[{"sig":"MEQCIFqhBEZ54G1KCGbblg1Q5iPT0R5PG6VnzmdgkbxDnTo/AiBiGZUseS/OGVlmh+HEn0s8Kr7kK4pNRhj0qoRsCAl7Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe8HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHfw/5ABJQB1VCW2Ab89HpC06M3f2/giQo/a3/ann0uArZXJ+gNrnZ\r\ncdSGoNIrAqYtDGZzy2Sd20cBidsNRM37WPR00jla2jHWpwSYvwpKoFtrtlYB\r\nHbPQgugBSss42QtUg4IJkn/eegrmVVmGpl6ZogQjspYF23ayg9BKtt+nitka\r\nMF2QgwUTZqyuO9mjP5u2V022rK/ym+jL1ssaIuPX6gjR+8RnTe06uI1tC7Mo\r\ncy1Ani/EqlGwDiaWlvCA9ji1s6/b/jHxFxfb4jNZfDafeA4KuHbi4RZgBDXb\r\nxHxM8oQI7w7eqefhuVMgAFhB/eKbCsD7FRBPIGYKakIO0bn2o/h7SZ38SJJo\r\no3RqFczWQPIQhB0RLG/vQwHiPehAiPDtMy7AdKuhr7u0scKd3c4w2ILlf6xs\r\nju4pbKIcqL3gyxTFlIOfgLVAn1NZZHtrW6zNc3/W2LXH8ur2I1X9tcdiBG8b\r\nvD/+VjysjUjvbSoW/wHDSTF98OgguxmVIiffxxrpzzb/zKflf7DX2j3qd/l7\r\nJbpvEQ09MYtCOihjW58p6639tjLiMC5Dj5ucYza6EhMhVFlPc2KH3bFabdaV\r\n7lpZJd4we3AcgzprSpyfszm1fq4t3jZ9zNyAlnfpC+kiJogxmUfUtZLlu3Vt\r\nhT61lHH6X7bTFI3GUPs898SkkPbhr+AmhtY=\r\n=I0Ha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/button":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/icon-button":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.39e473690.0_1679421191062_0.3228350635707167","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/snackbar","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2ef4833d24f64820b767d429ca6901457fc85f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cedffb44c.0.tgz","fileCount":42,"integrity":"sha512-FdLC2BjftsDe8X63qD89iTpZBjIER+1+7uUXUCxEsXUziM7GgGelkQSaz3yUfLy3JnQ9rs9D4biZY2znMWE3Qw==","signatures":[{"sig":"MEQCICaOZ8yfzwmNuXV7+A9Li+VsRY+2zvKPdaS7D3u1q4L+AiBlkB0YCAekJHQvc0IKGf22GtGvWCI818pqWMtpXW857g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfCoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHQBAAhpTnlm8gRnKz6tRvLJj2EnPw2g5ofgHlX2A8pyX5SilWVeyi\r\nLUGEdcRE2nau5S3TFZiIpTRtVjkWQoUbRihzr2u3R0A8FkvdUd1VP8IziRIB\r\nghVB7vcFsZjfMKWKUAX10803uI6MJMfteNAJTZ4TDjtnsrCEnl7DfZzb02qi\r\nOysiq/vlUVf0V0y42fJ0CvrpBROX2hbR59+lNnx5dYu8ayeyUjttD/0vfAlw\r\n968kgkX75mGfw6JDJsZP5ox6Uozbz2Z08xvpHxY1DpfwU2P6kFEFXSrZSQvj\r\nv2WFe317Y+vfEaMWdAIxozKXztqtZ43qZ7lKKnSx+ef+cahsCaqYt8bRTiT3\r\ngCGHd/1069d/TdKwlKYCBPawwfKlzmBq83d+vDb15jX8/eRIQz71SRMr46++\r\n+UhZ4cnDfOgeKfhXbK4Rm97exaoGOBXcqVrjOhyI9lVTqsN8Mm3/2Z1k+xrA\r\nLMOs8qehpVNUQbX+jJjEeTdLAn4SG7l5Q+X5VcddcrDMA+3uYKYSVKip98fc\r\nv/eolDucQd0Ot+bVUQGGt8pqIhTZzW5vIB7cjjowLxJ9dQJtTMBSivvmeVU2\r\nhZyDVKBi2e7Tc2+mxsO0mh66+TSWu3vzSg3RtWnSl07GoUnY3N64AvgJLQ3a\r\ncPAyg4iSk1X5u1xcoljKxEe9sUsYT7mgrlw=\r\n=rA1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/button":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/icon-button":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cedffb44c.0_1679421608367_0.7628127439932837","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/snackbar","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"075ad902a7f4d854852f7e8cd980c3d637f870a4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.36a4cba99.0.tgz","fileCount":42,"integrity":"sha512-Y+HQbtHgdyGWkqTT+0FbF0ozsLoTqryLw/S3fAJ3EiOBAGnqZ56WHYPKiiOgGTm/K7pAA4F4DZlZtWfsZNrXeg==","signatures":[{"sig":"MEYCIQDu71QNuPAsUCwNmBQAFN/oN14nXEsM70XKeGjXeWgk/gIhANClHsIS6eI25zyNARvU8gBAQkVE7bf0+uG2i0Nwf8hW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyk2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG6A//bTJosbsS5vLJnqRfDJ96YwvUieA6qPJVXsLQ+9kVTxQ5kofy\r\nvSQAJBDihQnZBb4LUP7T4HrSUKUUKacM6+TyKwGuS8V8JxOIVGMI5ZbA3NZe\r\nCalbe43MvcjI79h6NqOmvEot41jwMi5nYTDDkEcOEmi+9cBAGM32FT+wtpDh\r\nfVGKFT9D6cuopt1Vy+bxbSVZd2XAPIyuf6l2XzayznGh/5ALJNb9iHJlp6++\r\n+vkAHcfhG20Ng7HOFVT05pVsRPLlqnNlUX65lH9pz/B5YbDcASmiG7AtEOyu\r\nqIIzwtOzsW49wYYcBwT6/2CB27Y8uiYNQkH6sAkxwroINbzDjollRHdbvOqq\r\nw4/vMAHpbbJUkNsDJx7f4a5bEiFEo/5alN8t2OuXGjrXbG3hDRkTE/6pjqyc\r\ndgCmWjfzFxx/HeJXlneR99Z2vi8LglQpRZjycBzpzXio/pE0XjF0ti7CnDKB\r\nrKfdBsBOdLVN8lnuzk7dy/7govvhLCWVZfF/DIxd1oV7+b6TPY77n52+SOSo\r\nCjpj1gC3luRISE6nXmvsYeDtwli2wd0h1xp2D2F9jPDV0IoWynbjvEfjWgoG\r\nuZ92axyb1l7iPGP6jtaGsaIs6oBxvvJ4oSW+RuAGFdUeyNRorkYFMCCiezmG\r\n4aNEO3GAdbJx4kRSc4hMZHNJnVccAWUP9c8=\r\n=hPze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/button":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/icon-button":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.36a4cba99.0_1680025909846_0.3536880162545073","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/snackbar","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8a985cc19fad8ea9a6584be560600e5a29836a0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ed7e82ded.0.tgz","fileCount":42,"integrity":"sha512-S5/WqSJ7MedCnIVOMMPOL9dkR5FCxxFXtLXGpnj3bhwBKC/E141lOGN+A5tgXaq1luzFDBScjZk/2hlLZBYHgA==","signatures":[{"sig":"MEUCIEtkp/u9EF3crJwGjiGIyiqGKysaszJL3E0kogdBFJ0zAiEArqtvKX5WHaaBx6LPYoVBjFZxcYIYi9i5MPeqWdr2dx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0/NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorAhAAlYPkNDOBgSQmFMVrIsJyrZZPQJ3v8xUc9uy+/TlbEMIBZ7Pt\r\nYrbXe7iKYPwIXFwJOZd5fgxNbFkYmJCKCR+0RIYtAzVaBz2o1kj1BprpfZxF\r\ncu0q1MPwlDiR14m2nYJIv+LbN0JBO8+omV/njkS8IBRbWu67e5P/9dTBjN/+\r\nqg5vcj7zys9Qmoi94gX0qUQ72nUDeN70cVopywEhNSlxAYDySLu9eHUtwed0\r\n01Vf1xU99mBx0H0vsuiVT5wtVZWN8jXUUCUUxEZKxIc3R60C6/rfSLA2cHqq\r\nkPar8T9ECz00sVm8X5XvQyUaT3pWJtKnCQhTgz77YnO5SzsMLKvzfmxfXA6d\r\nkovHyIHTUN5QTaLMlHnVf0YLBDvh+KjyK9RdJLF8C9hBtxEz6aOgw7wDWkjb\r\n2PiE+f6awXQcQGxwPFLtmQQBjbHtIhtl4WNFrXfYU+cv80j9nnSC2zXQqzZA\r\nwE9tAhtSNoHe8IMe2AGNkVJgJ2iDGk68m+HEsTxatusBXQAJ0n808cIUVXaY\r\ndF1v5Gpz94+IYRcFF5iTfF1B48bjtXqOvGEU2D1A8zPPH+m4ClTz+65XdiLu\r\n8yJylNkC0qK4yg6jMWFnJfDr2fFMjRvUEcBPo5ekYaPiGtjU7y5NmiYsRuyX\r\nfNpSR/RWdkZU+wHt8JVRuHMyqNkPCEnTf00=\r\n=S0e/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/button":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/icon-button":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ed7e82ded.0_1680035789106_0.3604406074596438","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/snackbar","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"260082333b73e5b6c6304615adb95ff873bff383","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.55093ee1e.0.tgz","fileCount":42,"integrity":"sha512-rB9qfeuw2VSqOXA12GZ/egoyDc++EFV0HBqZ14ObJRHJTmukNdjmoYj07a+4g/l94NPA2kY/4SnKO8LYGTPrVQ==","signatures":[{"sig":"MEUCIQD9smF+8VysY5pdp66FvNBmJCGyDtPjx9lk7DUaS5e2UQIgc9bSUCeapDj866PlGZPNv38nbCyPDooPWI6dmlTu7Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIh/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwgw//YW/2gJ7NYjbVIaqOWBraHO1YVO0AskfgB9Tm3MxUzPRjyva/\r\nnJMOrS22JAdPn+R7FEY9oLvIcz9MTOa6Zbx1bBRdsYKdQ1/l0JQYOddXsUGN\r\nh2lrAwBh87QC/ZekRYNc7GIfY1uVY/8PUQ+/wmU6zW6a3S5HgCfsrlLxDBf0\r\nZJk+w+yMENCRyfSrsgZcXWeQqZhX6C193ABDnueI8r2WuQT9lPYC70qFbPDw\r\n+llGlWBHe4G3kRvpDUZWscWHbLr9UQXaJ4VLuhE8h6TTahZrt9WgJF5n57Jx\r\n2EZ+a6990J7DS5RvoWBnAK3YglRMGFfuGHnDojcNQqjTOBX+z0XvDbZGNsvM\r\nfiaZolNXPY7jzJiGUR5dEKQXoVj9+6WBJrOSIC1WoxsEa6rVo18rCJlcrtOE\r\n5LXm6dgdwVa3Bx9MHnhewzOLoHkQAhfsXuVr8uPwPQesyrefIB8vvJh8aqun\r\nnvKrpvwO+ZCQRiPuSXhJjpLl4MteVaoRRjNWZPQHfzCpF8HpCzEegyM3ylNB\r\n/UDBaY7M3/i+JnFGBkWM5F8ds/LKGsz330Jz+PCZDc/zVHHWRlTOV0Qnlv4y\r\n7zxm/2XPyx5+ZhsAFe9wqHQJx2qsZclXibaPSaB+fYaoEBHf7a+asn0bx+H6\r\nm4D3FOpSHsX4JXy10W4uqwWt5/qvdYoIb0g=\r\n=oQg6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/button":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/icon-button":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.55093ee1e.0_1680115838932_0.37649076252659985","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/snackbar","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b8290b45c5c14af760ee583a89cef9bc97d0524","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0c53abc81.0.tgz","fileCount":42,"integrity":"sha512-50jHgs1JW5mS8nxSkCWqsIDQDHZFPuUhaOsKrYhHkpG6S7V8EpOXzrtvH/Qa/MI+nKUiKORM2NcNHf6A3QBHAA==","signatures":[{"sig":"MEYCIQCDVPoyT27lOba61VmBSoh4IkbT73yHjT3uC7DnTpYwBwIhAInXKElC1y21msGYXvH6+Rt8VEisFzpq+hFA//vobzco","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3URACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBAw/+KiCxGNgk3pOzOdPIW11L/1W0rCXGE3reYRDre+EUzTFWei2q\r\n2YYAazwU8VrUuFp2u2yBGx68ZtzAXDxIepgQFwDRAdIPVpy6gHRfF2ua67uF\r\nPoF5v1KJwyxqhOosq3t7RXNjQgEKgwVlIu6/l5VUZP95bOTmIVj+bFDXG2IN\r\ne6v6Jb6T7JaxdsvWF0ypIAyWLqc72IlN2+5eXH6np0pwArFkvAnyXbroyyL9\r\n/K/wsuFYCtzxjaig6SP0wyFdgEmmTOr7YlWrroI6liLInv1TbZ/uu+yFxm10\r\n9q4nc4AAcORBCWH8ZVkz+UcVKS8minGn8/1GghsZixyb/iCVjiV7wRvEVsso\r\nPdOsbG/YCxj5N4V/YAHDGt4qCeeBdDmdioOV8coPDbTth2QDezXoety2F31r\r\n95lvTVyNP3wGihVR/zpOUp/Kdl+ipwFJGxxwDjjYmpCjhF+LYEGZAfXngfnK\r\ngRRm66QEtsZ3wHynGXUe2dZlnBEi7uPlZn4CYmhUPIbbWCr9dJfoB5RsGBXI\r\nEvSFykJrfn82UbdqNs5S6eycqLtIZQyidAnCwbqRThX4Kl1p31R8bW7dyoIV\r\nps4igAIO+mUj5mHJ5lE/FmsYGYYVICMNlIVegXVL850KBRD3woOfJqDHFDuF\r\nvxdJRfsGmBZ+uqoGpSeeHUogF92yWjq17iY=\r\n=NGWm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/button":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/icon-button":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0c53abc81.0_1680831761603_0.9768777180672803","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/snackbar","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.51311e69e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0268ff8b9bac4153376a15f8ebe1d8f9379e20e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.51311e69e.0.tgz","fileCount":42,"integrity":"sha512-EjpX31A7piTpM1QzljHYgiId7IYgqcrbzj9EEoC7Ao4mp6ZF/qHKlYuYCb5ToXxxA2xUcog27Z/Aewel/jIVQQ==","signatures":[{"sig":"MEUCIQDl7eLx65zA5FoikaKm1k0pxqnHjk4PPChL+gPIoxt0SgIgCUR+ShhtR2CYAm2lRyqxWUVTExluPcBtNgcQ7J50No8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFxWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomgA//XYYsHUf/c/ZQmMG5qctK9AhTGyadOy6N4jfyD+wRy72WIg7X\r\nz6qGPREyPh2DMVTlJxNNpfUWk05Ow9h7opcq6oIR+BlAENbDAFEp+CdLSmfJ\r\nua20zwcKFyqsbuZnm8yN489PLMxE+HrqgsK5pVihcKaO5/FscRjALsTFrXzx\r\n7Vc9Qq+Y1MA2xZK97og15b00y6igbihlgGtCiYSPFVNB7bfQHnuJeaPVC81c\r\nwDfUVWrItiNlzgFLzszl1zwwb/oCKEwW5xFHe7+igBLhTfxoJgVf7/Oc5H2X\r\njk69qJArB5l917yvckJxWklWq72FCPqwfRd9eHOfwyHmBGV+rQQDu7dtRbq2\r\nzfkPW5LSJ1Xl7mkjKCSCG/a5sNCkpAxsuRTSerRjOZ6YbnPoqRuVLNo6qPh4\r\ng+fpV0lzeJIARV0vfr3yfsQuK+lvLGXuUAfFi3X/li7lFbK15sPiq2mwcWna\r\n/0FL+yKLHPEug5jKrvnJkij1I/m4IE3R4fi5rTl1lNu5WniqDn8XG2Qq6Cno\r\n7gQOeH5CTZMBM1J0pX3Wq64Fv3tGPEvMD4zBrak6kdzbW+dLtqEHZ4zxmzyU\r\ncxklRKd5hxLBOwAaU+y8mhwy6+QfwPa3J7mm1r2BPmi1XtIF+D3mh17l1k9x\r\nnEJelK7E/+zBFnIbUnjlmCrR/6f7V9kFGL4=\r\n=oQ+o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/button":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/icon-button":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.51311e69e.0_1680890966574_0.815983800289374","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/snackbar","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d2ff20fde338fce3049aef97fcc3460df90d83f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.113b1a38e.0.tgz","fileCount":42,"integrity":"sha512-/rp+1EkVvnhKfPkMEe5eXNyZiMccbo3/llV3IosJntDiXmAUMqwrFHyysng1VMbgvqo3k2yEBCQHknM24mTUUQ==","signatures":[{"sig":"MEYCIQClQJ/SGuujOOoskWvs7LZ/ln6NBHsOg3GKRew1KFZCDgIhAOFnRXLSq8MSytzCbwyBKoC9cS22gG1AirKbujNjmq30","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIXKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8cQ/+I0GNI3YD/Z+R0R/QoOwnINrQ99sKHZ6LiBfP9WjfwwJ+Uh+L\r\nx7Y10DqpIiosukaltWflx/DkuW/Ti8axHSg4jEStUCGvnNO6oCjv35yY1R4k\r\n03qMiz2a0kpXVIne3dJXn4j9D+/bd/Yjyqg5W5lYKwKVhXU0sU/Q4B64ob0k\r\nj2FeZauu3U64eKebWtpH/lX3zH5CKPl9VejavpP20uxsHVWbj4s72KsshHwV\r\nM/HGcM+nOwKmJy3G+bMrFRVDlL3Gt9LWXdCLEr+HOpAle8Rthc+xmcgJ7ccq\r\nzUQgKyyOvrquVpW8zzye4j6QX3P8PIFTrctuYru4ZbMdSggllV4PRphK/miB\r\nY+DLqS+5w5fnEoN+ETej0cBiihudk30dZ+44R50qdVQh+owPw1t5l6B0Zoc1\r\nJmhPcgB8318KAXE0GSU1kFylRye9ywJp9Rtka0eWozRB95ZrdoS08Betz+iu\r\nUhB3qdqHum5nz0itTo15gola/bsHE/ZcNLFyooYdrmqgKSuRSeXLMbR9NF2g\r\n0qn0ZBBhKMkLeYDhME9FuoPx/TlpvQllIp92rTTXLXQtofcwt2KHwUCA8ukz\r\nMJnB1X/EMgP6jzTQ0o6zqYKq84rtxQz9jf2JDRWFU04p8du4ySg/pSdmCv8G\r\nanV6/D8pmQbC6Y7P5nkzHhnLXyWO83IylN8=\r\n=WVHZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/button":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/icon-button":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.113b1a38e.0_1681163721875_0.0179076935318625","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/snackbar","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ea2191426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5efd475ff96a013be4deea0d792de2513728abd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ea2191426.0.tgz","fileCount":42,"integrity":"sha512-vrMPUTgzQxr2+sT+hwXeAL5/BMrI5Q2ROgCG5YXJGjAEyNBOyBS8ROkV3SFKsIOfcf/+TMyPgTqJ0xHS+XRVyg==","signatures":[{"sig":"MEUCIQCt78XGh3owKWPuUZLTdCbYjlyTUwhMRRZaArwUfSjxrwIgBX9ZExFnMZr40RZehGac3K+e8FHsETHpBUSu6lxmFso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNde3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/UQ/9Fqg+UkliA7YOZsdummlCVA2+zukC2DFnJl3w0e0+d/At/ULS\r\nPCp5PxGaelw1fanv6ZE5ZDZZbDgvc4l6Ci5HNa58dizMUYeKqhQ5MfKX7jeX\r\n93ARk+IycPyjPiNNLR2IcdAiHk+F1Pg+VsCEhidj1LKVBxvFuZE6nhH56noo\r\n6xgEM2daGCVkceLQom/KGgv7Aee66eV/RbLw63LdjKNZ4JEPUfaDWk+wX7I8\r\nHA3aOPkumAL/1p+pQMycW4LV4Wo951UlrixRMlck3YWieQ0GLf3xEmSWTeZo\r\nbFlXgL0LdHe5s+FzNqy5hEmujQ2IRt8Lu6rDGtWoqS91rwHVZMUVKs76FoZV\r\n4UiE5ANQXTjUA5d2T4pfBeyzcDPUgxhFcl3q+ihTEktU4qN7heYcrVlEwtv9\r\nDUgs418atJ2MrUkRwNhL4IuYZFuqPTKBdC6SsgSJOsjA0OV9cvYNSlagHkTV\r\ntFqBgIubqf/gVCCSPUrfMGsKz+WxPbYL2puuu2nBZ66ZZqqNAgZ34Zu0smyE\r\nTqLxp6DEkrm+lJU5KAx/ibsDcmQgNKPq2olrTMaSFgIKInT5ulODsRxC4O2M\r\n9skt5uZL3fZMHQ66exI8vMzY5t1BBXE0hEy9Utg7Ypf8lDQJBYF30jCFPpFM\r\ntvSt0+TtDUIU9Qa6uK+jIGPRIeKWhu+OhYI=\r\n=FSWj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/button":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/icon-button":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ea2191426.0_1681250231616_0.008967819410782285","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/snackbar","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363e2fba3be4c76e1e4a1483019eaedcf6d289cc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5a5c38538.0.tgz","fileCount":42,"integrity":"sha512-G8XTaWa75sNBba/jhao2e5lDcC6HXNwsPYpdxEhayeukc9hihKEJ9IAHcjlMzQonN0H/7l96aqdBecj8ylRd6w==","signatures":[{"sig":"MEQCICac4ZkdJtep27GT+viTDmrKYwrk68md4yRU6Ycgsfj9AiBu0Ia+5tA0ZcqdwpsgVIw7uck/MWYfTLWY/T/ED3Hpqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd/aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo42BAAlE62eAcWdELP554JiafUgjY7MzFCw4GZ+J/cgMjQ/9fRql0S\r\n9ky2SoOlhi8ieAc4CVOI9+ChLs3uQpMcGde5kly/ktWrxX5JVEaSUiFnv2c9\r\nFN6HM1UmnLUEPuFyUgsPXOYkR5vftYwTjonv378koXR6qutnm98LvJHv/AXS\r\n3cTUUYtVHV4Nc6PdSJhvJMDy8EA/jU0nVRhyZehqUgXsc/gLoH+VpZcFGdy+\r\n3M/6UJwubmTVNPCTqBKvKQ7ZrPzE6fqazfw1uRW1X5WaHBUIOtXAFzwMxbal\r\nDwWnD8w/AmPvuBVrnNZF5Q+d5GvY8zelKqg/HKBWIIh0kFEwkWcyofIo1T6F\r\nIu/rVJ7ZefGqKKp8vRUi5HpiTnpdcRjGWRqEdI/d6+vXDqbcW4mY0TByjXv1\r\n4lDxRWZ3pzmebHUoUA2zpPBg2fcj0Q2ELt7V4QsIB3moeYYrUaYsFw7do8y5\r\nGWLWuEA5Bz0ap33eZ+JazH5PxqXwwrvLEwvDCe9EQw1RBtVUD8Wcr8AoPDJp\r\nHaSZcjARc5Nc+eOFmk8bTSzWv2igjCP4VYn9SnmuhrNrceaGlAR5QQx/zCf7\r\ndIzyR2kemmcjGaLSCiwPnjvRXxn+kS3AL79EOpPi3PD8chWUdCZZ7fHJdjsi\r\nVkeUQ8IKk+S8ycEuXZMtKyes5rvpZgB6Xqg=\r\n=xTDQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/button":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/icon-button":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5a5c38538.0_1681252314011_0.8284804712338802","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/snackbar","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b45a28021d135e56038b02c2e1121c5863e2dcf","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":42,"integrity":"sha512-RjgDjjtR+VKadN1UyGJ2fSeBrhmunHRlgLhWHskh7fD8dkf53/OLYc8jHIQUgEX28ZYEibVRvoG1XscLRII6Pg==","signatures":[{"sig":"MEQCIH0rOUAH2lGWJQ66OlWRO3DAl0/OFCJJZhpoAvwf8gUJAiANac/WSymWkLuymxiryCeczsPXqml31TVTfSqG+l8jcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNefvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre1A//RhAU7jEAwxQV9F1zqUjpSanb9pJdguXMK4ujJ/xWyT07kL83\r\nlucjXuuZHXs1fEji+74/4a9g6ePbUHwg+NDIe1hp+vWddXKSr++exnTUaFCx\r\nSZTpkFtGIQjyXLAhXZ2sqD732tfFqEViPN3yZNNWYoHVv/vzRbEV7GdVb7+M\r\nj71mfAF6vrciPLBWgUhxSXWpRedWx5SUxnn5hcxGL+KPPOkNyFlsYpR/Xvki\r\nCBcBrpM75UND3gKbeAD2MsDkfiQhJBRqY0x8hKHGykYYjS/DJKKKhZPxCaav\r\nw+7f5Q5lmp+1WoI5Ht/+ekj6SF/4H4t6/qeBAkX10le1QEbwlvhrWaUrpLj/\r\nhS3+yOsXvhTN+LKK5tze2ITaD4mfIdAgKQ8e0rH6VIJUCXfvROgnv67Avpk2\r\nQ5mzr1mI9B8qzYj9fhsZnB3CFSdyuDjF04SR1cK7V4GMzE9J+3bbT1e9eny0\r\nQJROGGtO3z28/TIOv+njBi4GNmshdlsCHyNrBPgBue3CTaPiz/3btClUasjd\r\nR1cIBwVxvJh+vZttrhRTMulD4s/nHaP+5PbbJRsiYsqxKuDVq020jrUf53H6\r\naNOodz2KRfNzQhIg4bPUlPfIWsDE8adppioazxnfWiRO9lwZY/NRXxWVUaV4\r\nEIVE3PPS3fqEeCMMVVuhAiLFuilUsRR7bAM=\r\n=gB8n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/button":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/icon-button":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e4b5ea7eb.0_1681254383621_0.8788789540857085","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/snackbar","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"193109e85c6ec202b832380a793a8281ffd4bbac","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a094dd9c1.0.tgz","fileCount":42,"integrity":"sha512-gS16Ux3v4CKRmUhQttwZXgP73KhgaaP1eJ70Gn8TTAST/AMEZ3ffcw/N5peDAozhJtSDQ90iO3Rf1epmL9BbKw==","signatures":[{"sig":"MEUCIQCBqb0MdcBLh+h2W8fVTTFua1mrvYuD/aIjydRm8d7H9AIgUDDXHV/zhckoOBanhd4nSzNgVzGzYWsb3ago7sfih58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdc1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Ug//S3CLe00A5nlRA6PYVzrY4hM+YMpVY5IlxOhVfJiHeAu4MT0j\r\n0lt/Fvf+64Gpl3d8Empc6ndxkqJjnL0MONPdUh+0rYvx5tFC2BaVwZ3NxTqY\r\nXwurs1SsSW+yajvvNiAfyNOpElWKlrLT6RnaSE+vkLDKyRV8+3U084J1mmNr\r\n4/mU/CnvT/WTUzxErCRRlHpyXvfLYYUDnvRU5z2wLypv2HZ46mCR467xhRdd\r\nLwPnuSJAK3AmOtMxt/kCW3CVbrI8plK3zHwXbqKhLuGXLtD+kyDXf2+J617Q\r\n0TWscWm6fIZyL6k6McZqdWo5O9lOCefh5H91NX5KJns/GYnLdZAjGqmGxWiP\r\noFwkcg9EgeWde5WzBBC+hDJU8Kavf06pZb72Uhe0JoUWKgZvifE0ItPn29tu\r\n47XtrE2fK8/2cxxhCtMI7Cl9K0wjo+uBnApF9zmvyzxiqu3j05KoAm/NbmYm\r\nexEGFs4jgUyHHYEOUjIoZXZDtRtS6lfeb8bCdqIhOAQkbu1LX64iNPyPtMIY\r\nCsFQNurVlKJL5+T9OQrGfpxQo9+LFkXedMWKL8KQ53xoPqUO/m9j6esMzKQ6\r\nPxIYJvg+AUTZyi6EC07S5V8dpz5dGPKZUFLIVQYvDIyJj+jUhwnnXSVfM8/Q\r\nwiw0LRna0Ong5vcuoIO6vjnJ9or6bVvwx90=\r\n=mvjx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/button":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/icon-button":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a094dd9c1.0_1681512244730_0.6077063461272247","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/snackbar","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f771b091c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"770ef74d061de387883986afae47f6b51853a503","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f771b091c.0.tgz","fileCount":42,"integrity":"sha512-cgGafeCIPoHe6jaQZz6qEQPLsmBlDcUrBb/Q15YKB0AxfiXrmUaDo8xiyjId/1ifRTIu61V2UL8r1OJkmyugig==","signatures":[{"sig":"MEUCIFHO0CrDXEwKx5iuuw2A8mCIiF39dxuK8xk88JRR/XQqAiEA4Cv7113+MfTAhOIqDWGPc0QBtsxZSVMPMaecIebcooA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWhYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobuxAAnFLpQ2FLvQEbpr0bx5wMk6wfJ3do/1kVLvhogOmYJ/M7vRQK\r\nIaYv8wkF0xHalnqP+1zXifxToWLrXkNGWZPl9xMi6JF2t/95Tmn88jx6pSl7\r\nzWV0Vs5QAxSGtgQXEyoRVvUiAidtulcj2TPilkcNeI20RGbvU+YgIv/WOoRo\r\nQLd/vtRM6FuEsBQrhLmuKSVyqtNZNY1RGpIKKnbmXqq9kBTMg4sr08AlKrqz\r\n+yIbe6I4J7Gnf7O3tdp6u8l/w4ZW9zmyLpE+Imf9qzN39OBTc8g5xKhKuuiV\r\n3Xhl/Gct8SPyDzCJysplF97okmNl5I3qsAWMXTnQT0zVnvPzXkUN+AEkj0qd\r\nxN5quHvGdmfh9CH0tzkPukb1Nv21UGSWsMrNXRDzAitj1r02AvT8wOPtTWId\r\niykykvmPAUKdAOTjlOQ5QNQ/70YNtI2X7fxIg7sGVnWHTU3qdKVu9r5KYq0H\r\nYpmjtCnPNpyuFIslNNiY+skMLPW6TgPmQpn7EPEXqkAC0bzFvhWIKOhKEAnB\r\npcP3paMOgNUCZK4kkVu44PN4tJ0giDgDQQU9yni9COzpo8Wjnw+kgFmL4lZr\r\nM3iOMvDvqW1Nw2ltSHDnrwwB9nNnRmg4y6cAborzE7uzhFI3R8J8KVprlYKO\r\ngLfyrN+xkCSSi8zdfNJQzMX53HXR3uOL1W8=\r\n=9Abp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/button":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/icon-button":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f771b091c.0_1681746008566_0.015909488526359983","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/snackbar","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9b4b9dafaa8e29c63c96c905c6f5d451103dc92","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.79b1b612b.0.tgz","fileCount":42,"integrity":"sha512-+W0Y/1GF4s4UgCKE8aM9IgXCOyKQPcfA67ZkpTnd8JSilHe8yoQvmlbHi7QIFbEawObNgBz5JU3Apr1MPY6m3A==","signatures":[{"sig":"MEQCIFmP/RDjLVSTegl5sC/CkEdrJB7xbLe86XmfS/n6Hv2xAiAi/N60ctpQSuD/tSLN3xc/DFREoGYSIpFHWTZ5HnVtqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHwzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmXA//VFP9kyUpLbQd/RSWsWRqEUQtLXytVKvF3eh2K4v/OCUraFUv\r\nxwb2aYmm5Ygz9G0YyYN1ZYJ1s9Opte1YAL7A5JMaPjFf8M+ZKKl8pFjx12t2\r\n017RO/71pWxilqw5E23PfHuTf+uic4FgrEqezlK0c3bwZbi1UFyveLu9lKFp\r\nWzasAuh9UNfZLv6Q4TL/KI43JCiIQMmDZQkKVyuznvpRZRosEOueLqM/8Q5V\r\nL0iuHmbbG2yqsZk1RYCWjx1rHZF+cP1krGBkV23tp1EL9RuvtmIKx9rD0BOp\r\noWIO1mOWZm31nqm7UCWXCQ8w7IKOAaz5Y//Smx+uV3suos/cr3iQRmcM4Kve\r\nXVRs/T106onKpCvZcSzJnav3+vgYDm+YeE/QNqYhx/eOqyzT7v7r+Yg3WdVI\r\nXSuA1/sUMZWv83oA96Dllu0RXzFfeTYb25ZCECXIz+Z8T0w6/7kje1KscStI\r\nSpUeYXYaIRQ0oHL/lHqvNjl2SMVhXWC+lp79x5RVXorPmxsZz6kx/hzqo4Hq\r\nMx2Lzf+lCT61XGGrzEN2UyUwDoW9jw+gwvXy71lXpl+MADMwDIEhx1I/ZrVx\r\nwcBqqhNG/CR4hK5Foadgqy7YHu5C4M9KtvUnWKL22qLbMqSuzSt3X95LnpOn\r\nxyd4G882i5kpxoEPSi20HVwyL1p3m2rcZ0M=\r\n=DoKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/button":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/icon-button":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.79b1b612b.0_1681947699471_0.19911653289013587","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/snackbar","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eea9228096af792809540925e793bd5d59b00a16","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6f50071e5.0.tgz","fileCount":42,"integrity":"sha512-Tk83mnGcJ500OIygmZoW33DftrxTy66J1EelgcVBwQQ24yeRIYJfDeYf6AnsVYFW+UtmwEfMt/PaJtRhugRcyA==","signatures":[{"sig":"MEUCIHiFLtwYYj8oV4tvuXMlR6gH8DpVOoJbM/1g8gO5flVyAiEAysIxdxr6Lbmo8Jiav6eHjzjxG6hfAFDbpvy2kwFxy6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX44ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9QA/9G+ZlBwLMWZts2eOoPC7w14pyuUDZGkoN7qK8894lnbw5Htj2\r\nBkjWGZDHWhODpyW7RmYGn0PtQ0RStrpeXjW3wZtepAY+QeqzXkqrbcFKymD8\r\nc2ox7fusD8nJ+cKeNcwIAEUvPGBdqdeTw7mIz76ze7zqaos6zHHdurAsF7Tq\r\nJe68jSIAPtQPEOgH7LCewJw2cppHXr2F6fhnwD900jJ8iT5C2fmgiG3qF+xy\r\ntRmNyYImLysmEH1W8JxzpYWr8gtLBSzqaDiKmJ1Zv1l0uM7EWkCRRGHqiRiD\r\nm0BPoZPTE4ZTyyn/b8hKFSfqk+db8N0iGLaw+sDky3scVqh4FGbBHfLgcq3q\r\nxTRZNFlptplfXkstM/o2ckec39LnzUffxoxz8IXxbQEVU7XLO9NZQUa4/hcb\r\nwpBngOEsRYVQSppAQo9a/0a5/+WcBfaSraXbrgGTFtZAeIOApWA2Dj3RIF3B\r\n+cpawEbxyRSKbTStq8rVkmVjF5CpPIkSMoU0h+SSotSRWaantynPk/3RIrfW\r\n4i3GqAr9plrJ4G+O8iv5bbo6H8MCAFPuSVePsJgPJ9IChXn0Jasn/NzqIH/S\r\niLO+oxrPgy89HY4c7zM8BgZgCRih2JjIlqSBFjuAQCNV8SzPaFZ+1q3xxJ7A\r\nZgnr39K9dZc78hP1TjwNO42UYQqYItp+DSg=\r\n=8SHS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/button":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/icon-button":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6f50071e5.0_1682013752630_0.49373842890845077","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/snackbar","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ef754381c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2a7eca552714fc406428e8a8fa481c3f456117c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ef754381c.0.tgz","fileCount":42,"integrity":"sha512-7/wEuNSh7ZQc0ZURop3LZWZ17DlR4fk0PB9xSek0kTrg/e2XjVqetEqQrNGw8ujCfNuMxONK0BtzXYkkpcvhjA==","signatures":[{"sig":"MEUCIQC++9+2y6Eyi5K2h+tjbFzRtkZmd2Fwzw45NFxL2Mi1UwIgZlXIEP4XzR0aw1ygHVtWY9qs01lpTk6bUiUinF/hPHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5tQ//VGVc7ul+t+/2lrQ6PMmA2C07j0gg+XoE4BwHx82dGi32SQk7\r\n5ECIBf073AQkOPKjJwRPYhlA3T35CvRGsdjfukajihKGwQbkG64i6mk78Crk\r\nS6CrvSybQNznrQvtx9TlSFygnFCF0u/gwZvB3/07yy9p/na/+58911bhqVqv\r\n8NWOfpJVN7l5FmtbdVpZw8ooMlQSSPMlyMgx4Ws2iCtBgtsHb/2pWBeXdrcC\r\n51/1Oqk9zDZx0BfiU5YN9aNv7eU02BrV5vzxApvO3YWqxtrKSfjP3sa0uKAQ\r\nyEviyGhoY4DIa9FhW+nIjL1CsPU4A32EAlIfVR2VK0RQ3rg5eTVaqBWkqyCS\r\n6ArxdrTbhOPfwgvbo41FgGU0w8VNDTx+qhPE2u7Z6HMQldNEEsNa2AEzkEj8\r\nGCWgAE2M51emYzrIHK5vm0GvKdNS4RKrYB6Qtks5nYdUwWnfnvWhIOxGUfZr\r\n7PijgrlMoiYUqZGik5kmaaR4YZ9JTHibf8fRNS9U8VX+ztQAqahoqeu09D/d\r\nYOHYw785/L/9iGdIhESdmboq2tQI1ucrKcRlSkG0ZgjwqJz61S/k78ZPf1JG\r\nbCcrC3QHdj5bXUf1Oak3P10cfkKp2NuGlhotyUDKKV3DA4y3yEdFlvpHoDSU\r\n84NeSNM87VMFPaJu54SHhy1ZGy5Y53bHKrE=\r\n=Crij\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/button":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/icon-button":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ef754381c.0_1682369552240_0.8922144715837019","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/snackbar","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84b11a553e5f1b58de7028ed00c9cb9786ddf7d8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.69ebf61ea.0.tgz","fileCount":42,"integrity":"sha512-/ELNWLS2tM7TRefPzKNrOO2hTblqybzB6jTc3eWaS8W7mtCNICKwKWdJoqGt7fOB77humL2vzRYf0LlCAjxE6g==","signatures":[{"sig":"MEUCIQCOroLR8UcCoz4hcmceXuPlUqhchkKduPPjJUjGl1Yo2gIgcW1wuandpzXcp9cTHlsISsjuhmvhVMssF2IRxBnymx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq+CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqoRAAmLkrHv2IC4O42eGlVvdmJgbWmYX8747J9eTGy82UDcpx6pgM\r\ne3QQpjCiUMsACBsuQTMCvNhsHx3ucZFmCImbHFehRZhWxnKHYkLVddotzbLK\r\nAE3+7MzNhobjV3YDErt2jm3eOWTgD4GKcreTSawkio8K5B8/3mDLwmsVBDtT\r\nrw6dwQTmdoYK1zfEPnNGLEq5KEFKC/48LudYqRLQnTUpUxLeR5F1yLOpO1qu\r\nSGKb5AO8b0eWT9+aFDJdJ5JXTCOGinbbksXfX6VdrifxvevHvriefP2u7uJe\r\nsb1lJWOb0hIC+hCWmcGNLxmVj3j0vuXGGuuwUaqPvnd8cxkuH6J2vx9Mjk+3\r\nySr1NZOtDikN8oZedbEQ1ZQUR8IW8TVbJE+If0nrL0BcbH/iV043VASe16OJ\r\n5ETIzG9LbvIcAVceqQ6nhyp8Oo01oPyiXJfsw/f1OxlppEaYSyCNUDhXcvrz\r\nEw6fdJadsh9CVSHeqQPorChR8qr+b7gZ99Mx0BcNF7h8eggj8wvnrX2xjx7c\r\nWXfUcGxeqjSfykDGwn60AQZl4LGThlS6NR5BcsYAc7M2kcoAr8TVHNcy5FjJ\r\nPF44x6b2Dmazm8YNtKV6701AnenhSrc7cJm745/N6W/vROhAokCk2yQXpO/Z\r\nNYV1tbWlZ221G1Vu3H6VTDpGAha9dkPJkdY=\r\n=irqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/button":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/icon-button":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.69ebf61ea.0_1682616193981_0.5458109840320451","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/snackbar","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b90be86de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28b999830d375847cf4ea48e9fd44c96d3e3c21b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b90be86de.0.tgz","fileCount":42,"integrity":"sha512-NHlzFFDMY1tHNL9ctoZYJTL0AKfKcHVfRg5Uy8UipSXfAVUS+58Tz96OFspIoy5/kzkEZMu7MJ0v8j9WK5HCxA==","signatures":[{"sig":"MEYCIQDFZfhRBGZ7HZmIL7fT941H3x9qgQK2lXP737FI1FKyQgIhAKupAdWjTE0ooVNUbAUV6/qnLL++u/l3mqSpQQ+587XS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGN0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA1w//UB1yzJGi/YZ7zckkGhUSHDKx5rtM+Qos40hut3tJLpy6tNr8\r\nhjklzBPVMdECJLOLcu65VrPJwc12eQC/1pwf1NIKN0kaO3ehLrWAqqzwZ+BG\r\nSsYtk/KeGDoA5NyUgKoJvmh4Wxfa+spW58KlxjTO54HfgznAFbroTUbOxL9d\r\nxbj+nvM95AUJ2+7UOoSfOT0mEkAYNUU1FxVWNwbMIoTvESuVUyyLdNPMaOMy\r\nbZU0QJQbZREGQeX8Ii8uq+lEo/CErH1FdGlmdxFoO0RLQRX+8G8UYPAiLkDw\r\nvOsJtfttrQP1psxtSao+LmR1iD7GbBEQ6RYVwH4IVMKUAC1HNY2yYJ+EqdeN\r\n46jc4l+Ee66SpWtbzNbO+nNkD/Qs22fLB6ApImaZbKcZ9ufJYENhSkTKWGNH\r\naVq2JQ5mHMknEDaPFHCtSKHsUoPsP6/4CO8Yor7atqYIUDVej/+qq600BSnF\r\nZY0PgA7Iw9tQkk5JtrJR1Zv5MhgfOoQP7VVmfVuNTYgNe0VORAyXvAM1ofm8\r\nXs8X/tY+6bQ3WUwNo5NuznZ23jgmkcazDmO7aSynufXjAFs32kROSf4HubPq\r\nOKLT5dAe3eHcpkJq+IdnkuIMpP3Vm/kE+S/6yzUc1jjIlZGcWfy6gPLTccGH\r\nRP2/U+NfPUc4p9nEgMu+Mpx4pjm29h1CHX8=\r\n=9c3S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/button":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/icon-button":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b90be86de.0_1682727795844_0.5092553690900334","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/snackbar","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad1e88d59611740ae85106635ae7b8e48f62af5b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.51f9c0c28.0.tgz","fileCount":42,"integrity":"sha512-51MLSplWiVjzVoEEkvRFEqFu/q4ra6ai03/rG/em9kmr8VI0hpvyxLEZ4yIRue+7SSjt5Bsou3hUdL0Q8Q20iw==","signatures":[{"sig":"MEQCIDxpj/aQLce1iLtssb/BJHNhDyOUQ2zWZaVdaPDOvZ/DAiBvhvWxoo8pIf/H2hmOHOCFwkSJLnaNJYEexrqZSTKbyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGW8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXoA/9ED5M8EaKA0AgiTwqC2MWTRuALcnsIpMs4Sozd1f/Ir+VAL7K\r\n31JfPGXLcf+6jD3qEbHLhCiMTnMhfLHOIAsnfhqrudA108snqfCH6qvO6Hhp\r\nEg+0FgIC65mumypdkg2B+n6WiFHeRjeLm2ao5H+pubG62fMVAYKvTv2oCA+m\r\n+isJ0d99kVw0JTN9IQKp/OjwF7z40mcB7+JBBDJixbdCh6UAbRdsmRHOiJnO\r\nroP10sMVE3OeuqvwBSL0H7Od8mkNoaiYrZgGZvwvhGvsLfpl3Vb3r43Vc2Uh\r\nTz5zZV4xF2czzvw8zd26dteh4CVq56SO7fv7zyvvm4Rq4xhJ2Fu+DhkWFcoT\r\ny8bmyChnL2aLTi0dQbrIy/sbHgmfEtfqg1DfE8rP38XsWQXi7btHHxBx/tZY\r\ncxC70qhJz1PPS7DwsPcA8YN0OIk3SEXX0g6DyJeIMX7JlBtthh9ruQlL0N7K\r\nVlixBnhzvpQCJLi89/x398VWAu265alMN4g2KyO8zCal8+RASWl7L4tKn0D8\r\nOKWcQtR4N5u2O6YzMRnzFz/vYlL4uJag/68UrNf/nHrzUFZmX/F5eEecG+7+\r\nFEESkE0bcGaT0b7CPGOE1+yKnOZ3oZHWfp8k6mJcRhl7nA2DBPlUi+UAEn86\r\nmxn5jZCQjS6YOumxIJqJz57pnakG16PJ8VE=\r\n=Sxqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/button":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/icon-button":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.51f9c0c28.0_1682728379930_0.42663054926234567","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/snackbar","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4e840d685.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9e032dbf6d585b773b8d1dea5d0137e88c14f0f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4e840d685.0.tgz","fileCount":42,"integrity":"sha512-hK2bGu6u6AceVV3c7F/FXAixX6/7wEKgvBz8L6dRvaV/c7toU71mg8+G47+NQ1Qc0qXWnxEOADzPfCN69BAosw==","signatures":[{"sig":"MEUCIQDaLPWSiXd7hQywj1nTEG8Qfs591KgBF7BF3JgXDsgC/QIgUbCBZVUx5Z2sAA3jaZJ1/5LUELb3L7jYScwVjC+oVmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/button":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/icon-button":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4e840d685.0_1683041724553_0.8902559523424038","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/snackbar","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c8cfb61f657e8c87ca483fae70837bb870dacf8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.10b8563e4.0.tgz","fileCount":42,"integrity":"sha512-a8mMU5DwHXc3hGwC0ey+qClNQ5Eo4ZPgkvVZql5WkrZcScV6eKc6QzJzuNNrjVGpWNwncbmha/YG9QAgC1A34Q==","signatures":[{"sig":"MEUCIQDujJYKvMI2KAPtgw+RyqaDQBqmsmXqXOi+EFCeYxLLHAIgJwAcXYXw70wsd9e1PtNA+X1O9lgmdX7P21i0OQ2fhFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUaAcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI9A//UELf/IESeZr7PTNN9W08HnuriHOYaRnuSIHhp3xXbl3kmtYW\r\n+KhbAS2XyQBzMtPFBLMmfYlO1CelWmJRtPP5N87QxMY2uqWfWYtDDomuZTJU\r\nCs5ncvbxnwqvSmQMiACDdMl0VS6ULaf/BP4ribOlomRSVCaAWDeX0UjjgX7w\r\nqhbf/h/1d/W2C9YUWuUr7CBTYhrPRh0tfXb33pYfUlZUSmUSiG+auNxSNlhf\r\nME3URwu9zP0aMO3qRuxOAShFNjJIWzagN8XcTquc05yn499T/EoeJ9Oj4YER\r\n2Dfp41GX4RbTvScaOfdX9MX4/xvNNRBDU6o7jZ6BHsQZkVObRJpGt9rC++6S\r\no3lAbrUl4zkiR7VmxoaH+yL1ELJLKfEO5J0O2i79qf/wpm7Hfxu1ga/kZl4i\r\nIsLe/wF0AhjMgSbNbguBGknlVzF0peGiiwz5q+y2pITw1Izt14OtPu6DMBL9\r\nTKVzVxNGOEUdt33VJBlToKYQX8830TiFqP80p+RE21+kXTXboLVmCg54PTtl\r\nEOhWMH8iKcFZvLSDRrkLkZem0GRAbcW1GZLwk2AYB8ro4qG4OiHmJ+dmwcNS\r\nlElHaU0d6QXUUN0mpLAWOWmOVMUnv5qQCNIfSJySed9ZelqI6ee1wFpQCh1D\r\nd+YipZutf3tKi7hpjfTFmcnXUtw8JE2RZUQ=\r\n=ip70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/button":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/icon-button":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.10b8563e4.0_1683071004487_0.005229834617579421","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/snackbar","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34ec4c11dc9594f00db45c14e1f0531909ad63e5","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.736b7fda4.0.tgz","fileCount":42,"integrity":"sha512-3eZbinEK9S93ask8oCdR8gLRvYQLzRSwQBpt73j94DyMKUDUFD66WeZhiWS0dJJiuqDgMHhKqoeK12nFDkTmmQ==","signatures":[{"sig":"MEYCIQC8mVLOrxxjv/2O14GOZCME0f2pdqMMvHo1s5fwz/rqmAIhAIBElROzDQuczIhhgXPxamo0WrDHosuhzrhuIEaNYC/Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnmRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqArxAAgmAYVu5Pf20hxMXq32I/u69U6vwGZtXToPAgog7wBrgJtGHP\r\nWKKs4V6Q3we+liuohjXMRUCbwwdBLuC6SpLdMB4CD+T5xnsI0FGeuOnrZe/D\r\nzI7vLUu7jJ7cSR585iMNo0mcAbsd1UcNB4VIVa9ycvy16JhivGLFScV0F19H\r\nKVVu3EhfWXjCkvFmMia1ARNU7CSIUI0BOfY393xTbB1wvxfdrJVyfBHjQlZO\r\njg0pUa9nfLurC/b8GQcFbJR35hNW98SPdnUZ1fadHQOnGhemVr0N2xEstVu/\r\n2fiWNs29IKEcQ371pgIOb920vgvqYAmpgzxph1kEmNtNdXFaGQeb5bX6J7OW\r\nqexlOExoLLIpm3mbZXW/IwjQEsxC/4vbTfPB3v5ScUCueIDiboskjL3UBfhS\r\nUafDsSLkISpj6CgU/AbaN812wE9h+MW8jE4QBTcDaR24ywBRUSNncH7Ai79B\r\nICXlD7JicHyFR4CGlCB5VhXpqQ+BlxEtB5sJeqEH4TNy+uNY3R8vbx+kcr7z\r\n+4c55wdmT5hpzzy+P8G7D+b/dSbMNj52swMLodvSwYr0vZiHkUEI44+4+9q8\r\nFPM1OJ7W/4/oNBSxsa2OIg4VmtQdUSf9Mf40sHtQgqgyyvbihf9uxKVmj2pf\r\nC3RayZl+U8yoRIAUpNbRDB1WyMLvHekJH8Y=\r\n=DVl7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/button":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/icon-button":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.736b7fda4.0_1683126673150_0.9142870458100418","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/snackbar","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29d2ea4bd03e1e17f2111e49a1cd86d9f2813914","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0e533c5a1.0.tgz","fileCount":42,"integrity":"sha512-DAWPnLReNn+khzHNjO2VRaDtt9qnKd4k10sMuKkuifsyGHDw3Qxk9aedetLwRu9i32m5n4CsSlwvLT5yTTQgQQ==","signatures":[{"sig":"MEYCIQDizceY9BXqd+8EevqnhVpfc3UxyoUEXoamlYSShU+IFQIhAI6bVUSKrElkYZFCGaukR3qoF1V7LSjx3YFfkz5Tx3eJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/button":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/icon-button":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0e533c5a1.0_1683305902764_0.8002257075025085","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/snackbar","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8aef5bccc84579a8611aceed88fd027b8b08c52","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5f01c15a2.0.tgz","fileCount":42,"integrity":"sha512-CGT++49GVVwbYptonA4cRqZZXpu7h/HHZ6GlWvsycnuNUFswUnZfJLFWa3mZBXc0vfQDB5QDUTG9bb20zVjt0A==","signatures":[{"sig":"MEUCIDxu1mQBgiZOulZqFTft1U385QNfLJazinKqXsGKWRqWAiEA/MSv+aUZU24cZDo0J59LL4hYt/KNeB1kqHwhQaVhiC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/button":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/icon-button":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5f01c15a2.0_1683307678796_0.5515889533842042","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/snackbar","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dc6ad10c050f51dbf6f0efd3593b02eecaa6aa7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3b5b55e31.0.tgz","fileCount":42,"integrity":"sha512-gcrCpwYz+QaXqENzVYZhGKxu3i/oM/ZamumLiUORYzt/c5vtGJfSd8l7GoJOPpIyUtBCOSOjc+QRye4KrIbLuw==","signatures":[{"sig":"MEUCIQDoNHPoTqylKOVc/RxObFkO9pAlsLERJxK6HOOGxgkvmQIga53jVn2W5OTplKvKZcqrQmAJGB074/eQ9ZZ3rJFXMNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/button":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/icon-button":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3b5b55e31.0_1683312057078_0.40776335878554915","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/snackbar","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d0788120f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b92902d63a8d44d9534cf9b2afe1a0be2900437","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d0788120f.0.tgz","fileCount":42,"integrity":"sha512-qNZSVsDohrmU+61FU+6NDymS0fx7DF1yMduGFLztgXDbdfPuJlNxs+pN+xkuKHQ0ltZaACTfSMlDdG57mjYb8w==","signatures":[{"sig":"MEUCIQCVlDY5OUkT56L40im8qntWwsR/ga+qqpar2FK7fRjOAAIgfH99AjFnxkS9fsmKlvpaGC6ytivOxRrGI1uOtd8JnG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/button":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/icon-button":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d0788120f.0_1683620691980_0.928833539177176","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/snackbar","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b0b9ff759871b8807399b0c0c9c9998c6df5f27","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f52358dd0.0.tgz","fileCount":42,"integrity":"sha512-7BsgifGLOtvMAqxJ75PX1zpe8PLq3eeddjsvv5wHueQFawHxPf+h+g2VF5eQcd0XTmpG+ci5mwI1y8Lead4b/Q==","signatures":[{"sig":"MEUCIQCVDLBmF0k8jQtlWxwL7TDweW3MpLk4eFLAcqKXkpKMZwIgGHckwPJ5atqQfIH3FPwZP8xUdC/nmwyMrztXWtJcVGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/button":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/icon-button":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f52358dd0.0_1683901927128_0.32271453092694635","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/snackbar","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5f31a8b23bab65a490ae2ac6865874c99f0e33b","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.576d3d2c8.0.tgz","fileCount":42,"integrity":"sha512-aOPR54EI1BrlompgcWcYtCgGHvd+mtvHrgcbvHbB1BxqIVG7X6N2gJ/8I4yzDNjXbxlu0hPVSsVRwhuvlF6NcA==","signatures":[{"sig":"MEYCIQDaHFnlVzUhe+N7nBTWrz7AhrZFZCQ4SPR4WqDY5ABzIAIhAL4G/zkY3jCqbz6xIRJdqCoOq/uGYZGvUQlM1fDRBUZu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/button":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/icon-button":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.576d3d2c8.0_1684202497105_0.4847554957284259","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/snackbar","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cf749f54d82f4f3e444519dcec73e8665114df9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.19bb36a46.0.tgz","fileCount":42,"integrity":"sha512-jcIdoW9Ezb+omuMat7gmQUpz+XAcgas8PvMgAlQK0P1c/kW43P+w0ZT20/ME0C302n0jIFauteCZby3g5296mA==","signatures":[{"sig":"MEYCIQCH6YqZRvt8i9EdZ5F9Ymra40vddpP1obdm99NXjwpr8wIhAMnYDIKnV7Q1LHtemsXnZbWo00ZMBFvafC7Muvuw0r5A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/button":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/icon-button":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.19bb36a46.0_1684266938260_0.5627830737846182","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/snackbar","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcf0a06066583501dcd1f91850018a07cb45fac4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":42,"integrity":"sha512-XJ7UKiXV5Xx10J6MHJW3h3WlHSWZRw4zEZLCYNTM8R4Kz17E6uZF15YLgG3YuypV2tR5n8JsU7BpXMif2BEPNg==","signatures":[{"sig":"MEQCIB1iNYuLF+oRRuIGn2TO4yuutri/HL/HBZQRn0Ai2UnJAiABAyR3o1XwDQTK2pa9jUcDKVtZotY6xUnfEqVa9QEA6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/button":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/icon-button":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.aa5ac7fe5.0_1684776455031_0.6642524753097678","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/snackbar","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dab34a7c55836a08d002d6508d14ceb354a3957","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.90291f2e2.0.tgz","fileCount":42,"integrity":"sha512-f1+HaSaAkALtQqEr6WMUqfwOsJr5nOUjP15GA+sTs9SD7yzwqMeWsVriBdWXVRe0zNgew6sfBM+cLjg2w4VAOQ==","signatures":[{"sig":"MEUCIBvclqQX7eHyyOeGRRvRYeHw5dCC5WZDS2Jw1GNc/QCxAiEA2okOyGTt67HxUdFOXfQ/tJKvzNXik7pJy0dWg/Q7zNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/button":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/icon-button":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.90291f2e2.0_1684863878303_0.6934529977326158","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/snackbar","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.446734f27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5034491a2df0c01c03a1f941d54afd2f6310083f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.446734f27.0.tgz","fileCount":42,"integrity":"sha512-0FdmBXkBPzd4SxFIdJlFUOo+iOORRfMhG8dwRQfe3AQ09oCaDDVw34nTTLXTu2IR+NGQkt68BnqBaNvM3e3EHw==","signatures":[{"sig":"MEUCIQCW/N1sjc69Bfii756tXeDdibML8vhwrk5RZql6t6z9GgIgFm9Fh3JTrZErLigW2E5ukVtrxW5uL5fBX74nE3tPt50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/button":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/icon-button":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.446734f27.0_1685483387484_0.3210991931531606","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/snackbar","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.19de312d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e946459e6d9bcedb7fb9d8f2211d414c11c1c8b8","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.19de312d8.0.tgz","fileCount":42,"integrity":"sha512-qICRyLVJvTOH6Z/JcZUUjdPICG0HIBKZFqd2pkTgZeX0whQUSWa8wOP5FEZwX1uegMFNo5aiCh7R/UVCU2DueQ==","signatures":[{"sig":"MEYCIQCju1Oh9UrtyrHrQrmLidHUYv0QqF3EUswEi9PHrRr/pgIhAJqIf52uTiwGF+hDjpzmtpBn1G5RG//fFhAd5GxHAZKL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/button":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/icon-button":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.19de312d8.0_1686072008354_0.9548563540810477","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/snackbar","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6081d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f4b77fecb484a0613d651187b5347b306b06db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6081d829b.0.tgz","fileCount":42,"integrity":"sha512-vXjVMtEFw3q3MqEfUUMm26DvROtZRZYNVMfahb21LZDRZg/IKuf8kZa9IXDjk0ZMff9GPV52SpSs4EmDoN6DKQ==","signatures":[{"sig":"MEUCICwUXHjkwac1pFLekVe+V9YUIWumxWu6vhoUwYArT2JUAiEA8tOsI5aIa68hNGd6Yc5b+dV5wgzM03J8uGdnkg/tLpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/button":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/icon-button":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6081d829b.0_1686100539780_0.5177489925816634","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/snackbar","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeea5ed0b671b51373b4872c50db51fd5c4dcdb1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b26c34a68.0.tgz","fileCount":42,"integrity":"sha512-MSMiq7A5Xs9HbEpwbJP55sPMDJMi9LOG8IK/h1ts61UL5eM5ArsGxsRt54C7csf2IosFGzzKiZJUMkzIOwBHTA==","signatures":[{"sig":"MEUCIQDic1uE6VQH292nOwnb3qvDV+jn5cA21S10I40TYxbUXAIgXTM9UN9jU2f3aWS6KoMfqW7//YNlsl9s9J0miDtoN9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/button":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/icon-button":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b26c34a68.0_1686169210181_0.2664690837645527","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/snackbar","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4fe911371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe66aba284dfc4aed533bcf3e96d9ef255348921","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4fe911371.0.tgz","fileCount":42,"integrity":"sha512-PTKvgsZ+TB0Ej3w8GsHKTotFRe1CYOk1lAzuTl655m4d/XQi4PPCY/JjhgkqlZRSWixIMDcYzA/QSILz12JORA==","signatures":[{"sig":"MEYCIQDCWdbUn/ZZ2EgI+QrkFL08JwosC0gnunHnsFjekidxogIhAPRmIPMbqluCcN8UJENknc3FyyD8BkOwPOo4xGCmQzog","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831762},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/button":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/icon-button":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4fe911371.0_1686179264076_0.8102354766461797","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/snackbar","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfbdaba753463e0d058e28f139526908b37551e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a9ff9866f.0.tgz","fileCount":42,"integrity":"sha512-8bZuXownw/Wr5itt5HBMZG6CHAv69ihEp54R77FZM1Aru52yB4juL6elE4SbdH1zRWzf5H1P1NTsXYCGcwIjWw==","signatures":[{"sig":"MEQCIH66DQdXpaStXMPNueiEsYEhi15B+J89kEi4rqP9OgfMAiBEgOv3NkaxNkNm3Q5KFejbi2Sppu4nO4Lpm6QVgASjrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/button":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/icon-button":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a9ff9866f.0_1686656393835_0.4563506802788526","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/snackbar","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b994146f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab40dc533f4e4a0aee9847a4bb4232eecd6e1308","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b994146f6.0.tgz","fileCount":42,"integrity":"sha512-fEhPASJossScNpcrNYrrH8uU+rUf6+kw7/ZMrpUzzz1lVXliL28jTNEmU1nFpcDI4M2GXH+Z64f7vl2hiMDG8g==","signatures":[{"sig":"MEUCIQDnsIoAkIxH8lnRLBumvfHqGkCm4AX36ADn/EgzS8C70wIgIT6kFVpesJUw7D4teXB9HCaYKypN5S4CiFvNKLFhl9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/button":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/icon-button":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b994146f6.0_1686776727024_0.233831962572848","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/snackbar","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8cfc2651ca7050966d7103a05417875cca78454","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":42,"integrity":"sha512-DqwIkXsUN9THRe5Xuzky0NTXP+fD0dzmmEBzY04rZXb4B+5L1Qkfl3Gciyg/SR4gpT0pPKdYixULkdZxdPfp7g==","signatures":[{"sig":"MEUCIQCf3tWtJq33Ca8XOGEWUZFbLajqJRYFv1AydjraHAGS8wIgWD7cdzTRj2pfEYVh31GsbASg3M4WM3Onqv9HcqGnMfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/button":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/icon-button":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1fb4b1a06.0_1687892338954_0.356495645006355","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/snackbar","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"439d217c64bd9e092b11bc6eaa80e1a250cd9e26","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c64a2776e.0.tgz","fileCount":42,"integrity":"sha512-n/KiqEzKFo7Z5m29kaOKJ0BznyCfSTKKX/m8n+5fgCBFraZ+JBwtJcQGA37js+Ar0EaPJpN+2c44jslCwKi53A==","signatures":[{"sig":"MEYCIQDn1PJ6kOtjh+hzLN0R/OgqOSxhsXnABEZvm4W/zF67NwIhAOlsvTqujZYgsBIuo4rNu6Ssblcv73OIGxIxChVdYJzA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/button":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/icon-button":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c64a2776e.0_1687897103297_0.44651931154991864","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/snackbar","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d38bb4d7132741216706b22d8ae34f6c78439ee2","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":42,"integrity":"sha512-GsvC57pTb1C0zPwAQZ5EQLZyi0vkVZk0Qr6sUpfLdPeCzcWpaLS0U9z2c8Yh9nMQW6RKuVEs1vAPBldOMnEBkw==","signatures":[{"sig":"MEYCIQDUfV52XFtTfCLJz43onn5elVuaW7gEBg30lNDzdNGC9QIhAIMPPNOvVeNABE/5+0prt4tQADIIRzYWw3qrxD8gWNl3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/button":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/icon-button":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.b05d9eb7c.0_1688055927093_0.1367698528583554","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/snackbar","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80397f3b69d4d4703ea6120b5afaebf0e46d58df","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2a9697dc5.0.tgz","fileCount":42,"integrity":"sha512-/97dEDdvEIJvVHB6I7dma1FSPK4qK+hazXxeIaUmwrEYdahN9dBFKBrFv2OdjaOTAXbU90juiZGy/m/Dwkdsjw==","signatures":[{"sig":"MEYCIQDIDKEvcR7cg/ZAomEu0M7fJLlc7bD/yy8zCqBQuHCx0AIhAKOL5bVrYF91IFxRzWIHVydS+b3iwguBjGA1Y+mjpKBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/button":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/icon-button":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2a9697dc5.0_1688163331119_0.24091063586402273","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/snackbar","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bac49dca73dde7fcc5ff6716e7449f4bc73843f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0c52adeab.0.tgz","fileCount":42,"integrity":"sha512-vWjqJ+I3L1fBaRnurnkkrGRywOuAfrmssvxH65/Y5BLEmm44pnAcDm1t+VyPiCHeql6aUztNc6BWx/iW6p94tA==","signatures":[{"sig":"MEUCIQDqBYh3yA0Y/rQRokVmfnnqBtPA51XwO/jzin3ORBuliQIgIKyrGoMhfrejOy6TLqMK11BSzSqsxNbNZrYP0kfFX/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/button":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/icon-button":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0c52adeab.0_1688574454940_0.8647156379937375","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/snackbar","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.83355c322.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66450c8b7053d0fb5b5bf73efa3505f2d4b5040c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.83355c322.0.tgz","fileCount":42,"integrity":"sha512-oXv+a7t62IRSGq7kWYdUl4LrJU1O+96UzbFMDBJ5vjhUxH4dtDdY6PWow65k9K/xnnT8kQUiMg5xdS/FMaq+Bg==","signatures":[{"sig":"MEQCICxu9KuZ3y3aKOS41kUXI+WLWQGp2lceL9ODAhR0CLHRAiBHuu53VUecyxZKs91Sz1tYd8Y/I0vtziyYEesl/CHcFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/button":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/icon-button":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.83355c322.0_1689001646923_0.5679771483576972","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/snackbar","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f482fab88c3be85d06b450b67ac0008b6352875","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":42,"integrity":"sha512-TwwQSYxfGK6mc03/rdDamycND6o+1p61WNd7ElZv1F1CLxB4ihRjbCoH7Qo+oVDaP8CTpjeclka+24RLhQq0mA==","signatures":[{"sig":"MEUCIQD1naB9DF1XPJR53lHe0VG5VRZqjJlKZT39lelnWLqf0AIgOXxiZzL86x8k0ChBY4wdUE8FpwmmwhKJ+nhvsB8YM0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/button":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/icon-button":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.bc9ae6c9c.0_1691097793031_0.9764312927138186","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/snackbar","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"181041d5e3a35f872a3261b8ba51ad81c2ec7def","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.3c44cd956.0.tgz","fileCount":42,"integrity":"sha512-LvlpMgjVG2D2SXAeSp5rBfsM+91gwpYgokKxzxn0dxW1o0xVR6BbQaKMBIuJygz5ubSK3h8p1tMYcvUC6PNq8w==","signatures":[{"sig":"MEUCIDURMpAaa8+5JcP/dEe0Edukt24vfaY59MYLLj1x9+yeAiEA6yVBmO5lFLJYGEav1/w6ooXghXpDZLrYSXXGRAv8GqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833147},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/button":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/icon-button":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.3c44cd956.0_1691430610859_0.5035948716174807","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/snackbar","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.02702296e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dad8496ec4e47146445f41867ab6a1ca2b75c07d","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.02702296e.0.tgz","fileCount":42,"integrity":"sha512-xmCb562Ic4eEdiFYwU+IL7Dh+eSdCfNKKIQi7vT9yVBG5BeiJUcZUAyUzEK2Oi/S/+hQH0ZjakZFJyr6s5xsCQ==","signatures":[{"sig":"MEUCIAOyrZlEAv2tI9fg3o6A/vqXe2O2cnSJd/51JBOY766hAiEAigiTb/HcXsAfe+Z0XB7/M6A0vP/dAW2J5yUtTLwQC4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833551},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/button":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/icon-button":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.02702296e.0_1692965216434_0.5909065802313822","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/snackbar","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.872b65832.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6be9411887e479634610ef74b168952caed0e31","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.872b65832.0.tgz","fileCount":42,"integrity":"sha512-0jVwPbdkcUVQezzaIDtPEf2rHBu03+IuSyjkL2Djza+Cp16AwQW9VpAJtQDzpNM7lV64yWsu06VoJ4WSYZTzmw==","signatures":[{"sig":"MEYCIQDCZ9qT5cjExewNw+tDa1HOI2GiCROUpReeSJYQZyxmIAIhAIGl5djCUirhvn3jSkvEWujS1t7XiItLyrfVzn+UkiPM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833551},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/button":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/icon-button":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.872b65832.0_1693397718466_0.1187368098363275","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/snackbar","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42247b3b0b3d9836e4b8f611599de6f0416a29c4","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.89b2e4122.0.tgz","fileCount":42,"integrity":"sha512-ThUhm/HhxVv9Z9RFip4a3S51+jrGc94XYhvks9haqYtPvmO41v2JbTHcymBI/9XL/tL6mlTGzgeRoD/eARw5NQ==","signatures":[{"sig":"MEUCIFAKjCn7RhnN4p229wk5yumRU33wsdyYB4L+N4YJcjvYAiEAlmTukWrbGlH7DC4LfO90z0WQz7b3pzocg3GaFH4Go+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833551},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/button":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/icon-button":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.89b2e4122.0_1693498117096_0.5341306789288445","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/snackbar","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c39fcb049f1ac9df8bcf68aa4b6c6393a2386e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7a3942e7a.0.tgz","fileCount":42,"integrity":"sha512-NCQBYUbEn+4JWbYrdT4UEyn1Nq+3HKeTYcXHP14X4tVxEbJch1UChfbvRbOTC622XDYzUvjUKIcjCZLReszieQ==","signatures":[{"sig":"MEUCIGfReu9kMQePxusrDQB6hMMFr8UBNiAUj+2wWM5HEJm1AiEA8+eiu6YYu0s+bwrdArL4UhsG28hGKurEmo7SjA2fvH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":834321},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/button":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/icon-button":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7a3942e7a.0_1693507285879_0.911224922452998","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/snackbar","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.54feb3020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba27a59cdd47fe0cc867342ef2c0277b4e544dd9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.54feb3020.0.tgz","fileCount":42,"integrity":"sha512-8ku/SQfsy3sevzQSzgybOuPaRuUm4JndRA1FIcgGMPdXNjHh5CLbzHp1LiRC8n5HKSiUaN1If/5BOV7lM+NK/g==","signatures":[{"sig":"MEUCIQC45TtEVoIpEaJRYjyWwRg7e79ANmBazT285WXtiR208AIgGa54fq5WjQO/KxQAYBqq0gl1sxfh5L50Ec5TjlPr7Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":836551},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/button":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/icon-button":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.54feb3020.0_1694466424288_0.9711625480901342","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/snackbar","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b427ba6e871197a3e378f2f1a5b0a0f3720004f9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":42,"integrity":"sha512-IkYvxe5Fi+sfpMrEdH4UnOAbZVyTkbQ4oUrV7ukly1hIdbAs0FkTq1e98J5WMsDmKOVvwAH3X41doWCVHjTIZg==","signatures":[{"sig":"MEUCIQDN9q3RyUhHo6ovU80xkBeU3GfvcDa4fHyE+dv6hnTyVQIgbCiUC644RzRSIYgdtZsfIxSJPs52ww1L/NQ2vqxjvMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":834321},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/button":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/icon-button":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.6cda3ce8d.0_1694483222744_0.5515141824073719","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/snackbar","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.205b20b36.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f7936eec22c649308295db956638e86c9cbe02","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.205b20b36.0.tgz","fileCount":42,"integrity":"sha512-x+e8aIDK8LvKAcZ4XNMLbbDnZr1FLegSLCcjBUdGSGESwsdN0BJy6nwBCBSz2uGc3RVmy3Urp6BH3lIY0Les1g==","signatures":[{"sig":"MEYCIQCPTzQ4l7Wd0Xf48/HcQY/FlorbTYb+Xdsv3OfkL/K1YgIhAIAU7RTuoeLL17tVrI+mj57j2VtvVNDw6/XuneKBJUI/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":836551},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/button":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/icon-button":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.205b20b36.0_1694625592633_0.9487729439299726","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/snackbar","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.22bf82024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acaccbc96df2be3d4d3a93a62760ccbe7b1beafc","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.22bf82024.0.tgz","fileCount":42,"integrity":"sha512-R/QomJT7lFEoFQT64F4J/8G1mghJwBjuF4Bdyau3tVAQi9+i9VluzroYQL6uPK2qdkHjW9ULrAT0slG6xkwjhQ==","signatures":[{"sig":"MEQCIHpQgFAqvJDqlJLy7PtcHz+eBaTg+pM5jGeYqR3602SuAiAn7jK5Np+hAdJ5AeMnGAgjGui75bCfaTIxhMMWMUCs5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":837874},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/button":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/icon-button":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.22bf82024.0_1695028416775_0.39655829313112645","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/snackbar","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a246a4439.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"201b417a0e0d674d09c68e6b43668c3ad9b18346","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a246a4439.0.tgz","fileCount":42,"integrity":"sha512-2NAtC1qozR/uajszZnPy08Ej8HNnpgvCjNCBerDN4SLH2Q0/aWrVrUjqRCp2ayAvsX+szoroGbCboMhaWRzDuQ==","signatures":[{"sig":"MEUCIAQdjdVND8LxjuCVS1U78Xl6vVMMgrLlJUrLV2vFWfGWAiEA1zloWNveediWz0Mxv9vUCbzIK/Z3TEFUCn1rW9+lWpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":838022},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/button":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/icon-button":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a246a4439.0_1695059276385_0.6328124897895042","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/snackbar","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d153db62b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d4844f38fecd096fc258ad8326c544b396062db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d153db62b.0.tgz","fileCount":42,"integrity":"sha512-CIyCJ+jupbu7OGm1ejEDy2YVH4Y1TRV+ucw3rZREX49aGoFqdoLDisdvOXMyYWYbOdvRc8walvMy5Se8etSfTQ==","signatures":[{"sig":"MEQCIFaozQ+uTAWFk43l2w2Z+BdfkNZOLuZdUBTSqZURjgUFAiALH7Tv8H8SHjbL53ceff6AuOj/8F5l+flTmX6HzdskSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":838022},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/button":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/icon-button":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d153db62b.0_1695151024329_0.6507790783011536","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/snackbar","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"accc20d6d1786f6157d41d5b919545c28f9a9fe6","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2528c1c3b.0.tgz","fileCount":42,"integrity":"sha512-lpPGUk4b+dFzKfcw7RNPNYgQwPiuj8YIjinn8Ohf9VovVXLAbGM5yCgO7KJq37p1ZYxMiH+p+1USzu4XzLfilg==","signatures":[{"sig":"MEYCIQDjoQb1MmPJDhcUNS0VRQCAuAJX9+zF74uryCUrBeU7GQIhAOiHay6XbPV6crQ0NuXXI/NXLApdXh0JwOb7lkDyTcIn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":838042},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/button":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/icon-button":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2528c1c3b.0_1695233314466_0.661131224191273","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/snackbar","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b267f1f2677a5ca37bb4f2ed2e344f83be282a1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.1728a6dcf.0.tgz","fileCount":42,"integrity":"sha512-41OZDsb4r1jNSwG63rcedLeIrF1daBuH2Va9+MV4r6H67KqN+OM5HRlMB4tjU5EYYzoCEYz34ShbUCcETFp9Fw==","signatures":[{"sig":"MEUCIEYEaojGxpbnh59LfxnYU8gwUjnLGjEfWWUxmdcW3ZabAiEAmectauSetWWprRcWSybrd1xSp9GuRr/Aq5pXl0hRt6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":838042},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/button":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/icon-button":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.1728a6dcf.0_1695691490478_0.11216969986313474","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/snackbar","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed4b590f35283a5a9a65a359635efd6c16dc8c2a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.ebb636f3d.0.tgz","fileCount":42,"integrity":"sha512-XJlrij1FtphAj/bNsZgIGeU4B9ndznzKvivMg09YW4leRxN/qv2iAh5z9ww/sKK9ZhDAv6ScuOA/20hG6iQBLA==","signatures":[{"sig":"MEUCIQC0DYFL1zVEQ+nX4B+oCF10K/O+sAzNwibv9KBOATlZGQIgT9Ouk54tahCtn36R8g8yCNh5Ls+o3MZTgVmVDT6kTqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":838042},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/button":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/icon-button":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.ebb636f3d.0_1696016757890_0.55373231761355","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/snackbar","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3eb2d9b0717e2d0d7c4842137453e945b0bcee0c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":42,"integrity":"sha512-Y8MRadKrknM2eg7/4IGLlzzt92huClAM+FslS+3K4wyWVpUvp4JoiZOkqsmHYGe+rOzxr2asHmFOPy/31bMJmg==","signatures":[{"sig":"MEQCID4Zi7DWMBfMqkmY+7EGZv1rxW1jPsR5tzzlW0pvdRWtAiBBMR4jFjvfud+6jyg5NK41c/W1UmvzTGyAkgvdL9ZiKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":838042},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/button":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/icon-button":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c0d21ecc9.0_1696880302824_0.3847903021357335","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/snackbar","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.127a44b28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8a03b98fa56d77ee54f32fe5fb0cfab0ca44357","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.127a44b28.0.tgz","fileCount":42,"integrity":"sha512-kMokH0CvrsxaFUBj8Y0s+ZqDtC/MXolgJTQNS6n9jwz7N5rX/+sQRgwifEbQkgkdGbqcVTKtjjPfA1n84kx63g==","signatures":[{"sig":"MEYCIQCTlbclrC1CUG9aV/qYvYjCEDoZqF3az6QS9/TvlCuhZgIhAL767iMe7mQx10NCD53Zy4a3p7yTCgvnpyGi9Qn2dYJ2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/button":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/icon-button":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.127a44b28.0_1697140936216_0.7037546196638853","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/snackbar","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.0ad128337.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470c2a02583434ef7e6cd552013d7d91936d8dfd","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.0ad128337.0.tgz","fileCount":42,"integrity":"sha512-n1OFW0Pm5sXOgQ0L5ohse8/y47mmj29FQsdxM7mdPAaPcxG6NZLGnNzjLoIScHY85Je42VG7dfKb5XMAZCa0tg==","signatures":[{"sig":"MEUCIQDq0RmSL/CVtS7tQtL/JPTnFsNz5JBBcfBrMpdrK4RG6QIgf5+B74r2O3moQ7fnYMdGqDbqp67uWQlvVunYRJVEhPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/button":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/icon-button":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.0ad128337.0_1697741634773_0.18986800692061578","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/snackbar","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.9cec94097.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0c1e01b2b612dad6c4115e8339f498ef490363e","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.9cec94097.0.tgz","fileCount":42,"integrity":"sha512-IKkAjc9I0oktafqmFE4RXQ+u8/Ld4kltmQKLth6t6ArDJUEVmfZ/LwgzpVtP66btRaY6rVqu7k6F0b+72KgMog==","signatures":[{"sig":"MEYCIQC7fyuvBrK59ywup+XGVgKqdHtsdpQS2A0q7J8x79hI6gIhAIVQVz8eQ7FhJO8XBxadZPoUsFEwMDoN9gINuvU9Kcy7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/button":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/icon-button":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.9cec94097.0_1697757067643_0.8858678375117732","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/snackbar","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9d9d0a0f2739f9dae27d8e1c8e2cac21bcb534a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":42,"integrity":"sha512-H+e5tvb2wJBtSyLIHAPTTvPAIaezWJEAQkn/4mQlIxQBPO9TlZAdkJDdlT//x1x71HLaGET9+iHTk+zHa/CB2w==","signatures":[{"sig":"MEQCIGlflhUdBwJQZrYo1cv/kocgow0kGMAfzLxz7U0MeGrjAiA5GcT8Q1/+tHmtIo6+oCOIIIXRgRYHfjbRatAL2/yP5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/button":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/icon-button":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c51a0bbcc.0_1700081960904_0.4613376443532389","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/snackbar","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c389639bc794fb1a5863ee18733b5f5864851fe7","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.d76666ad4.0.tgz","fileCount":42,"integrity":"sha512-urzyo0Gfdy45u3vogC2Kw0jgeG3XBHaMjHCK+IiUkKZ3uXsG78WfI5bMgUQFunGulJLX/w8P3iQrN/Mu/zlsTQ==","signatures":[{"sig":"MEUCIQCGoG2Q89oEUBsTIaXQb3xcHeEzwZ7djtSkz3ME+10USgIgGaNk0mx2r7LK1KL9Q0e9jFIucRQpRTbqSwcL+0VNtwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/button":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/icon-button":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.d76666ad4.0_1701123226101_0.3437948488901088","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/snackbar","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c8f04f79b1447568169847292b2bba2e0a6f2c","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.8656bf0e0.0.tgz","fileCount":42,"integrity":"sha512-sBPoyXJrcqrxBuCsENVS0DyXIne3Xr6moD6U1VcS7WkMLrgV9WQbWJp4XwUcQenD69IPvR0hOMMGoVNLpSUjUg==","signatures":[{"sig":"MEQCIGyH0WbgX1OOAykZooQepFmzLdVyaxkAp4jHYu1MfokuAiAzcLfnDBzOUzRp1xzx5xcCRyj6AOg4rNGRAlhhJ9MaEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/button":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/icon-button":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.8656bf0e0.0_1702415963324_0.25509734845243837","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/snackbar","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55765e8755d031186954fed98c2fb6209e82bce0","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7f224ddd4.0.tgz","fileCount":42,"integrity":"sha512-sm7EbVKddaXpT/aXAYBdPoN0k8yeg9+dprgBUkrdqGzWJAeCkxb4fv2B3He88YiCtvkTz2KLY4CThPQBSEsMFQ==","signatures":[{"sig":"MEUCIH/FQNdhGCOaAUo9K4jnaZ1MOp3w7yNuWv/lZ18lsMC2AiEAlbtGbW5Q0OAoZjkUMkHHez+EUwLlzL/4SsCEmBq7fbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/button":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/icon-button":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.7f224ddd4.0_1703743787510_0.3045791968931826","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/snackbar","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16b162819a688c0c4eafbbfea03f6e7cc9183a59","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":42,"integrity":"sha512-4r2ioKak/qLQvwl9mC6pBuifrNFsDa9yEeavmdwud5+pRfz6+R7ck61k5m7DsrVHIOQ10FNFzLYAmloUxx9XUQ==","signatures":[{"sig":"MEUCIEmDA98j+lAVLaQUhY/r5PasqvxAqA18qUqInPpdkEkcAiEA2zeu1eLGi9kKcHuMDaTtOecVZRHnCR5Pu/Uxfpsf/K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/button":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/icon-button":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.a0b8a90c0.0_1707333611284_0.07873962955473979","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/snackbar","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49a1d6c0b8b923e7db3a289351456a173981a486","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.e50b478eb.0.tgz","fileCount":42,"integrity":"sha512-SpbFUUoGgElrTYb0VNMVehKeXM0FAjS1a9axjEkd2lPvPjyDN5xuibs38UZut0u9AhjMRG9dZ2JCkDKS0Nx+bw==","signatures":[{"sig":"MEUCIATzZgJPOU3LRbKMPepuweXvSxC8kh4Zm0iOrYKucb20AiEAjqhKJoHyBwRlnp81QZC43aC4isEvwGs4fam0pYIDVYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/button":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/icon-button":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.e50b478eb.0_1707415728428_0.38595174587101955","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/snackbar","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b8d53d79b4c996448420a70fd9c5afa87a5e726","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.c43b3438b.0.tgz","fileCount":42,"integrity":"sha512-BAB78ZGuOVJrDtqeyHOPBkVjtb0GQ+xiZJw0qd9vd5l0LXnfqDOMcdAD+U/+avSqNWqFJYAKOcXLRRvfD/CUqQ==","signatures":[{"sig":"MEUCIDXhQRW/TwUeeijj1FiCBGKeQEZDa+ytbvmMragvNeupAiEA2D38qDB7jcfFGFv2u5FYPG2+te+0dxbxJ85LCFO9GgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/button":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/icon-button":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.c43b3438b.0_1708719497132_0.7640948771584029","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/snackbar","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.819498d8c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bfe410bfdd41aee9285c6a8c61ecd838d1b5ffa","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.819498d8c.0.tgz","fileCount":42,"integrity":"sha512-z+mJ8ia/4KJ9QzTYoPrl9ufxOi/XC1ZfGQ/7i0dCyS4HoUMtgHd9QHFn8C6nyuPgB8upxJ1kaAeKuR7ztyGb+Q==","signatures":[{"sig":"MEUCIQCUao1pgoIcJodIte8bJjdRs2GnCdqnS+rSV2FIjqLHsAIgfRkjU2UTaod0zcm83QaSxt3JtWClUrB5Vh0Td6whIxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/button":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/icon-button":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.819498d8c.0_1710515748691_0.3519626271866487","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/snackbar","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.453a6248a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7738e0b348a7c03a30f3f5a33ed44243e4e30321","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.453a6248a.0.tgz","fileCount":42,"integrity":"sha512-qHs9gBYZK+dZ+D9IKqZt1icK+8FZVZG6WV2BJNKQw+BUD03pPsOQe+hYIDuJs8KBlvIYTxqad/4tD6YV9A2kiA==","signatures":[{"sig":"MEQCIBeAE+dFdjCADuC0PUCVehZ9PCQZMmTgn+lwJTr/LA4vAiBrERa3NoiuHcmBFg58KfOrgTPmhsYfV/5b49vys/11rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/button":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/icon-button":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.453a6248a.0_1711386855806_0.04543398669657406","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/snackbar","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e031cd80e5cc77ce8c0d88a754cef6184c151df1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.68edc03c6.0.tgz","fileCount":42,"integrity":"sha512-+Dhun3WZKJiz0NzDy6rhX+8ZgTipwGU6scJJU2Ae2Q/GwymbSLMT8Nb/F/35SwZnkXtVjUG/09a8kh1WedJBNw==","signatures":[{"sig":"MEYCIQDdLxGUn6NQ3cF9rrhKmBaX2oLedVQsI4aNTeGiSq16KgIhAIYcQY3SDL0SoNgVR92ptz84Q9WGzIUkkCro4RzdKWUs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/button":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/icon-button":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.68edc03c6.0_1712603229043_0.36261515630670704","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/snackbar","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e30934535a94602bb66d08452fa7302017f9a111","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.5bebc0064.0.tgz","fileCount":42,"integrity":"sha512-Tn4aKTqholrAqXLEumiWXGDVnIyBP3np9HdEMge+DLzjql4Fcr+KYig9/usD8jAy8vT2ZGCTT3Z+DrGPhBesmA==","signatures":[{"sig":"MEYCIQCF0L0HHG1wzBnaByQ29nPGlBW8pMZapL+14iePnnhm3gIhANOglJuIts//gD6G6RmQQOmsx8WEelmhdxFrv3FGiGxt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/button":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/icon-button":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.5bebc0064.0_1712871727333_0.18874519105538456","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/snackbar","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.311f29a60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50ac87c5e47b07c33877051fa483e36a592bba40","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.311f29a60.0.tgz","fileCount":42,"integrity":"sha512-xufZWIqTF+oUqzEb9WzHyqA6BJQICnW0A2JfH2onUnosBTylYVftXMdxCMZ7CsMHjbMIJQb7Dr6j0Q/L3NFHNA==","signatures":[{"sig":"MEUCIETqA3GQ/bKA1ISWc/L/6VTOcXemFzcmebaT9WYXOb7sAiEA8TVLbmAvGhZ85sLKsVN7eJMWRkzKGbPNYhcYiZoeHRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/button":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/icon-button":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.311f29a60.0_1713895266947_0.37727635368567847","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/snackbar","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.65c10a622.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e605d9abe968770025c0c0278c5e7c69b9b3aa29","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.65c10a622.0.tgz","fileCount":42,"integrity":"sha512-G0PcJPax8UDe6FqYRfRE9gsTmj8UKOfKqFvkAhy1NaI6JTAxk4n0BmhHwn4MdYLKFBRKWTrLAkwVTcxSx8/3qQ==","signatures":[{"sig":"MEUCIDHoRW1FwYPAOBw7DpbCBkoXNnDEllrTGNk8OsnR36P9AiEAxWzbLuACYubSu5CXKqTW7QW5pETov8Kbwfw6w3+kl8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/button":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/icon-button":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.65c10a622.0_1714070980680_0.9730664479327185","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/snackbar","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bc8a2cc5b2068db6e2397d807264b98ac227767","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":42,"integrity":"sha512-BWy+/pDZ8cV3enQzBwjy8CAzetDSqhNH3Mhpjhub3kuTQQFhLaZAnZPMpcsd21axB2FNV19yVmLzzU7A1pa65A==","signatures":[{"sig":"MEQCIGFFZE6muKYp6DdkYAG7nNAH7MmBrRVVaEoH+14eYX6tAiB4p8pdXRfdLmvrf0kt+JQQo/1px4tsHPypeL6tRCmQMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/button":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/icon-button":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.4b35cb7d0.0_1714651425979_0.7957896116192464","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/snackbar","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fd9abe6e9ceec68261ed8d1ec5ed358ea1df73a","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.f80ac92b0.0.tgz","fileCount":42,"integrity":"sha512-ahG6He611RNMVnofe9JTYNJYhUzSPnjfq+NRJPWyyzXJvTdqdwZX/OyhCrPn1O27cMBMP+8cbrcQo86MgiUYaQ==","signatures":[{"sig":"MEUCIQCtEM0xIuQAag8W1As9CrPMVCKkdClCFKFQ6UoctQS6WwIgXVIHkIMJ1mhPugSNpDnfx81MKeJ6pfjRkNx0e6Yj+Ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/button":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/icon-button":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.f80ac92b0.0_1714652033187_0.888644594517215","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/snackbar","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac069815bc35204853b8b0bfa1ad1dcac04c2cb1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.2f5b899bc.0.tgz","fileCount":42,"integrity":"sha512-6WiM6B1DkX3s74EuNcKo9j32/CnBkiZv486Da2lz58GMCHIJ4+7R76qaNqQfu9P/bX9HrZXjYTdgrMoVPEte3w==","signatures":[{"sig":"MEUCIQClsEOR2K+88xQlBConglXU483yOZ30oP4DUv4a54nIDgIgL4C7OA9waB6QLa9nO2BYYU2fSIvJl+rxzarVB8cmkRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/button":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/icon-button":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.2f5b899bc.0_1716213444418_0.39951748393856645","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/snackbar","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","snackbar"],"license":"MIT","_id":"@material/snackbar@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52b77c08241d30e8e29d7a3b33ec0a68b002c3db","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.cfec83c74.0.tgz","fileCount":42,"integrity":"sha512-nSRPjzdtXvBdZr0YjO9x/q7WvyF+Fh/xk8wkU7tYi1fcl1++3vey8TswGWKE4VR73mwIpzEHFiIuTN+8qKTAnA==","signatures":[{"sig":"MEYCIQCueF0Uj4f8RHzmxNdPDou3558gKfF2lVkPPA6em0dL3gIhAPVW3MP1hYWnMndPoBAUaAVvCRTKiVm8z5jQ7WQ+nOYk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":840144},"main":"dist/mdc.snackbar.js","module":"index.js","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web snackbar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/button":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/icon-button":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_15.0.0-canary.cfec83c74.0_1716231456544_0.3095190889489883","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/snackbar","description":"The Material Components for the web snackbar component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","snackbar"],"main":"dist/mdc.snackbar.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-snackbar"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/button":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/icon-button":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.layout-stacked;\n }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.position-leading;\n }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n .my-snackbar {\n @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | 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\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the ESC key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the ESC key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n - Chrome\n - Firefox\n - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n - Chrome\n - Firefox\n - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/snackbar@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-zsGWXqq92HRZ+BTbNK8u2+sHkvQ6O89n2odot5eutPbmFQqC2WmCTm3y8skg+w+nxnQDSNPiZDkupfXkOgmbRQ==","shasum":"f7691325f07a6d52037af57ba051d167166d1c0f","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.423edc3dc.0.tgz","fileCount":42,"unpackedSize":840144,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGB5Hoy2giLhUhGGCQsUcHghN776fasbGGzw8mHu77zGAiAz6eEFGZVecP0l1QJyonOsqoYssxkK2CPorPw1bJRrXA=="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/snackbar_15.0.0-canary.423edc3dc.0_1719425544745_0.9345178162423544"},"_hasShrinkwrap":false}},"time":{"created":"2016-12-15T17:55:53.656Z","modified":"2024-06-26T18:12:25.486Z","0.1.0":"2016-12-15T17:55:53.656Z","0.1.1":"2017-01-09T15:57:22.828Z","0.1.2":"2017-01-23T16:49:45.015Z","0.1.3":"2017-02-06T19:04:49.412Z","0.1.4":"2017-02-21T17:27:42.758Z","0.1.5":"2017-03-06T17:02:17.795Z","0.1.6":"2017-04-03T15:28:11.172Z","0.1.7":"2017-04-17T15:43:13.463Z","0.1.8":"2017-04-18T14:51:28.413Z","0.1.9":"2017-05-01T15:43:15.258Z","0.1.10":"2017-05-15T16:26:14.201Z","0.1.11":"2017-05-17T14:28:29.697Z","0.2.0":"2017-05-30T19:04:49.343Z","0.2.1":"2017-06-12T15:53:27.589Z","0.2.2":"2017-06-26T16:11:06.098Z","0.3.0":"2017-07-10T15:58:58.567Z","0.3.1":"2017-07-24T15:49:27.876Z","0.3.2":"2017-08-07T20:48:33.138Z","0.3.3":"2017-08-21T17:28:04.897Z","0.3.4":"2017-08-24T14:46:56.843Z","0.3.5":"2017-08-25T17:21:03.951Z","0.3.6":"2017-09-05T20:16:17.159Z","0.4.0":"2017-09-18T18:35:55.823Z","0.4.1":"2017-10-02T21:11:55.370Z","0.24.0":"2017-10-30T19:11:34.893Z","0.25.0":"2017-11-13T20:02:37.371Z","0.27.0":"2017-12-11T19:35:43.094Z","0.28.0":"2018-01-08T18:55:18.298Z","0.29.0":"2018-01-22T18:31:02.561Z","0.30.0":"2018-02-05T22:03:02.533Z","0.33.0":"2018-03-19T16:40:10.513Z","0.34.0":"2018-04-02T21:52:08.454Z","0.35.0":"2018-04-23T22:40:45.004Z","0.36.0":"2018-06-04T15:38:30.018Z","0.37.1":"2018-07-16T21:19:44.198Z","0.38.0":"2018-07-30T17:06:38.945Z","0.39.0-0":"2018-08-16T15:16:18.757Z","0.39.0":"2018-08-27T17:40:26.123Z","0.39.1":"2018-08-31T21:36:21.572Z","0.40.0":"2018-09-24T20:00:56.945Z","0.40.1":"2018-10-08T20:54:23.160Z","0.41.0":"2018-10-29T20:21:58.168Z","0.42.0":"2018-12-04T22:55:01.009Z","0.43.0":"2019-01-07T19:49:40.923Z","0.44.0":"2019-02-04T18:24:40.063Z","0.44.1":"2019-02-19T23:03:20.212Z","1.0.0-0":"2019-02-28T00:00:06.665Z","1.0.0-1":"2019-03-04T23:33:50.669Z","1.0.0":"2019-03-06T21:08:41.181Z","1.0.1":"2019-03-11T22:07:55.026Z","1.1.0":"2019-03-26T19:26:24.655Z","1.1.1":"2019-04-08T20:14:17.906Z","2.0.0":"2019-04-29T17:40:27.321Z","2.1.1":"2019-05-10T17:25:40.076Z","2.3.0":"2019-05-28T21:24:17.889Z","3.0.0-alpha.0":"2019-06-12T04:07:13.582Z","3.0.0-alpha.1":"2019-06-12T19:02:32.057Z","3.0.0":"2019-06-25T22:28:12.410Z","3.1.0-alpha.0":"2019-07-16T13:29:31.037Z","3.1.0":"2019-07-22T22:02:59.863Z","4.0.0-alpha.0":"2019-08-07T21:09:56.709Z","4.0.0-canary.0":"2019-09-05T04:38:10.972Z","4.0.0-canary.1":"2019-09-09T20:21:05.659Z","3.2.0":"2019-09-12T21:53:48.868Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:53.192Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:43.832Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:28.647Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:13.718Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:34.350Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:59.596Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:56.007Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:11.255Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:16.295Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:51.741Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:28.300Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:42.669Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:39.716Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:31.186Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:28.912Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:12.695Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:49.283Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:02:08.383Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:26.055Z","4.0.0":"2019-11-02T18:12:05.220Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:22.795Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:23.437Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:16.737Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:49.802Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:54.074Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:57.174Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:21.544Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:25.578Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:27.994Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:51.045Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:26.049Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:11.881Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:20:02.324Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:32.791Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:16.363Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:39.544Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:54.395Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:24.409Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:08:09.565Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:49.185Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:40.652Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:21:07.347Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:42.358Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:20.440Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:47.086Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:39.290Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:29.824Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:17:06.699Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:57.106Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T19:01:14.738Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:47.274Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:44.258Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:11:05.899Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:34:14.149Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:16.183Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:40.264Z","5.0.0-canary.391674a26.0":"2019-12-18T19:18:06.192Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:49.904Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:21:12.218Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:54.878Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:48.743Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:50.813Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:15:11.155Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:50.719Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:50.824Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:33.593Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:48.857Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:43.329Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:47.155Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:19.013Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:18.859Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:56.144Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:46.627Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:58.334Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:10:27.050Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:23:15.481Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:41.326Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:27:02.402Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:12.669Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:36.914Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:23.577Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:11:08.651Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:10.340Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:56.586Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:46.770Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:16.954Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:57.387Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:20:00.680Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:32.977Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:52.081Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:56.221Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:37.723Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:18.009Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:11:00.104Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:35.111Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:23:00.501Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:18.791Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:59:01.621Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:58.329Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:47.247Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:41:00.643Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:49.610Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:32.610Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:57.490Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:58.901Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:59.381Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:26:05.717Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:33.296Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:58.802Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:31.191Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:33:14.061Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:24.611Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:16:00.225Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:54:12.550Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:57.411Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:41.635Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:47.521Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:11:03.253Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:53.560Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:49:11.221Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:18:12.698Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:48.826Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:45.106Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:54.327Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:27.781Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:01:07.358Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:18:06.250Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:32.574Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:53.541Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:39.637Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:41:03.291Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:25.851Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:41.151Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:38:03.173Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:47:06.703Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:43.234Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:25.246Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:29.197Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:38.662Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:56.377Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:10:11.592Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:26.441Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:56:11.541Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:51.083Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:20.114Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:55.413Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:43.128Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:33:16.975Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:52.617Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:25:01.748Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:30:08.631Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:44:08.011Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:40.211Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:33.992Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:32.368Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:15.734Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:58.735Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:38:05.750Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:54.784Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:57.757Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:46.798Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:11:07.046Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:22.134Z","5.0.0-canary.535398572.0":"2020-02-03T18:13:05.287Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:41.606Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:41.386Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:05:13.639Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:34:04.955Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:36.481Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:55.497Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:56:11.392Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T23:00:10.868Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:34.728Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:26:03.745Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:17.589Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:44:08.264Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:56.118Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:50:13.753Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:10.289Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:51.773Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:55.212Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:25.196Z","5.0.0":"2020-02-14T00:09:35.478Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:55.768Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:44:26.821Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:23:13.471Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:48.200Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:44.805Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:29.684Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:42.968Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:28.895Z","5.1.0":"2020-02-25T21:38:49.094Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:39:25.867Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:42.333Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:04:41.473Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:50.595Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:11:17.476Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:26:55.672Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:49.974Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:40.115Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:23:05.446Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:48:01.098Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:23:03.135Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:03:21.874Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:50.529Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:59:19.719Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:06:04.884Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:34:00.350Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:26:19.721Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:46.419Z","6.0.0-canary.bec065920.0":"2020-03-12T20:21:14.347Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:36.287Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:51.779Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:38.176Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:35:37.010Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:31.383Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:54:09.232Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:51.658Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:55.363Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:44:23.807Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:58.802Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:19:05.445Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:38.601Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:57:08.836Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:20:13.366Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:57:01.759Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:45.609Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:10:14.685Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:48.751Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:48.365Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:27.288Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:37:33.378Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:34.472Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:33:11.125Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:37.320Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:48:01.279Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:23:56.809Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:47:19.844Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:53.134Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:27.366Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:50.590Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:44.423Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:11:07.083Z","6.0.0-canary.c02642273.0":"2020-04-15T16:18:19.355Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:44:03.483Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:28.333Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:27:38.294Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:20:01.084Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:55:16.345Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:51.337Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:40.007Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:42:08.304Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:40.398Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:22:19.427Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:43.634Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:59:11.309Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:50.142Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:21:05.671Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:46.521Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:19:24.040Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:59.287Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:08:07.747Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:58.572Z","6.0.0":"2020-04-23T17:27:36.876Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:31.302Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:58.284Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:49.525Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:36.073Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:39.356Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:33:08.144Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:08:11.770Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:18:13.763Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:53.825Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:30.540Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:42.117Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:33:48.978Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:43:16.455Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:37.904Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:31.864Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:36.191Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:48:18.105Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:55.229Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:32:06.325Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:56.873Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T17:00:06.960Z","7.0.0-canary.09f591967.0":"2020-05-05T21:05:21.673Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:10:24.470Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:41.687Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:54.562Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:30.947Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:50:15.529Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:39:13.309Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:24.334Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:08:17.128Z","7.0.0-canary.e84444387.0":"2020-05-08T21:32:22.679Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:14:03.612Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:30:13.058Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:33:35.536Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:28:04.394Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:56.342Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:19:04.986Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:48:12.955Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:36.924Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:52:19.369Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:54:28.050Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:45:02.272Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:53.251Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:36.903Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:10:13.630Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:39:05.230Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:37:47.425Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:51:23.468Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:34.475Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:34.616Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:42:03.412Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:54.313Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:44.240Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:57.462Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:53.586Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:28.237Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:29:36.154Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:57.821Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:34.147Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:55.317Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:53.289Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:56.524Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:51.241Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:51.654Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:29:28.824Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:52.241Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:46.073Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:47:25.716Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:46:13.471Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:08:21.019Z","7.0.0-canary.01de07011.0":"2020-05-26T19:53:20.596Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:36:14.189Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:27.372Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:37.334Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T19:00:21.516Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:29.483Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:37.821Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:54.633Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:39:07.508Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:51.879Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:52:01.698Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:56:11.460Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:51:09.803Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:58.440Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:50.027Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:41:30.386Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:26:24.872Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:45:08.066Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:52.649Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:38.263Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:56.451Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:03:36.440Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:24:22.455Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:53:17.444Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:47:37.495Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:04:13.679Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:58:52.115Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:57.628Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:13:33.300Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:15:20.106Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:15:25.025Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:05:28.394Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:45:13.296Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:57.404Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:58:26.683Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:53.163Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:27:08.212Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:27.224Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:35.994Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:35.556Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:21.668Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:39.025Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:50:13.704Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:22:18.859Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:34.597Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:05:15.748Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:17:18.988Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:22:20.788Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:39.609Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:49:14.597Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:12:00.738Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:55.007Z","7.0.0-canary.10b505785.0":"2020-06-19T20:22:18.695Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:33.167Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:47.353Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:40.004Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:20.256Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:47.814Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:57.328Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:29:09.450Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:23.303Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:32:16.352Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:35:00.200Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:39.630Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:37.169Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:18:21.067Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:26:10.349Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:54:23.240Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:24.333Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:30:13.550Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:29:12.948Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:34:58.315Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:42:55.003Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:49:11.177Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:29.845Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:59.383Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:58.889Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:52.807Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:25.586Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:53.441Z","7.0.0":"2020-06-23T19:11:55.045Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:48.110Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:42:11.306Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:48.822Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:35.077Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:57:55.355Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:54:14.962Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:32.607Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:41.441Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:30.672Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:39.535Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:51.952Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:49:07.708Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:33.592Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:16:15.628Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:42.680Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:52:51.427Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:43.879Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:29.980Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:48:08.594Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:57:22.733Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:28:08.039Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:54.637Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:27.241Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:49:19.820Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:52.402Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:45:09.754Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:28.224Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:36:13.187Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:37:13.715Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:44.878Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:40.262Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:13:30.743Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:46.866Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:08:15.521Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:35:18.555Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:21:12.419Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:38.932Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:14:04.034Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:16:04.241Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:35:35.351Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:10:24.174Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:40.344Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:21:02.600Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:41.252Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:51:12.587Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:48:14.581Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:24:23.936Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:46.285Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:32.934Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:54:00.442Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:47.344Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:48:17.704Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:48:29.384Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:50.064Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:53.796Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:46.162Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:25:02.401Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:48.992Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:48.649Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:58.000Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:14:26.288Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:07:52.260Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:35.624Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:39:13.447Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:48:13.860Z","8.0.0-canary.81dc33377.0":"2020-07-27T16:00:21.956Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:41.969Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:38.016Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:35.356Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:59:15.693Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:59:39.700Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:55:11.106Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:35.485Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:40:26.156Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:53:54.465Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:17:06.816Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:31.213Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:50:22.660Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:56.015Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:36:11.621Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:58.431Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:16:13.751Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:38.053Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:36.047Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:11:49.388Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:16:25.306Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:46.301Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:11:22.063Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:33.331Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:47:24.862Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:01:15.923Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:47.442Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:31.681Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:38.630Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:55.912Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:31.939Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:24:05.806Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:54.064Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:55:06.020Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:43.871Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:56:03.670Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:33.193Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:42.965Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:23.880Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:50:05.911Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:19.278Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:21:15.588Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:29.545Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:46.043Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:51:11.297Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:55.857Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:40.144Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:29.794Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:22:15.481Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:51.324Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:51.831Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:58.581Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:03:10.597Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:23.095Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:20.617Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:23.011Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:24.654Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:57.058Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:53.843Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:32.282Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:30:13.097Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:51:45.491Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:18:57.093Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:52:15.592Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:19.909Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:31:16.726Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:37.098Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:40.037Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:28.601Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:33:07.487Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:38:00.695Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:43:17.211Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:25:09.625Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:22:11.677Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:34:14.455Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:55.083Z","8.0.0-canary.546277d32.0":"2020-08-20T16:45:28.734Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:01:17.762Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:41.884Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:24.679Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:50.190Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:37.662Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:54.417Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:59.530Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:13:02.665Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:37.445Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:59.615Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:58.805Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:34.150Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:33.933Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:21.389Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:57:14.405Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:57:49.910Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:58:29.444Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:14:03.498Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:17:12.604Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:49.520Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:51:02.347Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:49.399Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:36.209Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:24.861Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:57.858Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:39.371Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:53:06.487Z","8.0.0-canary.a306aa488.0":"2020-09-17T01:00:06.433Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:27:07.912Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:30.542Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:44.896Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:19:05.770Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:44:21.426Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:29.936Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:34.325Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:41.675Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:37:18.598Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:42.308Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:26:00.456Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:55:37.346Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:28.317Z","8.0.0-canary.d71622574.0":"2020-10-09T16:33:10.520Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:55:18.207Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:48:02.433Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:58:03.189Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:17:03.023Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:57.987Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:40.562Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:45.983Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:58.213Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:33:11.535Z","8.0.0-canary.596e98424.0":"2020-10-28T16:05:14.033Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:13:44.268Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:35.193Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:14:14.474Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:35.731Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:30.634Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:34:05.189Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:37.050Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:20.766Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:00:57.814Z","8.0.0":"2020-11-02T23:01:21.585Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:48.575Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:35.841Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:33.678Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:10:41.588Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:28.231Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:47:12.249Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:45.820Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:55.825Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:17:21.577Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:46:16.818Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:22:10.224Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:29.138Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:47:09.351Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:38.279Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:26.191Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:53.911Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:33.520Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:45:30.817Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:36:11.380Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:30.948Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:45.137Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:39.802Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:44.627Z","9.0.0-canary.a41527604.0":"2020-11-19T20:02:31.516Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:57:23.650Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:49:01.256Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:10:20.025Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:16:54.348Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:32:24.218Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:42.616Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:44.679Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:38.725Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:01:00.615Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:58:19.916Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:48.645Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:56.591Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:54.239Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:52.761Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:53.842Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:31:08.879Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:43:04.465Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T16:00:13.975Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:02:47.608Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:39.287Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:19.673Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:17.491Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:43:22.934Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:54.193Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:59.539Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:44.665Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:41.959Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:44.311Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:47:25.229Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:06:50.749Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:12:25.994Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:51:31.403Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:09:12.275Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:47:37.860Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:29:50.622Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:55.015Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:42.688Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:03:10.277Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:57.686Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:08:54.347Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:43:25.380Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:33.645Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:53.241Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:48.179Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:49:16.235Z","9.0.0":"2020-12-29T19:47:22.809Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:29.605Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:13:13.859Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:47:51.984Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:45.248Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:58.411Z","10.0.0-canary.365c69360.0":"2021-01-05T17:49:47.148Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:02:05.695Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:41.630Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:51:19.761Z","10.0.0-canary.968735356.0":"2021-01-06T15:52:22.150Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:33.585Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:28:00.459Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:36.178Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:21:11.488Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:53:01.640Z","10.0.0-canary.089de519c.0":"2021-01-08T22:22:00.685Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:36.419Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:25:38.232Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:13:49.589Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:56:42.635Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:35.916Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:36.423Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:29.639Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:54.893Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:55:15.200Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:50.939Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:09:37.717Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:56:28.137Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:11:01.132Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:06:18.223Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:47.812Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:29.245Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:56.141Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:37:19.580Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:25:36.258Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:11:40.025Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:46:19.690Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:33.356Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:58.612Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:33.168Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:05:39.724Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:28:44.761Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:21:42.478Z","10.0.0-canary.994873795.0":"2021-01-27T14:52:36.759Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:48.117Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:34:09.708Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:05:22.352Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:05:07.374Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:16:10.546Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:55.841Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:50:52.541Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:37.467Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:56.039Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:32.540Z","10.0.0-canary.05f249666.0":"2021-02-04T17:51:46.482Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:44:45.061Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:36:20.679Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:02:00.001Z","10.0.0-canary.533092a90.0":"2021-02-05T03:48:08.464Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:19:12.342Z","10.0.0":"2021-02-05T16:20:33.155Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:43:40.246Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:33:06.817Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:06:32.470Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:05:17.790Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:36:15.467Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:57.074Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:02:04.122Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:47.548Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:54:12.463Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:33.036Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:08:22.710Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:43:18.351Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:32:23.290Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:00:53.536Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:24.116Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:13:15.393Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:40.670Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:11:33.159Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:29.125Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:36.700Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:46:16.437Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:29.517Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:07:04.525Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:39:45.056Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:24:56.192Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:44:22.424Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:58.858Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:38:25.518Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:29.589Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:38:04.753Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:47:18.076Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:02:07.718Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:57.035Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:47:13.092Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:32:03.245Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:15:40.994Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:34:40.509Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:36:00.245Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:36:36.034Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:52:02.782Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:17:08.067Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:41.716Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:59.690Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:32.885Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:09:33.294Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:40:25.779Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:39.463Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:30.352Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:33:31.813Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:30.668Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:28.143Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:32.303Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:26.171Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:55.790Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:47:05.077Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:41:20.292Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:31.211Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:28:51.108Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:53:45.309Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:58:52.119Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:26:29.127Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:51:13.728Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:04:27.580Z","11.0.0-canary.81911b707.0":"2021-03-11T18:24:40.576Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:38:11.133Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:02:50.845Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:10:33.119Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:34:44.154Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:41:51.531Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:45:39.304Z","11.0.0-canary.73a227194.0":"2021-03-12T00:25:28.232Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:28.295Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:36:23.046Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:21:29.785Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:49:15.618Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:13:46.283Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:40:59.471Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:42:45.442Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:03:07.071Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:46.166Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:27.169Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:18:38.068Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:29.226Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:19:18.511Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:39:57.124Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:52:45.704Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:59.174Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:14:04.296Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:35:19.498Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:45:37.028Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:06:26.497Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:57.965Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:09:12.710Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:04:11.158Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:44.144Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:05:56.212Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:30:56.249Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:17:58.377Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:34:09.889Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:58:50.563Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:45.915Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:57.878Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:56.545Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:52.573Z","11.0.0-canary.24609b822.0":"2021-03-31T20:58:13.256Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:35.990Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:02:09.407Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:25.994Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:25:21.596Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:26.048Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:01:46.983Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:23.761Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:46:04.283Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:55:02.149Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:59:01.429Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:37:05.167Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:50.531Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:36:40.073Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:22.689Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:45.493Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:45.445Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:48.386Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:38.798Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:04:10.138Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:05:18.331Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:38.826Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:47:23.581Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:28.663Z","11.0.0":"2021-04-15T22:59:30.989Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:46:16.783Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:48:09.867Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:26.343Z","12.0.0-canary.b52196498.0":"2021-04-19T19:59:02.564Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:53.027Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:25.838Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:39:03.944Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:35.342Z","12.0.0-canary.cad489689.0":"2021-04-22T16:50:51.616Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:45.206Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:27.791Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:44:20.955Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:43.471Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:11:09.009Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:21:07.181Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:49.182Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:44.456Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:59:17.585Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:47:26.557Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:42.247Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:14:19.327Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:49:07.986Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:56.103Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:46:05.171Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:39.869Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:44:20.236Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:19:18.864Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:25:06.987Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:20.115Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:39:03.148Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:38.050Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:51.354Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:24:01.115Z","12.0.0-canary.33148231f.0":"2021-05-03T19:40:03.536Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:47:09.552Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:43:02.693Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:34.767Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:32.180Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:42.294Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:44.236Z","12.0.0-canary.718c90178.0":"2021-05-04T19:29:06.369Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:31:54.435Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:35:12.738Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:54.618Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:59:22.013Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:27.053Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:55.512Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:23:09.372Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:17:40.291Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:38.222Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:28.727Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:42:22.437Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:33.313Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:31:30.672Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:59.320Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:48.726Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:45:19.862Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:44:38.521Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:20:12.500Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:24:51.473Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:18.423Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:58:11.172Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:10:13.743Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:26:13.421Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T01:00:03.061Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:59.385Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:18:49.420Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:51.565Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:21:21.874Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:40.545Z","12.0.0-canary.33a954852.0":"2021-05-13T15:09:18.568Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:27.281Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:25.277Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:15:06.862Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:59.005Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:55:13.581Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:29.778Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:42.791Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:58:08.721Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:28.197Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:20:02.644Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:07:13.082Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:46.725Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:49.470Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:06:13.843Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:56.942Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:47.364Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:38.485Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:34.617Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:37.470Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:30.761Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:59.794Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:47.076Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:35.435Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:42:10.257Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:07:49.369Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:44.953Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:37:11.270Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:37:03.350Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:07:09.441Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:40.486Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:40.983Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:27.773Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:23:22.489Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:31.397Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:56.331Z","12.0.0-canary.271fff902.0":"2021-06-15T22:52:24.468Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:53:18.506Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:45.459Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:47.240Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:35.319Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:52.756Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:13:02.659Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:54.396Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:26.780Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:22.683Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:56.375Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:48.925Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:16:16.384Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:53.900Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:42:14.416Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:46.693Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:58.654Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:32.931Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:24.812Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:11:16.297Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:05:09.802Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:31.760Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:49.448Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:47.418Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:50:45.893Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:54.284Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:43.664Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:55:17.677Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:52:08.508Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:53.419Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:49:43.303Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:34.152Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:23:17.762Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:40.105Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:31.564Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:59:21.798Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:28.164Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:20.836Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:32.439Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:28.233Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:10:31.686Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:58:11.304Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:54.649Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:56.687Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:37:24.285Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:51:16.218Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:45.667Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:42.564Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:38.157Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:32.400Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:57:07.704Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:01:15.120Z","12.0.0":"2021-07-27T19:51:28.223Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:53:00.556Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:36.117Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:23.158Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:27.040Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:43.119Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:32.243Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:44.602Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:44.917Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:18.190Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:01:10.657Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:55.762Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:44.420Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:33.284Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:51:20.810Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:16:14.636Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:56.441Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:44.248Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:19:03.485Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:23:00.524Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:42:15.479Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:01:04.968Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:30:11.352Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:56:49.356Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:48.016Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:50:00.249Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:32.532Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:23:18.051Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:39.244Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:42.528Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:33.927Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:38.849Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:19:04.812Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:50:18.767Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:38.246Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:28:05.683Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:45.183Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:40.165Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:28:07.112Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:30:11.807Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:35.700Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:29:17.998Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:56.610Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:40.120Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:40.729Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:55:10.626Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:54.582Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:42.536Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:29.122Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:40.859Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:44.115Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:46.560Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:56.088Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:43.267Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:39:18.911Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:46:17.848Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:48:09.582Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:32:03.850Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:33:30.212Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:53.797Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:39.359Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:56.851Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:35:13.391Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:55.755Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:37:22.924Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:03:04.586Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:12:06.413Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:27:08.898Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:40.614Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:36.742Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:05:26.581Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:58.854Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:52:00.924Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:14:04.151Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:50.492Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:19:08.818Z","13.0.0-canary.80a583365.0":"2021-09-17T20:37:02.911Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:29.659Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:37:06.923Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:44.506Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:50.524Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:13:15.670Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:59:08.805Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:38.383Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:43:14.144Z","13.0.0":"2021-09-24T19:47:03.544Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:46.792Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:12:11.033Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:28.865Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:44:19.647Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:58:05.042Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:31.077Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:42.396Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:48:07.132Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:23:26.705Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:49.728Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:23:04.934Z","14.0.0-canary.348665978.0":"2021-10-21T14:52:01.464Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:48.329Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:54:02.294Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:50.019Z","14.0.0-canary.a986df922.0":"2021-10-29T21:36:13.385Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:07:11.264Z","14.0.0-canary.468392606.0":"2021-11-11T19:41:24.749Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:58.350Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:58.472Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:41.877Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:45.164Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:37.720Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:31:03.170Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:15:00.347Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:31.167Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:33.404Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:18:45.835Z","14.0.0-canary.554c71829.0":"2021-11-16T16:21:16.574Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:57.669Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:01:05.326Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:36.201Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:41:04.269Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:50.513Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:06:17.247Z","14.0.0-canary.93134d453.0":"2021-11-23T15:41:02.842Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:56.518Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:39:05.976Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:52:19.951Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:42.833Z","14.0.0-canary.17a072535.0":"2021-12-02T18:07:01.242Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:46:12.462Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:08:20.984Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:27:08.108Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:31:00.486Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:57:02.555Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:40.308Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:41.517Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:11:29.620Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:34:11.344Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:42.224Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:56.252Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:03:00.918Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:56:06.172Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:41.320Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:51:26.172Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:44:11.823Z","14.0.0-canary.390220e42.0":"2022-01-17T16:48:00.165Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:54:28.879Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:19:14.465Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:56:11.903Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:05:06.878Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:33:49.205Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:53.361Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:39:04.324Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:43:05.215Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:51:34.144Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:24:39.132Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:53.693Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:48:33.874Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:55:28.994Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:01:07.874Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:08:22.923Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:31:10.644Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:41.632Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:44.434Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:30.305Z","14.0.0-canary.868793776.0":"2022-02-22T19:37:50.689Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:28.290Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:36.002Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:42.141Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:02:09.149Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:39.606Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:30:02.687Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:58.923Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:51:21.778Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:53.467Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:19:12.898Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:47.972Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:33.695Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:53:27.093Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:45:24.257Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:52:05.081Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:51.711Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:41:20.153Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:53.190Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:36:18.345Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:36.721Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:34:17.032Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:38.561Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:34.167Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:49.512Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:07:06.045Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:49:05.759Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:41.566Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:03:18.922Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:50.651Z","14.0.0":"2022-04-28T16:57:23.832Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:58:24.106Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:16:03.148Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:56.109Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:57:24.233Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:41.727Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:26:27.851Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:44.984Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:58.846Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:41.293Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:28:26.618Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:52.222Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:02:23.201Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:34:04.577Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:04:09.549Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:23:17.456Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:59:15.767Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:38.188Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:48.154Z","15.0.0-canary.df47894db.0":"2022-06-13T17:10:01.734Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:31:11.959Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:39.887Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:51.297Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:20.747Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:39.781Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:56:21.575Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:52.772Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:26.376Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:17.934Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:04:03.393Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:44.350Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:58.358Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:37.252Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:29.301Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:31.553Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:30:13.539Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:36:17.561Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:40.295Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:29.268Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:43.318Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:32.019Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:35.196Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:31.534Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:38.799Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:48:12.606Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:26.876Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:31:05.605Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:23:10.648Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:33.470Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:26.298Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:36.779Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:06:05.126Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:47:09.566Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:54.158Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:42:13.626Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:22:14.004Z","15.0.0-canary.10196647d.0":"2022-08-03T21:55:09.929Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:44:14.742Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:22:18.509Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:47:16.159Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:38.239Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:07:11.176Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:19.935Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:37.318Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:21:14.717Z","15.0.0-canary.4299717da.0":"2022-09-07T16:17:09.735Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:22.460Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:05:14.925Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:32.596Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:56:10.336Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:19:01.620Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:49.865Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:30.901Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:57.852Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:49:19.453Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:09:42.333Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:50.042Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:57.034Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:46:10.134Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:30.800Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:58:46.070Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:22.592Z","15.0.0-canary.db414b864.0":"2022-09-28T14:54:04.140Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:32.447Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:57:07.253Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:37.004Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:15:04.849Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:21.447Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:19:38.420Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:54.566Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:05:03.320Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:16:11.075Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:52:10.800Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:39:06.507Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:56:51.006Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:07:16.049Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:09:13.259Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:39:46.373Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:50:34.988Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:03:50.178Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T17:00:03.686Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:22:43.757Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:43:16.964Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:52:39.859Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:15:22.590Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:53:00.913Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:19:33.958Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:57:44.672Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:24:09.585Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:58:29.673Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:41:54.578Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:43:47.420Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:24:51.019Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:44:13.458Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:14:49.211Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:18:33.793Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:38:38.210Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:13:19.685Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:58:09.676Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:07:12.721Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:20:33.416Z","15.0.0-canary.fc539db34.0":"2022-10-24T19:00:38.512Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:46:28.646Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:32:06.300Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:16:50.345Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:33:55.773Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:51:00.995Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:57:54.924Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:38:18.116Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:12:11.816Z","15.0.0-canary.909b48215.0":"2022-11-03T04:09:24.312Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:20:39.592Z","15.0.0-canary.da95e2a05.0":"2022-11-04T17:00:32.380Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:58:32.083Z","15.0.0-canary.215506426.0":"2022-11-05T01:07:29.299Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:05:33.226Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:59.806Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:14:50.314Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:29:20.833Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:57:59.039Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:19:34.554Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:37:00.426Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:54:42.784Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:04:20.446Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:07:38.608Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:37:20.038Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:38:03.657Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:13:17.783Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:46:41.507Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T16:00:05.396Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:28:33.173Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:29:55.903Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:03:40.358Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:31:41.831Z","15.0.0-canary.b01136063.0":"2022-11-16T00:17:26.774Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:14:51.674Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:17:10.121Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:19:20.140Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:57:34.648Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:01:42.486Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:06:53.916Z","15.0.0-canary.40b18d043.0":"2022-11-16T23:00:17.648Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:10:27.224Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:01:41.865Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:02:53.678Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:56:39.728Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:06:16.194Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:22:39.809Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:17:58.114Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:02:38.738Z","15.0.0-canary.d58410453.0":"2022-11-18T19:26:43.004Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:46:42.061Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:55:33.014Z","15.0.0-canary.96f472604.0":"2022-11-21T12:54:25.508Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:04:05.160Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:55:39.719Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:02:22.060Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:32:30.999Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:18:10.542Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:41:03.668Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:58:23.285Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:17:32.955Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:15:18.420Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:48:58.995Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:13:17.517Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:35:36.120Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:50:38.949Z","15.0.0-canary.65c411674.0":"2022-11-29T17:40:23.943Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:15:52.151Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:09:29.467Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:30:55.387Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:56:01.894Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:25:52.747Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:03:23.369Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:02:40.117Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:08:36.061Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:28:18.739Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:44:28.188Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:27:19.276Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:53:30.673Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:04:57.924Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:43:00.437Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:46:09.550Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:32:27.712Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:48:14.386Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:03:59.450Z","15.0.0-canary.817002c29.0":"2022-12-13T21:55:49.146Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:30:36.665Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:20:48.062Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:46:34.740Z","15.0.0-canary.34767110.0":"2022-12-14T17:22:16.591Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:27:17.982Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:10:19.034Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:28:52.492Z","15.0.0-canary.604264203.0":"2022-12-21T21:42:27.117Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:26:59.413Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:13:56.269Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:06:54.727Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:05:41.091Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:53:21.702Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:04:00.386Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:42:40.238Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:07:38.983Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:49:25.085Z","15.0.0-canary.af490a848.0":"2023-01-03T15:59:43.560Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:40:35.843Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:14:51.604Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:34:05.125Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:19:32.208Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:39:03.781Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:37:29.229Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:04:31.936Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:11:10.182Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:23:31.959Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:17:42.950Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:44:53.824Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:25:43.088Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:29:54.430Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:13:22.759Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:20:16.896Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:19:44.618Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:14:18.669Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:55:57.162Z","15.0.0-canary.202823f54.0":"2023-01-11T21:37:27.314Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:57:36.803Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:38:08.011Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:26:23.700Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:51:27.277Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:40:53.888Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:31:30.562Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:36:31.758Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:28:35.852Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:45:11.651Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:31:47.129Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:46:00.388Z","15.0.0-canary.15b221540.0":"2023-02-01T17:54:21.609Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T19:00:13.800Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:36:02.897Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:40:08.341Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:10:47.381Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:16:14.667Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:25:52.340Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:11:16.899Z","15.0.0-canary.de38de758.0":"2023-02-09T15:44:07.723Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:04:50.575Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:51:29.683Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:59:48.739Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:35:55.053Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:21:30.109Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:43:13.189Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:37:31.577Z","15.0.0-canary.f32339937.0":"2023-03-06T15:17:26.892Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:29:08.758Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:43:30.858Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:44:34.403Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:27:59.973Z","15.0.0-canary.274610c77.0":"2023-03-09T15:00:33.683Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:54:18.698Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:46:38.708Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:48:58.615Z","15.0.0-canary.de5224633.0":"2023-03-09T23:57:26.333Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:09:34.999Z","15.0.0-canary.23073a303.0":"2023-03-10T14:16:41.804Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:49:08.568Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:49:40.217Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:26:34.956Z","15.0.0-canary.82554d770.0":"2023-03-11T01:38:51.069Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:40:40.994Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:45:52.294Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:49:18.101Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:04:36.600Z","15.0.0-canary.112715df5.0":"2023-03-13T18:40:59.262Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:33:18.529Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:40:52.373Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:45:03.790Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:54:25.287Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:18:04.682Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:48:59.863Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:18:34.041Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:21:48.336Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:25:42.504Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:28:27.688Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:29:07.412Z","15.0.0-canary.87809c710.0":"2023-03-14T18:45:05.812Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:49:25.360Z","15.0.0-canary.419b23cc6.0":"2023-03-14T19:00:29.885Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:15:13.005Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:12:56.458Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:43:19.423Z","15.0.0-canary.39e473690.0":"2023-03-21T17:53:11.323Z","15.0.0-canary.cedffb44c.0":"2023-03-21T18:00:08.581Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:51:50.056Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:36:29.281Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:50:39.145Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:42:41.810Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:09:26.835Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:55:22.076Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:57:11.782Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:31:54.295Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:06:23.889Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:44:04.960Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:40:08.804Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:41:39.690Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:02:32.903Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:52:32.525Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:23:14.247Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:23:16.091Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:33:00.187Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:35:24.777Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:43:24.751Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:11:13.372Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:58:23.050Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:27:59.045Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:40:57.381Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:24:52.319Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:32:07.347Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:01:37.406Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:55:38.508Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:27:35.257Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:44:38.575Z","15.0.0-canary.446734f27.0":"2023-05-30T21:49:47.747Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:20:08.720Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:15:40.063Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:20:10.481Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:07:44.406Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:39:54.170Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:05:27.270Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:58:59.234Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:18:23.682Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:25:27.323Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:15:31.294Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:27:35.210Z","15.0.0-canary.83355c322.0":"2023-07-10T15:07:27.220Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:23:13.370Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:50:11.218Z","15.0.0-canary.02702296e.0":"2023-08-25T12:06:56.754Z","15.0.0-canary.872b65832.0":"2023-08-30T12:15:18.727Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:08:37.379Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:41:26.335Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:07:04.525Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:47:03.094Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:19:52.941Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:13:37.031Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:47:56.677Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:17:04.709Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:08:34.820Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:24:50.794Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:45:58.266Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:38:23.063Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:02:16.495Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:53:55.156Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:11:08.011Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:59:21.210Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:46.357Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:19:23.682Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:47.781Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:20:11.646Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:48.698Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:18:17.426Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:48.844Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:14:16.018Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:07:09.239Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:42:07.559Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:01:07.166Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:40.894Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:46.203Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:53.420Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:57:24.566Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:57:36.704Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:25.054Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-snackbar"},"keywords":["material components","material design","snackbar"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}